2691 files changed, 90412 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/META.yml b/testing/web-platform/tests/css/css-text/META.yml
new file mode 100644
index 0000000000..e7914c0fc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/META.yml
@@ -0,0 +1,8 @@
+spec: https://drafts.csswg.org/css-text/
+suggested_reviewers:
+  - kojiishi
+  - plinss
+  - frivoal
+  - r12a
+  - nox
+  - fantasai
diff --git a/testing/web-platform/tests/css/css-text/altering-dom-crash.html b/testing/web-platform/tests/css/css-text/altering-dom-crash.html
new file mode 100644
index 0000000000..4840014533
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/altering-dom-crash.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>CSS Text Test: Altering the DOM generates empty text elements that cause line-breaking to crash</title>
+<link rel="help" href="https://crbug.com/1128571">
+<style>
+    body {
+        width: 5pt;
+        hyphens: none;
+    }
+</style>
+<body onload=jsfuzzer()>
+    <table id="table1">x</table>
+    <content contenteditable="plaintext-only">
+</body>
+<script>
+    function jsfuzzer() {
+        document.all[0].appendChild(table1);
+    }
+</script>
diff --git a/testing/web-platform/tests/css/css-text/animations/hyphen-no-interpolation.html b/testing/web-platform/tests/css/css-text/animations/hyphen-no-interpolation.html
new file mode 100644
index 0000000000..95a3ff5ee5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/animations/hyphen-no-interpolation.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
+<link rel=help href="https://drafts.csswg.org/css-text-4/#propdef-hyphenate-character">
+<link rel=help href="https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-chars">
+<link rel=help href="https://drafts.csswg.org/css-text/#hyphens-property">
+<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_no_interpolation({
+  property: 'hyphenate-character',
+  from: 'initial',
+  to: '"e"'
+});
+
+test_no_interpolation({
+  property: 'hyphenate-limit-chars',
+  from: 'initial',
+  to: '10'
+});
+
+test_no_interpolation({
+  property: 'hyphens',
+  from: 'initial',
+  to: 'auto'
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-text/animations/letter-spacing-composition.html b/testing/web-platform/tests/css/css-text/animations/letter-spacing-composition.html
new file mode 100644
index 0000000000..c1b614b5eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/animations/letter-spacing-composition.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>letter-spacing composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<meta name="test" content="letter-spacing supports animation by computed value type">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script src="../interpolation/resources/interpolation-test.js"></script>
+<script>
+test_composition({
+  property: 'letter-spacing',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'letter-spacing',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'letter-spacing',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/animations/letter-spacing-interpolation.html b/testing/web-platform/tests/css/css-text/animations/letter-spacing-interpolation.html
new file mode 100644
index 0000000000..7d49581139
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/animations/letter-spacing-interpolation.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<meta name="test" content="letter-spacing supports animation by computed value type">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  letter-spacing: 2px;
+}
+.target {
+  font: 10px sans-serif;
+  font-weight: bold;
+  letter-spacing: 30px;
+}
+.expected {
+  color: green;
+  margin-right: 30px;
+}
+</style>
+
+<body>
+  <template id="target-template">TT</template>
+</body>
+
+<script>
+test_interpolation({
+  property: 'letter-spacing',
+  from: neutralKeyframe,
+  to: '20px',
+}, [
+  {at: -0.3, expect: '33px'},
+  {at: 0, expect: '30px'},
+  {at: 0.3, expect: '27px'},
+  {at: 0.6, expect: '24px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '15px'},
+]);
+
+test_interpolation({
+  property: 'letter-spacing',
+  from: 'initial',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '-6px'},
+  {at: 0, expect: 'normal'},
+  {at: 0.3, expect: '6px'},
+  {at: 0.6, expect: '12px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '30px'},
+]);
+
+test_interpolation({
+  property: 'letter-spacing',
+  from: 'inherit',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '-3.4px'},
+  {at: 0, expect: '2px'},
+  {at: 0.3, expect: '7.4px'},
+  {at: 0.6, expect: '12.8px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '29px'},
+]);
+
+test_interpolation({
+  property: 'letter-spacing',
+  from: 'unset',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '-3.4px'},
+  {at: 0, expect: '2px'},
+  {at: 0.3, expect: '7.4px'},
+  {at: 0.6, expect: '12.8px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '29px'},
+]);
+
+test_interpolation({
+  property: 'letter-spacing',
+  from: '-10px',
+  to: '10px',
+}, [
+  {at: -0.3, expect: '-16px'},
+  {at: 0, expect: '-10px'},
+  {at: 0.3, expect: '-4px'},
+  {at: 0.6, expect: '2px'},
+  {at: 1, expect: '10px'},
+  {at: 1.5, expect: '20px'},
+]);
+
+test_interpolation({
+  property: 'letter-spacing',
+  from: 'normal',
+  to: '10px',
+}, [
+  {at: -0.3, expect: '-3px'},
+  {at: 0, expect: 'normal'},
+  {at: 0.3, expect: '3px'},
+  {at: 0.6, expect: '6px'},
+  {at: 1, expect: '10px'},
+  {at: 1.5, expect: '15px'},
+]);
+</script>
diff --git a/testing/web-platform/tests/css/css-text/animations/line-break-no-interpolation.html b/testing/web-platform/tests/css/css-text/animations/line-break-no-interpolation.html
new file mode 100644
index 0000000000..b6fc5f932e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/animations/line-break-no-interpolation.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
+<link rel=help href="https://drafts.csswg.org/css-text/#line-break-property">
+<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_no_interpolation({
+  property: 'line-break',
+  from: 'initial',
+  to: 'anywhere'
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-text/animations/tab-size-interpolation.html b/testing/web-platform/tests/css/css-text/animations/tab-size-interpolation.html
new file mode 100644
index 0000000000..3cf63782f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/animations/tab-size-interpolation.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<meta name="test" content="tab-size supports animation by computed value type">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  tab-size: 20;
+}
+.target {
+  font: 10px sans-serif;
+  tab-size: 5;
+}
+.expected {
+  color: green;
+}
+</style>
+
+<body>
+  <template id="target-template">T</template>
+</body>
+
+<script>
+test_interpolation({
+  property: 'tab-size',
+  from: neutralKeyframe,
+  to: 10,
+}, [
+  {at: -0.3, expect: '3.5'},
+  {at: 0, expect: '5'},
+  {at: 0.3, expect: '6.5'},
+  {at: 0.6, expect: '8'},
+  {at: 1, expect: '10'},
+  {at: 1.5, expect: '12.5'},
+]);
+
+test_interpolation({
+  property: 'tab-size',
+  from: 'initial',
+  to: 10,
+}, [
+  {at: -0.3, expect: '7.4'},
+  {at: 0, expect: '8'},
+  {at: 0.3, expect: '8.6'},
+  {at: 0.6, expect: '9.2'},
+  {at: 1, expect: '10'},
+  {at: 1.5, expect: '11'},
+]);
+
+test_interpolation({
+  property: 'tab-size',
+  from: 'inherit',
+  to: 10,
+}, [
+  {at: -0.3, expect: '23'},
+  {at: 0, expect: '20'},
+  {at: 0.3, expect: '17'},
+  {at: 0.6, expect: '14'},
+  {at: 1, expect: '10'},
+  {at: 1.5, expect: '5'},
+]);
+
+test_interpolation({
+  property: 'tab-size',
+  from: 'unset',
+  to: 10,
+}, [
+  {at: -0.3, expect: '23'},
+  {at: 0, expect: '20'},
+  {at: 0.3, expect: '17'},
+  {at: 0.6, expect: '14'},
+  {at: 1, expect: '10'},
+  {at: 1.5, expect: '5'},
+]);
+
+test_interpolation({
+  property: 'tab-size',
+  from: 0,
+  to: 10,
+}, [
+  {at: -0.3, expect: '0'},
+  {at: 0, expect: '0'},
+  {at: 0.3, expect: '3'},
+  {at: 0.6, expect: '6'},
+  {at: 1, expect: '10'},
+  {at: 1.5, expect: '15'},
+]);
+
+test_interpolation({
+  property: 'tab-size',
+  from: 4,
+  to: 10,
+}, [
+  {at: -0.3, expect: '2.2'},
+  {at: 0, expect: '4'},
+  {at: 0.3, expect: '5.8'},
+  {at: 0.6, expect: '7.6'},
+  {at: 1, expect: '10'},
+  {at: 1.5, expect: '13'},
+]);
+
+test_interpolation({
+  property: 'tab-size',
+  from: '1px',
+  to: '10px',
+}, [
+  {at: -0.3, expect: '0px'},
+  {at: 0, expect: '1px'},
+  {at: 0.3, expect: '3.7px'},
+  {at: 0.6, expect: '6.4px'},
+  {at: 1, expect: '10px'},
+  {at: 1.5, expect: '14.5px'},
+]);
+
+test_no_interpolation({
+  property: 'tab-size',
+  from: '1',
+  to: '10px',
+});
+
+</script>
diff --git a/testing/web-platform/tests/css/css-text/animations/text-indent-composition.html b/testing/web-platform/tests/css/css-text/animations/text-indent-composition.html
new file mode 100644
index 0000000000..57c528ca27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/animations/text-indent-composition.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>letter-spacing composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<meta name="test" content="text-indent supports animation by computed value type">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body></body>
+<script>
+test_composition({
+  property: 'text-indent',
+  underlying: '100%',
+  addFrom: '50px',
+  addTo: '150px',
+}, [
+  {at: -0.3, expect: 'calc(100% + 20px)'},
+  {at: 0, expect: 'calc(100% + 50px)'},
+  {at: 0.3, expect: 'calc(100% + 80px)'},
+  {at: 0.6, expect: 'calc(100% + 110px)'},
+  {at: 1, expect: 'calc(100% + 150px)'},
+  {at: 1.5, expect: 'calc(100% + 200px)'},
+]);
+
+test_composition({
+  property: 'text-indent',
+  underlying: '250px',
+  addFrom: '50px',
+  replaceTo: '100px',
+}, [
+  {at: -0.3, expect: '360px'},
+  {at: 0, expect: '300px'},
+  {at: 0.3, expect: '240px'},
+  {at: 0.6, expect: '180px'},
+  {at: 1, expect: '100px'},
+  {at: 1.5, expect: '0px'},
+]);
+
+test_composition({
+  property: 'text-indent',
+  underlying: '50%',
+  replaceFrom: '-100%',
+  addTo: '50%',
+}, [
+  {at: -0.3, expect: '-160%'},
+  {at: 0, expect: '-100%'},
+  {at: 0.3, expect: '-40%'},
+  {at: 0.5, expect: '0%'},
+  {at: 0.6, expect: '20%'},
+  {at: 1, expect: '100%'},
+  {at: 1.5, expect: '200%'},
+]);
+
+test_composition({
+  property: 'text-indent',
+  underlying: '250px',
+  addFrom: '50px each-line hanging',
+  replaceTo: '150px hanging each-line',
+}, [
+  {at: -0.3, expect: '20px hanging each-line'},
+  {at: 0, expect: '50px hanging each-line'},
+  {at: 0.3, expect: '80px hanging each-line'},
+  {at: 0.6, expect: '110px hanging each-line'},
+  {at: 1, expect: '150px hanging each-line'},
+  {at: 1.5, expect: '200px hanging each-line'},
+]);
+
+test_composition({
+  property: 'text-indent',
+  underlying: '250px each-line',
+  addFrom: '50px each-line',
+  replaceTo: '150px hanging',
+}, [
+  {at: -0.3, expect: '300px each-line'},
+  {at: 0, expect: '300px each-line'},
+  {at: 0.3, expect: '300px each-line'},
+  {at: 0.6, expect: '150px hanging'},
+  {at: 1, expect: '150px hanging'},
+  {at: 1.5, expect: '150px hanging'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/animations/text-indent-interpolation.html b/testing/web-platform/tests/css/css-text/animations/text-indent-interpolation.html
new file mode 100644
index 0000000000..2269fdfa5b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/animations/text-indent-interpolation.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<meta name="test" content="text-indent supports animation by computed value type">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  text-indent: 70px;
+}
+.target {
+  font: 10px sans-serif;
+  text-indent: 10px;
+  margin-left: 20px;
+}
+.expected {
+  color: green;
+}
+</style>
+
+<body>
+  <template id="target-template">T</template>
+</body>
+
+<script>
+test_interpolation({
+  property: 'text-indent',
+  from: neutralKeyframe,
+  to: '40px',
+}, [
+  {at: -0.3, expect: '1px'},
+  {at: 0, expect: '10px'},
+  {at: 0.3, expect: '19px'},
+  {at: 0.6, expect: '28px'},
+  {at: 1, expect: '40px'},
+  {at: 1.5, expect: '55px'},
+]);
+
+test_interpolation({
+  property: 'text-indent',
+  from: 'initial',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '-6px'},
+  {at: 0, expect: '0px'},
+  {at: 0.3, expect: '6px'},
+  {at: 0.6, expect: '12px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '30px'},
+]);
+
+test_interpolation({
+  property: 'text-indent',
+  from: 'inherit',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '85px'},
+  {at: 0, expect: '70px'},
+  {at: 0.3, expect: '55px'},
+  {at: 0.6, expect: '40px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '-5px'},
+]);
+
+test_interpolation({
+  property: 'text-indent',
+  from: 'unset',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '85px'},
+  {at: 0, expect: '70px'},
+  {at: 0.3, expect: '55px'},
+  {at: 0.6, expect: '40px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '-5px'},
+]);
+
+test_interpolation({
+  property: 'text-indent',
+  from: '0px',
+  to: '50px'
+}, [
+  {at: -0.3, expect: '-15px'},
+  {at: 0, expect: '0'},
+  {at: 0.3, expect: '15px'},
+  {at: 0.6, expect: '30px'},
+  {at: 1, expect: '50px'},
+  {at: 1.5, expect: '75px'},
+]);
+
+test_interpolation({
+  property: 'text-indent',
+  from: '0px hanging',
+  to: '50px hanging',
+}, [
+  {at: -0.3, expect: '-15px hanging'},
+  {at: 0, expect: '0 hanging'},
+  {at: 0.3, expect: '15px hanging'},
+  {at: 0.6, expect: '30px hanging'},
+  {at: 1, expect: '50px hanging'},
+  {at: 1.5, expect: '75px hanging'},
+]);
+
+test_interpolation({
+  property: 'text-indent',
+  from: '0px hanging each-line',
+  to: '50px each-line hanging',
+}, [
+  {at: -0.3, expect: '-15px hanging each-line'},
+  {at: 0, expect: '0 hanging each-line'},
+  {at: 0.3, expect: '15px hanging each-line'},
+  {at: 0.6, expect: '30px hanging each-line'},
+  {at: 1, expect: '50px hanging each-line'},
+  {at: 1.5, expect: '75px hanging each-line'},
+]);
+
+test_no_interpolation({
+  property: 'text-indent',
+  from: '0px each-line',
+  to: '50px hanging',
+});
+
+test_no_interpolation({
+  property: 'text-indent',
+  from: '0px',
+  to: '50px each-line hanging',
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-text/animations/word-spacing-composition.html b/testing/web-platform/tests/css/css-text/animations/word-spacing-composition.html
new file mode 100644
index 0000000000..17aacaef15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/animations/word-spacing-composition.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>word-spacing composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-spacing-property">
+<meta name="test" content="word-spacing supports animation by computed value type">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'word-spacing',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'word-spacing',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'word-spacing',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/animations/word-spacing-interpolation.html b/testing/web-platform/tests/css/css-text/animations/word-spacing-interpolation.html
new file mode 100644
index 0000000000..ffd6bb476a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/animations/word-spacing-interpolation.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-spacing-property">
+<meta name="test" content="word-spacing supports animation by computed value type">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  word-spacing: 30px;
+}
+.target {
+  font: 10px sans-serif;
+  word-spacing: 10px;
+}
+.expected {
+  color: green;
+}
+</style>
+
+<body>
+  <template id="target-template">A B C D</template>
+</body>
+
+<script>
+test_interpolation({
+  property: 'word-spacing',
+  from: neutralKeyframe,
+  to: '20px',
+}, [
+  {at: -0.3, expect: '7px'},
+  {at: 0, expect: '10px'},
+  {at: 0.3, expect: '13px'},
+  {at: 0.6, expect: '16px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '25px'},
+]);
+
+test_interpolation({
+  property: 'word-spacing',
+  from: 'initial',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '-6px'},
+  {at: 0, expect: '0px'},
+  {at: 0.3, expect: '6px'},
+  {at: 0.6, expect: '12px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '30px'},
+]);
+
+test_interpolation({
+  property: 'word-spacing',
+  from: 'inherit',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '33px'},
+  {at: 0, expect: '30px'},
+  {at: 0.3, expect: '27px'},
+  {at: 0.6, expect: '24px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '15px'},
+]);
+
+test_interpolation({
+  property: 'word-spacing',
+  from: 'unset',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '33px'},
+  {at: 0, expect: '30px'},
+  {at: 0.3, expect: '27px'},
+  {at: 0.6, expect: '24px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '15px'},
+]);
+
+test_interpolation({
+  property: 'word-spacing',
+  from: '-10px',
+  to: '40px'
+}, [
+  {at: -0.3, expect: '-25px'},
+  {at: 0, expect: '-10px'},
+  {at: 0.3, expect: '5px'},
+  {at: 0.6, expect: '20px'},
+  {at: 1, expect: '40px'},
+  {at: 1.5, expect: '65px'},
+]);
+test_interpolation({
+  property: 'word-spacing',
+  from: 'normal',
+  to: '10px'
+}, [
+  {at: -0.3, expect: '-3px'},
+  {at: 0, expect: '0px'},
+  {at: 0.3, expect: '3px'},
+  {at: 0.6, expect: '6px'},
+  {at: 1, expect: '10px'},
+  {at: 1.5, expect: '15px'},
+]);
+</script>
diff --git a/testing/web-platform/tests/css/css-text/bidi/bidi-lines-001.html b/testing/web-platform/tests/css/css-text/bidi/bidi-lines-001.html
new file mode 100644
index 0000000000..adfe389d2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/bidi/bidi-lines-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: unicode-bidi: plaintext and paragraphs with strong directionality</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#bidi-linebox">
+<link rel="match" href="reference/bidi-lines-001-ref.html">
+<meta name=assert content="with unicode-bidi: plaintext, lines from bidi paragraphs with strong directionality use that direction">
+<style>
+div {
+    font-size: 2em;
+    width: 10em;
+    white-space: pre;
+    text-align: start;
+    unicode-bidi: plaintext;
+    border: solid; padding: 0 0.5ch;
+}
+
+</style>
+
+<p>This test passes if all instances of “français” are left aligned, and all instances of “فارسی” are right aligned within the box below.
+
+<div>français
+فارسی
+français
+فارسی
+français
+فارسی</div>
+
diff --git a/testing/web-platform/tests/css/css-text/bidi/bidi-lines-002.html b/testing/web-platform/tests/css/css-text/bidi/bidi-lines-002.html
new file mode 100644
index 0000000000..edf7946785
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/bidi/bidi-lines-002.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: unicode-bidi: plaintext and neutral paragraphs</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#bidi-linebox">
+<link rel="match" href="reference/bidi-lines-002-ref.html">
+<meta name=assert content="with unicode-bidi: plaintext, bidi paragraphs only containing weak / neutral characters take their directionality from the previous paragraph if any, or the containing block otherwise.">
+<style>
+div {
+    direction: rtl;
+    unicode-bidi: plaintext;
+    text-align: start;
+    font-size: 2em;
+    width: 10em;
+    border: solid; padding: 0 0.5ch;
+}
+.l { color: blue; }
+.r { color: orange; }
+</style>
+
+<p>This test passes if within the box below, the two blue “!” are on the left, and the three orange ones are on the right.
+
+<div>
+    <span class=r>!</span><br>
+    <span class=l>!</span> Hello<br>
+    <span class=l>!</span><br>
+    <span class=r>!</span> سلام<br>
+    <span class=r>!</span><br>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-text/bidi/bidi-tab-001.html b/testing/web-platform/tests/css/css-text/bidi/bidi-tab-001.html
new file mode 100644
index 0000000000..5001882272
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/bidi/bidi-tab-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: Interaction between tabs and bidi</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="http://unicode.org/reports/tr9/#L1">
+<link rel="match" href="reference/bidi-tab-001-ref.html">
+<meta name=assert content="with unicode-bidi: plaintext, lines from bidi paragraphs with strong directionality use that direction">
+<style>
+div {
+  font-family: monospace;
+  font-size: 20px;
+  line-height: 1;
+  white-space: pre;
+  width: 10ch;
+  background: blue;
+  color: blue;
+}
+span {
+  background: yellow;
+}
+</style>
+<p>The test passes if the two boxes are identical.
+
+<div dir=ltr><span dir=ltr>&#9;0</span></div>
+<div dir=rtl><span dir=rtl>&#9;0</span></div>
+<div dir=ltr><span dir=rtl>&#9;0</span></div>
+<div dir=rtl><span dir=ltr>&#9;0</span></div>
+
+<br>
+
+<div dir=ltr><span dir=ltr>&#9;0</span></div>
+<div dir=rtl><span dir=rtl>&#9;0</span></div>
+<div dir=ltr><span dir=ltrl>&#9;0</span></div>
+<div dir=rtl><span dir=rtl>&#9;0</span></div>
diff --git a/testing/web-platform/tests/css/css-text/bidi/reference/bidi-lines-001-ref.html b/testing/web-platform/tests/css/css-text/bidi/reference/bidi-lines-001-ref.html
new file mode 100644
index 0000000000..ab13fef116
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/bidi/reference/bidi-lines-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: unicode-bidi: plaintext and paragraphs with strong directionality</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+section {
+    text-align: start;
+    font-size: 2em;
+    border: solid;
+    padding: 0 0.5ch;
+    width: 10em;
+}
+</style>
+
+<p>This test passes if all instances of “français” are left aligned, and all instances of “فارسی” are right aligned within the box below.
+
+<section>
+    <div dir=ltr>français</div>
+    <div dir=rtl>فارسی</div>
+    <div dir=ltr>français</div>
+    <div dir=rtl>فارسی</div>
+    <div dir=ltr>français</div>
+    <div dir=rtl>فارسی</div>
+</section>
+
diff --git a/testing/web-platform/tests/css/css-text/bidi/reference/bidi-lines-002-ref.html b/testing/web-platform/tests/css/css-text/bidi/reference/bidi-lines-002-ref.html
new file mode 100644
index 0000000000..af162f0149
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/bidi/reference/bidi-lines-002-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: unicode-bidi: plaintext and neutral paragraphs</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+section {
+    text-align: start;
+    font-size: 2em;
+    border: solid;
+    padding: 0 0.5ch;
+    width: 10em;
+}
+.l { color: blue; }
+.r { color: orange; }
+</style>
+
+<p>This test passes if within the box below, the two blue “!” are on the left, and the three orange ones are on the right.
+
+<section>
+<div dir=rtl><span class=r>!</span></div>
+<div dir=ltr><span class=l>!</span> Hello</div>
+<div dir=ltr><span class=l>!</span></div>
+<div dir=rtl><span class=r>!</span> سلام</div>
+<div dir=rtl><span class=r>!</span></div>
+</section>
+
diff --git a/testing/web-platform/tests/css/css-text/bidi/reference/bidi-tab-001-ref.html b/testing/web-platform/tests/css/css-text/bidi/reference/bidi-tab-001-ref.html
new file mode 100644
index 0000000000..a65b8cc686
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/bidi/reference/bidi-tab-001-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: Interaction between tabs and bidi</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+  font-family: monospace;
+  font-size: 20px;
+  line-height: 1;
+  white-space: pre;
+  width: 10ch;
+  background: blue;
+  color: blue;
+}
+span {
+  background: yellow;
+}
+</style>
+<p>The test passes if the two boxes are identical.
+
+<div dir=ltr><span dir=ltr>&#9;0</span></div>
+<div dir=rtl><span dir=rtl>&#9;0</span></div>
+<div dir=ltr><span dir=ltrl>&#9;0</span></div>
+<div dir=rtl><span dir=rtl>&#9;0</span></div>
+
+<br>
+
+<div dir=ltr><span dir=ltr>&#9;0</span></div>
+<div dir=rtl><span dir=rtl>&#9;0</span></div>
+<div dir=ltr><span dir=ltrl>&#9;0</span></div>
+<div dir=rtl><span dir=rtl>&#9;0</span></div>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-001.html b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-001.html
new file mode 100644
index 0000000000..d6c8fa2b23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Text shaping must not be broken across inline box boundaries when there is no change in formatting</title>
+<link rel=match href="reference/boundary-shaping-001.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<style>
+@font-face {
+  font-family: test;
+  src: url(resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  /* initial values for these properties should not interrupt shaping */
+  vertical-align: initial;
+  padding: initial;
+  margin: initial;
+  border: initial;
+}
+</style>
+</head>
+<body>
+of<span class=a>f</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-002.html b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-002.html
new file mode 100644
index 0000000000..c41f6497ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Text shaping must be broken across inline box boundaries when 'vertical-align' is not 'baseline'</title>
+<link rel=match href="reference/boundary-shaping-002.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<style>
+@font-face {
+  font-family: test;
+  src: url(resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  vertical-align: 0; /* distinct from 'baseline', should break shaping */
+}
+</style>
+</head>
+<body>
+of<span class=a>f</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-003.html b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-003.html
new file mode 100644
index 0000000000..e5f870e5b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-003.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Text shaping must be broken across inline box boundaries when padding is non-zero</title>
+<link rel=match href="reference/boundary-shaping-003.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<style>
+@font-face {
+  font-family: test;
+  src: url(resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  padding-left: 10px;
+}
+</style>
+</head>
+<body>
+of<span class=a>f</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-004.html b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-004.html
new file mode 100644
index 0000000000..8f3dd06714
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Text shaping must be broken across inline box boundaries when margin is non-zero</title>
+<link rel=match href="reference/boundary-shaping-004.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<style>
+@font-face {
+  font-family: test;
+  src: url(resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  margin-right: 10px;
+}
+</style>
+</head>
+<body>
+of<span class=a>f</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-005.html b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-005.html
new file mode 100644
index 0000000000..e5f3aa0de4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Text shaping must be broken across inline box boundaries when border is non-zero</title>
+<link rel=match href="reference/boundary-shaping-005.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<style>
+@font-face {
+  font-family: test;
+  src: url(resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  border-right: 10px solid transparent;
+}
+</style>
+</head>
+<body>
+of<span class=a>f</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-006.html b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-006.html
new file mode 100644
index 0000000000..d3045fa94d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Text shaping must be broken across inline box boundaries when 'vertical-align' is not 'baseline'</title>
+<link rel=match href="reference/boundary-shaping-006.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<style>
+@font-face {
+  font-family: test;
+  src: url(resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  vertical-align: super;
+}
+</style>
+</head>
+<body>
+of<span><span><span class=a><span><span>f</span></span></span></span></span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-007.html b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-007.html
new file mode 100644
index 0000000000..d1360c2fe2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-007.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Text shaping must be broken across inline box boundaries when padding or margin is non-zero</title>
+<link rel=match href="reference/boundary-shaping-007.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<style>
+@font-face {
+  font-family: test;
+  src: url(resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  padding-left: 10px;
+}
+.b {
+  margin-right: 10px;
+}
+</style>
+</head>
+<body>
+of<span><span class=a><span><span class=b><span>f</span></span></span></span></span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-008.html b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-008.html
new file mode 100644
index 0000000000..cbb78328bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-008.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Text shaping must be broken across inline box boundaries at a bidi isolation boundary</title>
+<link rel=match href="reference/boundary-shaping-008.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<style>
+@font-face {
+  font-family: test;
+  src: url(resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  unicode-bidi: isolate; /* bidi isolation boundaries should break shaping */
+}
+</style>
+</head>
+<body>
+of<span class=a>f</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-009.html b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-009.html
new file mode 100644
index 0000000000..f004273dd3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-009.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Text shaping must be broken across inline box boundaries when padding or margin is non-zero</title>
+<link rel=match href="reference/boundary-shaping-009.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<style>
+body {
+  font: 36px sans-serif;
+}
+div {
+  text-align: center;
+}
+.a {
+  padding-right: 10px;
+}
+.b {
+  margin-left: 10px;
+}
+.c {
+  color: red;
+  padding-left: 10px;
+}
+.d {
+  color: red;
+  margin-right: 10px;
+}
+</style>
+</head>
+<body>
+<div dir=ltr>
+السلام<span class=a>عليكم</span>
+</div>
+<div dir=ltr>
+<span class=b>السلام</span>عليكم
+</div>
+<div dir=rtl>
+السلام<span class=a>عليكم</span>
+</div>
+<div dir=rtl>
+<span class=b>السلام</span>عليكم
+</div>
+<div dir=ltr>
+السلام<span class=c>عليكم</span>
+</div>
+<div dir=ltr>
+<span class=d>السلام</span>عليكم
+</div>
+<div dir=rtl>
+السلام<span class=c>عليكم</span>
+</div>
+<div dir=rtl>
+<span class=d>السلام</span>عليكم
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-010.html b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-010.html
new file mode 100644
index 0000000000..514a9aa944
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/boundary-shaping-010.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>Text shaping must not be broken across inline box boundaries when there is no change in formatting</title>
+<link rel=match href="reference/boundary-shaping-010.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<style>
+body {
+  font: 36px sans-serif;
+}
+div {
+  text-align: center;
+}
+</style>
+</head>
+<body>
+<div dir=rtl>
+ال<span>سل</span>ام
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-001.ref.html b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-001.ref.html
new file mode 100644
index 0000000000..23ae8824a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-001.ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+@font-face {
+  font-family: test;
+  src: url(../resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+</style>
+</head>
+<body>
+office
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-002.ref.html b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-002.ref.html
new file mode 100644
index 0000000000..0541daef6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-002.ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+@font-face {
+  font-family: test;
+  src: url(../resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  display: inline-block;
+}
+</style>
+</head>
+<body>
+of<span class=a>f</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-003.ref.html b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-003.ref.html
new file mode 100644
index 0000000000..b122551cb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-003.ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+@font-face {
+  font-family: test;
+  src: url(../resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  display: inline-block;
+  width: 10px;
+}
+</style>
+</head>
+<body>
+of<span class=a>&nbsp;</span>fice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-004.ref.html b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-004.ref.html
new file mode 100644
index 0000000000..b0da33d954
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-004.ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+@font-face {
+  font-family: test;
+  src: url(../resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  display: inline-block;
+  width: 10px;
+}
+</style>
+</head>
+<body>
+off<span class=a>&nbsp;</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-005.ref.html b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-005.ref.html
new file mode 100644
index 0000000000..b0da33d954
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-005.ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+@font-face {
+  font-family: test;
+  src: url(../resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  display: inline-block;
+  width: 10px;
+}
+</style>
+</head>
+<body>
+off<span class=a>&nbsp;</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-006.ref.html b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-006.ref.html
new file mode 100644
index 0000000000..6b647bab31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-006.ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+@font-face {
+  font-family: test;
+  src: url(../resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  vertical-align: super;
+  display: inline-block;
+}
+</style>
+</head>
+<body>
+of<span class=a>f</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-007.ref.html b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-007.ref.html
new file mode 100644
index 0000000000..6473384994
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-007.ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+@font-face {
+  font-family: test;
+  src: url(../resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  padding-left: 10px;
+  margin-right: 10px;
+  display: inline-block;
+}
+</style>
+</head>
+<body>
+of<span class=a>f</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-008.ref.html b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-008.ref.html
new file mode 100644
index 0000000000..0541daef6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-008.ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+@font-face {
+  font-family: test;
+  src: url(../resources/LinLibertine_Re-4.7.5.woff);
+}
+body {
+  font: 36px test; /* use a font that includes ligatures for "fi" etc */
+}
+.a {
+  display: inline-block;
+}
+</style>
+</head>
+<body>
+of<span class=a>f</span>ice
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-009.ref.html b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-009.ref.html
new file mode 100644
index 0000000000..7a0fe835c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-009.ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+body {
+  font: 36px sans-serif;
+}
+div {
+  text-align: center;
+}
+.a {
+  display: inline-block;
+  width: 10px;
+}
+.c1 {
+  padding-left: 10px;
+}
+.c {
+  color: red;
+}
+.d1 {
+  margin-right: 10px;
+}
+.d {
+  color: red;
+}
+</style>
+</head>
+<body>
+<div dir=ltr>
+السلام<span class=a>&nbsp;</span>عليكم
+</div>
+<div dir=ltr>
+السلام<span class=a>&nbsp;</span>عليكم
+</div>
+<div dir=rtl>
+السلام<span class=a>&nbsp;</span>عليكم
+</div>
+<div dir=rtl>
+السلام<span class=a>&nbsp;</span>عليكم
+</div>
+<div dir=ltr>
+<span class=c1>السلام<span class=c>عليكم</span></span>
+</div>
+<div dir=ltr>
+<span class=d1><span class=d>السلام</span>عليكم</span>
+</div>
+<div dir=rtl>
+<span class=c1>السلام<span class=c>عليكم</span></span>
+</div>
+<div dir=rtl>
+<span class=d1><span class=d>السلام</span>عليكم</span>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-010.ref.html b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-010.ref.html
new file mode 100644
index 0000000000..8a043267a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/reference/boundary-shaping-010.ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8>
+<style>
+body {
+  font: 36px sans-serif;
+}
+div {
+  text-align: center;
+}
+</style>
+</head>
+<body>
+<div dir=rtl>
+السلام
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/boundary-shaping/resources/LinLibertine_Re-4.7.5.woff b/testing/web-platform/tests/css/css-text/boundary-shaping/resources/LinLibertine_Re-4.7.5.woff
new file mode 100644
index 0000000000..c953a546f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/boundary-shaping/resources/LinLibertine_Re-4.7.5.woff
diff --git a/testing/web-platform/tests/css/css-text/crashtests/line-break-float-crash.html b/testing/web-platform/tests/css/css-text/crashtests/line-break-float-crash.html
new file mode 100644
index 0000000000..bdf47c3e8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/line-break-float-crash.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-3">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<style>
+#container {
+  font-size: 100px;
+  width: 33554432px;
+}
+atomic {
+  display: inline-block;
+  width: 1ch;
+}
+left {
+  float: left;
+  width: 33554432px;
+  height: 10px;
+}
+</style>
+<body>
+  <div id="container">
+    <atomic></atomic>
+    0
+    <left></left>
+    <span dir="ltr"><atomic></atomic></span>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/crashtests/overflow-wrap-anywhere-crash.html b/testing/web-platform/tests/css/css-text/crashtests/overflow-wrap-anywhere-crash.html
new file mode 100644
index 0000000000..11625fe1bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/overflow-wrap-anywhere-crash.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<style>
+body {
+  overflow-wrap: anywhere;
+}
+.post-footer-line-2 {
+  position: absolute;
+  letter-spacing: 1mm;
+  font-size: 0px;
+}
+.post-labels a {
+  padding: 8px 17px;
+  font-size: 10px;
+  margin: 5px 30px 5px -30px;
+}
+</style>
+<div>
+  <div class='post-footer-line-2'>
+    <span class='post-labels'>
+      Etykiety:
+      <a>hunter</a>,
+      <a>miski</a>,
+      <a>pies</a>,
+      <a>recenzja</a>,
+      <a>test</a>
+    </span>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/crashtests/rendering-rtl-bidi-override-crash.html b/testing/web-platform/tests/css/css-text/crashtests/rendering-rtl-bidi-override-crash.html
new file mode 100644
index 0000000000..9ba75c9c37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/rendering-rtl-bidi-override-crash.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>CSS Text Test: Crash rendering RLT text with unicode-bidi: bidi-override</title>
+<link rel="help" href="https://crbug.com/1152387">
+<script type="text/javascript">
+    function event_handler_CD7_readystatechange() {
+        document.designMode = document.designMode == "on" ? "off" : "on";
+        var oSelection=window.getSelection();
+        document.execCommand("SelectAll")
+        oSelection.collapseToEnd()
+        document.execCommand('CreateLink',false,'about:blank');
+    }
+    document.addEventListener("readystatechange", event_handler_CD7_readystatechange);
+    function event_handler_CD8_DOMCharacterDataModified() {
+        var oSelection=window.getSelection();
+        oSelection.modify('move', 'backward', 'line');
+    }
+    document.addEventListener("DOMCharacterDataModified", event_handler_CD8_DOMCharacterDataModified);
+    setTimeout(function() {
+        var oSelection=window.getSelection();
+        var oRange = oSelection.rangeCount ? oSelection.getRangeAt(68 % oSelection.rangeCount) : null;
+        var oParentElement = function() {
+            var oNewElement = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
+            return oNewElement;
+        }();
+        oRange.surroundContents(oParentElement);
+    });
+</script>
+<style>
+    div {
+        unicode-bidi:bidi-override;
+        direction: rtl;
+    }
+</style>
+<div>
+AxBxC AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+A AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+</div>
diff --git a/testing/web-platform/tests/css/css-text/crashtests/rendering-table-caption-with-list-item-and-svg-crash.html b/testing/web-platform/tests/css/css-text/crashtests/rendering-table-caption-with-list-item-and-svg-crash.html
new file mode 100644
index 0000000000..0cc371c56d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/rendering-table-caption-with-list-item-and-svg-crash.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<title>CSS Text Test: Crash rendering a table caption with list item and svg</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://crbug.com/1197974">
+<meta name="assert" content="The test doesn't crash in debug"/>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<table dir="rtl"><caption><li><svg></caption></table>
diff --git a/testing/web-platform/tests/css/css-text/crashtests/rendering-table-caption-with-negative-margins-crash.html b/testing/web-platform/tests/css/css-text/crashtests/rendering-table-caption-with-negative-margins-crash.html
new file mode 100644
index 0000000000..c090be9bbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/rendering-table-caption-with-negative-margins-crash.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<title>CSS Text Test: Crash rendering a table caption with empty span and negative margins</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://crbug.com/1197974">
+<meta name="assert" content="The test doesn't crash in debug"/>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    table { font: 20px/1 Ahem; }
+    span { margin: -40px; }
+</style>
+<table><caption>X<span></span><input></input><textarea></textarea></caption></table>
diff --git a/testing/web-platform/tests/css/css-text/crashtests/text-indent-each-line-crash.html b/testing/web-platform/tests/css/css-text/crashtests/text-indent-each-line-crash.html
new file mode 100644
index 0000000000..fb63175cf1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/text-indent-each-line-crash.html
@@ -0,0 +1,14 @@
+<style>
+*:scope {
+  text-indent: 41% each-line;
+  columns: 0;
+}
+#a {
+  float: right;
+  writing-mode: tb;
+}
+</style>
+<shadow id="a">
+A
+</shadow>
+<details>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/crashtests/text-wrap-balance-float-crash.html b/testing/web-platform/tests/css/css-text/crashtests/text-wrap-balance-float-crash.html
new file mode 100644
index 0000000000..a4767b0761
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/text-wrap-balance-float-crash.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+div {
+  width: 3em;
+  border: thin solid;
+  white-space: balance;
+}
+.float { float: left; }
+</style>
+<div class="float">2</div>
+<div>3</div>
diff --git a/testing/web-platform/tests/css/css-text/crashtests/text-wrap-balance-nested-blocks-crash.html b/testing/web-platform/tests/css/css-text/crashtests/text-wrap-balance-nested-blocks-crash.html
new file mode 100644
index 0000000000..db79cb7d2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/text-wrap-balance-nested-blocks-crash.html
@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<meta charset="UTF-8">
+
+<title>Mozilla bug https://bugzilla.mozilla.org/show_bug.cgi?id=1858421</title>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1858421">
+
+<style>
+.main_content { text-wrap: balance; }
+</style>
+
+</head>
+<body>
+<p>
+HTML structure and text content from https://www.contestwatchers.com/international-visual-identity-awards-2024/<br>
+(© 2009 – 2023 Contest Watchers; used by permission, see https://creativecommons.org/licenses/by-sa/3.0/).<br>
+Stripped of styling and external links/resources, purely for testing purposes.
+</p>
+
+		<div>
+	<div class=main_content>
+		<div>
+			<aside>
+				<hr />
+			<div>
+				<div>
+					<a href="#"><span></span><span>Previous</span></a>				</div>
+				<article>
+	<div>
+		<h3><a href="#">Reuse the Thermae &#8211; Curinga &#8211; Architecture Competition</a></h3>
+
+<a href="#">
+			<figure>
+
+				<img width="180" height="180" src="." alt="" />			<figcaption>Image source: Reuse Italy</figcaption>		</figure>
+	<div><strong>3+ months <span>remaining</span></strong></div>	</a>
+		</div>
+</article>
+			</div>
+			<hr />
+			</aside>
+			<div>
+								<div>
+												<article>
+								<header><h1>International Visual Identity Awards 2024</h1></header>
+																	<figure>
+										<img width="620" height="380" src="." srcset="." sizes="(max-width: 620px) 100vw, 620px" />		<figcaption>Image source: <strong>International Visual Identity Awards</strong></figcaption>
+											</figure>
+																<div>
+									<aside>
+										<h2>Contest Status</h2>
+										<dl><dt>Deadline</dt><dd><span><strong>30 March 2024</strong></span><span> [ 6+ months remaining ]</span></dd><dt>Results Announcement Expected</dt><dd><span><strong>Summer 2024</strong></span></dd></dl><h2>Contest Disciplines</h2><ul>			<li><a href="#">Graphic Design</a></li>
+			</ul>									</aside>
+									<aside>
+
+									</aside>
+									<div>
+										<p>Now in their 11th year, the International Visual Identity Awards (IVIA) are a global competition loved by agencies and independent designers.</p>
+<p>With 20 diverse categories, there’s plenty of opportunity to share your branding project with the world. The awards were founded with a clear vision to provide an equal opportunity for all types of entry, from the freelance designer, through to small design studios and larger branding agencies.</p>
+<p>One winner and a second and third place runner-up will be announced in each category. One overall winner receives the title of &#8216;<strong>Visual Identity of the Year</strong>&#8216;.</p>
+<p>The twenty (20) competition categories for 2024 are:</p>
+<ul>
+<li><strong>Manufacturing</strong></li>
+<li><strong>Destination</strong></li>
+<li><strong>Sport</strong></li>
+<li><strong>Entertainment</strong></li>
+<li><strong>Technology</strong></li>
+<li><strong>Telecommunications</strong></li>
+<li><strong>Energy/Utilities</strong></li>
+<li><strong>Consumer products</strong></li>
+<li><strong>Public sector</strong></li>
+<li><strong>Media and publishing</strong></li>
+<li><strong>Transport and automotive</strong></li>
+<li><strong>Healthcare</strong></li>
+<li><strong>Financial services</strong></li>
+<li><strong>Food and drink</strong></li>
+<li><strong>Restaurants, hospitality, travel and leisure</strong></li>
+<li><strong>Retail</strong></li>
+<li><strong>Charity and non-profit</strong></li>
+<li><strong>Professional services</strong></li>
+<li><strong>Fashion</strong></li>
+<li><strong>Real Estate</strong></li>
+</ul>
+<p>Eligible entries must have been launched <strong>between 1st January 2022 and the final closing date</strong>. Entries are permitted from all countries worldwide.</p>
+<p>Entries must include not just a logo but also examples of its application across different items as part of a brand’s visual identity system.</p>
+<p>Winners will be announced in the summer of 2024.</p>
+<p>The International Visual Identity Awards are proudly celebrating their eleventh anniversary this year.</p>
+<h3>International Visual Identity Awards 2024 &#8211; Entry Fee</h3>
+<ul>
+<li>Early Bird Entry Fee: <strong>£135</strong> (+UK VAT where applicable) before 1st December 2023</li>
+<li>Standard Entry Fee: <strong>£150</strong> (+UK VAT where applicable)</li>
+</ul>
+																			</div>
+								</div>
+								<footer>
+									<h2>Links and Meta Information</h2>
+									<div>
+																			<a href="#">Visit Official Website</a>
+										<h3>Social Sharing Links</h3><ul>		<li>
+			<a target="_blank" href="#">
+			<i aria-label="Tweet"></i>
+			</a>
+		</li>
+				<li>
+			<a target="_blank" href="#">
+			<i aria-label="Share on Facebook"></i>
+			</a>
+		</li>
+				<li>
+			<a target="_blank" href="#">
+			<i aria-label="Share on LinkedIn"></i>
+			</a>
+		</li>
+		</ul>									</div>
+									<dl><dt>Organizer(s)</dt><dd><a href="#">International Visual Identity Awards</a></dd><dt>Published in</dt><dd><a href="#">Annual</a> / <a href="#">Graphic Design</a> / <a href="#">Open</a></dd><dt>Published after</dt><dd><a href="#">Reuse the Thermae &#8211; Curinga &#8211; Architecture Competition</a></dd><dt>Published before</dt><dd><a href="#">The Golden Sand Waterfront &#8211; TerraViva Competitions</a></dd><dt>Listed on</dt><dd><a href="#">11 October 2023</a></dd><dt>Updated on</dt><dd>11 October 2023</dd><dt>Listed by</dt><dd><a href="#"><span>Contest Watchers</span></a></dd></dl>
+									<fieldset>
+										<legend><label for="cw_short_permalink"><strong>Short permanent link to this page:</strong></label></legend>
+										<input type="text" size="50" readonly="readonly" value="https://www.contestwatchers.com/?p=39783" /></fieldset>
+								</footer>
+							</article>
+											</div>
+						<section>
+			<h2>Possibly Related Contests</h2>
+			<div>
+
+				<article>
+	<div>
+		<h3><a href="#">Curtas Vila do Conde 2024 – International Film Festival</a></h3>
+
+<a href="#">
+			<figure>
+
+				<img width="180" height="180" src="." alt="" loading="lazy" />			<figcaption>Image source: Curtas Vila do Conde</figcaption>		</figure>
+	<div><strong>7+ months <span>remaining</span></strong></div>	</a>
+		</div>
+</article>
+<article>
+	<div>
+		<h3><a href="#">AMD Design Award 2023: Designing Energy‑Efficient Future</a></h3>
+
+<a href="#">
+			<figure>
+
+				<img width="180" height="180" src="." alt="" loading="lazy" />			<figcaption>Image source: Advanced Micro Devices (AMD)</figcaption>		</figure>
+	<div><strong>3+ days <span>remaining</span></strong></div>			<span class="cw-free-mark badge
+			bg-success			">Free</span>
+			</a>
+		</div>
+</article>
+<article>
+	<div>
+		<h3><a href="#">Be Izmir Illustration Contest</a></h3>
+
+<a href="#">
+			<figure>
+
+				<img width="180" height="180" src="." alt="" loading="lazy" />			<figcaption>Image source: İzmir Planning Agency (İZPA)</figcaption>		</figure>
+	<div><strong>1+ month <span>remaining</span></strong></div>			<span class="cw-free-mark badge
+			bg-success			">Free</span>
+			</a>
+		</div>
+</article>
+<article>
+	<div>
+		<h3><a href="#">Andreu World International Design Contest 2023</a></h3>
+
+<a href="#">
+			<figure>
+
+				<img width="180" height="180" src="." alt="" loading="lazy" />			<figcaption>Image source: Andreu World</figcaption>		</figure>
+	<div><strong>2+ months <span>remaining</span></strong></div>			<span class="cw-free-mark badge
+			bg-success			">Free</span>
+			</a>
+		</div>
+</article>
+			</div>
+		</section>
+				<section>
+			<h2>Other Contests by <a href="#">International Visual Identity Awards</a></h2>
+			<div>
+
+				<article>
+	<div>
+		<h3><a href="#">International Visual Identity Awards 2016 Competition</a></h3>
+
+<a href="#">
+			<figure>
+
+				<img width="180" height="180" src="." alt="" loading="lazy" srcset="." sizes="(max-width: 180px) 100vw, 180px" />					</figure>
+	<div>Expired</div>	</a>
+		</div>
+</article>
+<article>
+	<div>
+		<h3><a href="#">International Visual Identity Awards 2022</a></h3>
+
+<a href="#">
+			<figure>
+
+				<img width="180" height="180" src="." alt="" loading="lazy" srcset="." sizes="(max-width: 180px) 100vw, 180px" />					</figure>
+	<div><strong>Finished</strong></div>	</a>
+		</div>
+</article>
+<article>
+	<div>
+		<h3><a href="#">International Visual Identity Awards 2020</a></h3>
+
+<a href="#">
+			<figure>
+
+				<img width="180" height="180" src="." alt="" loading="lazy" srcset="." sizes="(max-width: 180px) 100vw, 180px" />					</figure>
+	<div><strong>Finished</strong></div>	</a>
+		</div>
+</article>
+<article>
+	<div>
+		<h3><a href="#">International Visual Identity Awards 2023</a></h3>
+
+<a href="#">
+			<figure>
+
+				<img width="180" height="180" src="." alt="" loading="lazy" srcset="." sizes="(max-width: 180px) 100vw, 180px" />					</figure>
+	<div>Expired</div>	</a>
+		</div>
+</article>
+			</div>
+		</section>
+					</div>
+			<aside>
+				<hr />
+			<div>
+				<div>
+					<a href="#"><span>Next</span><span></span></a>				</div>
+				<article>
+	<div>
+		<h3><a href="#">The Golden Sand Waterfront &#8211; TerraViva Competitions</a></h3>
+
+<a href="#">
+			<figure>
+
+				<img width="180" height="180" src="." alt="" loading="lazy" />			<figcaption>Image source: Adobe Stock</figcaption>		</figure>
+	<div><strong>4+ months <span>remaining</span></strong></div>	</a>
+		</div>
+</article>
+			</div>
+			<hr />
+			</aside>
+		</div>
+	</div>
+</div>
+<div>
+	<div>
+		<div>
+			<div>
+				<div>
+					<div>
+						<div>
+							<h3>What is Contest Watchers?</h3>
+							<p>Launched in 2009, <a href="#">Contest Watchers</a> is <strong>a website dedicated to creative challenges and competitions worldwide</strong>. With a huge database of international contests in various disciplines, it comes handy to anyone who wants to compete for great prizes and recognition.</p>
+							<p>In a parallel universe, Contest Watchers is a super serious gang of five fictional characters.</p>
+						</div>
+						<div>
+							<h3>Sign up for the Contest Watchers Newsletter</h3>
+							<form>
+								<input type="hidden" name="subscribe" value="subscribe" />
+								<input type="hidden" name="htmlemail" value="1" />
+								<p>Get <strong>all new contests</strong> from Contest Watchers delivered directly to your inbox <strong>daily</strong> or <strong>weekly</strong>.</p>
+								<p>No worries! You can unsubscribe anytime.</p>
+								<div>
+									<input type="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" name="email" required="required" placeholder="Your email address">
+									<button type="submit">Sign up</button>
+								</div>
+								<div>
+									<div>
+										<input required checked type="checkbox" value="signup" name="list[2]">
+										<label for="list[2]">
+											Daily Newsletter
+										</label>
+									</div>
+									<div>
+										<input type="checkbox" value="signup" name="list[4]">
+										<label for="list[4]">
+											Weekly Newsletter
+										</label>
+									</div>
+								</div>
+							</form>
+						</div>
+					</div>
+					<div>
+						<div>
+							<div>
+								<div>
+									<div>
+										<h4>Information</h4>
+										<ul>
+											<li><a href="#">About</a></li>
+											<!--<li><a href="">Advertise</a></li>-->
+											<li><a href="#">Contact</a></li>
+											<li><a href="#">RSS Feed</a></li>
+										</ul>
+									</div>
+									<div>
+										<h4>Social Profiles</h4>
+										<ul>
+											<li><a href="#">Twitter</a></li>
+											<li><a href="#">Facebook</a></li>
+											<li><a href="#">LinkedIn</a></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div>
+								<div>
+									<div>
+										<h4>Tools</h4>
+										<ul>
+											<li><a href="#">Suggest Contest</a></li>
+											<li><a href="#">Submit Contest</a></li>
+											<li><a href="#">Network</a></li>
+										</ul>
+									</div>
+									<div>
+										<h4>Goodies</h4>
+										<ul>
+											<li><a href="#" target="_blank">Manage Newsletter Subscriptions</a></li>
+											<li><a href="#">Contests Guide</a></li>
+											<!-- <li><a>Wallpapers</a> (soon)</li> -->
+											<!-- <li><a>Banners</a> (soon)</li> -->
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div>
+			<footer>
+				<p>
+					&copy; 2009 &ndash; 2023 <a href="#">Contest Watchers</a>. <a href="#">Some rights reserved</a>.					Powered by <a href="#" target="_blank">WordPress</a>.<br />Designed and developed by <a href="#">Goce Mitevski</a>.
+				</p>
+				<ul>
+					<li><a href="#">Privacy Policy</a></li>
+					<li><a href="#">General Disclaimer</a></li>
+				</ul>
+			</footer>
+			<div>
+		<button>
+					<span></span>
+		</button>
+		<button>
+		<span></span>
+	</button>
+</div>
+		</div>
+	</div>
+</div>
+
+</body>
+
+</html>
+
diff --git a/testing/web-platform/tests/css/css-text/crashtests/trailing-space-with-cr-crash.html b/testing/web-platform/tests/css/css-text/crashtests/trailing-space-with-cr-crash.html
new file mode 100644
index 0000000000..48c223e352
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/trailing-space-with-cr-crash.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<style>
+div {
+  width: 100px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  border: 1px solid blue;
+}
+.atomic {
+  display: inline-block;
+  width: 99px;
+  height: 1em;
+  background: orange;
+}
+</style>
+<div><span class="atomic"></span>&#x0D; <span class="atomic"></span></div>
diff --git a/testing/web-platform/tests/css/css-text/crashtests/white-space-pre-wrap-chash.html b/testing/web-platform/tests/css/css-text/crashtests/white-space-pre-wrap-chash.html
new file mode 100644
index 0000000000..c34b2d0b3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/white-space-pre-wrap-chash.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+div {
+    white-space: pre-wrap;
+    font-size: 24023in;
+}
+</style>
+<div>A A  A</div>
diff --git a/testing/web-platform/tests/css/css-text/crashtests/word-spacing-large-value.html b/testing/web-platform/tests/css/css-text/crashtests/word-spacing-large-value.html
new file mode 100644
index 0000000000..cbd83fab16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/crashtests/word-spacing-large-value.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1474774">
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+:last-of-type {
+  word-spacing:15946245.3ch;
+  border-right-style:solid;
+}
+</style>
+<button formaction=''>
+<small>
+AAAAAAAA
+</html>
diff --git a/testing/web-platform/tests/css/css-text/ellisize-rtl-text-crash.html b/testing/web-platform/tests/css/css-text/ellisize-rtl-text-crash.html
new file mode 100644
index 0000000000..88908877d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/ellisize-rtl-text-crash.html
@@ -0,0 +1,15 @@
+<title>CSS Text Test: Ellipsize overflowing text in RTL cause Chrome to crash</title>
+<link rel="help" href="https://crbug.com/1130153">
+<style>
+    .CLASS2 {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        direction: rtl;
+    }
+    .CLASS13 {
+        font-size: 32768em;
+    }
+</style>
+<div class="CLASS2">
+    <abbr class="CLASS13">x AxBxC </abbr>C
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-allow-end-001.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-allow-end-001.xht
new file mode 100644
index 0000000000..a0b0fed058
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-allow-end-001.xht
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+	<head>
+		<title>CSS Test: hanging-punctuation - allow-end - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 3: 10.2. Hanging Punctuation: the ‘hanging-punctuation’ property" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation" />
+		<link rel="match" href="reference/hanging-punctuation-allow-end-001-ref.xht"/>
+		<meta name="assert" content="This property determines whether a punctuation mark, if one is present, may be placed outside the line box (or in the indent) at the start or at the end of a full line of text." />
+		<style type="text/css">
+			<![CDATA[
+				.test {
+					hanging-punctuation: allow-end;
+				}
+				/* the CSS below is not part of the test */
+				body {
+					font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
+				}
+				.no-wrap {
+					white-space: nowrap;
+				}
+				.parent {
+					border: 1px solid gray;
+					margin-left: 2em;
+					width: 10em
+				}
+				div.wrapper {
+					display: inline-block;
+					border: 1px solid;
+					margin: 10px;
+					padding: 10px;
+				}
+				span.attention {
+					color: red;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if each pair of upper and lower text in the square box is identical.
+		</p>
+		<div class="wrapper">
+			<div>
+				IDEOGRAPHIC COMMA
+			</div>
+			<div class="parent">
+				<div class="test">
+					これらは満たす文字で、それらも満たす文字です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これらは満たす文字で、<br />それらも満たす文字で<br />す。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				IDEOGRAPHIC FULL STOP
+			</div>
+			<div class="parent">
+				<div class="test">
+					これは満たす文字です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは満たす文字です。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				HALFWIDTH IDEOGRAPHIC COMMA
+			</div>
+			<div class="parent">
+				<div class="test">
+					ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ｡
+				</div>
+				<br />
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				HALFWIDTH IDEOGRAPHIC FULL STOP
+			</div>
+			<div class="parent">
+				<div class="test">
+					ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡
+				</div>
+				<br />
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+			</div>
+		</div>
+		<p>
+			<span class="attention">* You will need a Japanese font.</span><br />
+			If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
+		</p>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-block-bound-001.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-block-bound-001.html
new file mode 100644
index 0000000000..ff2b61dd81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-block-bound-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: allowed ending hanging-punctuation does not affect block box boundary</title>
+
+  <!--
+
+  Issue 4222: [css-text-3] hanging-punctuation effect on inline/block bounds
+  https://github.com/w3c/csswg-drafts/issues/4222
+
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hanging">
+  <link rel="match" href="reference/hanging-punctuation-block-bound-001-ref.html">
+
+  <meta content="This test checks that hanging punctuations has no effect on the boundary of a block box. The background of a block box does not include hanging punctuations." name="assert">
+
+  <style>
+  div
+    {
+      background-color: lime;
+      border: black solid 3px;
+      font-family: monospace;
+      font-size: 60px;
+      line-height: 1.5em; /* computes to 90px */
+      hanging-punctuation: allow-end;
+      width: 240px;
+    }
+  </style>
+
+  <body lang="ja">
+
+  <div>まだよくています。しかし特</div>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-first-001.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-first-001.xht
new file mode 100644
index 0000000000..1dd5f2ef97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-first-001.xht
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+	<head>
+		<title>CSS Test: hanging-punctuation - first - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 3: 10.2. Hanging Punctuation: the ‘hanging-punctuation’ property" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation" />
+		<link rel="match" href="reference/hanging-punctuation-first-001-ref.xht"/>
+		<meta name="assert" content="This property determines whether a punctuation mark, if one is present, may be placed outside the line box (or in the indent) at the start or at the end of a full line of text." />
+		<style type="text/css">
+			<![CDATA[
+				.test {
+					hanging-punctuation: first;
+				}
+				/* the CSS below is not part of the test */
+				body {
+					font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
+				}
+				.hanging {
+					left: -1em;
+					position: relative;
+				}
+				.no-wrap {
+					white-space: nowrap;
+				}
+				.parent {
+					border: 1px solid gray;
+					margin-left: 2em;
+					width: 10em
+				}
+				div.wrapper {
+					display: inline-block;
+					border: 1px solid;
+					margin: 10px;
+					padding: 10px;
+				}
+				span.attention {
+					color: red;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if each pair of upper and lower text in the square box is identical.
+		</p>
+		<div class="wrapper">
+			<div>
+				Opening brackets
+			</div>
+			<div class="parent">
+				<div class="test">
+					「これは、満たすための文字です。」
+				</div>
+				<br />
+				<div class="no-wrap">
+					<span class="hanging">「これは、満たすための</span><br />文字です。」
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Closing brackets
+			</div>
+			<div class="parent">
+				<div class="test">
+					これは、「満たす文字」です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは、「満たす文<br />字」です。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Initial quotes
+			</div>
+			<div class="parent">
+				<div class="test">
+					“これは、満たすための文字です。”
+				</div>
+				<br />
+				<div class="no-wrap">
+					<span class="hanging">“これは、満たすための</span><br />文字です。”
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Final quotes
+			</div>
+			<div class="parent">
+				<div class="test">
+					これは、“満たす文字”です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは、“満たす文<br />字”です。
+				</div>
+			</div>
+		</div>
+		<p>
+			<span class="attention">* You will need a Japanese font.</span><br />
+			If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
+		</p>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-first-002.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-first-002.html
new file mode 100644
index 0000000000..a2dd69f3a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-first-002.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Test: hanging-punctuation - first, U+3000</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="match" href="reference/hanging-punctuation-first-002-ref.html"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging-punctuation-property">
+<meta name="assert" content="hanging-punctuation: first hangs U+300 IDEOGRAPHIC SPACE " >
+<style>
+.test {
+    hanging-punctuation: first;
+}
+div { /*not part of the test, just to make things more visually obvious*/
+    line-height: 1;
+    font-size: 40px;
+}
+</style>
+
+<p>Test passes if the up and down arrows below are aligned.
+
+<div class=test>　↓</div>
+<div class=ref>↑</div>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-force-end-001.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-force-end-001.xht
new file mode 100644
index 0000000000..a39b5f81de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-force-end-001.xht
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+	<head>
+		<title>CSS Test: hanging-punctuation - force-end - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 3: 10.2. Hanging Punctuation: the ‘hanging-punctuation’ property" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation" />
+		<link rel="match" href="reference/hanging-punctuation-force-end-001-ref.xht"/>
+		<meta name="assert" content="This property determines whether a punctuation mark, if one is present, may be placed outside the line box (or in the indent) at the start or at the end of a full line of text." />
+		<style type="text/css">
+			<![CDATA[
+				.test {
+					hanging-punctuation: force-end;
+				}
+				/* the CSS below is not part of the test */
+				body {
+					font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
+				}
+				.no-wrap {
+					white-space: nowrap;
+				}
+				.parent {
+					border: 1px solid gray;
+					margin-left: 2em;
+					width: 10em
+				}
+				div.wrapper {
+					display: inline-block;
+					border: 1px solid;
+					margin: 10px;
+					padding: 10px;
+				}
+				span.attention {
+					color: red;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if each pair of upper and lower text in the square box is identical.
+		</p>
+		<div class="wrapper">
+			<div>
+				IDEOGRAPHIC COMMA
+			</div>
+			<div class="parent">
+				<div class="test">
+					これらは満たす文字で、それらも満たす文字です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これらは満たす文字で、<br />それらも満たす文字で<br />す。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				IDEOGRAPHIC FULL STOP
+			</div>
+			<div class="parent">
+				<div class="test">
+					これは満たす文字です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは満たす文字です。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				HALFWIDTH IDEOGRAPHIC COMMA
+			</div>
+			<div class="parent">
+				<div class="test">
+					ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ｡
+				</div>
+				<br />
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				HALFWIDTH IDEOGRAPHIC FULL STOP
+			</div>
+			<div class="parent">
+				<div class="test">
+					ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡
+				</div>
+				<br />
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+			</div>
+		</div>
+		<p>
+			<span class="attention">* You will need a Japanese font.</span><br />
+			If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
+		</p>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-001.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-001.html
new file mode 100644
index 0000000000..9be9947fe1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-001.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang=en>
+
+<title>CSS Test: hanging-punctuation - force-end - basic cases</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation">
+<link rel="match" href="reference/hanging-punctuation-inline-001-ref.html">
+<meta name="assert" content="hanging punctuation applies to inlines">
+<style>
+div { font-size: 2em; }
+#ref { color: blue; }
+#test {
+  width: 4em;
+  color: orange;
+}
+#test span {
+  hanging-punctuation: last;
+}
+</style>
+
+<p>Test passes if the orange and blue pieces of text are laid out identically.
+
+<div id=ref>字字字字」</div>
+<div id=test>字字字字<span>」</span></div>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-bound-001.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-bound-001.html
new file mode 100644
index 0000000000..c29d475869
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-inline-bound-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: allowed ending hanging-punctuation affect inline box boundary</title>
+
+  <!--
+
+  Issue 4222: [css-text-3] hanging-punctuation effect on inline/block bounds
+  https://github.com/w3c/csswg-drafts/issues/4222
+
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hanging">
+  <link rel="match" href="reference/hanging-punctuation-inline-bound-001-ref.html">
+
+  <meta content="This test checks that background of inline boxes includes hanging punctuations and text-selecting (or highlighting) inline boxes will include hanging punctuations." name="assert">
+
+  <style>
+  div
+    {
+      font-family: monospace;
+      font-size: 60px;
+      line-height: 1.5em; /* computes to 90px */
+      hanging-punctuation: allow-end;
+      width: 245px;
+    }
+
+  span
+    {
+      background-color: lime;
+      border: black solid 3px;
+    }
+  </style>
+
+  <body lang="ja">
+
+  <div><span>まだよくています。しかし特</span></div>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-last-001.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-last-001.xht
new file mode 100644
index 0000000000..dec923a87e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-punctuation-last-001.xht
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+	<head>
+		<title>CSS Test: hanging-punctuation - last - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 3: 10.2. Hanging Punctuation: the ‘hanging-punctuation’ property" href="http://www.w3.org/TR/css-text-3/#hanging-punctuation" />
+		<link rel="match" href="reference/hanging-punctuation-last-001-ref.xht"/>
+		<meta name="assert" content="This property determines whether a punctuation mark, if one is present, may be placed outside the line box (or in the indent) at the start or at the end of a full line of text." />
+		<style type="text/css">
+			<![CDATA[
+				.test {
+					hanging-punctuation: last;
+				}
+				/* the CSS below is not part of the test */
+				body {
+					font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
+				}
+				.no-wrap {
+					white-space: nowrap;
+				}
+				.parent {
+					border: 1px solid gray;
+					margin-left: 2em;
+					width: 10em
+				}
+				div.wrapper {
+					display: inline-block;
+					border: 1px solid;
+					margin: 10px;
+					padding: 10px;
+				}
+				span.attention {
+					color: red;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if each pair of upper and lower text in the square box is identical.
+		</p>
+		<div class="wrapper">
+			<div>
+				Opening brackets
+			</div>
+			<div class="parent">
+				<div class="test">
+					「これは、満たすための文字です。」
+				</div>
+				<br />
+				<div class="no-wrap">
+					「これは、満たすため<br />の文字です。」
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Closing brackets
+			</div>
+			<div class="parent">
+				<div class="test">
+					これは、「満たす文字」です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは、「満たす文字」<br />です。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Initial quotes
+			</div>
+			<div class="parent">
+				<div class="test">
+					“これは、満たすための文字です。”
+				</div>
+				<br />
+				<div class="no-wrap">
+					“これは、満たすため<br />の文字です。”
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Final quotes
+			</div>
+			<div class="parent">
+				<div class="test">
+					これは、“満たす文字”です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは、“満たす文字”<br />です。
+				</div>
+			</div>
+		</div>
+		<p>
+			<span class="attention">* You will need a Japanese font.</span><br />
+			If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
+		</p>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-scrollable-001.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-scrollable-001.html
new file mode 100644
index 0000000000..7827a684b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/hanging-scrollable-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: hanging punctuation is scrollable overflow</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging-punctuation-property">
+<link rel="match" href="reference/hanging-scrollable-001-ref.html">
+<meta name="assert" content="Hanging characters that overflow their block container are treated as scrollable overflow. ">
+<style>
+div {
+  font-family: monospace;
+  font-size: 50px;
+  hanging-punctuation: last;
+  overflow: hidden;
+  color: red;
+}
+span {color: white; }
+</style>
+
+<p>Test passes if there is no red below.
+<table><tr><td><div id="t">X<span>”</span></div></table>
+<!--
+  The table is to do sizing based on the min content size.
+  A simpler test could be written using `div { width: min-content; }`,
+  but that is not widely supported yet.
+-->
+
+<script>
+document.getElementById("t").scrollLeft=100;
+</script>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-allow-end-001-ref.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-allow-end-001-ref.xht
new file mode 100644
index 0000000000..48be1d9806
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-allow-end-001-ref.xht
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+	<head>
+		<title>CSS Test: hanging-punctuation - allow-end - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				body {
+					font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
+				}
+				.no-wrap {
+					white-space: nowrap;
+				}
+				.parent {
+					border: 1px solid gray;
+					margin-left: 2em;
+					width: 10em
+				}
+				div.wrapper {
+					display: inline-block;
+					border: 1px solid;
+					margin: 10px;
+					padding: 10px;
+				}
+				span.attention {
+					color: red;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if each pair of upper and lower text in the square box is identical.
+		</p>
+		<div class="wrapper">
+			<div>
+				IDEOGRAPHIC COMMA
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					これらは満たす文字で、<br />それらも満たす文字で<br />す。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これらは満たす文字で、<br />それらも満たす文字で<br />す。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				IDEOGRAPHIC FULL STOP
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					これは満たす文字です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは満たす文字です。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				HALFWIDTH IDEOGRAPHIC COMMA
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+				<br />
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				HALFWIDTH IDEOGRAPHIC FULL STOP
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+				<br />
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+			</div>
+		</div>
+		<p>
+			<span class="attention">* You will need a Japanese font.</span><br />
+			If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
+		</p>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-block-bound-001-ref.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-block-bound-001-ref.html
new file mode 100644
index 0000000000..31f39ea163
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-block-bound-001-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      font-family: monospace;
+      font-size: 60px;
+      line-height: 1.5em; /* computes to 90px */
+    }
+
+  /*
+  We draw the box (perfectly fitted to the content
+  in the block axis, because it has the same content)
+  but not the text.
+  */
+
+  div#box-drawn-under
+    {
+      background-color: lime;
+      border: black solid 3px;
+      color: transparent;
+      position: absolute;
+      width: 240px;
+      z-index: -1;
+    }
+
+  /*
+  We draw the text, but into a wider box so
+  the period will fit, and overlap it with
+  the previously-drawn box.
+  */
+
+  div#text-drawn-over
+    {
+      border: transparent solid 3px;
+      width: 300px;
+    }
+  </style>
+
+  <body lang="ja">
+
+   <div id="box-drawn-under">まだよく<br>ています。</div>
+
+   <div id="text-drawn-over">まだよく<br>ています。<br>しかし特</div>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-first-001-ref.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-first-001-ref.xht
new file mode 100644
index 0000000000..1949939eb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-first-001-ref.xht
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+	<head>
+		<title>CSS Test: hanging-punctuation - first - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				body {
+					font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
+				}
+				.hanging {
+					left: -1em;
+					position: relative;
+				}
+				.no-wrap {
+					white-space: nowrap;
+				}
+				.parent {
+					border: 1px solid gray;
+					margin-left: 2em;
+					width: 10em
+				}
+				div.wrapper {
+					display: inline-block;
+					border: 1px solid;
+					margin: 10px;
+					padding: 10px;
+				}
+				span.attention {
+					color: red;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if each pair of upper and lower text in the square box is identical.
+		</p>
+		<div class="wrapper">
+			<div>
+				Opening brackets
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					<span class="hanging">「これは、満たすための</span><br />文字です。」
+				</div>
+				<br />
+				<div class="no-wrap">
+					<span class="hanging">「これは、満たすための</span><br />文字です。」
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Closing brackets
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					これは、「満たす文<br />字」です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは、「満たす文<br />字」です。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Initial quotes
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					<span class="hanging">“これは、満たすための</span><br />文字です。”
+				</div>
+				<br />
+				<div class="no-wrap">
+					<span class="hanging">“これは、満たすための</span><br />文字です。”
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Final quotes
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					これは、“満たす文<br />字”です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは、“満たす文<br />字”です。
+				</div>
+			</div>
+		</div>
+		<p>
+			<span class="attention">* You will need a Japanese font.</span><br />
+			If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
+		</p>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-first-002-ref.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-first-002-ref.html
new file mode 100644
index 0000000000..5f2070fdf5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-first-002-ref.html
@@ -0,0 +1,16 @@
+<!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>
+div { /*not part of the test, just to make things more visually obvious*/
+    line-height: 1;
+    font-size: 40px;
+}
+</style>
+
+<p>Test passes if the up and down arrows below are aligned.
+
+<div>↓</div>
+<div>↑</div>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-force-end-001-ref.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-force-end-001-ref.xht
new file mode 100644
index 0000000000..a9e7e0c1c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-force-end-001-ref.xht
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+	<head>
+		<title>CSS Test: hanging-punctuation - force-end - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				body {
+					font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
+				}
+				.no-wrap {
+					white-space: nowrap;
+				}
+				.parent {
+					border: 1px solid gray;
+					margin-left: 2em;
+					width: 10em
+				}
+				div.wrapper {
+					display: inline-block;
+					border: 1px solid;
+					margin: 10px;
+					padding: 10px;
+				}
+				span.attention {
+					color: red;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if each pair of upper and lower text in the square box is identical.
+		</p>
+		<div class="wrapper">
+			<div>
+				IDEOGRAPHIC COMMA
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					これらは満たす文字で、<br />それらも満たす文字で<br />す。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これらは満たす文字で、<br />それらも満たす文字で<br />す。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				IDEOGRAPHIC FULL STOP
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					これは満たす文字です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは満たす文字です。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				HALFWIDTH IDEOGRAPHIC COMMA
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+				<br />
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､ﾐﾀｽﾓｼﾞ､<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				HALFWIDTH IDEOGRAPHIC FULL STOP
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+				<br />
+				<div class="no-wrap">
+					ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡ﾐﾀｽﾓｼﾞ｡<br />ﾐﾀｽﾓｼﾞ｡
+				</div>
+			</div>
+		</div>
+		<p>
+			<span class="attention">* You will need a Japanese font.</span><br />
+			If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
+		</p>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-001-ref.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-001-ref.html
new file mode 100644
index 0000000000..b679e5b913
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-001-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang=en>
+
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div { font-size: 2em; }
+#ref { color: blue; }
+#test { color: orange; }
+</style>
+
+<p>Test passes if the orange and blue pieces of text are laid out identically.
+
+<div id=ref>字字字字」</div>
+<div id=test>字字字字」</div>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-bound-001-ref.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-bound-001-ref.html
new file mode 100644
index 0000000000..c3d66aa366
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-inline-bound-001-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      font-family: monospace;
+      font-size: 60px;
+      line-height: 1.5em; /* computes to 90px */
+    }
+
+  span
+    {
+      background-color: lime;
+      border-bottom: black solid 3px;
+      border-top: black solid 3px;
+    }
+
+  span#first
+    {
+      border-left: black solid 3px;
+    }
+
+  span#third
+    {
+      border-right: black solid 3px;
+    }
+  </style>
+
+  <body lang="ja">
+
+  <div><span id="first">まだよく</span><br>
+
+  <span id="second">ています。</span><br>
+
+  <span id="third">しかし特</span></div>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-last-001-ref.xht b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-last-001-ref.xht
new file mode 100644
index 0000000000..1f8aa4a57b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-punctuation-last-001-ref.xht
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
+	<head>
+		<title>CSS Test: hanging-punctuation - last - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				body {
+					font-family: "IPAMincho", "IPAGothic", "IPA明朝", "IPAゴシック";
+				}
+				.no-wrap {
+					white-space: nowrap;
+				}
+				.parent {
+					border: 1px solid gray;
+					margin-left: 2em;
+					width: 10em
+				}
+				div.wrapper {
+					display: inline-block;
+					border: 1px solid;
+					margin: 10px;
+					padding: 10px;
+				}
+				span.attention {
+					color: red;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if each pair of upper and lower text in the square box is identical.
+		</p>
+		<div class="wrapper">
+			<div>
+				Opening brackets
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					「これは、満たすため<br />の文字です。」
+				</div>
+				<br />
+				<div class="no-wrap">
+					「これは、満たすため<br />の文字です。」
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Closing brackets
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					これは、「満たす文字」<br />です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは、「満たす文字」<br />です。
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Initial quotes
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					“これは、満たすため<br />の文字です。”
+				</div>
+				<br />
+				<div class="no-wrap">
+					“これは、満たすため<br />の文字です。”
+				</div>
+			</div>
+		</div>
+		<div class="wrapper">
+			<div>
+				Final quotes
+			</div>
+			<div class="parent">
+				<div class="no-wrap">
+					これは、“満たす文字”<br />です。
+				</div>
+				<br />
+				<div class="no-wrap">
+					これは、“満たす文字”<br />です。
+				</div>
+			</div>
+		</div>
+		<p>
+			<span class="attention">* You will need a Japanese font.</span><br />
+			If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and reload this page.
+		</p>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-scrollable-001-ref.html b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-scrollable-001-ref.html
new file mode 100644
index 0000000000..25452e9221
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hanging-punctuation/reference/hanging-scrollable-001-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+
+<p>Test passes if there is no red below.
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-001.html
new file mode 100644
index 0000000000..cad4f6e3e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
+<link rel="match" href="reference/hyphenate-character-001-ref.html">
+<meta name="assert" content="Specifies the string that appears at the end of the line before a hyphenation break">
+<style>
+div {
+  font: 16px monospace;
+  width: 4.5ch;  /* wide enough that the first potential break in "re-al-iza-tion" should NOT be used */
+  hyphens: manual;
+  hyphenate-character: "";
+}
+</style>
+
+<p>Test passes if the words below are broken at hyphenation positions but <b>no visible hyphens appear</b>.
+
+<div lang="en">
+im&shy;ple&shy;men&shy;ta&shy;tion<br><br>
+ini&shy;tial&shy;iza&shy;tion<br><br>
+re&shy;al&shy;iza&shy;tion<br><br>
+hy&shy;phen&shy;ation
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-002.html
new file mode 100644
index 0000000000..07376fc6b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
+<link rel="match" href="reference/hyphenate-character-001-ref.html">
+<meta name="assert" content="Specifies the string that appears at the end of the line before a hyphenation break">
+<style>
+div {
+  font: 16px monospace;
+  width: 4.5ch;  /* wide enough that the first potential break in "re-al-iza-tion" should NOT be used */
+  hyphens: auto;  /* assuming the usual en_US patterns, should generate the same breaks as the manual
+                     soft hyphens in test 001. */
+  hyphenate-character: "";
+}
+</style>
+
+<p>Test passes if the words below are broken at hyphenation positions but <b>no visible hyphens appear</b>.
+
+<div lang="en">
+implementation<br><br>
+initialization<br><br>
+realization<br><br>
+hyphenation
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-003.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-003.html
new file mode 100644
index 0000000000..574f4d37b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-003.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
+<link rel="match" href="reference/hyphenate-character-003-ref.html">
+<meta name="assert" content="Specifies the string that appears at the end of the line before a hyphenation break">
+<style>
+div {
+  font: 16px monospace;
+  width: 5.5ch;  /* wide enough that the first potential break in "re-al-iza-tion" should NOT be used */
+  hyphens: manual;
+  hyphenate-character: "\2022";
+}
+</style>
+
+<p>Test passes if the words below are hyphenated <b>using a bullet (&#x2022;) character</b>.
+
+<div lang="en">
+im&shy;ple&shy;men&shy;ta&shy;tion<br><br>
+ini&shy;tial&shy;iza&shy;tion<br><br>
+re&shy;al&shy;iza&shy;tion<br><br>
+hy&shy;phen&shy;ation
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-004.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-004.html
new file mode 100644
index 0000000000..36ce9263bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
+<link rel="match" href="reference/hyphenate-character-004-ref.html">
+<meta name="assert" content="Specifies the string that appears at the end of the line before a hyphenation break">
+<style>
+div {
+  font: 16px monospace;
+  width: 6.5ch;  /* wide enough that the last potential break in "im-ple-men-ta-tion" should NOT be used */
+  hyphens: manual;
+  hyphenate-character: "/-/";
+}
+</style>
+
+<p>Test passes if the words below are hyphenated <b>using the string "/-/"</b>.
+
+<div lang="en">
+im&shy;ple&shy;men&shy;ta&shy;tion<br><br>
+ini&shy;tial&shy;iza&shy;tion<br><br>
+re&shy;al&shy;iza&shy;tion<br><br>
+hy&shy;phen&shy;ation
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-005.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-005.html
new file mode 100644
index 0000000000..5600d8a4cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-character-005.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
+<link rel="match" href="reference/hyphenate-character-005-ref.html">
+<meta name="assert" content="Specifies the string that appears at the end of the line before a hyphenation break">
+<style>
+div {
+  font: 32px sans-serif;
+  margin-left: 10ch;
+  width: 3ch;
+  hyphenate-character: "\00a0\0640";
+}
+</style>
+
+<p>Test passes if the word below is hyphenated
+using a right-to-left <i>space+kashida</i> sequence "<span dir=rtl>&nbsp;&#x0640;</span>",
+and shaping is <i>not</i> interrupted.
+
+<div dir=rtl lang=ug>
+قىلمىغانلىقى
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphenate-limit-chars-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-limit-chars-001.html
new file mode 100644
index 0000000000..d974812103
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphenate-limit-chars-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+<link rel="match" href="reference/hyphenate-limit-chars-001-ref.html">
+<link rel="author" href="mailto:kojii@chromium.org">
+<style>
+#container > div {
+  border: black solid 2px;
+  font-family: monospace;
+  font-size: 20px;
+  line-height: 1;
+  width: 1ch;
+  hyphens: auto;
+  hyphenate-character: '-';
+}
+</style>
+<body>
+  <div lang="en-us" id="container">
+    <div>example</div>
+    <div style="hyphenate-limit-chars: 8">example</div>
+    <div style="hyphenate-limit-chars: auto 2 2">example</div>
+    <div style="hyphenate-limit-chars: auto 3 2">example</div>
+    <div style="hyphenate-limit-chars: auto 4 2">example</div>
+    <div style="hyphenate-limit-chars: auto 5 2">example</div>
+    <div style="hyphenate-limit-chars: auto 2 3">example</div>
+    <div style="hyphenate-limit-chars: auto 2 4">example</div>
+    <div style="hyphenate-limit-chars: auto 3 4">example</div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-001.html
new file mode 100644
index 0000000000..e7ba16f7a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: no automatic hyphenation without language tagging</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-auto-001-ref.html">
+<meta name="assert" content="automatic hyphenation must not work without language tagging">
+<style>
+div {
+  width: 4ch;
+  hyphens: auto;
+}
+</style>
+
+<p>Test passes if none of the words below are hyphenated.
+<div>implementation
+initialization
+realization
+hyphenation
+anticonstitutionnellement
+intergouvernementalisation
+dichlorodiphényltrichloroéthane
+honorificabilitudinitatibus
+Wiedervereinigung
+Rechtsschutzversicherungsgesellschaften</div>
+
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-002.html
new file mode 100644
index 0000000000..490f78e94c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-002.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/hyphens-auto-002-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Although hyphenation is enabled, honoring 'auto' value for the 'hyphens' CSS property and a valid 'lang' attribute, the words fit. However, we should break preserved white spaces, honoring 'white-space: pre-wrap' to prevent overflow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.fail {
+    position: absolute;
+    background: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+.test {
+    font: 50px/1 Ahem;
+    width: 6ch;
+    color: green;
+
+    white-space: pre-wrap;
+    hyphens: auto;
+}
+</style>
+<body lang="en">
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <div class="fail"></div>
+    <div class="test">XX        XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-003.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-003.html
new file mode 100644
index 0000000000..347805bac7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-003.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto">
+<link rel="match" href="reference/hyphens-auto-002-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Although hyphenation is enabled, honoring 'auto' value for the 'hyphens' CSS property and a valid 'lang' attribute, the words fit. However, we should break after the preserved combination of white+ideographic space sequence, honoring 'white-space: normal' to prevent overflow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.fail {
+    position: absolute;
+    background: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+.test {
+    font: 50px/1 Ahem;
+    width: 4ch;
+    color: green;
+
+    hyphens: auto;
+}
+</style>
+<body lang="en">
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <div class="fail"></div>
+    <div class="test">XX &#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000; XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-004.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-004.html
new file mode 100644
index 0000000000..3d99985a00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-004.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto">
+<link rel="match" href="reference/hyphens-auto-004M-ref.html">
+<link rel="match" href="reference/hyphens-auto-004H-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="When 'hyphens' is set to 'auto' and when 'lang' attribute is also set to a valid value, then words may be broken at hyphenation opportunities determined automatically by an hyphenation resource appropriate to the language of the text involved.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border: solid 1px;
+    font: 32px/1 monospace;
+    width: 6ch;
+
+    hyphens: auto;
+}
+</style>
+<body lang="en">
+    <div class="test">regulation &#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000; implementation now</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-005.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-005.html
new file mode 100644
index 0000000000..c7176d1dfc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-005.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto">
+<link rel="match" href="reference/hyphens-auto-005M-ref.html">
+<link rel="match" href="reference/hyphens-auto-005H-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="When 'hyphens' is set to 'auto' and when 'lang' attribute is also set to a valid value, then words may be broken at hyphenation opportunities determined automatically by an hyphenation resource appropriate to the language of the text involved.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.test {
+    border: solid 1px;
+    font: 50px/1 monospace;
+    width: 4ch;
+
+    hyphens: auto;
+}
+</style>
+<body lang="en">
+    <div class="test">regulation</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-010.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-010.html
new file mode 100644
index 0000000000..8b6f15ab4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-010.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-auto-010M-ref.html">
+  <link rel="match" href="reference/hyphens-auto-010H-ref.html">
+
+  <!--
+  User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
+  when the font has the glyph, or
+  may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
+  otherwise. Some fonts will display slightly different glyphs for
+  these code points. Therefore these 2 reference files.
+  The M-ref.html reference file means the hyphen-Minus character U+002D.
+  The H-ref.html reference file means the Hyphen character U+2010.
+  -->
+
+  <meta content="When 'hyphens' is set to 'auto' and when 'lang' attribute is also set to a valid value, then words may be broken at hyphenation opportunities determined automatically by an hyphenation resource appropriate to the language of the text involved.">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      hyphens: auto;
+      width: 6ch;
+    }
+  </style>
+
+ <body lang="en">
+
+  <div>regulation implementation now</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-and-contenteditable-crash.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-and-contenteditable-crash.html
new file mode 100644
index 0000000000..e0148ddd73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-and-contenteditable-crash.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<title>CSS Text Test: Hyphenation in a contenteditable with a x20+x9+x20 trailing space sequence, makes chrome to crash</title>
+<link rel="help" href="https://crbug.com/1133254">
+<style>
+    span {
+        display: table-row;
+        hyphens: auto;
+    }
+</style>
+<div contenteditable=plaintext-only>
+    <span>XXX	 </span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control-ref.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control-ref.html
new file mode 100644
index 0000000000..7283d239d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 6.1. Hyphenation Control: the hyphens property</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style>
+code {
+  display: block;
+  hyphens: manual;
+  border: 1px solid black;
+  /* Prefer Courier New if available, as otherwise Menlo may be used,
+     and its HYPHEN and HYPHEN-MINUS glyphs don't match. */
+  font-family: Courier New, Courier, monospace;
+}
+</style>
+</head>
+<body lang="en-us">
+<!--
+  Hyphenation opportunities of the texts in this test are as follows,
+
+        frag[A]ilis[A]tic[C]ex[A]pi[A]ali
+
+  where [A] is an automatic hyphen, and [C] is a conditional hyphen.
+
+  In this test, we set width to somewhere after the conditional hyphen,
+  then we see if automatic hyphen breaks are ignored correctly.
+-->
+<code style="width:12ch;">
+fragilistic-<br />expiali
+</code>
+<br />
+<code style="width:14ch;">
+fragilistic-<br />expiali
+</code>
+<br />
+<code style="width:16ch;">
+fragilistic-<br />expiali
+</code>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control.html
new file mode 100644
index 0000000000..d3a7a607b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-control.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 6.1. Hyphenation Control: the hyphens property</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/#valdef-hyphens-auto">
+<link rel="match" href="hyphens-auto-control-ref.html">
+<meta name="assert" content="Test checks that automatic hyphenation opportunities within a word
+must be ignored if the word contains a conditional hyphen (&shy; or U+00AD), in favor of the
+conditional hyphen(s).">
+<style>
+code {
+  display: block;
+  hyphens: auto;
+  border: 1px solid black;
+  /* Prefer Courier New if available, as otherwise Menlo may be used,
+     and its HYPHEN and HYPHEN-MINUS glyphs don't match. */
+  font-family: Courier New, Courier, monospace;
+}
+</style>
+</head>
+<body lang="en-us">
+<!--
+  Hyphenation opportunities of the texts in this test are as follows,
+
+        frag[A]ilis[A]tic[C]ex[A]pi[A]ali
+
+  where [A] is an automatic hyphen, and [C] is a conditional hyphen.
+
+  In this test, we set width to somewhere after the conditional hyphen,
+  then we see if automatic hyphen breaks are ignored correctly.
+-->
+<code style="width:12ch;">
+fragilistic&shy;expiali
+</code>
+<br />
+<code style="width:14ch;">
+fragilistic&shy;expiali
+</code>
+<br />
+<code style="width:16ch;">
+fragilistic&shy;expiali
+</code>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-inline-010.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-inline-010.html
new file mode 100644
index 0000000000..3e9d7b5790
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-inline-010.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification (inline)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-auto-inline-010M-ref.html">
+  <link rel="match" href="reference/hyphens-auto-inline-010H-ref.html">
+
+  <!--
+  User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
+  when the font has the glyph, or
+  may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
+  otherwise. Some fonts will display slightly different glyphs for
+  these code points. Therefore these 2 reference files.
+  The M-ref.html reference file means the hyphen-Minus character U+002D.
+  The H-ref.html reference file means the Hyphen character U+2010.
+  -->
+
+  <meta content="When 'hyphens' is set to 'auto' and applied to an inline element and when 'lang' attribute is also set to a valid value, then words may be broken at hyphenation opportunities determined automatically by an hyphenation resource appropriate to the language of the text involved.">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 6ch;
+    }
+
+  span
+    {
+      hyphens: auto;
+    }
+  </style>
+
+ <body lang="en">
+
+  <div>There are <span>new engines now</span>.</div>
+
+  <!--
+        Expected result:
+        There
+        are
+        new
+        en-
+        gines
+        now.
+  -->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-last-word-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-last-word-001.html
new file mode 100644
index 0000000000..273f060d87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-last-word-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>CSS Text: `hyphens: auto` for last word</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+<link rel="match" href="reference/hyphens-auto-last-word-001-ref.html">
+<link rel="match" href="reference/hyphens-auto-last-word-001-ref2.html">
+<style>
+div {
+  hyphens: auto;
+  width: 5ch;
+  border: 1px solid blue;
+}
+</style>
+<body lang="en-us">
+  <div style="width: 10ch">Test example</div>
+  <div>example</div>
+  <div>1 example</div>
+  <div>1234 example</div>
+  <div>example 5678</div>
+  <div>1234 example 5678</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-1.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-1.html
new file mode 100644
index 0000000000..5a4bca4fe6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-1.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Test Reference</title>
+<style>
+  div {
+    /* No hyphens means the min-content is the whole string in this case */
+    width: min-content;
+    border: 1px solid green;
+  }
+</style>
+<div>2020-12-12</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-2.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-2.html
new file mode 100644
index 0000000000..2acdeab1b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content-ref-2.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Test Reference</title>
+<style>
+  div {
+    width: min-content;
+    border: 1px solid green;
+  }
+</style>
+<div>2020-<br>12-12</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content.html
new file mode 100644
index 0000000000..b3f7c31623
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-auto-min-content.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>min-content size should match hyphenation</title>
+<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel=author href="https://mozilla.org" title="Mozilla">
+
+<link rel=help href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1674204">
+
+<!--
+  It's ok to either break or not on the explicit hyphens, but whatever it does
+  it should match the min-content size
+-->
+<link rel=match href="hyphens-auto-min-content-ref-1.html">
+<link rel=match href="hyphens-auto-min-content-ref-2.html">
+
+<style>
+  div {
+    width: min-content;
+    hyphens: auto;
+    border: 1px solid green;
+  }
+</style>
+<div>2020-12-12</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-character.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-character.html
new file mode 100644
index 0000000000..66bf9391cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-character.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en" class="reftest-wait">
+  <link rel="author" title="Dominik Röttsches" href="mailto:drott@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-character-ref.html">
+    <meta charset="utf-8" />
+    <meta content="This test ensure that actual characters are show for the hyphen,
+     as crbug.com/1267606 illustrates how the hyphen can go missing
+     depending on character coverage API." name="assert">
+    <style>
+        @font-face {
+            font-family: roboto_hyphen;
+            src: url(resources/roboto_hyphenation_subset.ttf)
+        }
+
+        div {
+        display: block;
+            width: 40px;
+            hyphens: auto;
+            -webkit-hyphens: auto;
+            font-family: roboto_hyphen, cursive;
+        }
+    </style>
+  <body>
+    <div lang="de">
+      Donaudampfschifffahrt
+    </div>
+
+    <script>
+    document.fonts.ready.then(
+      () => { document.documentElement.classList.remove("reftest-wait"); });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-010.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-010.html
new file mode 100644
index 0000000000..b8c2d1cc3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: manual' with no explicit hyphenation opportunity (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-manual-010-ref.html">
+
+  <meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' do not explicitly define hyphenation opportunities, so it must not be hyphenated." name="assert">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 10ch;
+    }
+
+  div#test
+    {
+      hyphens: manual;
+    }
+
+  div#reference
+    {
+      hyphens: none;
+    }
+  </style>
+
+  <body lang="en">
+
+    <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles.
+
+  <div id="test">Deoxyribonucleic acid</div>
+
+  <div id="reference">Deoxyribonucleic acid</div>
+
+  <!--
+
+  Extended form of abreviation DNA
+
+  -->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-011.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-011.html
new file mode 100644
index 0000000000..066ab3494b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-011.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: manual' with 2 explicit hyphenation opportunities</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-manual-011M-ref.html">
+  <link rel="match" href="reference/hyphens-manual-011H-ref.html">
+
+  <!--
+  User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
+  when the font has the glyph, or
+  may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
+  otherwise. Some fonts will display slightly different glyphs for
+  these code points. Therefore these 2 reference files.
+  The M-ref.html reference file means the hyphen-Minus character U+002D.
+  The H-ref.html reference file means the Hyphen character U+2010.
+  -->
+
+  <meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 2 hyphenation opportunities, so it can be hyphenated. Since 9 characters can all fit inside the line box of the block box, then the word 'Deoxyribonucleic' is hyphenated only after the 2nd soft hyphen." name="assert">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      hyphens: manual;
+      width: 10ch;
+    }
+  </style>
+
+  <div>Deoxy&shy;ribo&shy;nucleic acid</div>
+
+  <!--
+        Expected result:
+        Deoxyribo-
+        nucleic
+        acid
+  -->
+
+  <!--
+
+  Extended form of abreviation DNA
+
+  -->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-012.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-012.html
new file mode 100644
index 0000000000..2dc70e79fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-012.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: manual' with 4 explicit hyphenation opportunities</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-manual-011M-ref.html">
+  <link rel="match" href="reference/hyphens-manual-011H-ref.html">
+
+  <!--
+  User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
+  when the font has the glyph, or
+  may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
+  otherwise. Some fonts will display slightly different glyphs for
+  these code points. Therefore these 2 reference files.
+  The M-ref.html reference file means the hyphen-Minus character U+002D.
+  The H-ref.html reference file means the Hyphen character U+2010.
+  -->
+
+  <meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 4 hyphenation opportunities. Since 9 characters can all fit inside the line box of the block box, then the word 'Deoxyribonucleic' is hyphenated only after the 3rd soft hyphen." name="assert">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      hyphens: manual;
+      width: 10ch;
+    }
+  </style>
+
+  <div>Deo&shy;xy&shy;ribo&shy;nu&shy;cleic acid</div>
+
+  <!--
+        Expected result:
+        Deoxyribo-
+        nucleic
+        acid
+  -->
+
+  <!--
+
+  Extended form of abreviation DNA
+
+  -->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-013.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-013.html
new file mode 100644
index 0000000000..fcd66d8478
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-013.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: manual' with 1 explicit hyphenation opportunity</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-manual-013M-ref.html">
+  <link rel="match" href="reference/hyphens-manual-013H-ref.html">
+
+  <!--
+  User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
+  when the font has the glyph, or
+  may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
+  otherwise. Some fonts will display slightly different glyphs for
+  these code points. Therefore these 2 reference files.
+  The M-ref.html reference file means the hyphen-Minus character U+002D.
+  The H-ref.html reference file means the Hyphen character U+2010.
+  -->
+
+  <meta content="When 'hyphens' is set to 'manual', then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 1 and only 1 hyphenation opportunity, so it can be hyphenated only at such point." name="assert">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      hyphens: manual;
+      width: 10ch;
+    }
+  </style>
+
+  <div>Deoxy&shy;ribonucleic acid</div>
+
+  <!--
+        Expected result:
+        Deoxy-
+        ribonucleic
+        acid
+  -->
+
+  <!--
+
+  Extended form of abreviation DNA
+
+  -->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-010.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-010.html
new file mode 100644
index 0000000000..121473e7d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-010.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: manual' with no explicit hyphenation opportunity (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-manual-inline-010-ref.html">
+
+  <meta content="When 'hyphens' is set to 'manual' and applied to an inline element, then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' do not explicitly define hyphenation opportunities, so it must not be hyphenated." name="assert">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 10ch;
+    }
+
+  span#test
+    {
+      hyphens: manual;
+    }
+
+  div#reference
+    {
+      hyphens: none;
+    }
+  </style>
+
+  <body lang="en">
+
+    <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles.
+
+  <div>DNA <span id="test">means Deoxyribonucleic acid</span>.</div>
+
+  <div id="reference">DNA means Deoxyribonucleic acid.</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-011.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-011.html
new file mode 100644
index 0000000000..ef10342b53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-011.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: manual' with 2 explicit hyphenation opportunities (inline)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-manual-inline-011M-ref.html">
+  <link rel="match" href="reference/hyphens-manual-inline-011H-ref.html">
+
+  <!--
+  User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
+  when the font has the glyph, or
+  may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
+  otherwise. Some fonts will display slightly different glyphs for
+  these code points. Therefore these 2 reference files.
+  The M-ref.html reference file means the hyphen-Minus character U+002D.
+  The H-ref.html reference file means the Hyphen character U+2010.
+  -->
+
+  <meta content="When 'hyphens' is set to 'manual' and applied to an inline element, then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 2 hyphenation opportunities, so it can be hyphenated. Since 9 characters can all fit inside the line box of the block box, then the word 'Deoxyribonucleic' is hyphenated only after the 2nd soft hyphen." name="assert">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 10ch;
+    }
+
+  span
+    {
+      hyphens: manual;
+    }
+  </style>
+
+  <div>DNA <span>means Deoxy&shy;ribo&shy;nucleic acid</span>.</div>
+
+  <!--
+        Expected result:
+        DNA means
+        Deoxyribo-
+        nucleic
+        acid.
+  -->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-012.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-012.html
new file mode 100644
index 0000000000..e3f4f72763
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-manual-inline-012.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: manual' with 4 explicit hyphenation opportunities (inline)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-manual-inline-012M-ref.html">
+  <link rel="match" href="reference/hyphens-manual-inline-012H-ref.html">
+
+  <!--
+  User agents may use U+2010 HYPHEN <https://codepoints.net/U+2010>
+  when the font has the glyph, or
+  may use U+002D HYPHEN-MINUS <https://codepoints.net/U+002d>
+  otherwise. Some fonts will display slightly different glyphs for
+  these code points. Therefore these 2 reference files.
+  The M-ref.html reference file means the hyphen-Minus character U+002D.
+  The H-ref.html reference file means the Hyphen character U+2010.
+  -->
+
+  <meta content="When 'hyphens' is set to 'manual' and applied to an inline element, then words can be hyphenated only if characters inside the words explicitly define hyphenation opportunities. In this test, the characters inside the word 'Deoxyribonucleic' explicitly define 4 hyphenation opportunities. Since 'Deoxy' has 5 characters and 'Deoxyribo' has 9 characters and since the content width of the block box can take 8 characters, then a soft hyphen will occur after 'Deoxy'. Since 'ribonu' has 6 characters and 'ribonucleic' has 11 characters and since the content width of the block box can take 8 characters, then a soft hyphen will occur after 'ribonu'." name="assert">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 8ch;
+    }
+
+  span
+    {
+      hyphens: manual;
+    }
+  </style>
+
+  <div>DNA <span>means Deo&shy;xy&shy;ribo&shy;nu&shy;cleic acid</span>.</div>
+
+  <!--
+        Expected result:
+        DNA
+        means
+        Deoxy-
+        ribonu-
+        cleic
+        acid.
+  -->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-011.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-011.html
new file mode 100644
index 0000000000..bbcb1a4c7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-011.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: none' with explicit hyphenation opportunities</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-manual-010-ref.html">
+
+  <meta content="This test checks that, when 'hyphens' is set to 'none', then long words are not hyphenated, even if characters inside long words explicitly define hyphenation opportunities." name="assert">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 10ch;
+    }
+
+  div#test
+    {
+      hyphens: none;
+    }
+  </style>
+
+  <body>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles.
+
+  <div id="test">Deoxy&shy;ribo&shy;nucleic acid</div>
+
+  <div id="reference">Deoxyribonucleic acid</div>
+
+  <!--
+
+  Extended form of abreviation DNA
+
+  -->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-012.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-012.html
new file mode 100644
index 0000000000..50930803d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-012.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: none', hyphen-minus character and line wrapping</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-auto-010M-ref.html">
+
+  <meta content="This test checks that 'hyphens: none' does not suppress line wrapping after encountering an actual hyphen-minus character (U+002D).">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      hyphens: none;
+      width: 6ch;
+    }
+  </style>
+
+  <div>regu&#x002D;lation imple&#x002D;menta&#x002D;tion now</div>
+
+  <!--
+        Expected result:
+        regu-
+        lation
+        imple-
+        menta-
+        tion
+  -->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-013.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-013.html
new file mode 100644
index 0000000000..b0adfb027b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-013.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'hyphens: none', hyphen character and line wrapping</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+  <link rel="match" href="reference/hyphens-auto-010H-ref.html">
+
+  <meta content="This test checks that 'hyphens: none' does not suppress line wrapping after encountering an actual hyphen character (U+2010).">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      hyphens: none;
+      width: 6ch;
+    }
+  </style>
+
+  <div>regu&#x2010;lation imple&#x2010;menta&#x2010;tion now</div>
+
+  <!--
+        Expected result:
+        regu-
+        lation
+        imple-
+        menta-
+        tion
+  -->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-014.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-014.html
new file mode 100644
index 0000000000..9f5c6880ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-014.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Line breaking with floats and disabled hyphenation </title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-none">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="A span with hypens 'none' is wrapped based on the available space left by a float image.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div { font: 20px/1 Ahem; }
+img { float:right; }
+.test {
+    max-width: 100px;
+    color: green;
+}
+span { hyphens: none; }
+.ref {
+    position: absolute;
+    background: green linear-gradient(red, red) 2ch 0/3ch 3ch no-repeat;
+    color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div class="ref">XX<br>X</br></div>
+<div class="test">
+  <img src="/css/support/60x60-green.png" alt="">
+  <span>XX X</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-015.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-015.html
new file mode 100644
index 0000000000..10c90b119e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-015.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Line breaking with floats and disabled hyphenation </title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<link rel="help" title="5.4. Hyphenation: the hyphens property" href="https://drafts.csswg.org/css-text-3/#hyphenation">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-manual">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="A span with hypens 'none' is wrapped in multiple lines based on the available space left by a float image.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div { font: 20px/1 Ahem; }
+img { float:right; }
+.test {
+    max-width: 200px;
+    color: green;
+}
+span { hyphens: none; }
+.ref {
+    position: absolute;
+    background: green linear-gradient(red, red) 7ch 0/3ch 3ch no-repeat;
+    color: red;
+    width: 200px;
+    height: 200px;
+    z-index: -1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="ref">XX X<br>XXX</br>XXXX XX<br>XXX</div>
+<div class="test">
+  <img src="/css/support/60x60-green.png" alt="">
+  <span>XX X XXX XXXX XX XXX</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-shy-on-2nd-line-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-shy-on-2nd-line-001.html
new file mode 100644
index 0000000000..3efaa54d4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-none-shy-on-2nd-line-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>CSS Text: `hyphens: none` disables soft hyphens on 2nd and later lines</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-hyphens-none">
+<link rel="match" href="reference/hyphens-none-shy-on-2nd-line-001-ref.html">
+<style>
+.target {
+  hyphens: none;
+  width: 10ch;
+}
+</style>
+<div class="target">
+  12345678
+  Deoxy&shy;ribo&shy;nucleic
+  Deoxy&shy;ribo&shy;nucleic
+  12345678
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-001.html
new file mode 100644
index 0000000000..ebc13c0158
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: manual hyphenation and out-of-flow</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-out-of-flow-001-ref.html">
+<meta name="assert" content="the presence of an out of flow element has no effect on manual hyhenation">
+<style>
+span {
+  position: absolute;
+  color: transparent;
+}
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: manual;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div>high&shy;way</div>
+<div><span>abspos</span>high&shy;way</div>
+<div>h<span>abspos</span>igh&shy;way</div>
+<div>high<span>abspos</span>&shy;way</div>
+<div>high&shy;<span>abspos</span>way</div>
+<div>high&shy;wa<span>abspos</span>y</div>
+<div>high&shy;way<span>abspos</span></div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-002.html
new file mode 100644
index 0000000000..60e0e3078b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-out-of-flow-002.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: auto hyphenation and out-of-flow</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-span-002-ref.html">
+<meta name="assert" content="the presence of an out of flow element has no effect on automatic hyhenation">
+<style>
+span {
+  position: absolute;
+  color: transparent;
+}
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: auto;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div lang=en>highway</div>
+<div lang=en><span>abspos</span>highway</div>
+<div lang=en>h<span>abspos</span>ighway</div>
+<div lang=en>high<span>abspos</span>way</div>
+<div lang=en>high<span>abspos</span>way</div>
+<div lang=en>highwa<span>abspos</span>y</div>
+<div lang=en>highway<span>abspos</span></div>
+
+<!--
+This test assumes the presence of "highway"
+with a hyphenation point between "high" and "way"
+in the hyphenation dictionary for English
+in order to be useful,
+but that assumption is not necessary for the test to be correct:
+if the word doesn't hyphenate,
+it will not hyphenate in any of the cases.
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-overflow-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-overflow-001.html
new file mode 100644
index 0000000000..4154e5e118
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-overflow-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>CSS Text Test: Test when soft-hyphen overflows</title>
+<link rel="match" href="reference/hyphens-overflow-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="author" href="mailto:kojii@chromium.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 10px;
+  font-family: Ahem;
+  width: 5.1ch;
+  border: 1px solid blue;
+}
+</style>
+<body>
+  <div>12 4&shy;xx</div>
+  <div>12 45&shy;xx</div>
+  <div>12 456&shy;xx</div>
+  <div>1234&shy;xx</div>
+  <div>12345&shy;xx</div>
+  <div>123456&shy;xx</div>
+
+  <div style="width: 10ch"><span>ren&shy;for&shy;cer</span>99999</div>
+  <div><span>00&shy;1</span>222</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-punctuation-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-punctuation-001.html
new file mode 100644
index 0000000000..feea83635c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-punctuation-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Text Test: Automatic hyphenation for trailing punctuation characters</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-punctuation-001-ref.html">
+<style>
+div {
+  hyphens: auto;
+  width: 5ch;
+  border: 1px solid blue;
+}
+</style>
+<body lang="en-us">
+  <div>00000 example 00000</div>
+  <div>00000 example. 00000</div>
+  <div>00000 (example 00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-001.html
new file mode 100644
index 0000000000..0cd2243bda
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: hyphenation and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-shaping-001-ref.html">
+<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when the word is hyphenated.">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 3em;
+    line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */
+    width: 0;
+    hyphens: manual;
+    margin: 1em auto;
+  }
+  .ref { color: orange; }
+  span { color: transparent; }
+</style>
+
+<p>Test passes if the black text is identical to the orange text (except the color).
+
+<div dir=rtl lang=ug class=ref>&#xFEA9;&#xFE8D;&#xFEE3;&#xFEF4;<br>&#xFEAA;&#xFEEF;</div>
+
+<div dir=rtl lang=ug id=test>دامي<span>&shy;</span>دى</div>
+<!--
+Using an invisible hyphen because it isn't certain what character the UA will actually use,
+and we shouldn't fail the reftest because of a mismatch there.
+See also hyphens-shaping-002.html to check that some character is inserted.
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-002.html
new file mode 100644
index 0000000000..57d23e585e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-shaping-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: hyphenation and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphens-property">
+<link rel="mismatch" href="reference/hyphens-shaping-002-ref.html">
+<meta name="assert" content="Checks that some kind of hyphen does get inserted in Uyghur. (Complement fo hyphens-shaping-001.html)">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  /* The main text is invisible,
+     but we want to give the UA a chance to use the right hyphen,
+     which may be font dependent.
+   */
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+    hyphens: manual;
+    margin: auto;
+    width: 0;
+  }
+  #test { color: transparent; }
+  span { color: black; }
+</style>
+
+<p>Test passes if there is something below:
+
+<div dir=rtl lang=ug id=test>دامي<span>&shy;</span>دى</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-001.html
new file mode 100644
index 0000000000..d60836f6f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: manual hyphen and span</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-span-001-ref.html">
+<meta name="assert" content="the presence of an unstyled inline element has no effect on text in general and on manual hyhenation in particular">
+<style>
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: manual;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div>high&shy;way</div>
+<div><span>high</span>&shy;way</div>
+<div><span>high&shy;</span>way</div>
+<div>high<span>&shy;</span>way</div>
+<div>high<span>&shy;way</span></div>
+<div>high&shy;<span>way</span></div>
+<div><span>high</span>&shy;<span>way</span></div>
+<div><span>high&shy;wa</span>y</div>
+<div><span>hi</span>gh&shy;way</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-002.html
new file mode 100644
index 0000000000..0a80ec051f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-span-002.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: auto hyphen and span</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-span-002-ref.html">
+<meta name="assert" content="the presence of an unstyled inline element has no effect on text in general and on manual hyhenation in particular">
+<style>
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: auto;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div lang=en>highway</div>
+<div lang=en><span>high</span>way</div>
+<div lang=en>high<span></span>way</div>
+<div lang=en>high<span>way</span></div>
+<div lang=en><span>high</span><span>way</span></div>
+<div lang=en><span>highwa</span>y</div>
+<div lang=en><span>hi</span>ghway</div>
+
+<!--
+This test assumes the presence of "highway"
+with a hyphenation point between "high" and "way"
+in the hyphenation dictionary for English
+in order to be useful,
+but that assumption is not necessary for the test to be correct:
+if the word doesn't hyphenate,
+it will not hyphenate in any of the cases.
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-001.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-001.html
new file mode 100644
index 0000000000..baececdb0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphenation">
+<link rel="match" href="reference/hyphens-vertical-001-ref.html">
+<meta name="assert" content="Check rendering of soft-hyphen character in vertical writing mode">
+
+<style>
+    div {
+        font: 16px monospace;
+        writing-mode: vertical-rl;
+        border: 1px solid gray;
+        margin: 10px;
+        padding: 2px;
+        hyphens: manual;
+        width: 3em;
+        height: 9ch;
+    }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+    hyphen&shy;ation
+</div>
+
+<div>
+    hyphen&#x2010;<br>ation
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-002.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-002.html
new file mode 100644
index 0000000000..e449526344
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphenation">
+<link rel="match" href="reference/hyphens-vertical-002-ref.html">
+<meta name="assert" content="Check rendering of soft-hyphen character in vertical writing mode">
+
+<style>
+    div {
+        font: 16px monospace;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        border: 1px solid gray;
+        margin: 10px;
+        padding: 2px;
+        hyphens: manual;
+        width: 3em;
+        height: 9ch;
+    }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+    hyphen&shy;ation
+</div>
+
+<div>
+    hyphen&#x2010;<br>ation
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-003.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-003.html
new file mode 100644
index 0000000000..2b1c6271c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-003.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphenation">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
+<link rel="match" href="reference/hyphens-vertical-003-ref.html">
+<meta name="assert" content="Check rendering of soft-hyphen character in vertical writing mode">
+
+<style>
+    div {
+        font: 16px monospace;
+        writing-mode: vertical-rl;
+        border: 1px solid gray;
+        margin: 10px;
+        padding: 2px;
+        hyphens: manual;
+        width: 3em;
+        height: 9ch;
+        hyphenate-character: "+=";
+    }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+    hyphen&shy;ation
+</div>
+
+<div>
+    hyphen+=<br>ation
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-004.html b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-004.html
new file mode 100644
index 0000000000..cee7718b9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/hyphens-vertical-004.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphenation">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
+<link rel="match" href="reference/hyphens-vertical-004-ref.html">
+<meta name="assert" content="Check rendering of soft-hyphen character in vertical writing mode">
+
+<style>
+    div {
+        font: 16px monospace;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        border: 1px solid gray;
+        margin: 10px;
+        padding: 2px;
+        hyphens: manual;
+        width: 3em;
+        height: 9ch;
+        hyphenate-character: "+=";
+    }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+    hyphen&shy;ation
+</div>
+
+<div>
+    hyphen+=<br>ation
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-001.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-001.html
new file mode 100644
index 0000000000..bfcd2f1362
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Dutch</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-001-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-001-alt-ref.html">
+<meta name="assert" content="Language specific rules must be taken into account">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 5ch;
+  hyphens: auto;
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=nl class=test>cafeetje</div>
+<hr>
+<div lang=nl>café&#x2010;<br>tje</div>
+<hr>
+<div lang=nl>café-<br>tje</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-002.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-002.html
new file mode 100644
index 0000000000..9e2a16ee3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Hungarian</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-002-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-002-alt-ref.html">
+<meta name="assert" content="Language specific rules must be taken into account">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 5ch;
+  hyphens: auto;
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=hu class=test>Összeg</div>
+<hr>
+<div lang=hu>Ösz&#x2010;<br>szeg</div>
+<hr>
+<div lang=hu>Ösz-<br>szeg</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-003.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-003.html
new file mode 100644
index 0000000000..70e68db8a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Pinyin</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-003-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-003-alt-ref.html">
+<meta name="assert" content="Language specific rules must be taken into account">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 3ch;
+  hyphens: auto;
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=zh-Latn-pinyin class=test>tú’àn</div>
+<hr>
+<div lang=zh-Latn-pinyin>tú&#x2010;<br>àn</div>
+<hr>
+<div lang=zh-Latn-pinyin>tú-<br>àn</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-004.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-004.html
new file mode 100644
index 0000000000..5da4e438d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-004.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-004-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-004-alt-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-004-alt-2-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-004-alt-3-ref.html">
+<meta name="assert" content="Language specific rules must be taken into account">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 8ch;
+  hyphens: auto;
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=zh-Latn-pinyin class=test>àizēng&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>-fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-005.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-005.html
new file mode 100644
index 0000000000..b0ebdb9fd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-005.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Uyghur</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-005-ref.html">
+<meta name="assert" content="Language specific rules must be taken into account">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 4ch;
+  hyphens: auto;
+  color: blue;
+}
+section { max-width: 20em; }
+</style>
+
+<p>Test passes if the blue text and orange text are identical (except for the color).
+<section dir=rtl lang=ug>
+<div class=test>داميدى</div>
+<div>دامي&zwj;&#x640;<br>&zwj;دى</div>
+<section>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-006.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-006.html
new file mode 100644
index 0000000000..7b252f8150
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-auto-006.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Dutch</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-006-ref.html">
+<meta name="assert" content="Depending on the language, the hyphenation character may vary.">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 6ch;
+  hyphens: auto;
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to the orange text.
+<div lang=cr class=test>ᑲᓯᑕᓂᐘᓂᓂᐠ</div>
+<hr>
+<div lang=cr>ᑲᓯᑕᓂ᐀<br>ᐘᓂᓂᐠ</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-001.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-001.html
new file mode 100644
index 0000000000..2bb63fc93e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Dutch</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-001-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-001-alt-ref.html">
+<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens">
+<meta name="flags" content="should">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 5ch;
+  hyphens: manual;
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=nl class=test>cafee&shy;tje</div>
+<hr>
+<div lang=nl>café&#x2010;<br>tje</div>
+<hr>
+<div lang=nl>café-<br>tje</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-002.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-002.html
new file mode 100644
index 0000000000..a5d16845e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Hungarian</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-002-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-002-alt-ref.html">
+<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens">
+<meta name="flags" content="should">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 5ch;
+  hyphens: manual;
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=hu class=test>Ös&shy;szeg</div>
+<hr>
+<div lang=hu>Ösz&#x2010;<br>szeg</div>
+<hr>
+<div lang=hu>Ösz-<br>szeg</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-003.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-003.html
new file mode 100644
index 0000000000..aaa15c5077
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Pinyin</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-003-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-003-alt-ref.html">
+<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens">
+<meta name="flags" content="should">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 3ch;
+  hyphens: manual;
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=zh-Latn-pinyin class=test>tú&shy;’àn</div>
+<hr>
+<div lang=zh-Latn-pinyin>tú&#x2010;<br>àn</div>
+<hr>
+<div lang=zh-Latn-pinyin>tú-<br>àn</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-004.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-004.html
new file mode 100644
index 0000000000..ac433a8275
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-004.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-004-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-004-alt-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-004-alt-2-ref.html">
+<link rel="match" href="reference/hyphens-i18n-auto-004-alt-3-ref.html">
+<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens">
+<meta name="flags" content="should">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 8ch;
+  hyphens: manual;
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=zh-Latn-pinyin class=test>àizēng&shy;&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>-fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-005.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-005.html
new file mode 100644
index 0000000000..7e6bb4bc86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/hyphens-i18n-manual-005.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Uyghur</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/hyphens-i18n-auto-005-ref.html">
+<meta name="assert" content="Language specific rules should be taken into account when using soft hyphens (and the correct character must be used)">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  width: 4ch;
+  hyphens: manual;
+  color: blue;
+}
+section { max-width: 20em; }
+</style>
+
+<p>Test passes if the blue text and orange text are identical (except for the color).
+<section dir=rtl lang=ug>
+<div class=test>دامي&shy;دى</div>
+<div>دامي&zwj;&#x640;<br>&zwj;دى</div>
+<section>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-alt-ref.html
new file mode 100644
index 0000000000..bd6eb022ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-alt-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Dutch</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=nl class=test>café-<br>tje</div>
+<hr>
+<div lang=nl>café&#x2010;<br>tje</div>
+<hr>
+<div lang=nl>café-<br>tje</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-ref.html
new file mode 100644
index 0000000000..7926b27593
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Dutch</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=nl class=test>café&#x2010;<br>tje</div>
+<hr>
+<div lang=nl>café&#x2010;<br>tje</div>
+<hr>
+<div lang=nl>café-<br>tje</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-alt-ref.html
new file mode 100644
index 0000000000..96daadf378
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-alt-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Hungarian</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=hu class=test>Ösz-<br>szeg</div>
+<hr>
+<div lang=hu>Ösz&#x2010;<br>szeg</div>
+<hr>
+<div lang=hu>Ösz-<br>szeg</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-ref.html
new file mode 100644
index 0000000000..4da351cda4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-002-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Hungarian</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=hu class=test>Ösz&#x2010;<br>szeg</div>
+<hr>
+<div lang=hu>Ösz&#x2010;<br>szeg</div>
+<hr>
+<div lang=hu>Ösz-<br>szeg</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-alt-ref.html
new file mode 100644
index 0000000000..8880fc2426
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-alt-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Pinyin</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<meta name="assert" content="Language specific rules must be taken into account">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=zh-Latn-pinyin class=test>tú-<br>àn</div>
+<hr>
+<div lang=zh-Latn-pinyin>tú&#x2010;<br>àn</div>
+<hr>
+<div lang=zh-Latn-pinyin>tú-<br>àn</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-ref.html
new file mode 100644
index 0000000000..6aaa73d92a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-003-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Pinyin</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<meta name="assert" content="Language specific rules must be taken into account">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=zh-Latn-pinyin class=test>tú&#x2010;<br>àn</div>
+<hr>
+<div lang=zh-Latn-pinyin>tú&#x2010;<br>àn</div>
+<hr>
+<div lang=zh-Latn-pinyin>tú-<br>àn</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-2-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-2-ref.html
new file mode 100644
index 0000000000..1379e21567
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=zh-Latn-pinyin class=test>àizēng&#x2010;<br>-fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>-fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-3-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-3-ref.html
new file mode 100644
index 0000000000..3b4e7fafae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-3-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=zh-Latn-pinyin class=test>àizēng-<br>-fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>-fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-ref.html
new file mode 100644
index 0000000000..c6543cd9c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-alt-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=zh-Latn-pinyin class=test>àizēng-<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>-fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-ref.html
new file mode 100644
index 0000000000..f691565fee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-004-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Pinyin-hyphen</title>
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to one of the orange texts (which may be identical to eachother, or may have a different hyphen).
+<div lang=zh-Latn-pinyin class=test>àizēng&#x2010;<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>&#x2010;fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng&#x2010;<br>-fēnmíng</div>
+<hr>
+<div lang=zh-Latn-pinyin>àizēng-<br>-fēnmíng</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-005-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-005-ref.html
new file mode 100644
index 0000000000..56254aa55d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-005-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: language specific hyphenation—Uyghur</title>
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+section { max-width: 20em; }
+</style>
+
+<p>Test passes if the blue text and orange text are identical (except for the color).
+<section dir=rtl lang=ug>
+<div class=test>دامي&zwj;&#x640;<br>&zwj;دى</div>
+<div>دامي&zwj;&#x640;<br>&zwj;دى</div>
+<section>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-006-ref.html b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-006-ref.html
new file mode 100644
index 0000000000..5b960870ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/i18n/reference/hyphens-i18n-auto-006-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  font-size: 3em;
+  color: orange;
+}
+.test {
+  color: blue;
+}
+</style>
+
+<p>Test passes if the blue text is identical to the orange text.
+<div lang=cr class=test>ᑲᓯᑕᓂ᐀<br>ᐘᓂᓂᐠ</div>
+<hr>
+<div lang=cr>ᑲᓯᑕᓂ᐀<br>ᐘᓂᓂᐠ</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-001-ref.html
new file mode 100644
index 0000000000..3014cb9fb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+  font: 16px monospace;
+}
+</style>
+
+<p>Test passes if the words below are broken at hyphenation positions but <b>no visible hyphens appear</b>.
+
+<div lang="en">
+im<br>ple<br>men<br>ta<br>tion<br><br>
+ini<br>tial<br>iza<br>tion<br><br>
+real<br>iza<br>tion<br><br>
+hy<br>phen<br>ation
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-003-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-003-ref.html
new file mode 100644
index 0000000000..f8bce3c302
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-003-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+  font: 16px monospace;
+}
+</style>
+
+<p>Test passes if the words below are hyphenated <b>using a bullet (&#x2022;) character</b>.
+
+<div lang="en">
+im•<br>ple•<br>men•<br>ta•<br>tion<br><br>
+ini•<br>tial•<br>iza•<br>tion<br><br>
+real•<br>iza•<br>tion<br><br>
+hy•<br>phen•<br>ation
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-004-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-004-ref.html
new file mode 100644
index 0000000000..399f867210
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-004-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+  font: 16px monospace;
+}
+</style>
+
+<p>Test passes if the words below are hyphenated <b>using the string "/-/"</b>.
+
+<div lang="en">
+im/-/<br>ple/-/<br>men/-/<br>tation<br><br>
+ini/-/<br>tial/-/<br>iza/-/<br>tion<br><br>
+re/-/<br>al/-/<br>iza/-/<br>tion<br><br>
+hy/-/<br>phen/-/<br>ation
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-005-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-005-ref.html
new file mode 100644
index 0000000000..50a0ebd585
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-005-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+  font: 32px sans-serif;
+  margin-left: 10ch;
+  width: 3ch;
+}
+</style>
+
+<p>Test passes if the word below is hyphenated
+using a right-to-left <i>space+kashida</i> sequence "<span dir=rtl>&nbsp;&#x0640;</span>",
+and shaping is <i>not</i> interrupted.
+
+<div dir=rtl lang=ug>
+قىل&#x200d;&nbsp;&#x640;<br>&#x200d;مىغانلىقى
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-limit-chars-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-limit-chars-001-ref.html
new file mode 100644
index 0000000000..c491fbca27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-limit-chars-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+<link rel="author" href="mailto:kojii@chromium.org">
+<style>
+#container > div {
+  border: black solid 2px;
+  font-family: monospace;
+  font-size: 20px;
+  line-height: 1;
+  width: 1ch;
+}
+</style>
+<body>
+  <div lang="en-us" id="container">
+    <div>ex-<br>am-<br>ple</div>
+    <div>example</div>
+    <div>ex-<br>am-<br>ple</div>
+    <div>exam-<br>ple</div>
+    <div>exam-<br>ple</div>
+    <div>example</div>
+    <div>ex-<br>am-<br>ple</div>
+    <div>ex-<br>ample</div>
+    <div>example</div>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-001-ref.html
new file mode 100644
index 0000000000..c1355d0abb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div { white-space: pre; }
+</style>
+
+<p>Test passes if none of the words below are hyphenated.
+<div>implementation
+initialization
+realization
+hyphenation
+anticonstitutionnellement
+intergouvernementalisation
+dichlorodiphényltrichloroéthane
+honorificabilitudinitatibus
+Wiedervereinigung
+Rechtsschutzversicherungsgesellschaften</div>
+
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-002-ref.html
new file mode 100644
index 0000000000..dece5f7394
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-002-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004H-ref.html
new file mode 100644
index 0000000000..cb26d85e8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004H-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+  <style>
+  div
+    {
+      border: solid 1px;
+      font: 32px/1 monospace;
+      width: 6ch;
+    }
+  </style>
+
+ <body lang="en">
+
+  <div>regu&#x002D;<br>lation<br><br>imple&#x002D;<br>menta&#x002D;<br>tion<br>now</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004M-ref.html
new file mode 100644
index 0000000000..4e234bf76d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004M-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+  <style>
+  div
+    {
+      border: solid 1px;
+      font: 32px/1 monospace;
+      width: 6ch;
+    }
+  </style>
+
+ <body lang="en">
+
+  <div>regu&#x2010;<br>lation<br><br>imple&#x2010;<br>menta&#x2010;<br>tion<br>now</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005H-ref.html
new file mode 100644
index 0000000000..6bd86d36aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005H-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+  <style>
+  div
+    {
+      border: solid 1px;
+      font: 50px/1 monospace;
+      width: 4ch;
+    }
+  </style>
+
+ <body>
+
+  <div>reg&#x002D;<br>ula&#x002D;<br>tion</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005M-ref.html
new file mode 100644
index 0000000000..38b00cef8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005M-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+  <style>
+  div
+    {
+      border: solid 1px;
+      font: 50px/1 monospace;
+      width: 4ch;
+    }
+  </style>
+
+ <body>
+
+  <div>reg&#x2010;<br>ula&#x2010;<br>tion</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010H-ref.html
new file mode 100644
index 0000000000..6d453b9560
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010H-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 6ch;
+    }
+  </style>
+
+ <body lang="en">
+
+  <div>regu&#x2010;<br>lation<br>imple&#x2010;<br>menta&#x2010;<br>tion<br>now</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010M-ref.html
new file mode 100644
index 0000000000..27adc3f08f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010M-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 6ch;
+    }
+  </style>
+
+ <body lang="en">
+
+  <div>regu&#x002D;<br>lation<br>imple&#x002D;<br>menta&#x002D;<br>tion<br>now</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010H-ref.html
new file mode 100644
index 0000000000..0a3aedf286
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010H-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 6ch;
+    }
+  </style>
+
+ <body lang="en">
+
+  <div>There<br>are<br>new<br>en&#x2010;<br>gines<br>now.</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010M-ref.html
new file mode 100644
index 0000000000..59f5247e50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010M-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 6ch;
+    }
+  </style>
+
+ <body lang="en">
+
+  <div>There<br>are<br>new<br>en&#x002D;<br>gines<br>now.</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref.html
new file mode 100644
index 0000000000..7fe23fe75d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+div {
+  width: 5ch;
+  border: 1px solid blue;
+}
+</style>
+<body lang="en-us">
+  <div style="width: 10ch">Test ex&shy;am&shy;ple</div>
+  <div>ex&shy;am&shy;ple</div>
+  <div>1 ex&shy;am&shy;ple</div>
+  <div>1234 ex&shy;am&shy;ple</div>
+  <div>ex&shy;am&shy;ple 5678</div>
+  <div>1234 ex&shy;am&shy;ple 5678</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref2.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref2.html
new file mode 100644
index 0000000000..9c9f41312e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+div {
+  width: 5ch;
+  border: 1px solid blue;
+}
+</style>
+<body lang="en-us">
+  <div style="width: 10ch">Test example</div>
+  <div>ex&shy;am&shy;ple</div>
+  <div>1<br>ex&shy;am&shy;ple</div>
+  <div>1234 ex&shy;am&shy;ple</div>
+  <div>ex&shy;am&shy;ple 5678</div>
+  <div>1234 ex&shy;am&shy;ple 5678</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-character-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-character-ref.html
new file mode 100644
index 0000000000..7e590a1f75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-character-ref.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en" class="reftest-wait">
+  <link rel="author" title="Dominik Röttsches" href="mailto:drott@chromium.org">
+    <meta charset="utf-8" />
+    <style>
+        @font-face {
+            font-family: roboto_hyphen;
+            src: url(../resources/roboto_hyphenation_subset.ttf)
+        }
+
+        div {
+        width: 30px;
+            hyphens: auto;
+            -webkit-hyphens: auto;
+            font-family: roboto_hyphen, cursive;
+        }
+    </style>
+  <body>
+    <div>
+    Do-<br>
+    nau-<br>
+    dampf-<br>
+    schiff-<br>
+    fahrt
+    </div>
+    <script>
+    document.fonts.ready.then(
+      () => { document.documentElement.classList.remove("reftest-wait"); });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-010-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-010-ref.html
new file mode 100644
index 0000000000..f79ce17a4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-010-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      hyphens: none;
+      margin-bottom: 0.25em;
+      width: 10ch;
+    }
+  </style>
+
+  <body lang="en">
+
+    <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles.
+
+  <div>Deoxyribonucleic acid</div>
+
+  <div>Deoxyribonucleic acid</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011H-ref.html
new file mode 100644
index 0000000000..99612206f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011H-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 10ch;
+    }
+  </style>
+
+  <div>Deoxyribo&#x2010;<br>nucleic acid</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011M-ref.html
new file mode 100644
index 0000000000..191095a413
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011M-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 10ch;
+    }
+  </style>
+
+  <div>Deoxyribo&#x002D;<br>nucleic acid</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013H-ref.html
new file mode 100644
index 0000000000..12ad0ed505
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013H-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 10ch;
+    }
+  </style>
+
+  <div>Deoxy&#x2010;<br>ribonucleic acid</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013M-ref.html
new file mode 100644
index 0000000000..3c7121242b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013M-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 10ch;
+    }
+  </style>
+
+  <div>Deoxy&#x002D;<br>ribonucleic acid</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-010-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-010-ref.html
new file mode 100644
index 0000000000..a55fe859ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-010-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      hyphens: none;
+      margin-bottom: 0.25em;
+      width: 10ch;
+    }
+  </style>
+
+  <body lang="en">
+
+    <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles.
+
+  <div>DNA means Deoxyribonucleic acid.</div>
+
+  <div>DNA means Deoxyribonucleic acid.</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011H-ref.html
new file mode 100644
index 0000000000..0cd1ef9f9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011H-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 10ch;
+    }
+  </style>
+
+  <div>DNA means<br>Deoxyribo&#x2010;<br>nucleic<br>acid.</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011M-ref.html
new file mode 100644
index 0000000000..836919648e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011M-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 10ch;
+    }
+  </style>
+
+  <div>DNA means<br>Deoxyribo&#x002D;<br>nucleic<br>acid.</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012H-ref.html
new file mode 100644
index 0000000000..8b2ff04ade
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012H-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 8ch;
+    }
+  </style>
+
+  <div>DNA<br>means<br>Deoxy&#x2010;<br>ribonu&#x2010;<br>cleic<br>acid.</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012M-ref.html
new file mode 100644
index 0000000000..0c8db033c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012M-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 8ch;
+    }
+  </style>
+
+  <div>DNA<br>means<br>Deoxy&#x002D;<br>ribonu&#x002D;<br>cleic<br>acid.</div>
+
+<!--
+
+  Hyphen-minus == &#x002D; == &#0045;
+
+  Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-none-shy-on-2nd-line-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-none-shy-on-2nd-line-001-ref.html
new file mode 100644
index 0000000000..932330e927
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-none-shy-on-2nd-line-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+.target {
+  width: 10ch;
+}
+</style>
+<div class="target">
+  12345678
+  Deoxyribonucleic
+  Deoxyribonucleic
+  12345678
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-out-of-flow-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-out-of-flow-001-ref.html
new file mode 100644
index 0000000000..7339447924
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-out-of-flow-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: manual;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-overflow-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-overflow-001-ref.html
new file mode 100644
index 0000000000..db002ce45d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-overflow-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 10px;
+  font-family: Ahem;
+  width: 5.1ch;
+  border: 1px solid blue;
+}
+</style>
+<body>
+  <div>12 4-<br>xx</div>
+  <div>12<br>45xx</div>
+  <div>12<br>456xx</div>
+  <div>1234-<br>xx</div>
+  <div>12345-<br>xx</div>
+  <div>123456-<br>xx</div>
+
+  <div style="width: 10ch">renfor-<br>cer99999</div>
+  <div>00-<br>1222</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-punctuation-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-punctuation-001-ref.html
new file mode 100644
index 0000000000..75e2363789
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-punctuation-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+div {
+  width: 5ch;
+  border: 1px solid blue;
+}
+</style>
+<body lang="en-us">
+  <div>00000 ex&shy;am&shy;ple 00000</div>
+  <div>00000 ex&shy;am&shy;ple. 00000</div>
+  <div>00000 (ex&shy;am&shy;ple 00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html
new file mode 100644
index 0000000000..9eb1d7fd68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 3em;
+    line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */
+    width: 0;
+    hyphens: manual;
+    margin: 1em auto;
+  }
+  .ref { color: orange; }
+</style>
+
+<p>Test passes if the black text is identical to the orange text (except the color).
+
+<div dir=rtl lang=ug class=ref>&#xFEA9;&#xFE8D;&#xFEE3;&#xFEF4;<br>&#xFEAA;&#xFEEF;</div>
+
+<div dir=rtl lang=ug>&#xFEA9;&#xFE8D;&#xFEE3;&#xFEF4;<br>&#xFEAA;&#xFEEF;</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html
new file mode 100644
index 0000000000..d8e31d71e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+
+<p>Test passes if there is something below:
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html
new file mode 100644
index 0000000000..cbe3726137
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: manual;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html
new file mode 100644
index 0000000000..7b3f820641
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  border: solid orange;
+  margin: 5px;
+  width: 6ch;
+  hyphens: auto;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-001-ref.html
new file mode 100644
index 0000000000..5be7a840d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-001-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+    div {
+        font: 16px monospace;
+        writing-mode: vertical-rl;
+        border: 1px solid gray;
+        margin: 10px;
+        padding: 2px;
+        hyphens: manual;
+        width: 3em;
+        height: 9ch;
+    }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+    hyphen&#x2010;<br>ation
+</div>
+
+<div>
+    hyphen&#x2010;<br>ation
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-002-ref.html
new file mode 100644
index 0000000000..cb240212bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-002-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+    div {
+        font: 16px monospace;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        border: 1px solid gray;
+        margin: 10px;
+        padding: 2px;
+        hyphens: manual;
+        width: 3em;
+        height: 9ch;
+    }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+    hyphen&#x2010;<br>ation
+</div>
+
+<div>
+    hyphen&#x2010;<br>ation
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-003-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-003-ref.html
new file mode 100644
index 0000000000..6d3ea15845
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-003-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+    div {
+        font: 16px monospace;
+        writing-mode: vertical-rl;
+        border: 1px solid gray;
+        margin: 10px;
+        padding: 2px;
+        hyphens: manual;
+        width: 3em;
+        height: 9ch;
+        hyphenate-character: "+=";
+    }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+    hyphen+=<br>ation
+</div>
+
+<div>
+    hyphen+=<br>ation
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-004-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-004-ref.html
new file mode 100644
index 0000000000..63c751165f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-004-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+    div {
+        font: 16px monospace;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        border: 1px solid gray;
+        margin: 10px;
+        padding: 2px;
+        hyphens: manual;
+        width: 3em;
+        height: 9ch;
+        hyphenate-character: "+=";
+    }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+    hyphen+=<br>ation
+</div>
+
+<div>
+    hyphen+=<br>ation
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html
new file mode 100644
index 0000000000..c86cb50028
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+span {
+  font-size: 3em;
+  color: red;
+  text-shadow: 3px 3px 3px black;
+}
+</style>
+
+<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
+
+<div>ex<span>&#x2010;</span><br>ample</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-ref.html
new file mode 100644
index 0000000000..ad9df16e35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+span {
+  font-size: 3em;
+  color: red;
+  text-shadow: 3px 3px 3px black;
+}
+</style>
+
+<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
+
+<div>ex<span>&#x002D;</span><br>ample</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/resources/roboto_hyphenation_subset.ttf b/testing/web-platform/tests/css/css-text/hyphens/resources/roboto_hyphenation_subset.ttf
new file mode 100644
index 0000000000..38a80ff4b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/resources/roboto_hyphenation_subset.ttf
diff --git a/testing/web-platform/tests/css/css-text/hyphens/shy-styling-001.html b/testing/web-platform/tests/css/css-text/hyphens/shy-styling-001.html
new file mode 100644
index 0000000000..f579e23778
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/shy-styling-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: soft hyphen styling</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphens-property">
+<link rel="match" href="reference/shy-styling-001-ref.html">
+<link rel="match" href="reference/shy-styling-001-alt-ref.html">
+<meta name="assert" content="hypens inserted where there was a soft-hyphen take on the styles that would have applied to the soft hyphen">
+<style>
+div {
+  width: 0ch;
+  hyphens: manual;
+}
+span {
+  font-size: 3em;
+  color: red;
+  text-shadow: 3px 3px 3px black;
+}
+</style>
+
+<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
+
+<div>ex<span>&shy;</span>ample</div>
diff --git a/testing/web-platform/tests/css/css-text/i18n/META.yml b/testing/web-platform/tests/css/css-text/i18n/META.yml
new file mode 100644
index 0000000000..9fa8c3b6c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/META.yml
@@ -0,0 +1,2 @@
+suggested_reviewers:
+  - r12a
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-001.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-001.html
new file mode 100644
index 0000000000..63677ae055
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-001.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0020 SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="When white-space allows wrapping, line breaking behavior defined for the WJ, ZW, and GL line-breaking classes in [UAX14] must be honored.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x20;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x20;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x20;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x20;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-002.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-002.html
new file mode 100644
index 0000000000..80bc4a6093
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-002.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+200B ZERO WIDTH SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="When white-space allows wrapping, line breaking behavior defined for the WJ, ZW, and GL line-breaking classes in [UAX14] must be honored.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x200B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x200B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x200B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x200B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-003.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-003.html
new file mode 100644
index 0000000000..09fabc6888
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-003.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2002 EN SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2002;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2002;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2002;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2002;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-004.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-004.html
new file mode 100644
index 0000000000..0caffeebae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2003 EM SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2003;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2003;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2003;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2003;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-005.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-005.html
new file mode 100644
index 0000000000..9d17bdaa1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2004 THREE-PER-EM SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2004;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2004;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2004;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2004;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-006.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-006.html
new file mode 100644
index 0000000000..0c34ed53f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-006.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2005 FOUR-PER-EM SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2005;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2005;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2005;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2005;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-007.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-007.html
new file mode 100644
index 0000000000..b4f6d2f9b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-007.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2006 SIX-PER-EM SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2006;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2006;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2006;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2006;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-008.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-008.html
new file mode 100644
index 0000000000..77dc7194ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-008.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2000 EN QUAD</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2000;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2000;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2000;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2000;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-009.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-009.html
new file mode 100644
index 0000000000..f25a575983
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-009.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2001 EM QUAD</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2001;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2001;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2001;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2001;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-010.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-010.html
new file mode 100644
index 0000000000..28eb4c4100
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-010.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2008 PUNCTUATION SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2008;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2008;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2008;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2008;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-011.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-011.html
new file mode 100644
index 0000000000..3d2144c074
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-011.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2009 THIN SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2009;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2009;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2009;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2009;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-012.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-012.html
new file mode 100644
index 0000000000..a757939717
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-012.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+200A HAIR SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x200A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x200A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x200A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x200A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-014.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-014.html
new file mode 100644
index 0000000000..4f67b1ac6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-014.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1680 OGHAM SPACE MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1680;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1680;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1680;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1680;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-015.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-015.html
new file mode 100644
index 0000000000..734d237c89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-015.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+205F MEDIUM MATHEMATICAL SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking space characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-016.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-016.html
new file mode 100644
index 0000000000..93df63bac6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-016.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+058A ARMENIAN HYPHEN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking hyphen characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x058A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x058A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x058A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x058A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-017.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-017.html
new file mode 100644
index 0000000000..3edb77e708
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-017.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2010 HYPHEN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking hyphen characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2010;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2010;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2010;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2010;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-018.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-018.html
new file mode 100644
index 0000000000..bf0f9eb2dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-018.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2012 FIGURE DASH</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking hyphen characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2012;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2012;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2012;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2012;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-019.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-019.html
new file mode 100644
index 0000000000..3a80da0377
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-019.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2013 EN DASH</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA breaking hyphen characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2013;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2013;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2013;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2013;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-020.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-020.html
new file mode 100644
index 0000000000..26e8d14abe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-020.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+05BE HEBREW PUNCTUATION MAQAF</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA visible word divider characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x05BE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x05BE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x05BE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x05BE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-021.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-021.html
new file mode 100644
index 0000000000..42fa5c32eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-021.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0F0B TIBETAN MARK INTERSYLLABIC TSHEG</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA visible word divider characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F0B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F0B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F0B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F0B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-022.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-022.html
new file mode 100644
index 0000000000..f5f2c4a83f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-022.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1361 ETHIOPIC WORD SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA visible word divider characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1361;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1361;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1361;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1361;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-023.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-023.html
new file mode 100644
index 0000000000..051dfa9403
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-023.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+17D8 KHMER SIGN BEYYAL</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA visible word divider characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D8;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D8;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D8;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D8;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-024.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-024.html
new file mode 100644
index 0000000000..09221092c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-024.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+17DA KHMER SIGN KOOMUUT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA visible word divider characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17DA;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17DA;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17DA;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17DA;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-025.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-025.html
new file mode 100644
index 0000000000..dd9823074c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-025.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2027 HYPHENATION POINT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA visible word divider characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2027;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2027;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2027;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2027;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-026.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-026.html
new file mode 100644
index 0000000000..8292d41a7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-026.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+007C VERTICAL LINE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after each of the BA visible word divider characters.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x007C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x007C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x007C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x007C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-030.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-030.html
new file mode 100644
index 0000000000..d688ad383a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-030.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+16EB RUNIC SINGLE DOT PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16EB;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16EB;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16EB;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16EB;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-031.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-031.html
new file mode 100644
index 0000000000..d021f96581
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-031.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+16EC RUNIC MULTIPLE DOT PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16EC;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16EC;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16EC;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16EC;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-032.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-032.html
new file mode 100644
index 0000000000..39e7d69715
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-032.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+16ED RUNIC CROSS PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16ED;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16ED;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16ED;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x16ED;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-033.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-033.html
new file mode 100644
index 0000000000..95873aaa94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-033.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2056 THREE DOT PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2056;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2056;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2056;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2056;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-034.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-034.html
new file mode 100644
index 0000000000..4d93ef0a71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-034.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2058 FOUR DOT PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2058;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2058;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2058;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2058;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-035.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-035.html
new file mode 100644
index 0000000000..34f30306fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-035.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2059 FIVE DOT PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2059;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2059;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2059;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2059;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-036.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-036.html
new file mode 100644
index 0000000000..e8a670e7b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-036.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+205A TWO DOT PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-037.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-037.html
new file mode 100644
index 0000000000..3afe27f19d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-037.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+205B FOUR DOT MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-038.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-038.html
new file mode 100644
index 0000000000..fc8c6fd8ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-038.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+205D TRICOLON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-039.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-039.html
new file mode 100644
index 0000000000..31c4d4e982
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-039.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+205E VERTICAL FOUR DOTS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x205E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-040.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-040.html
new file mode 100644
index 0000000000..4892ae556b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-040.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2E19 PALM BRANCH</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E19;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E19;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E19;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E19;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-041.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-041.html
new file mode 100644
index 0000000000..ac7a71cf2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-041.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2E2A TWO DOTS OVER ONE DOT PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-042.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-042.html
new file mode 100644
index 0000000000..39130cecb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-042.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2E2B ONE DOT OVER TWO DOTS PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-043.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-043.html
new file mode 100644
index 0000000000..8b0fcec1c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-043.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2E2C SQUARED FOUR DOT PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-044.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-044.html
new file mode 100644
index 0000000000..c538fb88b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-044.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2E2D FIVE DOT PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E2D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-045.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-045.html
new file mode 100644
index 0000000000..696ec803d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-045.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2E30 RING POINT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E30;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E30;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E30;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E30;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-046.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-046.html
new file mode 100644
index 0000000000..29bd198891
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-046.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10100 AEGEAN WORD SEPARATOR LINE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10100;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10100;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10100;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10100;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-047.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-047.html
new file mode 100644
index 0000000000..d4b675b5b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-047.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10101 AEGEAN WORD SEPARATOR DOT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10101;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10101;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10101;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10101;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-048.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-048.html
new file mode 100644
index 0000000000..649a20c791
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-048.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10102 AEGEAN CHECK MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10102;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10102;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10102;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10102;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-049.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-049.html
new file mode 100644
index 0000000000..d7c54f1c44
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-049.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1039F UGARITIC WORD DIVIDER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1039F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1039F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1039F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1039F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-050.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-050.html
new file mode 100644
index 0000000000..e88e3cc9b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-050.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+103D0 OLD PERSIAN WORD DIVIDER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x103D0;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x103D0;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x103D0;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x103D0;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-051.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-051.html
new file mode 100644
index 0000000000..95129f9051
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-051.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1091F PHOENICIAN WORD DIVIDER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1091F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1091F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1091F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1091F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-052.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-052.html
new file mode 100644
index 0000000000..458d0542a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-052.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+12470 CUNEIFORM PUNCTUATION SIGN OLD ASSYRIAN WORD DIVIDER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA historic word separator property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x12470;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x12470;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x12470;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x12470;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-060.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-060.html
new file mode 100644
index 0000000000..44fa928e84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-060.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0964 DEVANAGARI DANDA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0964;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0964;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0964;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0964;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-061.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-061.html
new file mode 100644
index 0000000000..ef037bb308
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-061.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0965 DEVANAGARI DOUBLE DANDA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0965;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0965;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0965;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0965;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-062.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-062.html
new file mode 100644
index 0000000000..f74603693f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-062.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0E5A THAI CHARACTER ANGKHANKHU</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0E5A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0E5A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0E5A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0E5A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-063.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-063.html
new file mode 100644
index 0000000000..50c26922b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-063.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0E5B THAI CHARACTER KHOMUT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0E5B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0E5B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0E5B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0E5B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-064.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-064.html
new file mode 100644
index 0000000000..04aa14f45c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-064.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+104A MYANMAR SIGN LITTLE SECTION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x104A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x104A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x104A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x104A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-065.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-065.html
new file mode 100644
index 0000000000..44349fedcd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-065.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+104B MYANMAR SIGN SECTION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x104B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x104B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x104B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x104B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-066.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-066.html
new file mode 100644
index 0000000000..42fe1a0c4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-066.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1735 PHILIPPINE SINGLE PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1735;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1735;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1735;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1735;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-067.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-067.html
new file mode 100644
index 0000000000..bd3b06de97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-067.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1736 PHILIPPINE DOUBLE PUNCTUATION</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1736;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1736;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1736;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1736;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-068.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-068.html
new file mode 100644
index 0000000000..66fa67e286
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-068.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+17D4 KHMER SIGN KHAN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D4;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D4;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D4;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D4;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-069.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-069.html
new file mode 100644
index 0000000000..869d8e1dc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-069.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+17D5 KHMER SIGN BARIYOOSAN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D5;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D5;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D5;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x17D5;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-070.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-070.html
new file mode 100644
index 0000000000..8b398da350
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-070.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1B5E BALINESE CARIK SIKI</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-071.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-071.html
new file mode 100644
index 0000000000..d4d44ca336
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-071.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1B5F BALINESE CARIK PAREREN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-072.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-072.html
new file mode 100644
index 0000000000..b6beaeb801
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-072.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+A8CE SAURASHTRA DANDA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA8CE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA8CE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA8CE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA8CE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-073.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-073.html
new file mode 100644
index 0000000000..e32b43466b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-073.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+A8CF SAURASHTRA DOUBLE DANDA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA8CF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA8CF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA8CF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA8CF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-074.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-074.html
new file mode 100644
index 0000000000..57b083fc45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-074.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+AA5D CHAM PUNCTUATION DANDA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-075.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-075.html
new file mode 100644
index 0000000000..31e374a98d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-075.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+AA5E CHAM PUNCTUATION DOUBLE DANDA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-076.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-076.html
new file mode 100644
index 0000000000..22cc6f28d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-076.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+AA5F CHAM PUNCTUATION TRIPLE DANDA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xAA5F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-077.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-077.html
new file mode 100644
index 0000000000..786f52077c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-077.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10A56 KHAROSHTHI PUNCTUATION DANDA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A56;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A56;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A56;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A56;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-078.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-078.html
new file mode 100644
index 0000000000..a123d1bfc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-078.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10A57 KHAROSHTHI PUNCTUATION DOUBLE DANDA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA danda property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A57;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A57;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A57;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A57;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-080.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-080.html
new file mode 100644
index 0000000000..ee4224a9f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-080.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0F85 TIBETAN MARK PALUTA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The UA will break a line of text after any Unicode character with the BA tibetan property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F85;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F85;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F85;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F85;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-081.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-081.html
new file mode 100644
index 0000000000..a23a41d1b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-081.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0F34 TIBETAN MARK BSDUS RTAGS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The UA will break a line of text after any Unicode character with the BA tibetan property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F34;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F34;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F34;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F34;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-082.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-082.html
new file mode 100644
index 0000000000..2e95a95f1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-082.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0F7F TIBETAN SIGN RNAM BCAD</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The UA will break a line of text after any Unicode character with the BA tibetan property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F7F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F7F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F7F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F7F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-083.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-083.html
new file mode 100644
index 0000000000..48f9151c45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-083.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0FBE TIBETAN KU RU KHA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The UA will break a line of text after any Unicode character with the BA tibetan property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FBE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FBE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FBE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FBE;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-084.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-084.html
new file mode 100644
index 0000000000..4cc59af4ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-084.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0FBF TIBETAN KU RU KHA BZHI MIG CAN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The UA will break a line of text after any Unicode character with the BA tibetan property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FBF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FBF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FBF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FBF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-085.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-085.html
new file mode 100644
index 0000000000..81c59385f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-085.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0FD2 TIBETAN MARK NYIS TSHEG</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The UA will break a line of text after any Unicode character with the BA tibetan property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FD2;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FD2;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FD2;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FD2;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-086.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-086.html
new file mode 100644
index 0000000000..81c59385f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-086.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0FD2 TIBETAN MARK NYIS TSHEG</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The UA will break a line of text after any Unicode character with the BA tibetan property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FD2;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FD2;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FD2;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0FD2;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-090.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-090.html
new file mode 100644
index 0000000000..42ee8908a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-090.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1804 MONGOLIAN COLON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1804;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1804;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1804;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1804;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-091.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-091.html
new file mode 100644
index 0000000000..cc52c80319
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-091.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1805 MONGOLIAN FOUR DOTS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1805;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1805;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1805;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1805;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-092.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-092.html
new file mode 100644
index 0000000000..1dfa041d11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-092.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1B5A BALINESE PANTI</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5A;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-093.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-093.html
new file mode 100644
index 0000000000..a7c70c5599
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-093.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1B5B BALINESE PAMADA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-095.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-095.html
new file mode 100644
index 0000000000..e0fcf33c5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-095.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1B5D BALINESE CARIK PAMUNGKAH</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B5D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-096.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-096.html
new file mode 100644
index 0000000000..b5a96dbb23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-096.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1B60 BALINESE PAMENENG</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B60;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B60;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B60;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1B60;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-097.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-097.html
new file mode 100644
index 0000000000..cb031c6bef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-097.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1C3B LEPCHA PUNCTUATION TA-ROL</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3B;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-098.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-098.html
new file mode 100644
index 0000000000..44135cf1ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-098.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1C3C LEPCHA PUNCTUATION NYET THYOOM TA-ROL</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-099.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-099.html
new file mode 100644
index 0000000000..53880470f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-099.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1C3E LEPCHA PUNCTUATION TSHOOK CER-WA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-100.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-100.html
new file mode 100644
index 0000000000..53880470f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-100.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1C3E LEPCHA PUNCTUATION TSHOOK CER-WA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-101.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-101.html
new file mode 100644
index 0000000000..f5f5117fb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-101.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1C3F LEPCHA PUNCTUATION TSHOOK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C3F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-102.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-102.html
new file mode 100644
index 0000000000..7481591acf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-102.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1C7E OL CHIKI PUNCTUATION MUCAAD</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C7E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C7E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C7E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C7E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-103.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-103.html
new file mode 100644
index 0000000000..3b9db361e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-103.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+1C7F OL CHIKI PUNCTUATION DOUBLE MUCAAD</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C7F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C7F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C7F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x1C7F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-104.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-104.html
new file mode 100644
index 0000000000..ec575ebc81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-104.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2CFA COPTIC OLD NUBIAN DIRECT QUESTION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFA;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFA;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFA;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFA;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-105.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-105.html
new file mode 100644
index 0000000000..af3a8887fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-105.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2CFB COPTIC OLD NUBIAN INDIRECT QUESTION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFB;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFB;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFB;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFB;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-106.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-106.html
new file mode 100644
index 0000000000..e5203073e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-106.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2CFC COPTIC OLD NUBIAN VERSE DIVIDER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFC;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFC;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFC;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFC;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-107.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-107.html
new file mode 100644
index 0000000000..eb3f70b70d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-107.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2CFF COPTIC MORPHOLOGICAL DIVIDER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2CFF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-108.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-108.html
new file mode 100644
index 0000000000..f977eaa10b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-108.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2E17 OBLIQUE DOUBLE HYPHEN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E17;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E17;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E17;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2E17;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-109.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-109.html
new file mode 100644
index 0000000000..1ba489e3bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-109.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+A60D VAI COMMA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA60D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA60D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA60D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA60D;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-110.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-110.html
new file mode 100644
index 0000000000..fe5cfd0c59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-110.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+A60F VAI QUESTION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA60F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA60F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA60F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA60F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-111.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-111.html
new file mode 100644
index 0000000000..20e214b63c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-111.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+A92E KAYAH LI SIGN CWI</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA92E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA92E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA92E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA92E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-112.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-112.html
new file mode 100644
index 0000000000..3e2c4af3c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-112.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+A92F KAYAH LI SIGN SHYA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA92F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA92F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA92F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xA92F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-113.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-113.html
new file mode 100644
index 0000000000..ac308ecb92
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-113.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10A50 KHAROSHTHI PUNCTUATION DOT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A50;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A50;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A50;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A50;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-114.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-114.html
new file mode 100644
index 0000000000..ced3533c04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-114.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10A51 KHAROSHTHI PUNCTUATION SMALL CIRCLE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A51;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A51;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A51;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A51;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-115.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-115.html
new file mode 100644
index 0000000000..95c7bee5ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-115.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10A52 KHAROSHTHI PUNCTUATION CIRCLE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A52;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A52;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A52;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A52;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-116.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-116.html
new file mode 100644
index 0000000000..ebbfd912f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-116.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10A53 KHAROSHTHI PUNCTUATION CRESCENT BAR</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A53;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A53;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A53;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A53;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-117.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-117.html
new file mode 100644
index 0000000000..ee25a94c73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-117.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10A54 KHAROSHTHI PUNCTUATION MANGALAM</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A54;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A54;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A54;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A54;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-118.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-118.html
new file mode 100644
index 0000000000..6a9736cbb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-118.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+10A55 KHAROSHTHI PUNCTUATION LOTUS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='should dom'>
+<meta name="assert" content="[Exploratory] The browser will break a line of text after any Unicode character with the BA Other Terminating Punctuation property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A55;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A55;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A55;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x10A55;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight > 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight > 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight > 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight > 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-120.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-120.html
new file mode 100644
index 0000000000..affee69bb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-120.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+00A0 NO-BREAK SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the GL non-breaking property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x00A0;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x00A0;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x00A0;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x00A0;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-121.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-121.html
new file mode 100644
index 0000000000..589e981b09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-121.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+202F NARROW NO-BREAK SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the GL non-breaking property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x202F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x202F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x202F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x202F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-122.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-122.html
new file mode 100644
index 0000000000..59bbe8b435
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-122.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+180E MONGOLIAN VOWEL SEPARATOR</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the GL non-breaking property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x180E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x180E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x180E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x180E;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-123.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-123.html
new file mode 100644
index 0000000000..bf98f93132
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-123.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+034F COMBINING GRAPHEME JOINER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the GL non-breaking property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x034F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x034F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x034F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x034F;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-124.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-124.html
new file mode 100644
index 0000000000..5ac0df9777
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-124.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2007 FIGURE SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the GL non-breaking property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2007;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2007;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2007;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2007;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-125.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-125.html
new file mode 100644
index 0000000000..d38479fdde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-125.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2011 NON-BREAKING HYPHEN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the GL non-breaking property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2011;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2011;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2011;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2011;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-126.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-126.html
new file mode 100644
index 0000000000..c14899d778
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-126.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0F08 TIBETAN MARK SBRUL SHAD</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the GL non-breaking property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F08;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F08;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F08;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F08;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-127.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-127.html
new file mode 100644
index 0000000000..dfa0a8e33e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-127.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0F0C TIBETAN MARK DELIMITER TSHEG BSTAR</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the GL non-breaking property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F0C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F0C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F0C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F0C;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-128.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-128.html
new file mode 100644
index 0000000000..b4009bd76f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-128.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+0F12 TIBETAN MARK RGYA GRAM SHAD</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the GL non-breaking property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F12;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F12;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F12;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x0F12;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-130.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-130.html
new file mode 100644
index 0000000000..b9a9e48e79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-130.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+2060 WORD JOINER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the WJ Word Joiner property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2060;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2060;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2060;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#x2060;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-131.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-131.html
new file mode 100644
index 0000000000..93bf8d156b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-baspglwj-131.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: U+FEFF ZERO WIDTH NO-BREAK SPACE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-details'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name='flags' content='dom'>
+<meta name="assert" content="[Exploratory] The browser will NOT break a line of text containing any Unicode character with the WJ Word Joiner property.">
+<style type='text/css'>
+.test > div { font-family: monospace; font-size: 25px; width: 50ch; line-height: 30px; }
+#breakable2 { white-space: pre-line; }
+#breakable3 { white-space: pre-wrap; }
+#breakable4 { white-space: break-spaces; }
+</style>
+</head>
+<body>
+
+
+
+<div class="test">
+  <div id="breakable">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xFEFF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xFEFF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xFEFF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+  <div id="breakable4">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&#xFEFF;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+</div>
+
+
+<!--Notes:
+
+Box height: <span id='debugresult'></span><script>document.getElementById('debugresult').innerHTML = document.getElementById('breakable').offsetHeight;</script>
+
+-->
+<script>
+test(function() {
+  assert_true(document.getElementById('breakable').offsetHeight < 35);
+}, "white-space:normal");
+test(function() {
+  assert_true(document.getElementById('breakable2').offsetHeight < 35);
+}, "white-space:pre-line");
+test(function() {
+  assert_true(document.getElementById('breakable3').offsetHeight < 35);
+}, "white-space:pre-wrap");
+test(function() {
+  assert_true(document.getElementById('breakable4').offsetHeight < 35);
+}, "white-space:break-spaces");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-001.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-001.html
new file mode 100644
index 0000000000..e150523327
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0028 LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-001-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 0028 LEFT PARENTHESIS at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x0028;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x0028;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-002.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-002.html
new file mode 100644
index 0000000000..12e6589545
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-002.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 005B LEFT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-002-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 005B LEFT SQUARE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x005B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x005B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-003.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-003.html
new file mode 100644
index 0000000000..984c2ba6c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-003.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 007B LEFT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-003-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 007B LEFT CURLY BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x007B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x007B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-004.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-004.html
new file mode 100644
index 0000000000..48d7b8e9a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-004.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0F3A TIBETAN MARK GUG RTAGS GYON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-004-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 0F3A TIBETAN MARK GUG RTAGS GYON at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: CSSFW;
+	src: url('/fonts/adobe-fonts/CSSFWOrientationTest.otf');
+	}
+.test, .ref { font-size: 30px; font-family: CSSFW, sans-serif; width: 3em; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x0F3A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x0F3A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-005.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-005.html
new file mode 100644
index 0000000000..0d79132800
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-005.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0F3C TIBETAN MARK ANG KHANG GYON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-005-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 0F3C TIBETAN MARK ANG KHANG GYON at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x0F3C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x0F3C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-006.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-006.html
new file mode 100644
index 0000000000..185cf59c89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-006.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 169B OGHAM FEATHER MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-006-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 169B OGHAM FEATHER MARK at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x169B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x169B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-007.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-007.html
new file mode 100644
index 0000000000..c67e866bc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-007.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 201A SINGLE LOW-9 QUOTATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-007-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 201A SINGLE LOW-9 QUOTATION MARK at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x201A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x201A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-008.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-008.html
new file mode 100644
index 0000000000..7a22a9e50f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-008.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 201E DOUBLE LOW-9 QUOTATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-008-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 201E DOUBLE LOW-9 QUOTATION MARK at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x201E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x201E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-009.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-009.html
new file mode 100644
index 0000000000..1312f5b77d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-009.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2045 LEFT SQUARE BRACKET WITH QUILL</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-009-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2045 LEFT SQUARE BRACKET WITH QUILL at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2045;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2045;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-010.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-010.html
new file mode 100644
index 0000000000..c914a24499
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-010.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 207D SUPERSCRIPT LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-010-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 207D SUPERSCRIPT LEFT PARENTHESIS at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x207D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x207D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-011.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-011.html
new file mode 100644
index 0000000000..acdef96554
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-011.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 208D SUBSCRIPT LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-011-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 208D SUBSCRIPT LEFT PARENTHESIS at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x208D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x208D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-012.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-012.html
new file mode 100644
index 0000000000..68e77aaa66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-012.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2329 LEFT-POINTING ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-012-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2329 LEFT-POINTING ANGLE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2329;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2329;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-014.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-014.html
new file mode 100644
index 0000000000..6fdaee9739
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-014.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2768 MEDIUM LEFT PARENTHESIS ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-014-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2768 MEDIUM LEFT PARENTHESIS ORNAMENT at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2768;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2768;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-015.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-015.html
new file mode 100644
index 0000000000..7f6858f53d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-015.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276A MEDIUM FLATTENED LEFT PARENTHESIS ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-015-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 276A MEDIUM FLATTENED LEFT PARENTHESIS ORNAMENT at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x276A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x276A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-016.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-016.html
new file mode 100644
index 0000000000..9b3717483e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-016.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276C MEDIUM LEFT-POINTING ANGLE BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-016-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 276C MEDIUM LEFT-POINTING ANGLE BRACKET ORNAMENT at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x276C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x276C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-017.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-017.html
new file mode 100644
index 0000000000..32e4925ac7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-017.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276E HEAVY LEFT-POINTING ANGLE QUOTATION MARK ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-017-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 276E HEAVY LEFT-POINTING ANGLE QUOTATION MARK ORNAMENT at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x276E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x276E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-018.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-018.html
new file mode 100644
index 0000000000..6d8556cd3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-018.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2770 HEAVY LEFT-POINTING ANGLE BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-018-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2770 HEAVY LEFT-POINTING ANGLE BRACKET ORNAMENT at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2770;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2770;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-019.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-019.html
new file mode 100644
index 0000000000..977efda0a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-019.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2772 LIGHT LEFT TORTOISE SHELL BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-019-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2772 LIGHT LEFT TORTOISE SHELL BRACKET ORNAMENT at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2772;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2772;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-020.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-020.html
new file mode 100644
index 0000000000..9006b8dda6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-020.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2774 MEDIUM LEFT CURLY BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-020-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2774 MEDIUM LEFT CURLY BRACKET ORNAMENT at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2774;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2774;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-021.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-021.html
new file mode 100644
index 0000000000..ac2c7ff09c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-021.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27E6 MATHEMATICAL LEFT WHITE SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-021-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 27E6 MATHEMATICAL LEFT WHITE SQUARE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x27E6;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x27E6;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-022.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-022.html
new file mode 100644
index 0000000000..7bfaeeb629
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-022.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27E8 MATHEMATICAL LEFT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-022-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 27E8 MATHEMATICAL LEFT ANGLE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x27E8;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x27E8;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-023.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-023.html
new file mode 100644
index 0000000000..3e36d8ab06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-023.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27EA MATHEMATICAL LEFT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-023-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 27EA MATHEMATICAL LEFT DOUBLE ANGLE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x27EA;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x27EA;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-024.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-024.html
new file mode 100644
index 0000000000..d7b5ee4771
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-024.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2983 LEFT WHITE CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-024-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2983 LEFT WHITE CURLY BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2983;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2983;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-025.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-025.html
new file mode 100644
index 0000000000..fe049b3d8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-025.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2985 LEFT WHITE PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-025-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2985 LEFT WHITE PARENTHESIS at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2985;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2985;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-026.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-026.html
new file mode 100644
index 0000000000..9fa262ec82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-026.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2987 Z NOTATION LEFT IMAGE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-026-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2987 Z NOTATION LEFT IMAGE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2987;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2987;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-027.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-027.html
new file mode 100644
index 0000000000..0cba8cc740
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-027.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2989 Z NOTATION LEFT BINDING BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-027-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2989 Z NOTATION LEFT BINDING BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2989;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2989;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-028.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-028.html
new file mode 100644
index 0000000000..05d34171c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-028.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298B LEFT SQUARE BRACKET WITH UNDERBAR</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-028-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 298B LEFT SQUARE BRACKET WITH UNDERBAR at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x298B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x298B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-029.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-029.html
new file mode 100644
index 0000000000..6d79c20b47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-029.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298D LEFT SQUARE BRACKET WITH TICK IN TOP CORNER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-029-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 298D LEFT SQUARE BRACKET WITH TICK IN TOP CORNER at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x298D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x298D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-030.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-030.html
new file mode 100644
index 0000000000..1494c06909
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-030.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298F LEFT SQUARE BRACKET WITH TICK IN BOTTOM CORNER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-030-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 298F LEFT SQUARE BRACKET WITH TICK IN BOTTOM CORNER at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x298F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x298F;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-031.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-031.html
new file mode 100644
index 0000000000..62807dd3e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-031.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2991 LEFT ANGLE BRACKET WITH DOT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-031-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2991 LEFT ANGLE BRACKET WITH DOT at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2991;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2991;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-032.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-032.html
new file mode 100644
index 0000000000..a40de11be4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-032.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2993 LEFT ARC LESS-THAN BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-032-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2993 LEFT ARC LESS-THAN BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2993;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2993;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-033.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-033.html
new file mode 100644
index 0000000000..aefca35e65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-033.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2995 DOUBLE LEFT ARC GREATER-THAN BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-033-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2995 DOUBLE LEFT ARC GREATER-THAN BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2995;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2995;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-034.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-034.html
new file mode 100644
index 0000000000..ba4918304e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-034.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2997 LEFT BLACK TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-034-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 2997 LEFT BLACK TORTOISE SHELL BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x2997;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2997;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-035.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-035.html
new file mode 100644
index 0000000000..ea8303462f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-035.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29D8 LEFT WIGGLY FENCE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-035-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 29D8 LEFT WIGGLY FENCE at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x29D8;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x29D8;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-036.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-036.html
new file mode 100644
index 0000000000..71d8e14666
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-036.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29DA LEFT DOUBLE WIGGLY FENCE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-036-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 29DA LEFT DOUBLE WIGGLY FENCE at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x29DA;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x29DA;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-037.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-037.html
new file mode 100644
index 0000000000..d14fe3572c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-037.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29FC LEFT-POINTING CURVED ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-037-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 29FC LEFT-POINTING CURVED ANGLE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x29FC;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x29FC;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-038.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-038.html
new file mode 100644
index 0000000000..28202c9329
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-038.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3008 LEFT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-038-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 3008 LEFT ANGLE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x3008;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x3008;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-039.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-039.html
new file mode 100644
index 0000000000..724fd85fb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-039.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300A LEFT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-039-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 300A LEFT DOUBLE ANGLE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x300A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x300A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-040.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-040.html
new file mode 100644
index 0000000000..1f626eb1ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-040.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300C LEFT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-040-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 300C LEFT CORNER BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x300C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x300C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-041.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-041.html
new file mode 100644
index 0000000000..2b8e5cc6d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-041.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300E LEFT WHITE CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-041-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 300E LEFT WHITE CORNER BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x300E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x300E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-042.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-042.html
new file mode 100644
index 0000000000..4d2d5fef8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-042.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3010 LEFT BLACK LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-042-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 3010 LEFT BLACK LENTICULAR BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x3010;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x3010;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-043.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-043.html
new file mode 100644
index 0000000000..59622cda07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-043.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3014 LEFT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-043-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 3014 LEFT TORTOISE SHELL BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x3014;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x3014;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-044.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-044.html
new file mode 100644
index 0000000000..37675c1ec7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-044.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3016 LEFT WHITE LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-044-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 3016 LEFT WHITE LENTICULAR BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x3016;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x3016;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-045.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-045.html
new file mode 100644
index 0000000000..94a568224d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-045.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3018 LEFT WHITE TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-045-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 3018 LEFT WHITE TORTOISE SHELL BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x3018;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x3018;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-046.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-046.html
new file mode 100644
index 0000000000..9710c36831
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-046.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301A LEFT WHITE SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-046-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 301A LEFT WHITE SQUARE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x301A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x301A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-047.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-047.html
new file mode 100644
index 0000000000..c112ac8766
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-047.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301D REVERSED DOUBLE PRIME QUOTATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-047-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave 301D REVERSED DOUBLE PRIME QUOTATION MARK at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#x301D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x301D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-049.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-049.html
new file mode 100644
index 0000000000..2e3e088c9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-049.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE35 PRESENTATION FORM FOR VERTICAL LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-049-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE35 PRESENTATION FORM FOR VERTICAL LEFT PARENTHESIS at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE35;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE35;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-050.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-050.html
new file mode 100644
index 0000000000..f85f3deb19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-050.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE37 PRESENTATION FORM FOR VERTICAL LEFT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-050-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE37 PRESENTATION FORM FOR VERTICAL LEFT CURLY BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE37;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE37;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-051.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-051.html
new file mode 100644
index 0000000000..55f558e0b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-051.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE39 PRESENTATION FORM FOR VERTICAL LEFT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-051-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE39 PRESENTATION FORM FOR VERTICAL LEFT TORTOISE SHELL BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE39;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE39;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-052.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-052.html
new file mode 100644
index 0000000000..a8e094d6f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-052.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3B PRESENTATION FORM FOR VERTICAL LEFT BLACK LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-052-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE3B PRESENTATION FORM FOR VERTICAL LEFT BLACK LENTICULAR BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE3B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE3B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-053.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-053.html
new file mode 100644
index 0000000000..33df08dd39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-053.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3D PRESENTATION FORM FOR VERTICAL LEFT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-053-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE3D PRESENTATION FORM FOR VERTICAL LEFT DOUBLE ANGLE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE3D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE3D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-054.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-054.html
new file mode 100644
index 0000000000..02e8c797f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-054.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3F PRESENTATION FORM FOR VERTICAL LEFT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-054-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE3F PRESENTATION FORM FOR VERTICAL LEFT ANGLE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE3F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE3F;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-055.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-055.html
new file mode 100644
index 0000000000..d0aeaa609e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-055.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE41 PRESENTATION FORM FOR VERTICAL LEFT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-055-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE41 PRESENTATION FORM FOR VERTICAL LEFT CORNER BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE41;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE41;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-056.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-056.html
new file mode 100644
index 0000000000..4c4be0f221
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-056.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE43 PRESENTATION FORM FOR VERTICAL LEFT WHITE CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-056-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE43 PRESENTATION FORM FOR VERTICAL LEFT WHITE CORNER BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE43;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE43;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-057.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-057.html
new file mode 100644
index 0000000000..e97b355b69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-057.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE47 PRESENTATION FORM FOR VERTICAL LEFT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-057-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE47 PRESENTATION FORM FOR VERTICAL LEFT SQUARE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE47;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE47;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-058.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-058.html
new file mode 100644
index 0000000000..6fa1bd617d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-058.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE59 SMALL LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-058-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE59 SMALL LEFT PARENTHESIS at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE59;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE59;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-059.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-059.html
new file mode 100644
index 0000000000..190de2cd75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-059.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE5B SMALL LEFT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-059-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE5B SMALL LEFT CURLY BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE5B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE5B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-060.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-060.html
new file mode 100644
index 0000000000..48c7a771a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-060.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE5D SMALL LEFT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-060-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FE5D SMALL LEFT TORTOISE SHELL BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFE5D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE5D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-061.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-061.html
new file mode 100644
index 0000000000..4b7cfdeb61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-061.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF08 FULLWIDTH LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-061-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FF08 FULLWIDTH LEFT PARENTHESIS at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFF08;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFF08;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-062.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-062.html
new file mode 100644
index 0000000000..08818309e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-062.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF3B FULLWIDTH LEFT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-062-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FF3B FULLWIDTH LEFT SQUARE BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFF3B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFF3B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-063.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-063.html
new file mode 100644
index 0000000000..cde3bcd06e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-063.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF5B FULLWIDTH LEFT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-063-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FF5B FULLWIDTH LEFT CURLY BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFF5B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFF5B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-064.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-064.html
new file mode 100644
index 0000000000..b9416640d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-064.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF5F FULLWIDTH LEFT WHITE PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-064-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FF5F FULLWIDTH LEFT WHITE PARENTHESIS at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFF5F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFF5F;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-065.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-065.html
new file mode 100644
index 0000000000..2856ae5727
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-065.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF62 HALFWIDTH LEFT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-065-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has OP Opening Punctuation property, the browser will not leave FF62 HALFWIDTH LEFT CORNER BRACKET at the end of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中&#xFF62;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFF62;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-100.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-100.html
new file mode 100644
index 0000000000..75216619a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-100.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3001 IDEOGRAPHIC COMMA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-100-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 3001 IDEOGRAPHIC COMMA at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x3001;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3001;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-101.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-101.html
new file mode 100644
index 0000000000..def939a906
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-101.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3002 IDEOGRAPHIC FULL STOP</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-101-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 3002 IDEOGRAPHIC FULL STOP at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x3002;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3002;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-102.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-102.html
new file mode 100644
index 0000000000..bc437fc93f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-102.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE50 SMALL COMMA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-102-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE50 SMALL COMMA at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE50;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE50;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-103.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-103.html
new file mode 100644
index 0000000000..a8b9140479
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-103.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE52 SMALL FULL STOP</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-103-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE52 SMALL FULL STOP at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE52;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE52;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-104.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-104.html
new file mode 100644
index 0000000000..0700d7b98b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-104.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF0C FULLWIDTH COMMA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-104-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FF0C FULLWIDTH COMMA at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF0C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF0C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-105.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-105.html
new file mode 100644
index 0000000000..9d3a28f1b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-105.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF0E FULLWIDTH FULL STOP</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-105-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FF0E FULLWIDTH FULL STOP at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF0E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF0E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-106.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-106.html
new file mode 100644
index 0000000000..eebf109531
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-106.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF61 HALFWIDTH IDEOGRAPHIC FULL STOP</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-106-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FF61 HALFWIDTH IDEOGRAPHIC FULL STOP at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF61;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF61;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-107.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-107.html
new file mode 100644
index 0000000000..cbf46fc6ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-107.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF64 HALFWIDTH IDEOGRAPHIC COMMA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-107-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FF64 HALFWIDTH IDEOGRAPHIC COMMA at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF64;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF64;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-108.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-108.html
new file mode 100644
index 0000000000..6711fa8295
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-108.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0029 RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-108-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 0029 RIGHT PARENTHESIS at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x0029;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x0029;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-109.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-109.html
new file mode 100644
index 0000000000..302ce10aeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-109.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 005D RIGHT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-109-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 005D RIGHT SQUARE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x005D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x005D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-110.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-110.html
new file mode 100644
index 0000000000..14fc9f2571
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-110.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 007D RIGHT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-110-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 007D RIGHT CURLY BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x007D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x007D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-111.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-111.html
new file mode 100644
index 0000000000..e369d5d50c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-111.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0F3B TIBETAN MARK GUG RTAGS GYAS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-111-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 0F3B TIBETAN MARK GUG RTAGS GYAS at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: CSSFW;
+	src: url('/fonts/adobe-fonts/CSSFWOrientationTest.otf');
+	}
+.test, .ref { font-size: 30px; font-family: CSSFW, sans-serif; width: 3em; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x0F3B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x0F3B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-112.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-112.html
new file mode 100644
index 0000000000..4bff413372
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-112.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0F3D TIBETAN MARK ANG KHANG GYAS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-112-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 0F3D TIBETAN MARK ANG KHANG GYAS at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x0F3D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x0F3D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-113.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-113.html
new file mode 100644
index 0000000000..d9cda3ab80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-113.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 169C OGHAM REVERSED FEATHER MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-113-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 169C OGHAM REVERSED FEATHER MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x169C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x169C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-114.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-114.html
new file mode 100644
index 0000000000..daf95af40b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-114.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2046 RIGHT SQUARE BRACKET WITH QUILL</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-114-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2046 RIGHT SQUARE BRACKET WITH QUILL at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2046;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2046;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-115.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-115.html
new file mode 100644
index 0000000000..76a0d1f390
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-115.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 207E SUPERSCRIPT RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-115-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 207E SUPERSCRIPT RIGHT PARENTHESIS at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x207E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x207E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-116.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-116.html
new file mode 100644
index 0000000000..904aeb3706
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-116.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 208E SUBSCRIPT RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-116-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 208E SUBSCRIPT RIGHT PARENTHESIS at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x208E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x208E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-117.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-117.html
new file mode 100644
index 0000000000..f9958c9a4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-117.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 232A RIGHT-POINTING ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-117-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 232A RIGHT-POINTING ANGLE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x232A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x232A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-119.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-119.html
new file mode 100644
index 0000000000..36a3f1dfcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-119.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2769 MEDIUM RIGHT PARENTHESIS ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-119-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2769 MEDIUM RIGHT PARENTHESIS ORNAMENT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2769;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2769;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-120.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-120.html
new file mode 100644
index 0000000000..741452d30f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-120.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276B MEDIUM FLATTENED RIGHT PARENTHESIS ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-120-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 276B MEDIUM FLATTENED RIGHT PARENTHESIS ORNAMENT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x276B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x276B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-121.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-121.html
new file mode 100644
index 0000000000..121dcd7457
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-121.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276D MEDIUM RIGHT-POINTING ANGLE BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-121-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 276D MEDIUM RIGHT-POINTING ANGLE BRACKET ORNAMENT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x276D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x276D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-122.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-122.html
new file mode 100644
index 0000000000..c1bc044dae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-122.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276F HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-122-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 276F HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x276F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x276F;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-123.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-123.html
new file mode 100644
index 0000000000..beb12b06fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-123.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2771 HEAVY RIGHT-POINTING ANGLE BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-123-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2771 HEAVY RIGHT-POINTING ANGLE BRACKET ORNAMENT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2771;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2771;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-124.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-124.html
new file mode 100644
index 0000000000..d596efa2b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-124.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2773 LIGHT RIGHT TORTOISE SHELL BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-124-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2773 LIGHT RIGHT TORTOISE SHELL BRACKET ORNAMENT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2773;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2773;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-125.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-125.html
new file mode 100644
index 0000000000..db73766b2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-125.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2775 MEDIUM RIGHT CURLY BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-125-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2775 MEDIUM RIGHT CURLY BRACKET ORNAMENT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2775;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2775;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-126.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-126.html
new file mode 100644
index 0000000000..aed75f9bd6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-126.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27E7 MATHEMATICAL RIGHT WHITE SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-126-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 27E7 MATHEMATICAL RIGHT WHITE SQUARE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x27E7;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x27E7;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-127.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-127.html
new file mode 100644
index 0000000000..945a1976b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-127.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27E9 MATHEMATICAL RIGHT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-127-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 27E9 MATHEMATICAL RIGHT ANGLE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x27E9;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x27E9;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-128.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-128.html
new file mode 100644
index 0000000000..b15858df13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-128.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27EB MATHEMATICAL RIGHT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-128-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 27EB MATHEMATICAL RIGHT DOUBLE ANGLE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x27EB;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x27EB;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-129.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-129.html
new file mode 100644
index 0000000000..2add59f6b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-129.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2984 RIGHT WHITE CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-129-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2984 RIGHT WHITE CURLY BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2984;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2984;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-130.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-130.html
new file mode 100644
index 0000000000..63fde2f34a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-130.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2986 RIGHT WHITE PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-130-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2986 RIGHT WHITE PARENTHESIS at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2986;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2986;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-131.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-131.html
new file mode 100644
index 0000000000..bf58dce9be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-131.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2988 Z NOTATION RIGHT IMAGE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-131-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2988 Z NOTATION RIGHT IMAGE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2988;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2988;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-132.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-132.html
new file mode 100644
index 0000000000..8392f21fab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-132.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298A Z NOTATION RIGHT BINDING BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-132-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 298A Z NOTATION RIGHT BINDING BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x298A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x298A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-133.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-133.html
new file mode 100644
index 0000000000..aad6470e23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-133.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298C RIGHT SQUARE BRACKET WITH UNDERBAR</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-133-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 298C RIGHT SQUARE BRACKET WITH UNDERBAR at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x298C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x298C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-134.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-134.html
new file mode 100644
index 0000000000..50830b12ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-134.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298E RIGHT SQUARE BRACKET WITH TICK IN BOTTOM CORNER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-134-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 298E RIGHT SQUARE BRACKET WITH TICK IN BOTTOM CORNER at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x298E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x298E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-135.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-135.html
new file mode 100644
index 0000000000..62fee7708e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-135.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2990 RIGHT SQUARE BRACKET WITH TICK IN TOP CORNER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-135-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2990 RIGHT SQUARE BRACKET WITH TICK IN TOP CORNER at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2990;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2990;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-136.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-136.html
new file mode 100644
index 0000000000..b09f104bab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-136.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2992 RIGHT ANGLE BRACKET WITH DOT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-136-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2992 RIGHT ANGLE BRACKET WITH DOT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2992;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2992;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-137.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-137.html
new file mode 100644
index 0000000000..912d8d6214
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-137.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2994 RIGHT ARC GREATER-THAN BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-137-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2994 RIGHT ARC GREATER-THAN BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2994;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2994;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-138.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-138.html
new file mode 100644
index 0000000000..5138aeb325
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-138.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2996 DOUBLE RIGHT ARC LESS-THAN BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-138-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2996 DOUBLE RIGHT ARC LESS-THAN BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2996;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2996;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-139.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-139.html
new file mode 100644
index 0000000000..473ea17678
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-139.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2998 RIGHT BLACK TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-139-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 2998 RIGHT BLACK TORTOISE SHELL BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x2998;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2998;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-140.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-140.html
new file mode 100644
index 0000000000..fe0060adab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-140.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29D9 RIGHT WIGGLY FENCE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-140-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 29D9 RIGHT WIGGLY FENCE at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x29D9;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x29D9;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-141.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-141.html
new file mode 100644
index 0000000000..073ea05ee0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-141.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29DB RIGHT DOUBLE WIGGLY FENCE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-141-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 29DB RIGHT DOUBLE WIGGLY FENCE at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x29DB;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x29DB;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-142.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-142.html
new file mode 100644
index 0000000000..994a4a88e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-142.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29FD RIGHT-POINTING CURVED ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-142-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 29FD RIGHT-POINTING CURVED ANGLE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x29FD;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x29FD;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-143.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-143.html
new file mode 100644
index 0000000000..a61cc5647f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-143.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3009 RIGHT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-143-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 3009 RIGHT ANGLE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x3009;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3009;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-144.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-144.html
new file mode 100644
index 0000000000..5905185924
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-144.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300B RIGHT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-144-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 300B RIGHT DOUBLE ANGLE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x300B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x300B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-145.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-145.html
new file mode 100644
index 0000000000..7c6cddb1eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-145.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300D RIGHT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-145-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 300D RIGHT CORNER BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x300D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x300D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-146.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-146.html
new file mode 100644
index 0000000000..37fd024865
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-146.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300F RIGHT WHITE CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-146-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 300F RIGHT WHITE CORNER BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x300F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x300F;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-147.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-147.html
new file mode 100644
index 0000000000..678d1b9af3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-147.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3011 RIGHT BLACK LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-147-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 3011 RIGHT BLACK LENTICULAR BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x3011;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3011;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-148.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-148.html
new file mode 100644
index 0000000000..e9945f0b98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-148.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3015 RIGHT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-148-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 3015 RIGHT TORTOISE SHELL BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x3015;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3015;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-149.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-149.html
new file mode 100644
index 0000000000..11907a406f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-149.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3017 RIGHT WHITE LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-149-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 3017 RIGHT WHITE LENTICULAR BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x3017;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3017;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-150.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-150.html
new file mode 100644
index 0000000000..2653652d0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-150.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3019 RIGHT WHITE TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-150-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 3019 RIGHT WHITE TORTOISE SHELL BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x3019;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3019;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-151.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-151.html
new file mode 100644
index 0000000000..af7656910c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-151.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301B RIGHT WHITE SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-151-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 301B RIGHT WHITE SQUARE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x301B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x301B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-152.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-152.html
new file mode 100644
index 0000000000..8090119899
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-152.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301E DOUBLE PRIME QUOTATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-152-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 301E DOUBLE PRIME QUOTATION MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x301E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x301E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-153.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-153.html
new file mode 100644
index 0000000000..31ca266ba9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-153.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301F LOW DOUBLE PRIME QUOTATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-153-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave 301F LOW DOUBLE PRIME QUOTATION MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x301F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x301F;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-155.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-155.html
new file mode 100644
index 0000000000..ecdf8c1487
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-155.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE36 PRESENTATION FORM FOR VERTICAL RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-155-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE36 PRESENTATION FORM FOR VERTICAL RIGHT PARENTHESIS at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE36;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE36;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-156.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-156.html
new file mode 100644
index 0000000000..52982127a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-156.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE38 PRESENTATION FORM FOR VERTICAL RIGHT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-156-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE38 PRESENTATION FORM FOR VERTICAL RIGHT CURLY BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE38;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE38;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-157.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-157.html
new file mode 100644
index 0000000000..08297c9388
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-157.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3A PRESENTATION FORM FOR VERTICAL RIGHT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-157-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE3A PRESENTATION FORM FOR VERTICAL RIGHT TORTOISE SHELL BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE3A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE3A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-158.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-158.html
new file mode 100644
index 0000000000..7a155bb952
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-158.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3C PRESENTATION FORM FOR VERTICAL RIGHT BLACK LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-158-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE3C PRESENTATION FORM FOR VERTICAL RIGHT BLACK LENTICULAR BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE3C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE3C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-159.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-159.html
new file mode 100644
index 0000000000..ada16da9f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-159.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3E PRESENTATION FORM FOR VERTICAL RIGHT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-159-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE3E PRESENTATION FORM FOR VERTICAL RIGHT DOUBLE ANGLE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE3E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE3E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-160.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-160.html
new file mode 100644
index 0000000000..65a8260450
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-160.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE40 PRESENTATION FORM FOR VERTICAL RIGHT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-160-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE40 PRESENTATION FORM FOR VERTICAL RIGHT ANGLE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE40;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE40;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-161.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-161.html
new file mode 100644
index 0000000000..847202a71e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-161.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE42 PRESENTATION FORM FOR VERTICAL RIGHT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-161-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE42 PRESENTATION FORM FOR VERTICAL RIGHT CORNER BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE42;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE42;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-162.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-162.html
new file mode 100644
index 0000000000..73daa10ed9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-162.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE44 PRESENTATION FORM FOR VERTICAL RIGHT WHITE CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-162-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE44 PRESENTATION FORM FOR VERTICAL RIGHT WHITE CORNER BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE44;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE44;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-163.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-163.html
new file mode 100644
index 0000000000..62073afabe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-163.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE48 PRESENTATION FORM FOR VERTICAL RIGHT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-163-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE48 PRESENTATION FORM FOR VERTICAL RIGHT SQUARE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE48;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE48;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-164.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-164.html
new file mode 100644
index 0000000000..e23308ccc3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-164.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE5A SMALL RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-164-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE5A SMALL RIGHT PARENTHESIS at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE5A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE5A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-165.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-165.html
new file mode 100644
index 0000000000..3f467d1197
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-165.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE5C SMALL RIGHT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-165-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE5C SMALL RIGHT CURLY BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE5C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE5C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-166.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-166.html
new file mode 100644
index 0000000000..8f9b4192cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-166.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE5E SMALL RIGHT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-166-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FE5E SMALL RIGHT TORTOISE SHELL BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE5E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE5E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-167.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-167.html
new file mode 100644
index 0000000000..80f96fa31b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-167.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF09 FULLWIDTH RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-167-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FF09 FULLWIDTH RIGHT PARENTHESIS at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF09;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF09;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-168.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-168.html
new file mode 100644
index 0000000000..23477b04ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-168.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF3D FULLWIDTH RIGHT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-168-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FF3D FULLWIDTH RIGHT SQUARE BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF3D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF3D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-169.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-169.html
new file mode 100644
index 0000000000..1a619b1d93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-169.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF5D FULLWIDTH RIGHT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-169-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FF5D FULLWIDTH RIGHT CURLY BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF5D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF5D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-170.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-170.html
new file mode 100644
index 0000000000..bd3ce8eb8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-170.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF60 FULLWIDTH RIGHT WHITE PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-170-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FF60 FULLWIDTH RIGHT WHITE PARENTHESIS at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF60;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF60;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-171.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-171.html
new file mode 100644
index 0000000000..382736c9d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-171.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF63 HALFWIDTH RIGHT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-171-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has a CL Closing Punctuation property, the browser will not leave FF63 HALFWIDTH RIGHT CORNER BRACKET at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF63;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF63;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-200.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-200.html
new file mode 100644
index 0000000000..298ee68023
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-200.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0E5A THAI CHARACTER ANGKHANKHU</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-200-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 0E5A THAI CHARACTER ANGKHANKHU at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x0E5A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x0E5A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-201.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-201.html
new file mode 100644
index 0000000000..6c95bb1308
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-201.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0E5B THAI CHARACTER KHOMUT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-201-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 0E5B THAI CHARACTER KHOMUT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+.test, .ref { width: 115px; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x0E5B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x0E5B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-202.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-202.html
new file mode 100644
index 0000000000..4d288b1f53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-202.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 17D4 KHMER SIGN KHAN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-202-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 17D4 KHMER SIGN KHAN at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x17D4;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x17D4;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-203.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-203.html
new file mode 100644
index 0000000000..2ad9d56577
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-203.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 17D6 KHMER SIGN CAMNUC PII KUUH</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-203-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 17D6 KHMER SIGN CAMNUC PII KUUH at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x17D6;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x17D6;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-204.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-204.html
new file mode 100644
index 0000000000..69416d3f5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-204.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 17DA KHMER SIGN KOOMUUT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-204-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 17DA KHMER SIGN KOOMUUT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x17DA;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x17DA;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-205.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-205.html
new file mode 100644
index 0000000000..2f3297ed10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-205.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 203C DOUBLE EXCLAMATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-205-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 203C DOUBLE EXCLAMATION MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x203C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x203C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-206.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-206.html
new file mode 100644
index 0000000000..d584f0a187
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-206.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3005 IDEOGRAPHIC ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-206-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 3005 IDEOGRAPHIC ITERATION MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x3005;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3005;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-207.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-207.html
new file mode 100644
index 0000000000..2a3d8ee06a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-207.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301C WAVE DASH</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-207-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 301C WAVE DASH at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x301C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x301C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-208.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-208.html
new file mode 100644
index 0000000000..a7f0ff0fa7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-208.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 303C MASU MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-208-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 303C MASU MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x303C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x303C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-209.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-209.html
new file mode 100644
index 0000000000..044a435241
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-209.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 303B VERTICAL IDEOGRAPHIC ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-209-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 303B VERTICAL IDEOGRAPHIC ITERATION MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x303B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x303B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-210.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-210.html
new file mode 100644
index 0000000000..076a06823e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-210.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 309B KATAKANA-HIRAGANA VOICED SOUND MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-210-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 309B KATAKANA-HIRAGANA VOICED SOUND MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x309B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x309B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-211.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-211.html
new file mode 100644
index 0000000000..254211af40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-211.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 309C KATAKANA-HIRAGANA SEMI-VOICED SOUND MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-211-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 309C KATAKANA-HIRAGANA SEMI-VOICED SOUND MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x309C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x309C;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-212.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-212.html
new file mode 100644
index 0000000000..1ce5478116
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-212.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 309D HIRAGANA ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-212-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 309D HIRAGANA ITERATION MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x309D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x309D;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-213.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-213.html
new file mode 100644
index 0000000000..c8464baf0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-213.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 309E HIRAGANA VOICED ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-213-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 309E HIRAGANA VOICED ITERATION MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x309E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x309E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-214.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-214.html
new file mode 100644
index 0000000000..20db61d453
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-214.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-214-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x30A0;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x30A0;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-215.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-215.html
new file mode 100644
index 0000000000..8a603a570e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-215.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30FB KATAKANA MIDDLE DOT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-215-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 30FB KATAKANA MIDDLE DOT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x30FB;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x30FB;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-217.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-217.html
new file mode 100644
index 0000000000..f975564d93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-217.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30FD KATAKANA ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-217-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 30FD KATAKANA ITERATION MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x30FD;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x30FD;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-218.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-218.html
new file mode 100644
index 0000000000..e7c4c0a366
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-218.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30FE KATAKANA VOICED ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-218-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave 30FE KATAKANA VOICED ITERATION MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#x30FE;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x30FE;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-219.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-219.html
new file mode 100644
index 0000000000..77b82ab0cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-219.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE54 SMALL SEMICOLON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-219-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave FE54 SMALL SEMICOLON at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE54;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE54;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-220.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-220.html
new file mode 100644
index 0000000000..5bd4f80333
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-220.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE55 SMALL COLON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-220-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave FE55 SMALL COLON at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFE55;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE55;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-221.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-221.html
new file mode 100644
index 0000000000..7919aa72e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-221.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF1A FULLWIDTH COLON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-221-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave FF1A FULLWIDTH COLON at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF1A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF1A;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-222.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-222.html
new file mode 100644
index 0000000000..0fd1093a61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-222.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF1B FULLWIDTH SEMICOLON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-222-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave FF1B FULLWIDTH SEMICOLON at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF1B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF1B;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-223.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-223.html
new file mode 100644
index 0000000000..ae076ca440
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-223.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF65 HALFWIDTH KATAKANA MIDDLE DOT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-223-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave FF65 HALFWIDTH KATAKANA MIDDLE DOT at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF65;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF65;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-225.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-225.html
new file mode 100644
index 0000000000..3e3061976a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-225.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF9E HALFWIDTH KATAKANA VOICED SOUND MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-225-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave FF9E HALFWIDTH KATAKANA VOICED SOUND MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF9E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF9E;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-226.html b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-226.html
new file mode 100644
index 0000000000..fef8bd58dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/css3-text-line-break-opclns-226.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF9F HALFWIDTH KATAKANA SEMI-VOICED SOUND MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-breaking'>
+<link rel="match" href="reference/css3-text-line-break-opclns-226-ref.html">
+<meta name='flags' content='should '>
+<meta name="assert" content="Because it has an NS Non-Starter property, the browser will not leave FF9F HALFWIDTH KATAKANA SEMI-VOICED SOUND MARK at the beginning of a line.">
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='test'>中中中&#xFF9F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF9F;文</div>
+
+
+<!--Notes:
+
+These tests examine the default behavior of characters against the expectations in the Unicode Standard Annex, version 5.1.0. The two-letter abbreviations are conventions for property names in the Unicode Standard. Non-tailorable characters have normative behavior in the Unicode Standard that applies in all normal circumstances.
+<p class='notes'>For more information about expected line break behavior and line break classes, see <a href='http://www.unicode.org/reports/tr14/'>Unicode Standard Annex #14 Line Breaking Properties</a>.
+
+
+-->
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cj-loose.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cj-loose.html
new file mode 100644
index 0000000000..164ac27315
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cj-loose.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>Line-break:loose, Conditional Japanese Starter (CJ) (ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="The browser allows a conditional Japanese starter at the beginning of a line.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if ja and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cj-normal.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cj-normal.html
new file mode 100644
index 0000000000..b6fc49e12d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cj-normal.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>Line-break:normal, Conditional Japanese Starter (CJ) (ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="The browser allows a conditional Japanese starter at the beginning of a line.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if ja and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cj-strict.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cj-strict.html
new file mode 100644
index 0000000000..ebf511b354
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cj-strict.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>line-break:strict, Conditional Japanese Starter (CJ) (ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="With line-break:strict, a browser will NOT allow a conditional Japanese starter at the beginning of a line.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cpm-loose.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cpm-loose.html
new file mode 100644
index 0000000000..8957387121
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cpm-loose.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (loose,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:loose, a browser allows a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if ja and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cpm-normal.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cpm-normal.html
new file mode 100644
index 0000000000..ccb5f951c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cpm-normal.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (normal,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:normal, a browser will NOT allow a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cpm-strict.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cpm-strict.html
new file mode 100644
index 0000000000..7f9fdb8c47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-cpm-strict.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (strict,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:strict, a browser will NOT allow a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-hyphens-loose.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-hyphens-loose.html
new file mode 100644
index 0000000000..771635bf67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-hyphens-loose.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (loose,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:loose, a browser allows a break before a hyphen-like CJK characters.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if ja and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-hyphens-normal.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-hyphens-normal.html
new file mode 100644
index 0000000000..eba18437e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-hyphens-normal.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (normal,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:normal, a browser allows a break before a hyphen-like CJK characters.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if ja and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-hyphens-strict.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-hyphens-strict.html
new file mode 100644
index 0000000000..c7e2d2aaff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-hyphens-strict.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (strict,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:strict, a browser will NOT allow a break before a hyphen-like CJK character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-in-loose.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-in-loose.html
new file mode 100644
index 0000000000..c45691a976
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-in-loose.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (loose,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:loose, a browser allows a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if ja and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-in-normal.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-in-normal.html
new file mode 100644
index 0000000000..a92d53aa60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-in-normal.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (normal,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:normal, a browser will NOT allow a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-in-strict.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-in-strict.html
new file mode 100644
index 0000000000..ccbf08e5bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-in-strict.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (strict,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:strict, a browser will NOT allow a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-iteration-loose.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-iteration-loose.html
new file mode 100644
index 0000000000..9d9e241e01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-iteration-loose.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (loose,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:loose, a browser allows a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if ja and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-iteration-normal.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-iteration-normal.html
new file mode 100644
index 0000000000..1b88d220d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-iteration-normal.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (normal,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:normal, a browser will NOT allow a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-iteration-strict.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-iteration-strict.html
new file mode 100644
index 0000000000..f14d140d9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-iteration-strict.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (strict,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:strict, a browser will NOT allow a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-po-loose.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-po-loose.html
new file mode 100644
index 0000000000..111c799a3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-po-loose.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (loose,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:loose, a browser allows a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if ja and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-po-normal.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-po-normal.html
new file mode 100644
index 0000000000..21c27195ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-po-normal.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (normal,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:normal, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-po-strict.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-po-strict.html
new file mode 100644
index 0000000000..bed89ef338
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-po-strict.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (strict,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:strict, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-pr-loose.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-pr-loose.html
new file mode 100644
index 0000000000..cb600dfcd8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-pr-loose.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (loose,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:loose, a browser allows a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if ja and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-pr-normal.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-pr-normal.html
new file mode 100644
index 0000000000..130889de6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-pr-normal.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (normal,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:normal, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-pr-strict.html b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-pr-strict.html
new file mode 100644
index 0000000000..6b83bda113
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/ja/css-text-line-break-ja-pr-strict.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (strict,ja)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Japanese, and line-break:strict, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="ja">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="ja">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if ja and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cj-loose.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cj-loose.html
new file mode 100644
index 0000000000..0a76b9338c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cj-loose.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>Line-break:loose, Conditional Japanese Starter (CJ) (de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="The browser allows a conditional Japanese starter at the beginning of a line; the langauge not being Chinese or Japanese makes no difference.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if de and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cj-normal.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cj-normal.html
new file mode 100644
index 0000000000..a5339b4a2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cj-normal.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>Line-break:normal, Conditional Japanese Starter (CJ) (de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="The browser allows a conditional Japanese starter at the beginning of a line; the langauge not being Chinese or Japanese makes no difference.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if de and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cj-strict.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cj-strict.html
new file mode 100644
index 0000000000..ebfbed7025
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cj-strict.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>line-break:strict, Conditional Japanese Starter (CJ) (de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="With line-break:strict, a browser will NOT allow a conditional Japanese starter at the beginning of a line; the langauge not being Chinese or Japanese makes no difference.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cpm-loose.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cpm-loose.html
new file mode 100644
index 0000000000..7937664b90
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cpm-loose.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (loose,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:loose, a browser will NOT allow a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cpm-normal.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cpm-normal.html
new file mode 100644
index 0000000000..0818c4364d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cpm-normal.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (normal,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cpm-strict.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cpm-strict.html
new file mode 100644
index 0000000000..97d2cc6d64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-cpm-strict.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (strict,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-hyphens-loose.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-hyphens-loose.html
new file mode 100644
index 0000000000..611c0617e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-hyphens-loose.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (loose,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:loose, a browser will NOT allow a break before a hyphen-like CJK character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-hyphens-normal.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-hyphens-normal.html
new file mode 100644
index 0000000000..f8ca72337e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-hyphens-normal.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (normal,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before a hyphen-like CJK character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-hyphens-strict.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-hyphens-strict.html
new file mode 100644
index 0000000000..4cab0c4914
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-hyphens-strict.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (strict,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before a hyphen-like CJK character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-in-loose.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-in-loose.html
new file mode 100644
index 0000000000..e1ea5c5414
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-in-loose.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (loose,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:loose, a browser allows a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if de and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-in-normal.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-in-normal.html
new file mode 100644
index 0000000000..42307521ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-in-normal.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (normal,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-in-strict.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-in-strict.html
new file mode 100644
index 0000000000..9e9ff0c1b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-in-strict.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (strict,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-iteration-loose.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-iteration-loose.html
new file mode 100644
index 0000000000..065820f2c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-iteration-loose.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (loose,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:loose, a browser allows a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if de and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-iteration-normal.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-iteration-normal.html
new file mode 100644
index 0000000000..3124d5cd96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-iteration-normal.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (normal,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-iteration-strict.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-iteration-strict.html
new file mode 100644
index 0000000000..774da5dcfe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-iteration-strict.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (strict,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-po-loose.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-po-loose.html
new file mode 100644
index 0000000000..e133b0679e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-po-loose.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (loose,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:loose, a browser wll NOT allow a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-po-normal.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-po-normal.html
new file mode 100644
index 0000000000..8e3efaa364
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-po-normal.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (normal,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-po-strict.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-po-strict.html
new file mode 100644
index 0000000000..00cc1e41a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-po-strict.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (strict,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if de and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-pr-loose.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-pr-loose.html
new file mode 100644
index 0000000000..5958365941
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-pr-loose.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (loose,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:loose, a browser wll allow a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test (ID ÷ PR × ID)
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if de and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-pr-normal.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-pr-normal.html
new file mode 100644
index 0000000000..28cbaf25fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-pr-normal.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (normal,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:normal, a browser will allow a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test (ID ÷ PR × ID)
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if de and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-pr-strict.html b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-pr-strict.html
new file mode 100644
index 0000000000..4a96c8f178
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/other-lang/css-text-line-break-de-pr-strict.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (strict,de)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:strict, a browser will allow a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test (ID ÷ PR × ID)
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="de">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if de and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-001-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-001-ref.html
new file mode 100644
index 0000000000..46dd56f7c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-001-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0028 LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x0028;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x0028;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-002-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-002-ref.html
new file mode 100644
index 0000000000..50f130c46e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-002-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 005B LEFT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x005B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x005B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-003-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-003-ref.html
new file mode 100644
index 0000000000..8e6812d73c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-003-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 007B LEFT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x007B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x007B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-004-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-004-ref.html
new file mode 100644
index 0000000000..1b11bfecd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-004-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0F3A TIBETAN MARK GUG RTAGS GYON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: CSSFW;
+	src: url('/fonts/adobe-fonts/CSSFWOrientationTest.otf');
+	}
+.test, .ref { font-size: 30px; font-family: CSSFW, sans-serif; width: 3em; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x0F3A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x0F3A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-005-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-005-ref.html
new file mode 100644
index 0000000000..3d0c34c427
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-005-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0F3C TIBETAN MARK ANG KHANG GYON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x0F3C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x0F3C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-006-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-006-ref.html
new file mode 100644
index 0000000000..d9f0cabf17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-006-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 169B OGHAM FEATHER MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x169B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x169B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-007-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-007-ref.html
new file mode 100644
index 0000000000..c5c359184e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-007-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 201A SINGLE LOW-9 QUOTATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x201A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x201A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-008-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-008-ref.html
new file mode 100644
index 0000000000..c58fe3cf38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-008-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 201E DOUBLE LOW-9 QUOTATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x201E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x201E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-009-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-009-ref.html
new file mode 100644
index 0000000000..f450477d1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-009-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2045 LEFT SQUARE BRACKET WITH QUILL</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2045;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2045;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-010-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-010-ref.html
new file mode 100644
index 0000000000..58ac7d6623
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-010-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 207D SUPERSCRIPT LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x207D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x207D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-011-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-011-ref.html
new file mode 100644
index 0000000000..d141e42b13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-011-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 208D SUBSCRIPT LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x208D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x208D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-012-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-012-ref.html
new file mode 100644
index 0000000000..3edfed72a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-012-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2329 LEFT-POINTING ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2329;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2329;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-014-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-014-ref.html
new file mode 100644
index 0000000000..811b3bd676
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-014-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2768 MEDIUM LEFT PARENTHESIS ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2768;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2768;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-015-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-015-ref.html
new file mode 100644
index 0000000000..bd04d24aac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-015-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276A MEDIUM FLATTENED LEFT PARENTHESIS ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x276A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x276A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-016-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-016-ref.html
new file mode 100644
index 0000000000..a02b4d3f81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-016-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276C MEDIUM LEFT-POINTING ANGLE BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x276C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x276C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-017-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-017-ref.html
new file mode 100644
index 0000000000..5e212b8cfc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-017-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276E HEAVY LEFT-POINTING ANGLE QUOTATION MARK ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x276E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x276E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-018-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-018-ref.html
new file mode 100644
index 0000000000..23c8a778ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-018-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2770 HEAVY LEFT-POINTING ANGLE BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2770;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2770;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-019-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-019-ref.html
new file mode 100644
index 0000000000..a1bb514bd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-019-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2772 LIGHT LEFT TORTOISE SHELL BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2772;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2772;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-020-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-020-ref.html
new file mode 100644
index 0000000000..2fbd0f241e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-020-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2774 MEDIUM LEFT CURLY BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2774;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2774;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-021-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-021-ref.html
new file mode 100644
index 0000000000..577d6d1f31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-021-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27E6 MATHEMATICAL LEFT WHITE SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x27E6;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x27E6;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-022-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-022-ref.html
new file mode 100644
index 0000000000..07fcb21669
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-022-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27E8 MATHEMATICAL LEFT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x27E8;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x27E8;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-023-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-023-ref.html
new file mode 100644
index 0000000000..026eb97c54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-023-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27EA MATHEMATICAL LEFT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x27EA;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x27EA;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-024-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-024-ref.html
new file mode 100644
index 0000000000..bd86c06dae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-024-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2983 LEFT WHITE CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2983;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2983;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-025-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-025-ref.html
new file mode 100644
index 0000000000..31b12b3362
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-025-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2985 LEFT WHITE PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2985;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2985;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-026-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-026-ref.html
new file mode 100644
index 0000000000..97efc72bc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-026-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2987 Z NOTATION LEFT IMAGE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2987;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2987;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-027-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-027-ref.html
new file mode 100644
index 0000000000..3457afccce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-027-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2989 Z NOTATION LEFT BINDING BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2989;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2989;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-028-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-028-ref.html
new file mode 100644
index 0000000000..54e659c9d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-028-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298B LEFT SQUARE BRACKET WITH UNDERBAR</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x298B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x298B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-029-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-029-ref.html
new file mode 100644
index 0000000000..137ad2fc12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-029-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298D LEFT SQUARE BRACKET WITH TICK IN TOP CORNER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x298D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x298D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-030-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-030-ref.html
new file mode 100644
index 0000000000..7fd6787c99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-030-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298F LEFT SQUARE BRACKET WITH TICK IN BOTTOM CORNER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x298F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x298F;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-031-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-031-ref.html
new file mode 100644
index 0000000000..417b95a746
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-031-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2991 LEFT ANGLE BRACKET WITH DOT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2991;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2991;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-032-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-032-ref.html
new file mode 100644
index 0000000000..ad318130ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-032-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2993 LEFT ARC LESS-THAN BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2993;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2993;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-033-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-033-ref.html
new file mode 100644
index 0000000000..63fc7e2493
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-033-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2995 DOUBLE LEFT ARC GREATER-THAN BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2995;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2995;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-034-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-034-ref.html
new file mode 100644
index 0000000000..2cbe4876f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-034-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2997 LEFT BLACK TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x2997;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x2997;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-035-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-035-ref.html
new file mode 100644
index 0000000000..79ab3def8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-035-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29D8 LEFT WIGGLY FENCE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x29D8;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x29D8;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-036-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-036-ref.html
new file mode 100644
index 0000000000..8414d96527
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-036-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29DA LEFT DOUBLE WIGGLY FENCE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x29DA;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x29DA;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-037-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-037-ref.html
new file mode 100644
index 0000000000..411532946c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-037-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29FC LEFT-POINTING CURVED ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x29FC;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x29FC;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-038-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-038-ref.html
new file mode 100644
index 0000000000..e2eb5ea4da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-038-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3008 LEFT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x3008;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x3008;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-039-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-039-ref.html
new file mode 100644
index 0000000000..ba7412129c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-039-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300A LEFT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x300A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x300A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-040-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-040-ref.html
new file mode 100644
index 0000000000..8d33502c95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-040-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300C LEFT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x300C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x300C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-041-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-041-ref.html
new file mode 100644
index 0000000000..e86bbc9577
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-041-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300E LEFT WHITE CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x300E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x300E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-042-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-042-ref.html
new file mode 100644
index 0000000000..19309592bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-042-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3010 LEFT BLACK LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x3010;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x3010;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-043-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-043-ref.html
new file mode 100644
index 0000000000..9ca205b1f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-043-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3014 LEFT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x3014;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x3014;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-044-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-044-ref.html
new file mode 100644
index 0000000000..4ccef8a2f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-044-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3016 LEFT WHITE LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x3016;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x3016;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-045-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-045-ref.html
new file mode 100644
index 0000000000..63eceeac63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-045-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3018 LEFT WHITE TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x3018;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x3018;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-046-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-046-ref.html
new file mode 100644
index 0000000000..3674a1f3e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-046-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301A LEFT WHITE SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x301A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x301A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-047-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-047-ref.html
new file mode 100644
index 0000000000..5f5f78eb1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-047-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301D REVERSED DOUBLE PRIME QUOTATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#x301D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#x301D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-049-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-049-ref.html
new file mode 100644
index 0000000000..654edf9abf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-049-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE35 PRESENTATION FORM FOR VERTICAL LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE35;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE35;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-050-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-050-ref.html
new file mode 100644
index 0000000000..8e3941da48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-050-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE37 PRESENTATION FORM FOR VERTICAL LEFT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE37;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE37;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-051-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-051-ref.html
new file mode 100644
index 0000000000..dca915b458
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-051-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE39 PRESENTATION FORM FOR VERTICAL LEFT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE39;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE39;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-052-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-052-ref.html
new file mode 100644
index 0000000000..a20cab2e66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-052-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3B PRESENTATION FORM FOR VERTICAL LEFT BLACK LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE3B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE3B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-053-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-053-ref.html
new file mode 100644
index 0000000000..62420698a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-053-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3D PRESENTATION FORM FOR VERTICAL LEFT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE3D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE3D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-054-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-054-ref.html
new file mode 100644
index 0000000000..dacad2e424
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-054-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3F PRESENTATION FORM FOR VERTICAL LEFT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE3F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE3F;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-055-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-055-ref.html
new file mode 100644
index 0000000000..cc9f1f06fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-055-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE41 PRESENTATION FORM FOR VERTICAL LEFT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE41;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE41;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-056-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-056-ref.html
new file mode 100644
index 0000000000..b4246b5262
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-056-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE43 PRESENTATION FORM FOR VERTICAL LEFT WHITE CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE43;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE43;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-057-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-057-ref.html
new file mode 100644
index 0000000000..6dfd8d0214
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-057-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE47 PRESENTATION FORM FOR VERTICAL LEFT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE47;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE47;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-058-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-058-ref.html
new file mode 100644
index 0000000000..3f784fa09d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-058-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE59 SMALL LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE59;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE59;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-059-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-059-ref.html
new file mode 100644
index 0000000000..6986744bb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-059-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE5B SMALL LEFT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE5B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE5B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-060-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-060-ref.html
new file mode 100644
index 0000000000..cfbf4361c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-060-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE5D SMALL LEFT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFE5D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFE5D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-061-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-061-ref.html
new file mode 100644
index 0000000000..87636e1d4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-061-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF08 FULLWIDTH LEFT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFF08;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFF08;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-062-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-062-ref.html
new file mode 100644
index 0000000000..2e1e553913
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-062-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF3B FULLWIDTH LEFT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFF3B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFF3B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-063-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-063-ref.html
new file mode 100644
index 0000000000..9cc3675752
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-063-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF5B FULLWIDTH LEFT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFF5B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFF5B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-064-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-064-ref.html
new file mode 100644
index 0000000000..000b51cc84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-064-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF5F FULLWIDTH LEFT WHITE PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFF5F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFF5F;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-065-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-065-ref.html
new file mode 100644
index 0000000000..add895356d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-065-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF62 HALFWIDTH LEFT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />&#xFF62;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />&#xFF62;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-100-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-100-ref.html
new file mode 100644
index 0000000000..91920a0d51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-100-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3001 IDEOGRAPHIC COMMA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x3001;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3001;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-101-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-101-ref.html
new file mode 100644
index 0000000000..115837ffc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-101-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3002 IDEOGRAPHIC FULL STOP</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x3002;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3002;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-102-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-102-ref.html
new file mode 100644
index 0000000000..43ed930884
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-102-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE50 SMALL COMMA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE50;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE50;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-103-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-103-ref.html
new file mode 100644
index 0000000000..2deabec33e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-103-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE52 SMALL FULL STOP</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE52;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE52;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-104-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-104-ref.html
new file mode 100644
index 0000000000..12a8a26e16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-104-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF0C FULLWIDTH COMMA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF0C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF0C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-105-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-105-ref.html
new file mode 100644
index 0000000000..cc54084b49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-105-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF0E FULLWIDTH FULL STOP</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF0E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF0E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-106-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-106-ref.html
new file mode 100644
index 0000000000..0bb25f9e98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-106-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF61 HALFWIDTH IDEOGRAPHIC FULL STOP</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF61;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF61;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-107-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-107-ref.html
new file mode 100644
index 0000000000..6f5cea03f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-107-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF64 HALFWIDTH IDEOGRAPHIC COMMA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF64;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF64;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-108-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-108-ref.html
new file mode 100644
index 0000000000..abc194f541
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-108-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0029 RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x0029;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x0029;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-109-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-109-ref.html
new file mode 100644
index 0000000000..bf524e96fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-109-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 005D RIGHT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x005D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x005D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-110-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-110-ref.html
new file mode 100644
index 0000000000..c58e6ad4c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-110-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 007D RIGHT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x007D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x007D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-111-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-111-ref.html
new file mode 100644
index 0000000000..07686ac92e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-111-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0F3B TIBETAN MARK GUG RTAGS GYAS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: CSSFW;
+	src: url('/fonts/adobe-fonts/CSSFWOrientationTest.otf');
+	}
+.test, .ref { font-size: 30px; font-family: CSSFW, sans-serif; padding: 0; width: 3em; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x0F3B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x0F3B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-112-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-112-ref.html
new file mode 100644
index 0000000000..da06c4af66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-112-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0F3D TIBETAN MARK ANG KHANG GYAS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x0F3D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x0F3D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-113-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-113-ref.html
new file mode 100644
index 0000000000..f3e44386c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-113-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 169C OGHAM REVERSED FEATHER MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x169C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x169C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-114-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-114-ref.html
new file mode 100644
index 0000000000..bfb47793c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-114-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2046 RIGHT SQUARE BRACKET WITH QUILL</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2046;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2046;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-115-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-115-ref.html
new file mode 100644
index 0000000000..5546319a87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-115-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 207E SUPERSCRIPT RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x207E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x207E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-116-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-116-ref.html
new file mode 100644
index 0000000000..656f7b78f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-116-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 208E SUBSCRIPT RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x208E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x208E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-117-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-117-ref.html
new file mode 100644
index 0000000000..120291e812
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-117-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 232A RIGHT-POINTING ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x232A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x232A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-119-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-119-ref.html
new file mode 100644
index 0000000000..c0d1b1a43b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-119-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2769 MEDIUM RIGHT PARENTHESIS ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2769;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2769;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-120-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-120-ref.html
new file mode 100644
index 0000000000..563c256579
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-120-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276B MEDIUM FLATTENED RIGHT PARENTHESIS ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x276B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x276B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-121-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-121-ref.html
new file mode 100644
index 0000000000..e78b5fde65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-121-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276D MEDIUM RIGHT-POINTING ANGLE BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x276D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x276D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-122-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-122-ref.html
new file mode 100644
index 0000000000..e044d9be01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-122-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 276F HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x276F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x276F;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-123-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-123-ref.html
new file mode 100644
index 0000000000..7f865de8f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-123-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2771 HEAVY RIGHT-POINTING ANGLE BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2771;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2771;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-124-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-124-ref.html
new file mode 100644
index 0000000000..fe3ad047f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-124-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2773 LIGHT RIGHT TORTOISE SHELL BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2773;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2773;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-125-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-125-ref.html
new file mode 100644
index 0000000000..37671a5027
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-125-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2775 MEDIUM RIGHT CURLY BRACKET ORNAMENT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2775;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2775;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-126-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-126-ref.html
new file mode 100644
index 0000000000..9cfbb13c08
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-126-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27E7 MATHEMATICAL RIGHT WHITE SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x27E7;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x27E7;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-127-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-127-ref.html
new file mode 100644
index 0000000000..e97aa629a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-127-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27E9 MATHEMATICAL RIGHT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x27E9;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x27E9;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-128-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-128-ref.html
new file mode 100644
index 0000000000..29c0cea9af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-128-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 27EB MATHEMATICAL RIGHT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x27EB;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x27EB;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-129-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-129-ref.html
new file mode 100644
index 0000000000..6861289c58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-129-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2984 RIGHT WHITE CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2984;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2984;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-130-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-130-ref.html
new file mode 100644
index 0000000000..600fc9ae5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-130-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2986 RIGHT WHITE PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2986;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2986;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-131-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-131-ref.html
new file mode 100644
index 0000000000..e5e947af47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-131-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2988 Z NOTATION RIGHT IMAGE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2988;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2988;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-132-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-132-ref.html
new file mode 100644
index 0000000000..c491c47652
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-132-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298A Z NOTATION RIGHT BINDING BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x298A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x298A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-133-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-133-ref.html
new file mode 100644
index 0000000000..77fbf81842
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-133-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298C RIGHT SQUARE BRACKET WITH UNDERBAR</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x298C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x298C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-134-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-134-ref.html
new file mode 100644
index 0000000000..0050299e79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-134-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 298E RIGHT SQUARE BRACKET WITH TICK IN BOTTOM CORNER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x298E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x298E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-135-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-135-ref.html
new file mode 100644
index 0000000000..00aae4f02c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-135-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2990 RIGHT SQUARE BRACKET WITH TICK IN TOP CORNER</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2990;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2990;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-136-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-136-ref.html
new file mode 100644
index 0000000000..17b7f2fb7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-136-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2992 RIGHT ANGLE BRACKET WITH DOT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2992;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2992;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-137-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-137-ref.html
new file mode 100644
index 0000000000..2b02661ee6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-137-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2994 RIGHT ARC GREATER-THAN BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2994;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2994;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-138-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-138-ref.html
new file mode 100644
index 0000000000..9c19fc4202
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-138-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2996 DOUBLE RIGHT ARC LESS-THAN BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2996;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2996;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-139-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-139-ref.html
new file mode 100644
index 0000000000..99bce9eb82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-139-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 2998 RIGHT BLACK TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x2998;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x2998;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-140-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-140-ref.html
new file mode 100644
index 0000000000..51e3ae03de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-140-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29D9 RIGHT WIGGLY FENCE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x29D9;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x29D9;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-141-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-141-ref.html
new file mode 100644
index 0000000000..e0f33d546a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-141-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29DB RIGHT DOUBLE WIGGLY FENCE</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x29DB;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x29DB;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-142-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-142-ref.html
new file mode 100644
index 0000000000..a02b17d9b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-142-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 29FD RIGHT-POINTING CURVED ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x29FD;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x29FD;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-143-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-143-ref.html
new file mode 100644
index 0000000000..b0b2a92f84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-143-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3009 RIGHT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x3009;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3009;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-144-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-144-ref.html
new file mode 100644
index 0000000000..bd92ed7ff5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-144-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300B RIGHT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x300B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x300B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-145-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-145-ref.html
new file mode 100644
index 0000000000..5168a7327d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-145-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300D RIGHT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x300D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x300D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-146-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-146-ref.html
new file mode 100644
index 0000000000..399b5b3b8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-146-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 300F RIGHT WHITE CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x300F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x300F;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-147-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-147-ref.html
new file mode 100644
index 0000000000..bb72516dfd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-147-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3011 RIGHT BLACK LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x3011;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3011;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-148-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-148-ref.html
new file mode 100644
index 0000000000..6fc052a089
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-148-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3015 RIGHT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x3015;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3015;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-149-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-149-ref.html
new file mode 100644
index 0000000000..1fa0b2525c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-149-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3017 RIGHT WHITE LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x3017;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3017;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-150-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-150-ref.html
new file mode 100644
index 0000000000..3ba44055d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-150-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3019 RIGHT WHITE TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x3019;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3019;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-151-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-151-ref.html
new file mode 100644
index 0000000000..3b95e441a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-151-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301B RIGHT WHITE SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x301B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x301B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-152-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-152-ref.html
new file mode 100644
index 0000000000..9197189092
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-152-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301E DOUBLE PRIME QUOTATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x301E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x301E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-153-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-153-ref.html
new file mode 100644
index 0000000000..de9eadcd34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-153-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301F LOW DOUBLE PRIME QUOTATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x301F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x301F;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-155-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-155-ref.html
new file mode 100644
index 0000000000..c8f3818f3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-155-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE36 PRESENTATION FORM FOR VERTICAL RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE36;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE36;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-156-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-156-ref.html
new file mode 100644
index 0000000000..781d78d8b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-156-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE38 PRESENTATION FORM FOR VERTICAL RIGHT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE38;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE38;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-157-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-157-ref.html
new file mode 100644
index 0000000000..9e8a8f6cea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-157-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3A PRESENTATION FORM FOR VERTICAL RIGHT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE3A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE3A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-158-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-158-ref.html
new file mode 100644
index 0000000000..fbeff6ad46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-158-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3C PRESENTATION FORM FOR VERTICAL RIGHT BLACK LENTICULAR BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE3C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE3C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-159-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-159-ref.html
new file mode 100644
index 0000000000..86b378c3b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-159-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE3E PRESENTATION FORM FOR VERTICAL RIGHT DOUBLE ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE3E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE3E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-160-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-160-ref.html
new file mode 100644
index 0000000000..ebca446b1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-160-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE40 PRESENTATION FORM FOR VERTICAL RIGHT ANGLE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE40;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE40;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-161-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-161-ref.html
new file mode 100644
index 0000000000..958940816c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-161-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE42 PRESENTATION FORM FOR VERTICAL RIGHT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE42;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE42;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-162-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-162-ref.html
new file mode 100644
index 0000000000..0238fe36f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-162-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE44 PRESENTATION FORM FOR VERTICAL RIGHT WHITE CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE44;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE44;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-163-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-163-ref.html
new file mode 100644
index 0000000000..e62a3662cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-163-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE48 PRESENTATION FORM FOR VERTICAL RIGHT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE48;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE48;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-164-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-164-ref.html
new file mode 100644
index 0000000000..1deb6369d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-164-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE5A SMALL RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE5A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE5A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-165-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-165-ref.html
new file mode 100644
index 0000000000..692a8e2ddd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-165-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE5C SMALL RIGHT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE5C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE5C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-166-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-166-ref.html
new file mode 100644
index 0000000000..da1e27eab7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-166-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE5E SMALL RIGHT TORTOISE SHELL BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE5E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE5E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-167-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-167-ref.html
new file mode 100644
index 0000000000..0509a85960
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-167-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF09 FULLWIDTH RIGHT PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF09;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF09;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-168-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-168-ref.html
new file mode 100644
index 0000000000..042ab9a5d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-168-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF3D FULLWIDTH RIGHT SQUARE BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF3D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF3D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-169-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-169-ref.html
new file mode 100644
index 0000000000..9c5499e6b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-169-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF5D FULLWIDTH RIGHT CURLY BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF5D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF5D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-170-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-170-ref.html
new file mode 100644
index 0000000000..d7028fbd76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-170-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF60 FULLWIDTH RIGHT WHITE PARENTHESIS</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF60;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF60;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-171-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-171-ref.html
new file mode 100644
index 0000000000..3802671f60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-171-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF63 HALFWIDTH RIGHT CORNER BRACKET</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF63;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF63;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-200-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-200-ref.html
new file mode 100644
index 0000000000..cd50cae0ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-200-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0E5A THAI CHARACTER ANGKHANKHU</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x0E5A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x0E5A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-201-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-201-ref.html
new file mode 100644
index 0000000000..d8d079cfaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-201-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 0E5B THAI CHARACTER KHOMUT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+.test, .ref { width: 115px; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x0E5B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x0E5B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-202-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-202-ref.html
new file mode 100644
index 0000000000..0b2ee7309a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-202-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 17D4 KHMER SIGN KHAN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x17D4;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x17D4;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-203-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-203-ref.html
new file mode 100644
index 0000000000..0d6bb9c72c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-203-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 17D6 KHMER SIGN CAMNUC PII KUUH</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x17D6;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x17D6;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-204-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-204-ref.html
new file mode 100644
index 0000000000..9a083cba7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-204-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 17DA KHMER SIGN KOOMUUT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x17DA;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x17DA;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-205-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-205-ref.html
new file mode 100644
index 0000000000..f01625dbdb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-205-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 203C DOUBLE EXCLAMATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x203C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x203C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-206-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-206-ref.html
new file mode 100644
index 0000000000..8f9e54f18f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-206-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3005 IDEOGRAPHIC ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x3005;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x3005;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-207-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-207-ref.html
new file mode 100644
index 0000000000..6c1e1e636b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-207-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 301C WAVE DASH</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x301C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x301C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-208-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-208-ref.html
new file mode 100644
index 0000000000..33026f4388
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-208-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 303C MASU MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x303C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x303C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-209-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-209-ref.html
new file mode 100644
index 0000000000..c6b71bb879
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-209-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 303B VERTICAL IDEOGRAPHIC ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x303B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x303B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-210-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-210-ref.html
new file mode 100644
index 0000000000..24d07d6d5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-210-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 309B KATAKANA-HIRAGANA VOICED SOUND MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x309B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x309B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-211-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-211-ref.html
new file mode 100644
index 0000000000..2f15f277d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-211-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 309C KATAKANA-HIRAGANA SEMI-VOICED SOUND MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x309C;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x309C;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-212-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-212-ref.html
new file mode 100644
index 0000000000..468b7f620a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-212-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 309D HIRAGANA ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x309D;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x309D;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-213-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-213-ref.html
new file mode 100644
index 0000000000..698e01c397
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-213-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 309E HIRAGANA VOICED ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x309E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x309E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-214-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-214-ref.html
new file mode 100644
index 0000000000..90e4a6135d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-214-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x30A0;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x30A0;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-215-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-215-ref.html
new file mode 100644
index 0000000000..5c5810da18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-215-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30FB KATAKANA MIDDLE DOT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x30FB;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x30FB;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-217-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-217-ref.html
new file mode 100644
index 0000000000..16db5f8cb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-217-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30FD KATAKANA ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x30FD;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x30FD;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-218-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-218-ref.html
new file mode 100644
index 0000000000..eff2c5d774
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-218-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30FE KATAKANA VOICED ITERATION MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#x30FE;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#x30FE;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-219-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-219-ref.html
new file mode 100644
index 0000000000..817a07a12a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-219-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE54 SMALL SEMICOLON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE54;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE54;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-220-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-220-ref.html
new file mode 100644
index 0000000000..d8ce7e929b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-220-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FE55 SMALL COLON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFE55;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFE55;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-221-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-221-ref.html
new file mode 100644
index 0000000000..7aeb36995e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-221-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF1A FULLWIDTH COLON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF1A;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF1A;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-222-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-222-ref.html
new file mode 100644
index 0000000000..53643b091a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-222-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF1B FULLWIDTH SEMICOLON</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF1B;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF1B;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-223-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-223-ref.html
new file mode 100644
index 0000000000..71761fe267
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-223-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF65 HALFWIDTH KATAKANA MIDDLE DOT</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF65;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF65;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-225-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-225-ref.html
new file mode 100644
index 0000000000..fcc28f8b20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-225-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF9E HALFWIDTH KATAKANA VOICED SOUND MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF9E;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF9E;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-226-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-226-ref.html
new file mode 100644
index 0000000000..c691af7796
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-226-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: FF9F HALFWIDTH KATAKANA SEMI-VOICED SOUND MARK</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>中中<br />中&#xFF9F;文</div>
+
+
+
+
+
+<div class='ref'>中中<br />中&#xFF9F;文</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-250-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-250-ref.html
new file mode 100644
index 0000000000..643abd349f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-250-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3041 HIRAGANA LETTER SMALL A</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>かか<br />か&#x3041;な</div>
+
+
+
+
+
+<div class='ref'>かか<br />か&#x3041;な</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-251-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-251-ref.html
new file mode 100644
index 0000000000..cc26eac8ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-251-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3043 HIRAGANA LETTER SMALL I</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>かか<br />か&#x3043;な</div>
+
+
+
+
+
+<div class='ref'>かか<br />か&#x3043;な</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-252-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-252-ref.html
new file mode 100644
index 0000000000..09a22f207f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-252-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3045 HIRAGANA LETTER SMALL U</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>かか<br />か&#x3045;な</div>
+
+
+
+
+
+<div class='ref'>かか<br />か&#x3045;な</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-253-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-253-ref.html
new file mode 100644
index 0000000000..81b1ef31d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-253-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3047 HIRAGANA LETTER SMALL E</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>かか<br />か&#x3047;な</div>
+
+
+
+
+
+<div class='ref'>かか<br />か&#x3047;な</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-254-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-254-ref.html
new file mode 100644
index 0000000000..a263c8ea12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-254-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3049 HIRAGANA LETTER SMALL O</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>かか<br />か&#x3049;な</div>
+
+
+
+
+
+<div class='ref'>かか<br />か&#x3049;な</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-255-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-255-ref.html
new file mode 100644
index 0000000000..37a2147d96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-255-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3063 HIRAGANA LETTER SMALL TU</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>かか<br />か&#x3063;な</div>
+
+
+
+
+
+<div class='ref'>かか<br />か&#x3063;な</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-256-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-256-ref.html
new file mode 100644
index 0000000000..7cbfcbc2f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-256-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3083 HIRAGANA LETTER SMALL YA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>かか<br />か&#x3083;な</div>
+
+
+
+
+
+<div class='ref'>かか<br />か&#x3083;な</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-257-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-257-ref.html
new file mode 100644
index 0000000000..ad02dc8724
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-257-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3085 HIRAGANA LETTER SMALL YU</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>かか<br />か&#x3085;な</div>
+
+
+
+
+
+<div class='ref'>かか<br />か&#x3085;な</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-258-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-258-ref.html
new file mode 100644
index 0000000000..32d9c033a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-258-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 3087 HIRAGANA LETTER SMALL YO </title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>かか<br />か&#x3087;な</div>
+
+
+
+
+
+<div class='ref'>かか<br />か&#x3087;な</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-259-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-259-ref.html
new file mode 100644
index 0000000000..8f9b7b99be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-259-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 308E HIRAGANA LETTER SMALL WA </title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the two orange boxes are identical.</p>
+
+
+<div class='ref'>かか<br />か&#x308E;な</div>
+
+
+
+
+
+<div class='ref'>かか<br />か&#x308E;な</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-260-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-260-ref.html
new file mode 100644
index 0000000000..4138a010e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-260-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30A1 KATAKANA LETTER SMALL A</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+
+
+
+<div class='ref'>カカ<br />カ&#x30A1;ナ</div>
+
+
+
+
+
+<div class='ref'>カカ<br />カ&#x30A1;ナ</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-261-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-261-ref.html
new file mode 100644
index 0000000000..e75d5b6388
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-261-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30A3 KATAKANA LETTER SMALL I</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+
+
+
+<div class='ref'>カカ<br />カ&#x30A3;ナ</div>
+
+
+
+
+
+<div class='ref'>カカ<br />カ&#x30A3;ナ</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-262-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-262-ref.html
new file mode 100644
index 0000000000..340f377a57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-262-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30A5 KATAKANA LETTER SMALL U</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+
+
+
+<div class='ref'>カカ<br />カ&#x30A5;ナ</div>
+
+
+
+
+
+<div class='ref'>カカ<br />カ&#x30A5;ナ</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-263-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-263-ref.html
new file mode 100644
index 0000000000..c89ad0eb58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-263-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30A7 KATAKANA LETTER SMALL E</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+
+
+
+<div class='ref'>カカ<br />カ&#x30A7;ナ</div>
+
+
+
+
+
+<div class='ref'>カカ<br />カ&#x30A7;ナ</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-264-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-264-ref.html
new file mode 100644
index 0000000000..08eed144d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-264-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30A9 KATAKANA LETTER SMALL O</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+
+
+
+<div class='ref'>カカ<br />カ&#x30A9;ナ</div>
+
+
+
+
+
+<div class='ref'>カカ<br />カ&#x30A9;ナ</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-265-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-265-ref.html
new file mode 100644
index 0000000000..2dbda746d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-265-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30C3 KATAKANA LETTER SMALL TU</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+
+
+
+<div class='ref'>カカ<br />カ&#x30C3;ナ</div>
+
+
+
+
+
+<div class='ref'>カカ<br />カ&#x30C3;ナ</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-266-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-266-ref.html
new file mode 100644
index 0000000000..259b8f8249
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-266-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30E3 KATAKANA LETTER SMALL YA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+
+
+
+<div class='ref'>カカ<br />カ&#x30E3;ナ</div>
+
+
+
+
+
+<div class='ref'>カカ<br />カ&#x30E3;ナ</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-267-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-267-ref.html
new file mode 100644
index 0000000000..02ef355276
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-267-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30E5 KATAKANA LETTER SMALL YU</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+
+
+
+<div class='ref'>カカ<br />カ&#x30E5;ナ</div>
+
+
+
+
+
+<div class='ref'>カカ<br />カ&#x30E5;ナ</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-268-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-268-ref.html
new file mode 100644
index 0000000000..ad2b16f5df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-268-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30E7 KATAKANA LETTER SMALL YO</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+
+
+
+<div class='ref'>カカ<br />カ&#x30E7;ナ</div>
+
+
+
+
+
+<div class='ref'>カカ<br />カ&#x30E7;ナ</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-269-ref.html b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-269-ref.html
new file mode 100644
index 0000000000..986634f0f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/reference/css3-text-line-break-opclns-269-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: 30EE KATAKANA LETTER SMALL WA</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'mplus-1p-regular';
+	src: url('/fonts/mplus-1p-regular.woff') format('woff');
+	/* filesize: 803K */
+	}
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 95px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+</head>
+<body>
+
+
+
+<div class='ref'>カカ<br />カ&#x30EE;ナ</div>
+
+
+
+
+
+<div class='ref'>カカ<br />カ&#x30EE;ナ</div>
+
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/support/BPG-Ucnobi-U.woff b/testing/web-platform/tests/css/css-text/i18n/support/BPG-Ucnobi-U.woff
new file mode 100644
index 0000000000..577500e242
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/support/BPG-Ucnobi-U.woff
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cj-loose.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cj-loose.html
new file mode 100644
index 0000000000..dd53abb141
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cj-loose.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>Line-break:loose, Conditional Japanese Starter (CJ) (unknown lang)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="The browser allows a conditional Japanese starter at the beginning of a line; the langauge being unkonwn makes no difference.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cj-normal.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cj-normal.html
new file mode 100644
index 0000000000..faf8d401fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cj-normal.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>Line-break:normal, Conditional Japanese Starter (CJ) (unknown lang)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="The browser allows a conditional Japanese starter at the beginning of a line; the langauge being unknown makes no difference.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cj-strict.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cj-strict.html
new file mode 100644
index 0000000000..aa8a8e2d32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cj-strict.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>line-break:strict, Conditional Japanese Starter (CJ) (language unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="With line-break:strict, a browser will NOT allow a conditional Japanese starter at the beginning of a line; the langauge being unknown makes no difference.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref {
+    font-size: 30px;
+    font-family: mplus-1p-regular, sans-serif;
+    width: 185px;
+    padding: 0;
+    border: 1px solid orange;
+    line-height: 1em;
+    text-autospace: no-autospace;
+}
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cpm-loose.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cpm-loose.html
new file mode 100644
index 0000000000..783582512f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cpm-loose.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (loose,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:loose, a browser will NOT allow a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if lang unknown and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cpm-normal.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cpm-normal.html
new file mode 100644
index 0000000000..128d6008de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cpm-normal.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (normal,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:normal, a browser will NOT allow a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if lang unknown and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cpm-strict.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cpm-strict.html
new file mode 100644
index 0000000000..d13307d2a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-cpm-strict.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (strict,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unkonwn, and line-break:strict, a browser will NOT allow a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if lang unknown and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-hyphens-loose.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-hyphens-loose.html
new file mode 100644
index 0000000000..2cd6e720fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-hyphens-loose.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (loose,unkonwn)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:loose, a browser will NOT allow a break before a hyphen-like CJK character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if lang unknown and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-hyphens-normal.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-hyphens-normal.html
new file mode 100644
index 0000000000..c506a0d6fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-hyphens-normal.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (normal,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unkonwn, and line-break:normal, a browser will NOT allow a break before a hyphen-like CJK character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if lang unknown and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-hyphens-strict.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-hyphens-strict.html
new file mode 100644
index 0000000000..22b07b82d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-hyphens-strict.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (strict,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unkonwn, and line-break:strict, a browser will NOT allow a break before a hyphen-like CJK character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if lang unknown and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-in-loose.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-in-loose.html
new file mode 100644
index 0000000000..f724244738
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-in-loose.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (loose,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:loose, a browser allows a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-in-normal.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-in-normal.html
new file mode 100644
index 0000000000..e86775d036
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-in-normal.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (normal,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:normal, a browser will NOT allow a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-in-strict.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-in-strict.html
new file mode 100644
index 0000000000..92e6c5d2b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-in-strict.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (strict,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:strict, a browser will NOT allow a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-iteration-loose.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-iteration-loose.html
new file mode 100644
index 0000000000..29d858565d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-iteration-loose.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (loose,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is uknown, and line-break:loose, a browser allows a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if lang unknown and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-iteration-normal.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-iteration-normal.html
new file mode 100644
index 0000000000..c5e29373f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-iteration-normal.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (normal,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:normal, a browser will NOT allow a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if lang unknown and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-iteration-strict.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-iteration-strict.html
new file mode 100644
index 0000000000..2fe1cf0821
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-iteration-strict.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (strict,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:strict, a browser will NOT allow a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if lang unknown and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-po-loose.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-po-loose.html
new file mode 100644
index 0000000000..b2686666e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-po-loose.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (loose,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:loose, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-po-normal.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-po-normal.html
new file mode 100644
index 0000000000..d50c8b3035
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-po-normal.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (normal,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unkonwn, and line-break:normal, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-po-strict.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-po-strict.html
new file mode 100644
index 0000000000..0f1420d1b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-po-strict.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (strict,unkonwn)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:strict, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-pr-loose.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-pr-loose.html
new file mode 100644
index 0000000000..e966da22f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-pr-loose.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (loose,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:loose, a browser will allow a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test (ID ÷ PR × ID)
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-pr-normal.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-pr-normal.html
new file mode 100644
index 0000000000..1ae3a6e557
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-pr-normal.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (normal,unknown)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unkonwn, and line-break:normal, a browser will allow a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test (ID ÷ PR × ID)
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-pr-strict.html b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-pr-strict.html
new file mode 100644
index 0000000000..7dddd5f256
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/unknown-lang/css-text-line-break-pr-strict.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (strict,unkonwn)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is unknown, and line-break:strict, a browser will allow a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test (ID ÷ PR × ID)
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cj-loose.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cj-loose.html
new file mode 100644
index 0000000000..2b65c2d838
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cj-loose.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>Line-break:loose, Conditional Japanese Starter (CJ) (zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="The browser allows a conditional Japanese starter at the beginning of a line; the langauge being chinese makes no difference.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if zh and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cj-normal.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cj-normal.html
new file mode 100644
index 0000000000..adda199da3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cj-normal.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>Line-break:normal, Conditional Japanese Starter (CJ) (zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="The browser allows a conditional Japanese starter at the beginning of a line; the langauge being chinese makes no difference.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if zh and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cj-strict.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cj-strict.html
new file mode 100644
index 0000000000..bbae688d47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cj-strict.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>line-break:strict, Conditional Japanese Starter (CJ) (zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="With line-break:strict, a browser will NOT allow a conditional Japanese starter at the beginning of a line; the langauge being chinese makes no difference.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `3041  HIRAGANA LETTER SMALL A
+3043  HIRAGANA LETTER SMALL I
+3045  HIRAGANA LETTER SMALL U
+3047  HIRAGANA LETTER SMALL E
+3049  HIRAGANA LETTER SMALL O
+3063  HIRAGANA LETTER SMALL TU
+3083  HIRAGANA LETTER SMALL YA
+3085  HIRAGANA LETTER SMALL YU
+3087  HIRAGANA LETTER SMALL YO
+308E  HIRAGANA LETTER SMALL WA
+3095  HIRAGANA LETTER SMALL KA
+3096  HIRAGANA LETTER SMALL KE
+30A1  KATAKANA LETTER SMALL A
+30A3  KATAKANA LETTER SMALL I
+30A5  KATAKANA LETTER SMALL U
+30A7  KATAKANA LETTER SMALL E
+30A9  KATAKANA LETTER SMALL O
+30C3  KATAKANA LETTER SMALL TU
+30E3  KATAKANA LETTER SMALL YA
+30E5  KATAKANA LETTER SMALL YU
+30E7  KATAKANA LETTER SMALL YO
+30EE  KATAKANA LETTER SMALL WA
+30F5  KATAKANA LETTER SMALL KA
+30F6  KATAKANA LETTER SMALL KE
+30FC  KATAKANA-HIRAGANA PROLONGED SOUND MARK
+31F0  KATAKANA LETTER SMALL KU
+31F1  KATAKANA LETTER SMALL SI
+31F2  KATAKANA LETTER SMALL SU
+31F3  KATAKANA LETTER SMALL TO
+31F4  KATAKANA LETTER SMALL NU
+31F5  KATAKANA LETTER SMALL HA
+31F6  KATAKANA LETTER SMALL HI
+31F7  KATAKANA LETTER SMALL HU
+31F8  KATAKANA LETTER SMALL HE
+31F9  KATAKANA LETTER SMALL HO
+31FA  KATAKANA LETTER SMALL MU
+31FB  KATAKANA LETTER SMALL RA
+31FC  KATAKANA LETTER SMALL RI
+31FD  KATAKANA LETTER SMALL RU
+31FE  KATAKANA LETTER SMALL RE
+31FF  KATAKANA LETTER SMALL RO
+FF67  HALFWIDTH KATAKANA LETTER SMALL A
+FF68  HALFWIDTH KATAKANA LETTER SMALL I
+FF69  HALFWIDTH KATAKANA LETTER SMALL U
+FF6A  HALFWIDTH KATAKANA LETTER SMALL E
+FF6B  HALFWIDTH KATAKANA LETTER SMALL O
+FF6C  HALFWIDTH KATAKANA LETTER SMALL YA
+FF6D  HALFWIDTH KATAKANA LETTER SMALL YU
+FF6E  HALFWIDTH KATAKANA LETTER SMALL YO
+FF6F  HALFWIDTH KATAKANA LETTER SMALL TU
+FF70  HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-loose.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-loose.html
new file mode 100644
index 0000000000..38c207db0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-loose.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (loose,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:loose, a browser allows a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if zh and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-normal.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-normal.html
new file mode 100644
index 0000000000..edeb465b1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-normal.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (normal,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:normal, a browser will NOT allow a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-strict.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-strict.html
new file mode 100644
index 0000000000..235bd712d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-cpm-strict.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: centred punctuation (strict,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:strict, a browser will NOT allow a break before one of the centred punctuation characters listed.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `30FB  KATAKANA MIDDLE DOT
+FF1A  FULLWIDTH COLON
+FF1B  FULLWIDTH SEMICOLON
+FF65  HALFWIDTH KATAKANA MIDDLE DOT
+203C  DOUBLE EXCLAMATION MARK
+2047  DOUBLE QUESTION MARK
+2048  QUESTION EXCLAMATION MARK
+2049  EXCLAMATION QUESTION MARK
+FF01  FULLWIDTH EXCLAMATION MARK
+FF1F  FULLWIDTH QUESTION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-hyphens-loose.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-hyphens-loose.html
new file mode 100644
index 0000000000..5d4ab12bc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-hyphens-loose.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (loose,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:loose, a browser allows a break before a hyphen-like CJK character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if zh and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-hyphens-normal.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-hyphens-normal.html
new file mode 100644
index 0000000000..1a07353fce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-hyphens-normal.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (normal,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:normal, a browser allows a break before a hyphen-like CJK character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if zh and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-hyphens-strict.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-hyphens-strict.html
new file mode 100644
index 0000000000..8ac874e29c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-hyphens-strict.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, linebreaks: hyphens (strict,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:strict, a browser will NOT allow a break before a hyphen-like CJK character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `301C WAVE DASH
+30A0 KATAKANA-HIRAGANA DOUBLE HYPHEN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-in-loose.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-in-loose.html
new file mode 100644
index 0000000000..56fec0bd3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-in-loose.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (loose,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:loose, a browser allows a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if zh and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-in-normal.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-in-normal.html
new file mode 100644
index 0000000000..67d1668179
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-in-normal.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (normal,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:normal, a browser will NOT allow a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-in-strict.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-in-strict.html
new file mode 100644
index 0000000000..a03f8fec75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-in-strict.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: IN (strict,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:strict, a browser will NOT allow a break before an inseparable character.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `2024  ONE DOT LEADER
+2025  TWO DOT LEADER
+2026  HORIZONTAL ELLIPSIS
+22EF  MIDLINE HORIZONTAL ELLIPSIS
+FE19  PRESENTATION FORM FOR VERTICAL HORIZONTAL ELLIPSIS`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-iteration-loose.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-iteration-loose.html
new file mode 100644
index 0000000000..6ac29a1fb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-iteration-loose.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (loose,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:loose, a browser allows a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if zh and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-iteration-normal.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-iteration-normal.html
new file mode 100644
index 0000000000..8f5276ac04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-iteration-normal.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (normal,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:normal, a browser will NOT allow a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-iteration-strict.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-iteration-strict.html
new file mode 100644
index 0000000000..678e43d767
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-iteration-strict.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: iteration (strict,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:strict, a browser will NOT allow a break before an iteration mark.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `3005  IDEOGRAPHIC ITERATION MARK
+303B  VERTICAL IDEOGRAPHIC ITERATION MARK
+309D  HIRAGANA ITERATION MARK
+309E  HIRAGANA VOICED ITERATION MARK
+30FD  KATAKANA ITERATION MARK
+30FE  KATAKANA VOICED ITERATION MARK`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-po-loose.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-po-loose.html
new file mode 100644
index 0000000000..3bd1b2f6b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-po-loose.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (loose,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:loose, a browser allows a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if zh and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-po-normal.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-po-normal.html
new file mode 100644
index 0000000000..76eed4b059
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-po-normal.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (normal,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:normal, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-po-strict.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-po-strict.html
new file mode 100644
index 0000000000..991b9ffa6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-po-strict.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PO AFW (strict,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:strict, a browser will NOT allow a break before a PO character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `00B0  DEGREE SIGN
+2030  PER MILLE SIGN
+2032  PRIME
+2033  DOUBLE PRIME
+2035  REVERSED PRIME
+2103  DEGREE CELSIUS
+2109  DEGREE FAHRENHEIT
+FE6A  SMALL PERCENT SIGN
+FF05  FULLWIDTH PERCENT SIGN
+FFE0  FULLWIDTH CENT SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-pr-loose.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-pr-loose.html
new file mode 100644
index 0000000000..e3b13e060c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-pr-loose.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (loose,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:loose, a browser allows a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: loose; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may appear at line start if zh and loose');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-pr-normal.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-pr-normal.html
new file mode 100644
index 0000000000..954953cd41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-pr-normal.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (normal,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:normal, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: normal; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and normal');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-pr-strict.html b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-pr-strict.html
new file mode 100644
index 0000000000..cefd42923a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/i18n/zh/css-text-line-break-zh-pr-strict.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8"/>
+<title>CSS text, linebreaks: PR AFW (strict,zh)</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="When the language is Chinese, and line-break:strict, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
+<style type="text/css">
+@font-face {
+    font-family: 'mplus-1p-regular';
+    src: url('/fonts/mplus-1p-regular.woff') format('woff');
+    }
+#wrapper { position: relative; }
+.test { color: red; }
+.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
+</style>
+<style>
+.test { line-break: strict; }
+</style>
+<script>
+var charlist = `00B1  PLUS-MINUS SIGN
+20AC  EURO SIGN
+2116  NUMERO SIGN
+FE69  SMALL DOLLAR SIGN
+FF04  FULLWIDTH DOLLAR SIGN
+FFE1  FULLWIDTH POUND SIGN
+FFE5  FULLWIDTH YEN SIGN
+FFE6  FULLWIDTH WON SIGN`
+</script>
+</head>
+<body>
+<script>
+var lines = charlist.split('\n')
+var out = '<div id="log"></div>\n'
+for (var i=0;i<lines.length;i++) {
+	// get the data
+	var firstSpace = lines[i].indexOf(' ')
+	var hex = lines[i].substr(0,firstSpace)
+	var name = lines[i].substr(firstSpace)
+	// make a test
+	out +=  '<div class="wrapper"><div>'+hex+'</div>' +
+	'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
+	 '<div class="ref" id="ref'+i+'" lang="zh">文文文文文<br/>文&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
+	 '</div>'
+	}
+
+document.querySelector('body').innerHTML = out
+setup({explicit_done: true});
+
+document.fonts.ready.then(validate);
+
+function validate() {
+  for (i=0;i<lines.length;i++) {
+    test(function() {
+      assert_approx_equals(
+        document.getElementById('testSpan'+i).getBoundingClientRect().left,
+        document.getElementById('refSpan'+i).getBoundingClientRect().left, 1);
+      // Hide successful tests.
+      document.getElementById('test'+i).parentNode.style.display = 'none';
+    }, lines[i]+' may NOT appear at line start if zh and strict');
+  }
+  done();
+}
+</script>
+<!--Notes:
+The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
+
+It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/inheritance.html b/testing/web-platform/tests/css/css-text/inheritance.html
new file mode 100644
index 0000000000..2043afe999
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/inheritance.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of CSS Text properties</title>
+<link rel="help" href="https://drafts.csswg.org/css-text/#property-index">
+<meta name="assert" content="Properties inherit according to the spec.">
+<meta name="assert" content="Properties have initial values according to the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+assert_inherited('hanging-punctuation', 'none', 'first last');
+assert_inherited('hyphens', 'manual', 'none');
+assert_inherited('letter-spacing', 'normal', '10px');
+assert_inherited('line-break', 'auto', 'strict');
+assert_inherited('overflow-wrap', 'normal', 'break-word');
+assert_inherited('tab-size', '8', '10px');
+assert_inherited('text-align', 'start', 'right');
+assert_inherited('text-align-all', 'start', 'right');
+assert_inherited('text-align-last', 'auto', 'right');
+assert_inherited('text-indent', '0px', '10px');
+assert_inherited('text-justify', 'auto', 'inter-character');
+assert_inherited('text-transform', 'none', 'uppercase');
+assert_inherited('text-wrap', 'wrap', 'nowrap');
+assert_inherited('text-wrap-mode', 'wrap', 'nowrap');
+assert_inherited('text-wrap-style', 'auto', 'balance');
+assert_inherited('white-space', 'normal', 'pre-wrap');
+assert_inherited('white-space-collapse', 'collapse', 'preserve');
+assert_inherited('word-break', 'normal', 'break-all');
+assert_inherited('word-spacing', '0px', '10px');
+assert_inherited('word-wrap', 'normal', 'break-word');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-200.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-200.html
new file mode 100644
index 0000000000..2a8c7ede9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-200.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at line endings (letters)</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'>
+<link rel='match' href='reference/letter-spacing-200-ref.html'>
+<meta name="assert" content="Letter spacing is not applied at the start/end of a line.">
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    width: 5em;
+    border: solid blue;
+    margin: 1em;
+    float: left; }
+  span, .test {
+    letter-spacing: 1em;
+  }
+  .pre, .control p {
+    white-space: pre-wrap;
+  }
+  p { margin: 0; }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all four blue boxes.</div>
+
+<!-- Letter-spacing on Containing Block -->
+<div class="contain">
+  <!-- single line block test -->
+  <p class="test">1 2</p>
+  <!-- start/end line wrap test -->
+  <p class="test">12三456七89</p>
+  <!-- start/end forced line breaks test -->
+  <p class="test">123<br>4 5<br>678</p>
+  <p class="test pre">123&#x0A;4 5&#x0A;678</p>
+</div>
+
+<!-- Line Endings Coinciding with Inline Element Boundary (Internal Break) -->
+<div class="contain">
+  <!-- single line block test -->
+  <p><span>1 2</span></p>
+  <!-- start/end line wrap test -->
+  <p>1 2 三<span>456</span>七 8 9</p>
+  <!-- start/end forced line breaks test -->
+  <p>1 2 3<span><br>4 5<br></span>6 7 8</p>
+  <p class="pre">1 2 3<span>&#x0A;4 5&#x0A;</span>6 7 8</p>
+</div>
+
+<!-- Line Endings Coinciding with Inline Element Boundary (External Break) -->
+<div class="contain">
+  <!-- duplicate single line block test -->
+  <p><span>1 2</span></p>
+  <!-- start/end line wrap test -->
+  <p>1 2 三<span>456</span>七 8 9</p>
+  <!-- start/end forced line breaks test -->
+  <p>1 2 3<br><span>4 5</span><br>6 7 8</p>
+  <p class="pre">1 2 3&#x0A;<span>4 5</span>&#x0A;6 7 8</p>
+</div>
+
+<!-- Control -->
+<div class="contain control">
+  <p>1   2</p>
+  <p>1 2 三<br>4 5 6<br>七 8 9</p>
+  <p>1 2 3<br>4   5<br>6 7 8</p>
+  <p>1 2 3<br>4   5<br>6 7 8</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-201.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-201.html
new file mode 100644
index 0000000000..e9fdc2c896
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-201.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at line endings (spaces)</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'>
+<link rel='match' href='reference/letter-spacing-201-ref.html'>
+<meta name="assert" content="Letter spacing is not applied at the start/end of a line even on spaces.">
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    /* Setup Boxes */
+    font: 20px/1 Ahem;
+    width: 5em;
+    border: solid blue;
+    margin: 1em;
+    float: left;
+  }
+  span, .test {
+    letter-spacing: 1em;
+  }
+  p {
+    white-space: pre-wrap;
+    margin: 0;
+  }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all four blue boxes.</div>
+
+<!-- Letter-spacing on Containing Block -->
+<div class="contain">
+  <!-- single line block test -->
+  <p class="test"> x </p>
+  <!-- start/end line wrap test -->
+  <p class="test">xx &#x200B; x &#x200B; xx</p>
+  <!-- start/end forced line breaks test -->
+  <p class="test">xx <br> x <br> xx</p>
+  <p class="test">xx &#x0A; x &#x0A; xx</p>
+</div>
+
+<!-- Line Endings Coinciding with Inline Element Boundary (Internal Break) -->
+<div class="contain">
+  <!-- single line block test -->
+  <p><span> x </span></p>
+  <!-- start/end line wrap test -->
+  <p>x x &#x200B;<span> x </span>&#x200B;  x x</p>
+  <!-- start/end forced line breaks test -->
+  <p>x x  <span><br> x <br></span>  x x</p>
+  <p>x x  <span>&#x0A; x &#x0A;</span>  x x</p>
+</div>
+
+<!-- Line Endings Coinciding with Inline Element Boundary (External Break) -->
+<div class="contain">
+  <!-- duplicate single line block test -->
+  <p><span> x </span></p>
+  <!-- start/end line wrap test -->
+  <p>x x  <span>&#x200B; x &#x200B;</span> x x</p>
+  <!-- start/end forced line breaks test -->
+  <p>x x  <br><span> x </span><br>  x x</p>
+  <p>x x  &#x0A;<span> x </span>&#x0A;  x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain">
+  <p>  x  </p>
+  <p>x x  <br>  x  <br>  x x</p>
+  <p>x x  <br>  x  <br>  x x</p>
+  <p>x x  <br>  x  <br>  x x</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-202.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-202.html
new file mode 100644
index 0000000000..a163f98121
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-202.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing on zero-width characters</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'>
+<link rel='match' href='reference/letter-spacing-202-ref.html'>
+<meta name="assert" content="Letter spacing ignores zero-width formatting characters.">
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .test { letter-spacing: 1em; float: left; color: green; background: red; font: 20px/1 Ahem; }
+  .spacing { position: absolute; width: 1em; height: 2em; margin: 0 1em; background: green; }
+</style>
+
+<div id='instructions'>Test passes if there is a green rectangle below and no red.</div>
+
+<div class="test">
+<div class="spacing"></div>
+<!--
+-->&#x200B;&#x200C;&#x200D;&#xFEFF;<!-- zwsp etc.
+-->&#x200E;&#x200F;&#x2066;&#x2067;&#x2068;&#x202A;&#x202B;&#x202C;&#x202D;&#x202E;&#x2069;&#x2069;<!-- bidi
+-->&#x206A;&#x206B;&#x206C;&#x206D;&#x206B;&#x206E;&#x206F;<!-- Arabic/compat
+-->&#x2060;&#x2061;&#x2062;&#x2063;&#x2064;<!-- math
+-->x<!--
+-->&#x200B;&#x200C;&#x200D;&#xFEFF;<!-- zwsp etc.
+-->&#x200E;&#x200F;&#x2066;&#x2067;&#x2068;&#x202A;&#x202B;&#x202C;&#x202D;&#x202E;&#x2069;&#x2069;<!-- bidi
+-->&#x206A;&#x206B;&#x206C;&#x206D;&#x206B;&#x206E;&#x206F;<!-- Arabic/compat
+-->&#x2060;&#x2061;&#x2062;&#x2063;&#x2064;<!-- math
+-->x<!--
+-->&#x200B;&#x200C;&#x200D;&#xFEFF;<!-- zwsp etc.
+-->&#x200E;&#x200F;&#x2066;&#x2067;&#x2068;&#x202A;&#x202B;&#x202C;&#x202D;&#x202E;&#x2069;&#x2069;<!-- bidi
+-->&#x206A;&#x206B;&#x206C;&#x206D;&#x206B;&#x206E;&#x206F;<!-- Arabic/compat
+-->&#x2060;&#x2061;&#x2062;&#x2063;&#x2064;<!-- math
+--><br>
+<!--
+-->&#x200B;&#x200C;&#x200D;&#xFEFF;<!-- zwsp etc.
+-->&#x200E;&#x200F;&#x2066;&#x2067;&#x2068;&#x202A;&#x202B;&#x202C;&#x202D;&#x202E;&#x2069;&#x2069;<!-- bidi
+-->&#x206A;&#x206B;&#x206C;&#x206D;&#x206B;&#x206E;&#x206F;<!-- Arabic/compat
+-->&#x2060;&#x2061;&#x2062;&#x2063;&#x2064;<!-- math
+-->xx<!--
+-->&#x200B;&#x200C;&#x200D;&#xFEFF;<!-- zwsp etc.
+-->&#x200E;&#x200F;&#x2066;&#x2067;&#x2068;&#x202A;&#x202B;&#x202C;&#x202D;&#x202E;&#x2069;&#x2069;<!-- bidi
+-->&#x206A;&#x206B;&#x206C;&#x206D;&#x206B;&#x206E;&#x206F;<!-- Arabic/compat
+-->&#x2060;&#x2061;&#x2062;&#x2063;&#x2064;<!-- math
+-->
+</div></div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-203.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-203.html
new file mode 100644
index 0000000000..eebb5d07da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-203.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'>
+<link rel='match' href='reference/letter-spacing-203-ref.html'>
+<meta name="assert" content="Letter spacing between two characters is given by their closest mutual ancestor.">
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    border: solid blue;
+    margin: 1em;
+    float: left; }
+  .ls0 {
+    letter-spacing: 0;
+  }
+  .ls1 {
+    letter-spacing: 1em;
+  }
+  .ls3 {
+    letter-spacing: 3em;
+  }
+  .control p {
+    white-space: pre-wrap;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+    word-break: break-all;
+  }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div>
+
+<div class="contain">
+  <!-- middle owned by containing block: simple -->
+  <p class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></p>
+  <p><span class="ls1">AAA</span><span class="ls1">BBB</span></p>
+  <!-- middle owned by containing block: double nesting -->
+  <p><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></p>
+  <p><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></p>
+  <!-- middle owned by inline: simple -->
+  <p><span class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></span></p>
+  <p><span><span class="ls1">AAA</span><span class="ls1">BBB</span></span></p>
+  <!-- middle owned by inline: double nesting -->
+  <p><span><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></span></p>
+  <p><span class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></span></p>
+  <!-- middle containing space -->
+  <p class="ls1"><span class="ls0">AAA</span> <span class="ls0">BBB</span></p>
+  <p><span class="ls3"><span class="ls1"><span class="ls0">AAA</span> </span><span class="ls1">BBB</span></span></p>
+</div>
+
+<div class="contain control">
+  <!-- middle owned by containing block: simple -->
+  <p>AAA BBB</p>
+  <p>A A AB B B</p>
+  <!-- middle owned by containing block: double nesting -->
+  <p>AAAB B B</p>
+  <p>A A AB B B</p>
+  <!-- middle owned by inline: simple -->
+  <p>AAA BBB</p>
+  <p>A A AB B B</p>
+  <!-- middle owned by inline: double nesting -->
+  <p>AAAB B B</p>
+  <p>A A A   B B B</p>
+  <!-- middle containing space -->
+  <p>AAA   BBB</p>
+  <p>AAA     B B B</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-204.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-204.html
new file mode 100644
index 0000000000..962048420a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-204.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'>
+<link rel='match' href='reference/letter-spacing-204-ref.html'>
+<meta name="assert" content="Letter spacing is not applied between atomic inlines, but is applied between a (run of) atomic inline(s) and an adjacent letter.">
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    border: solid blue;
+    margin: 1em;
+    float: left; }
+  .ls1 {
+    letter-spacing: 1em;
+  }
+  .block, .table, .flex, .grid {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    background: orange;
+  }
+  .table {
+    display: inline-table;
+  }
+  .flex {
+    display: inline-flex;
+  }
+  .grid {
+    display: inline-grid;
+  }
+  .control p {
+    white-space: pre-wrap;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+  }
+  span:not([class]) {
+    padding-top: 1em;
+  }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all blue boxes.</div>
+
+<div class="contain">
+  <p class="ls1">A<img src="support/swatch-orange.png"><img src="support/swatch-orange.png">D</p>
+  <p class="ls1">A<img class="block" src="support/swatch-orange.png"><img class="block" src="support/swatch-orange.png">D</p>
+  <p class="ls1">A<span class="block"></span><span class="block"></span>D</p>
+  <p class="ls1">A<span class="table"></span><span class="block"></span>D</p>
+  <p class="ls1">A<span class="flex"></span><span class="block"></span>D</p>
+  <p class="ls1">A<span class="grid"></span><span class="block"></span>D</p>
+</div>
+
+<div class="contain">
+  <p class="ls1">A<span><img src="support/swatch-orange.png"></span><img src="support/swatch-orange.png">D</p>
+  <p class="ls1">A<span><img class="block" src="support/swatch-orange.png"></span><img class="block" src="support/swatch-orange.png">D</p>
+  <p class="ls1">A<span><span class="block"></span></span><span class="block"></span>D</p>
+  <p class="ls1">A<span><span class="table"></span></span><span class="block"></span>D</p>
+  <p class="ls1">A<span><span class="flex"></span></span><span class="block"></span>D</p>
+  <p class="ls1">A<span><span class="grid"></span></span><span class="block"></span>D</p>
+</div>
+
+<div class="contain">
+  <p class="ls1"><span>A</span><img src="support/swatch-orange.png"><span><img src="support/swatch-orange.png"></span>D</p>
+  <p class="ls1"><span>A</span><img class="block" src="support/swatch-orange.png"><span><img class="block" src="support/swatch-orange.png"></span>D</p>
+  <p class="ls1"><span>A</span><span class="block"></span><span><span class="block"></span></span>D</p>
+  <p class="ls1"><span>A</span><span class="table"></span><span><span class="block"></span></span>D</p>
+  <p class="ls1"><span>A</span><span class="flex"></span><span><span class="block"></span></span>D</p>
+  <p class="ls1"><span>A</span><span class="grid"></span><span><span class="block"></span></span>D</p>
+</div>
+
+<div class="contain control">
+  <p>A <img src="support/swatch-orange.png"><img src="support/swatch-orange.png"> D</p>
+  <p>A <img class="block" src="support/swatch-orange.png"><img class="block" src="support/swatch-orange.png"> D</p>
+  <p>A <span class="block"></span><span class="block"></span> D</p>
+  <p>A <span class="table"></span><span class="block"></span> D</p>
+  <p>A <span class="flex"></span><span class="block"></span> D</p>
+  <p>A <span class="grid"></span><span class="block"></span> D</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-205.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-205.html
new file mode 100644
index 0000000000..e846d94c58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-205.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'>
+<link rel='match' href='reference/letter-spacing-205-ref.html'>
+<meta name="assert" content="Letter spacing is applied after any intervening text-empty inlines.">
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    border: solid blue;
+    margin: 1em;
+    width: max-content; }
+  .ls1 {
+    letter-spacing: 1em;
+  }
+  span {
+    border: solid orange;
+  }
+  .control p {
+    white-space: pre-wrap;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+  }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div>
+
+<div class="contain">
+  <p class="ls1"><span></span>A<span></span><span></span>D<span></span></p>
+</div>
+
+<div class="contain control">
+  <p><span></span>A<span></span><span></span> D<span></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-206.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-206.html
new file mode 100644
index 0000000000..ce2214dea0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-206.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'>
+<link rel='match' href='reference/letter-spacing-206-ref.html'>
+<meta name="assert" content="Letter spacing affects unwrapped min-content and max-content sizes.">
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    border: solid blue;
+    margin: 1em;
+    float: left; }
+  .ls0 {
+    letter-spacing: 0;
+  }
+  .ls1 {
+    letter-spacing: 1em;
+  }
+  .ls3 {
+    letter-spacing: 3em;
+  }
+  .control p {
+    white-space: pre;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+    word-break: break-all;
+    float: left;
+    clear: left;
+    border-right: solid orange 1em;
+    background: yellow;
+  }
+  .squash {
+    width: 0;
+  }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all three blue boxes.</div>
+
+<div class="contain">
+<p class="ls1">AAA<span>BBB</span></p>
+<!-- middle owned by containing block: simple -->
+<p class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></p>
+<p><span class="ls1">AAA</span><span class="ls1">BBB</span></p>
+<!-- middle owned by containing block: double nesting -->
+<p class="ls3"><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></p>
+<p class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></p>
+<!-- middle owned by inline: simple -->
+<p><span class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></span></p>
+<p><span><span class="ls1">AAA</span><span class="ls1">BBB</span></span></p>
+<!-- middle owned by inline: double nesting -->
+<p><span><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></span></p>
+<p><span class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></span></p>
+<!-- middle containing space -->
+<p class="ls1"><span class="ls0">AAA</span> <span class="ls0">BBB</span></p>
+<p><span class="ls3"><span class="ls1"><span class="ls0">AAA</span> </span><span class="ls1">BBB</span></span></p>
+</div>
+
+<div class="contain" style="white-space: nowrap; width: 14em;">
+<div class="squash">
+<p class="ls1"><span>AAA</span><span>BBB</span></p>
+<!-- middle owned by containing block: simple -->
+<p class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></p>
+<p><span class="ls1">AAA</span><span class="ls1">BBB</span></p>
+<!-- middle owned by containing block: double nesting -->
+<p class="ls3"><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></p>
+<p class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></p>
+<!-- middle owned by inline: simple -->
+<p><span class="ls1"><span class="ls0">AAA</span><span class="ls0">BBB</span></span></p>
+<p><span><span class="ls1">AAA</span><span class="ls1">BBB</span></span></p>
+<!-- middle owned by inline: double nesting -->
+<p><span><span class="ls1"><span class="ls0">AAA</span></span><span class="ls1">BBB</span></span></p>
+<p><span class="ls3"><span class="ls0"><span class="ls1">AAA</span></span><span class="ls1">BBB</span></span></p>
+<!-- middle containing space -->
+<p class="ls1"><span class="ls0">AAA</span> <span class="ls0">BBB</span></p>
+<p><span class="ls3"><span class="ls1"><span class="ls0">AAA</span> </span><span class="ls1">BBB</span></span></p>
+</div>
+</div>
+
+<div class="contain control">
+<p>A A A B B B</p>
+<!-- middle owned by containing block: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by containing block: double nesting -->
+<p>AAA   B B B</p>
+<p>A A A   B B B</p>
+<!-- middle owned by inline: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by inline: double nesting -->
+<p>AAAB B B</p>
+<p>A A A   B B B</p>
+<!-- middle containing space -->
+<p>AAA   BBB</p>
+<p>AAA     B B B</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-211.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-211.html
new file mode 100644
index 0000000000..1e6d63fdd7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-211.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'>
+<link rel='help' href='https://www.w3.org/TR/css-text-decor-4/#emphasis-marks'>
+<link rel='match' href='reference/letter-spacing-211-ref.html'>
+<meta name="assert" content="Emphasis marks are centered on characters, not characters + spacing.">
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    margin: 1em;
+  }
+  .ls1 {
+    letter-spacing: 1em;
+  }
+  .control p {
+    white-space: pre-wrap;
+    color: blue;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+    text-emphasis: dot;
+  }
+</style>
+
+<div id='instructions'>Test passes if the blue pattern is identical to the black one.</div>
+
+<div class="contain">
+  <p class="ls1">ABC</p>
+</div>
+
+<div class="contain control">
+  <p>A B C
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-212.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-212.html
new file mode 100644
index 0000000000..2f5284ad18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-212.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'>
+<link rel='help' href='https://www.w3.org/TR/css-ruby-1/'>
+<link rel='match' href='reference/letter-spacing-212-ref.html'>
+<meta name="assert" content="Ruby annotations are centered on bases, not bases + trailing letter-spacing.">
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    margin: 1em; }
+  .ls1 {
+    letter-spacing: 1em;
+  }
+  .control p {
+    white-space: pre-wrap;
+    color: blue;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+  }
+</style>
+
+<div id='instructions'>Test passes if the blue pattern is identical to the black one.</div>
+
+<div class="contain">
+  <p class="ls1"><ruby>A<rt>a</rt>BB<rt>b</rt></ruby></p>
+</div>
+
+<div class="contain control">
+  <p><ruby>A<rt>a</rt></ruby> <ruby>B B<rt>b</rt></ruby></p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bengali-yaphala-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bengali-yaphala-001.html
new file mode 100644
index 0000000000..47349ea88b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bengali-yaphala-001.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Text test: letter-spacing and Bengali ya-phala (yo-pholo)</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="match" href="reference/letter-spacing-bengali-yaphala-001-ref.html">
+<meta name="assert" content="Letter-spacing does not separate yaphala from the preceding letter.">
+<link rel="help" href="https://drafts.csswg.org/css-text/#letter-spacing-property">
+<link rel="help" href="https://github.com/w3c/line_paragraph_tests/issues/81">
+
+<style>
+/* We try various "likely" font names, as well as generics; those not available
+   on the platform will simply fall back to a default. */
+.outer.a {
+  font-family: sans-serif;
+}
+.outer.b {
+  font-family: serif;
+}
+.outer.c {
+  font-family: Bangla MN, serif;
+}
+.outer.d {
+  font-family: Bangla Sangam MN, sans-serif;
+}
+.outer.e {
+  font-family: Nirmala UI, Vrinda, sans-serif;
+}
+.outer.f {
+  font-family: Noto Sans Bengali, sans-serif;
+}
+.inner {
+  position: relative;
+  margin: 1em;
+  height: 2em;
+}
+.test {
+  padding: 0.25em;
+  color: red;
+  letter-spacing: 1em;
+  position: absolute;
+}
+.mask {
+  padding: 0.25em;
+  color: green;
+  background: green;
+  position: absolute;
+}
+span {
+  display: inline-block;
+}
+</style>
+
+<p>Test passes if the red Bengali text is entirely hidden by the green blocks.</p>
+
+<div class="outer a">
+  <div class="inner" lang="bn">
+    <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word -->
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word -->
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
+
+<div class="outer b">
+  <div class="inner" lang="bn">
+    <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word -->
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word -->
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
+
+<div class="outer c">
+  <div class="inner" lang="bn">
+    <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word -->
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word -->
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
+
+<div class="outer d">
+  <div class="inner" lang="bn">
+    <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word -->
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word -->
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
+
+<div class="outer e">
+  <div class="inner" lang="bn">
+    <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word -->
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word -->
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
+
+<div class="outer f">
+  <div class="inner" lang="bn">
+    <div class="test">অ্যান্টিগুয়া</div><!-- there should be 3 letter-spacing opportunities in this word -->
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="test">এ্যাডভোকেট</div><!-- there should be 4 letter-spacing opportunities in this word -->
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-001.html
new file mode 100644
index 0000000000..4720e1d13c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: letter spacing after bidi</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<link rel="match" href="reference/letter-spacing-bidi-001-ref.html">
+<meta name="assert" content="Letter spacing is inserted after RTL reordering, so letter spacing cannot apply to any of the letters in the span below,
+since they get split appart.">
+<style>
+div {
+  font-family: monospace;
+  font-size: 3em;
+}
+span {
+  letter-spacing: 1ch;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4.
+<div>12345</div>
+<div>a<span>bא</span>ב</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-002.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-002.html
new file mode 100644
index 0000000000..7cd6e80fc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: letter spacing at bidi fragment boudary</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#bidi-fragmentation">
+<link rel="match" href="reference/letter-spacing-bidi-002-ref.html">
+<meta name="assert" content="When bidi would cause to pieces of a single inline box to be appart if there was enough room to fit everything in one line,
+the two pieces are separate fragments even if they end up next to eachother due to line breaking.
+Letter spacing at the boundary of such separate fragments comes from their common ancestor,
+not from the letter-spacing property on the fragmented inline box itself.">
+<style>
+div {
+  font-family: monospace;
+  font-size: 3em;
+  width: 0;
+}
+span {
+  letter-spacing: 1ch;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3.
+<div>12345</div>
+<div>a<span>aב</span> ב</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-003.xht b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-003.xht
new file mode 100644
index 0000000000..cdc9f31a55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-003.xht
@@ -0,0 +1,42 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf-8"/>
+    <title>CSS Text level 3 Test: letter spacing, justified text and bidi</title>
+    <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+    <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" />
+    <link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#bidi-fragmentation" />
+    <link rel="match" href="reference/letter-spacing-bidi-003-ref.xht" />
+    <meta name="assert" content="text-align: justify will stretch the space between words, which should be applied after bidi processing."/>
+    <style>
+      .test, .control {
+          font: 50px/1 monospace;
+          width: 14ch;
+          font-kerning: none;
+          border: 1px solid black;
+      }
+      .control {
+          position: absolute;
+          color: red;
+          z-index: -1;
+          white-space: pre;
+      }
+      .justify {
+          text-align-last: justify;
+          text-justify: inter-word;
+      }
+      .narrow {
+          letter-spacing: 1ch;
+      }
+    </style>
+ </head>
+ <body>
+  <p>Test passes if no red is visible except for anti-aliasing differences.</p>
+  <!-- bet <ls> alef <ls> <space stretched from justification> A <ls> B -->
+  <div class="control">&#x5d0; &#x5d1;<div style="float: right">A B</div></div>
+  <div class="test narrow justify">&#x5d0;&#x5d1; AB</div>
+
+  <!-- A <ls> B <ls> <space stretched from justification> alef <ls> bet -->
+  <div class="control">A B<div style="float: right">&#x5d0; &#x5d1;</div></div>
+  <div dir="rtl" class="test narrow justify">&#x5d0;&#x5d1; AB</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-004.xht b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-004.xht
new file mode 100644
index 0000000000..c8e77d4c31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-004.xht
@@ -0,0 +1,41 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf-8"/>
+    <title>CSS Text level 3 Test: letter spacing is between letters, with bidi</title>
+    <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+    <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" />
+    <link rel="match" href="reference/letter-spacing-bidi-004-ref.xht" />
+    <meta name="assert" content="letter spacing should be applied between letters, not after letters. The latter will cause the colored backgrounds of the span elements to expand."/>
+    <style>
+      .test, .control {
+          font: 50px/1 monospace;
+          font-kerning: none;
+      }
+      .control {
+          position: absolute;
+          color: red;
+          z-index: -1;
+          white-space: pre;
+      }
+      .control span {
+          /* to ensure both background and text must overlay */
+          background: linear-gradient(to bottom, red 50%, green 50%, green 100%);
+      }
+      .test span {
+          background: linear-gradient(to bottom, green 50%, transparent 50%, transparent 100%);
+      }
+      .wide {
+          letter-spacing: 2ch;
+      }
+      .narrow {
+          letter-spacing: 1ch;
+      }
+    </style>
+ </head>
+ <body>
+  <p>Test passes if no red is visible except for anti-aliasing differences, and the green boxes are the width of a single letter.</p>
+  <!-- A <ls> B <ls> <bg>C</bg> <ls> gimel <ls> bet <ls> <bg>alef</bg> <gap> -->
+  <div class="control">A B <span>C</span> &#x5d1; &#x5d2; <span style="unicode-bidi:embed">&#x5d0;</span></div>
+  <div class="test narrow">AB<span class="wide">C&#x5d0;</span>&#x5d1;&#x5d2;</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-005.xht b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-005.xht
new file mode 100644
index 0000000000..4583bcb12a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-bidi-005.xht
@@ -0,0 +1,41 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf-8" />
+    <title>CSS Text level 3 Test: letter spacing nested changes, with bidi</title>
+    <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+    <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" />
+    <link rel="match" href="reference/letter-spacing-bidi-005-ref.xht" />
+    <meta name="assert" content="Changes in letter spacing affect the spacing between letters within that element only" />
+    <style>
+      .test, .control {
+          font: 50px/1 monospace;
+          font-kerning: none;
+      }
+      .control {
+          position: absolute;
+          color: red;
+          z-index: -1;
+          white-space: pre;
+      }
+      .control span {
+          /* to ensure both background and text overlay correctly */
+          background: linear-gradient(to bottom, red 50%, green 50%, green 100%);
+      }
+      .test span {
+          background: linear-gradient(to bottom, green 50%, transparent 50%, transparent 100%);
+      }
+      .wide {
+          letter-spacing: 2ch;
+      }
+      .narrow {
+          letter-spacing: 1ch;
+      }
+    </style>
+ </head>
+ <body>
+  <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p>
+  <!-- A <ls> <ls> <bg>B <ls> bet <ls> alef <ls> C</bg> <ls> D <gap> -->
+  <div class="control">A  <span>B &#x5d0; &#x5d1; C</span>  D</div>
+  <div class="test wide">A<span class="narrow">B&#x5d0;&#x5d1;C</span>D</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-control-chars-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-control-chars-001.html
new file mode 100644
index 0000000000..87d071a1ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-control-chars-001.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>letter-spacing should not be applied to zero-width format controls</title>
+<link rel=match href="reference/letter-spacing-control-chars-001.ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<style>
+.test {
+  font: 12px/2 monospace;
+  letter-spacing: 4px;
+}
+</style>
+</head>
+<body>
+The two lines below should match:<br>
+<div class=test>
+&#x200b;let&#x200b;ter&#x200b;spac&#x200b;ing&#x200b; should not be
+&#x200c;af&#x200c;fec&#x200c;ted&#x200c; by
+&#x200d;ze&#x200d;ro&#x200d;-&#x200d;width&#x200d;
+&#x2060;for&#x2060;mat&#x2060;
+&#xfeff;char&#xfeff;ac&#xfeff;ters&#xfeff;
+</div>
+<div class=test>
+letterspacing should not be
+affected by
+zero-width
+format
+characters
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-end-of-line-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-end-of-line-001.html
new file mode 100644
index 0000000000..645ef10509
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-end-of-line-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: letter spacing at end of line</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<link rel="match" href="reference/letter-spacing-end-of-line-001-ref.html">
+<meta name="assert" content="Letter-spacing must not be applied at the beginning or at the end of a line.">
+<style>
+div {
+  font-family: monospace;
+  font-size: 3em;
+}
+span {
+  float:left;
+  letter-spacing: 1ch;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4.
+<div>12345</div>
+<div><span>aa</span>a</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-end-of-line-002.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-end-of-line-002.html
new file mode 100644
index 0000000000..c3781a3b0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-end-of-line-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text test - letter-spacing applied to preserved newline</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1850620">
+<link rel="match" href="reference/letter-spacing-end-of-line-002-ref.html">
+<meta name="assert" content="Letter-spacing on a preserved newline should not cause spurious line-wrapping.">
+
+<style>
+div {
+  margin: 1em;
+  font: 24px monospace;
+  white-space: pre-wrap;
+  display: inline-block;
+  outline: 1px solid gray;
+}
+.letterspc {
+  letter-spacing: 10px;
+}
+.nospc {
+  letter-spacing: 0px;
+}
+</style>
+
+<p>None of these examples should wrap to a second line:</p>
+<div class=letterspc><span>1. a</span><span>&#10;</span></div>
+<br>
+<div class=letterspc><span>2. b</span><span class=nospc>&#10;</span></div>
+<br>
+<div class=nospc><span>3. c</span><span class=letterspc>&#10;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-001.html
new file mode 100644
index 0000000000..735d9db00d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>text-justify:inter-character and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'>
+<link rel='match' href='reference/letter-spacing-ligatures-001-ref.html'>
+<meta name=flags content="should">
+<meta name="assert" content="When the effective spacing between two characters is not zero (due to either justification […]), user agents should not apply optional ligatures">
+<style>
+@font-face {
+    font-family: 'mplus';
+    src: url('/fonts/mplus-1p-regular.woff');
+}
+div {
+    font-size: 2em;
+    font-family: mplus;
+    width: 12ch;
+    text-align: justify;
+    text-align-last: justify;
+    text-justify: inter-character;
+    font-kerning: none;
+}
+span {
+    display: inline-block;
+    text-justify: auto;
+}
+.ref { color: blue; font-variant-ligatures: none; }
+.noref { color: orange; }
+</style>
+<p>Test passes if the black text looks like the blue one, not the orange one.
+<div>office</div>
+<div class=ref>office</div>
+<div class=noref>o<span>ffi</span>ce</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-002.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-002.html
new file mode 100644
index 0000000000..b7a2ac8461
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-002.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter spacing and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'>
+<link rel='match' href='reference/letter-spacing-ligatures-002-ref.html'>
+<meta name=flags content="should">
+<meta name="assert" content="When the effective spacing between two characters is not zero (due to […] letter spacing), user agents should not apply optional ligatures">
+<style>
+@font-face {
+    font-family: 'mplus';
+    src: url('/fonts/mplus-1p-regular.woff');
+}
+div {
+    font-size: 2em;
+    font-family: mplus;
+    width: 12ch;
+    letter-spacing: 20px;
+    font-kerning: none;
+}
+i {
+    padding-left: 20px;
+}
+.ref {
+    color: blue;
+    letter-spacing: 0;
+    font-variant-ligatures: none;
+}
+</style>
+<p>Test passes if the black text looks like the blue one.
+<div>office</div>
+<div class=ref>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-003.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-003.html
new file mode 100644
index 0000000000..20214f8fdd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>text-justify:inter-character and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'>
+<link rel='match' href='reference/letter-spacing-ligatures-003-ref.html'>
+<meta name=flags content="should">
+<meta name="assert" content="When the effective spacing between two characters is not zero (due to either justification […]), user agents should not apply optional ligatures, but they do need to apply mandatory ones.">
+<style>
+div {
+    font-size: 2em;
+    width: 12ch;
+}
+.test {
+    text-align: justify;
+    text-align-last: justify;
+    text-justify: inter-character;
+}
+span { float: right; }
+.ref { color: blue; }
+</style>
+<p>Test passes if the black text looks like the blue one.
+<div lang=km class=test>&#x179F;&#x17B6;&#x17A0;&#x17B6;</div>
+<div lang=km class=ref>&#x179F;&#x17B6;<span>&#x17A0;&#x17B6;</span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-004.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-004.html
new file mode 100644
index 0000000000..0f17f05454
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-ligatures-004.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter spacing and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'>
+<link rel='match' href='reference/letter-spacing-ligatures-004-ref.html'>
+<meta name=flags content="should">
+<meta name="assert" content="When the effective spacing between two characters is not zero (due to […] letter spacing), user agents should not apply optional ligatures, but they must apply  ones">
+<style>
+div {
+    font-size: 2em;
+    width: 12ch;
+    font-kerning: none;
+}
+.test {
+    letter-spacing: 20px;
+}
+span {
+    padding-left: 20px;
+}
+.ref {
+    color: blue;
+}
+</style>
+<p>Test passes if the black text looks like the blue one.
+<div lang=km class=test>&#x179F;&#x17B6;&#x17A0;&#x17B6;</div>
+<div lang=km class=ref>&#x179F;&#x17B6;<span></span>&#x17A0;&#x17B6;</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-001.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-001.html
new file mode 100644
index 0000000000..a7149e30c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: letter on nested element</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<link rel="match" href="reference/letter-spacing-nesting-001-ref.html">
+<meta name="assert" content="A given value of letter-spacing only affects the spacing between characters completely contained within the element for which it is specified">
+<style>
+div {
+  font-family: monospace;
+  font-size: 3em;
+}
+span {
+  letter-spacing: 1ch;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 5.
+<div>123456</div>
+<div>a<span>aa</span>a</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-002.html b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-002.html
new file mode 100644
index 0000000000..67f180affd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: letter spacing on element with single character</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<link rel="match" href="reference/letter-spacing-nesting-002-ref.html">
+<meta name="assert" content="Applying letter-spacing to an element containing only a single character has no effect on the rendered result">
+<style>
+div {
+  font-family: monospace;
+  font-size: 3em;
+}
+span {
+  letter-spacing: 1ch;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3.
+<div>12345</div>
+<div>a<span>a</span>a</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-003.xht b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-003.xht
new file mode 100644
index 0000000000..7d5d846328
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/letter-spacing-nesting-003.xht
@@ -0,0 +1,41 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf-8" />
+    <title>CSS Text level 3 Test: letter spacing changes within element tree</title>
+    <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+    <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property" />
+    <link rel="match" href="reference/letter-spacing-nesting-003-ref.xht" />
+    <meta name="assert" content="Changes in letter spacing affect the spacing between letters within that element only" />
+    <style>
+      .test, .control {
+          font: 50px/1 monospace;
+          font-kerning: none;
+      }
+      .control {
+          position: absolute;
+          color: red;
+          z-index: -1;
+          white-space: pre;
+      }
+      .control span {
+          /* to ensure both background and text overlay correctly */
+          background: linear-gradient(to bottom, red 50%, green 50%, green 100%);
+      }
+      .test span {
+          background: linear-gradient(to bottom, green 50%, transparent 50%, transparent 100%);
+      }
+      .wide {
+          letter-spacing: 2ch;
+      }
+      .narrow {
+          letter-spacing: 1ch;
+      }
+    </style>
+ </head>
+ <body>
+  <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p>
+  <!-- A <ls> <ls> <bg>B <ls> <ls> C</bg> <ls> D -->
+  <div class="control">A <span>B  C</span> D</div>
+  <div class="test narrow">A<span class="wide">BC</span>D</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-200-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-200-ref.html
new file mode 100644
index 0000000000..d6e87a56d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-200-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    width: 5em;
+    border: solid blue;
+    margin: 1em;
+    float: left; }
+  .pre, .control p {
+    white-space: pre;
+  }
+  p { margin: 0; }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all four blue boxes.</div>
+
+<!-- Control -->
+<div class="contain control">
+  <p>x   x</p>
+  <p>x x 水<br>x x x<br>水 x x</p>
+  <p>x x x<br>x   x<br>x x x</p>
+  <p>x x x<br>x   x<br>x x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain control">
+  <p>x   x</p>
+  <p>x x 水<br>x x x<br>水 x x</p>
+  <p>x x x<br>x   x<br>x x x</p>
+  <p>x x x<br>x   x<br>x x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain control">
+  <p>x   x</p>
+  <p>x x 水<br>x x x<br>水 x x</p>
+  <p>x x x<br>x   x<br>x x x</p>
+  <p>x x x<br>x   x<br>x x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain control">
+  <p>x   x</p>
+  <p>x x 水<br>x x x<br>水 x x</p>
+  <p>x x x<br>x   x<br>x x x</p>
+  <p>x x x<br>x   x<br>x x x</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-201-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-201-ref.html
new file mode 100644
index 0000000000..6898da609d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-201-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    width: 5em;
+    border: solid blue;
+    margin: 1em;
+    float: left; }
+  p { margin: 0;
+    white-space: pre; }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all four blue boxes.</div>
+
+<!-- Control -->
+<div class="contain">
+  <p>  x  </p>
+  <p>x x  <br>  x  <br>  x x</p>
+  <p>x x  <br>  x  <br>  x x</p>
+  <p>x x  <br>  x  <br>  x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain">
+  <p>  x  </p>
+  <p>x x  <br>  x  <br>  x x</p>
+  <p>x x  <br>  x  <br>  x x</p>
+  <p>x x  <br>  x  <br>  x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain">
+  <p>  x  </p>
+  <p>x x  <br>  x  <br>  x x</p>
+  <p>x x  <br>  x  <br>  x x</p>
+  <p>x x  <br>  x  <br>  x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain">
+  <p>  x  </p>
+  <p>x x  <br>  x  <br>  x x</p>
+  <p>x x  <br>  x  <br>  x x</p>
+  <p>x x  <br>  x  <br>  x x</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-202-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-202-ref.html
new file mode 100644
index 0000000000..08ea8e56e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-202-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .test { float: left; color: green; background: red; font: 20px/1 Ahem; }
+  .spacing { position: absolute; width: 1em; height: 2em; margin: 0 1em; background: green; }
+</style>
+
+<div id='instructions'>Test passes if there is a green rectangle below and no red.</div>
+
+<div class="test"><div class="spacing"></div>xx<br>xx</div></div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-203-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-203-ref.html
new file mode 100644
index 0000000000..3461347a28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-203-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    border: solid blue;
+    margin: 1em;
+    float: left; }
+  .control p {
+    white-space: pre-wrap;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+  }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div>
+
+<div class="contain control">
+  <!-- middle owned by containing block: simple -->
+  <p>AAA BBB</p>
+  <p>A A AB B B</p>
+  <!-- middle owned by containing block: double nesting -->
+  <p>AAAB B B</p>
+  <p>A A AB B B</p>
+  <!-- middle owned by inline: simple -->
+  <p>AAA BBB</p>
+  <p>A A AB B B</p>
+  <!-- middle owned by inline: double nesting -->
+  <p>AAAB B B</p>
+  <p>A A A   B B B</p>
+  <!-- middle containing space -->
+  <p>AAA   BBB</p>
+  <p>AAA     B B B</p>
+</div>
+
+<div class="contain control">
+  <!-- middle owned by containing block: simple -->
+  <p>AAA BBB</p>
+  <p>A A AB B B</p>
+  <!-- middle owned by containing block: double nesting -->
+  <p>AAAB B B</p>
+  <p>A A AB B B</p>
+  <!-- middle owned by inline: simple -->
+  <p>AAA BBB</p>
+  <p>A A AB B B</p>
+  <!-- middle owned by inline: double nesting -->
+  <p>AAAB B B</p>
+  <p>A A A   B B B</p>
+  <!-- middle containing space -->
+  <p>AAA   BBB</p>
+  <p>AAA     B B B</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-204-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-204-ref.html
new file mode 100644
index 0000000000..078656c463
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-204-ref.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    border: solid blue;
+    margin: 1em;
+    float: left; }
+
+  .block, .table, .flex, .grid {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    background: orange;
+  }
+  .table {
+    display: inline-table;
+  }
+  .flex {
+    display: inline-flex;
+  }
+  .grid {
+    display: inline-grid;
+  }
+  .control p {
+    white-space: pre-wrap;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+  }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all blue boxes.</div>
+
+<div class="contain control">
+  <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p>
+  <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p>
+  <p>A <span class="block"></span><span class="block"></span> D</p>
+  <p>A <span class="table"></span><span class="block"></span> D</p>
+  <p>A <span class="flex"></span><span class="block"></span> D</p>
+  <p>A <span class="grid"></span><span class="block"></span> D</p>
+</div>
+
+<div class="contain control">
+  <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p>
+  <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p>
+  <p>A <span class="block"></span><span class="block"></span> D</p>
+  <p>A <span class="table"></span><span class="block"></span> D</p>
+  <p>A <span class="flex"></span><span class="block"></span> D</p>
+  <p>A <span class="grid"></span><span class="block"></span> D</p>
+</div>
+
+<div class="contain control">
+  <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p>
+  <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p>
+  <p>A <span class="block"></span><span class="block"></span> D</p>
+  <p>A <span class="table"></span><span class="block"></span> D</p>
+  <p>A <span class="flex"></span><span class="block"></span> D</p>
+  <p>A <span class="grid"></span><span class="block"></span> D</p>
+</div>
+
+<div class="contain control">
+  <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p>
+  <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p>
+  <p>A <span class="block"></span><span class="block"></span> D</p>
+  <p>A <span class="table"></span><span class="block"></span> D</p>
+  <p>A <span class="flex"></span><span class="block"></span> D</p>
+  <p>A <span class="grid"></span><span class="block"></span> D</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-205-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-205-ref.html
new file mode 100644
index 0000000000..3c6e2aa60e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-205-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    border: solid blue;
+    margin: 1em;
+    width: max-content; }
+  .ls1 {
+    letter-spacing: 1em;
+  }
+  span {
+    border: solid orange;
+  }
+  .control p {
+    white-space: pre-wrap;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+  }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div>
+
+<div class="contain control">
+  <p><span></span>A<span></span><span></span> D<span></span>
+</div>
+
+<div class="contain control">
+  <p><span></span>A<span></span><span></span> D<span></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html
new file mode 100644
index 0000000000..36bad163f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    border: solid blue;
+    margin: 1em;
+    float: left; }
+  .control p {
+    white-space: pre;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+    word-break: break-all;
+    float: left;
+    clear: left;
+    border-right: solid orange 1em;
+    background: yellow;
+  }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all three blue boxes.</div>
+
+<div class="contain control">
+<p>A A A B B B</p>
+<!-- middle owned by containing block: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by containing block: double nesting -->
+<p>AAA   B B B</p>
+<p>A A A   B B B</p>
+<!-- middle owned by inline: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by inline: double nesting -->
+<p>AAAB B B</p>
+<p>A A A   B B B</p>
+<!-- middle containing space -->
+<p>AAA   BBB</p>
+<p>AAA     B B B</p>
+</div>
+
+<div class="contain control">
+<p>A A A B B B</p>
+<!-- middle owned by containing block: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by containing block: double nesting -->
+<p>AAA   B B B</p>
+<p>A A A   B B B</p>
+<!-- middle owned by inline: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by inline: double nesting -->
+<p>AAAB B B</p>
+<p>A A A   B B B</p>
+<!-- middle containing space -->
+<p>AAA   BBB</p>
+<p>AAA     B B B</p>
+</div>
+
+<div class="contain control">
+<p>A A A B B B</p>
+<!-- middle owned by containing block: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by containing block: double nesting -->
+<p>AAA   B B B</p>
+<p>A A A   B B B</p>
+<!-- middle owned by inline: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by inline: double nesting -->
+<p>AAAB B B</p>
+<p>A A A   B B B</p>
+<!-- middle containing space -->
+<p>AAA   BBB</p>
+<p>AAA     B B B</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-211-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-211-ref.html
new file mode 100644
index 0000000000..9b3499ed7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-211-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    margin: 1em; }
+  .control p {
+    white-space: pre-wrap;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+    text-emphasis: dot;
+  }
+</style>
+
+<div id='instructions'>Test passes if the blue pattern is identical to the black one.</div>
+
+<div class="contain control">
+  <p>A B C
+</div>
+
+<div class="contain control" style="color:blue">
+  <p>A B C
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-212-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-212-ref.html
new file mode 100644
index 0000000000..889803699d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-212-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+  @import "/fonts/ahem.css";
+  .contain {
+    font: 20px/1 Ahem;
+    margin: 1em; }
+  .control p {
+    white-space: pre-wrap;
+  }
+  p {
+    letter-spacing: 0;
+    margin: 0;
+  }
+</style>
+
+<div id='instructions'>Test passes if the blue pattern is identical to the black one.</div>
+
+<div class="contain control">
+  <p><ruby>A<rt>a</rt></ruby> <ruby>B B<rt>b</rt></ruby></p>
+</div>
+
+<div class="contain control" style="color: blue">
+  <p><ruby>A<rt>a</rt></ruby> <ruby>B B<rt>b</rt></ruby></p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bengali-yaphala-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bengali-yaphala-001-ref.html
new file mode 100644
index 0000000000..a1ff2e053a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bengali-yaphala-001-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Text reference: letter-spacing and Bengali ya-phala (yo-pholo)</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+/* We try various "likely" font names, as well as generics; those not available
+   on the platform will simply fall back to a default. */
+.outer.a {
+  font-family: sans-serif;
+}
+.outer.b {
+  font-family: serif;
+}
+.outer.c {
+  font-family: Bangla MN, serif;
+}
+.outer.d {
+  font-family: Bangla Sangam MN, sans-serif;
+}
+.outer.e {
+  font-family: Nirmala UI, Vrinda, sans-serif;
+}
+.outer.f {
+  font-family: Noto Sans Bengali, sans-serif;
+}
+.inner {
+  position: relative;
+  margin: 1em;
+  height: 2em;
+}
+.mask {
+  padding: 0.25em;
+  color: green;
+  background: green;
+  position: absolute;
+}
+span {
+  display: inline-block;
+}
+</style>
+
+<p>Test passes if the red Bengali text is entirely hidden by the green blocks.</p>
+
+<div class="outer a">
+  <div class="inner" lang="bn">
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
+
+<div class="outer b">
+  <div class="inner" lang="bn">
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
+
+<div class="outer c">
+  <div class="inner" lang="bn">
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
+
+<div class="outer d">
+  <div class="inner" lang="bn">
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
+
+<div class="outer e">
+  <div class="inner" lang="bn">
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
+
+<div class="outer f">
+  <div class="inner" lang="bn">
+    <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+  </div>
+  <div class="inner" lang="bn">
+    <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-001-ref.html
new file mode 100644
index 0000000000..e34dbc313f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-family: monospace;
+  font-size: 3em;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4.
+<div>12345</div>
+<div>abאב</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-002-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-002-ref.html
new file mode 100644
index 0000000000..f197769f3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-002-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-family: monospace;
+  font-size: 3em;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3.
+<div>12345</div>
+<div>aaב<br>ב</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-003-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-003-ref.xht
new file mode 100644
index 0000000000..d46dd7a361
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-003-ref.xht
@@ -0,0 +1,30 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+    <style>
+      .control {
+          font: 50px/1 monospace;
+          width: 14ch;
+          font-kerning: none;
+          border: 1px solid black;
+          white-space: pre;
+      }
+      .red {
+          color: red;
+          position: absolute;
+          z-index: -1;
+      }
+    </style>
+ </head>
+ <body>
+  <p>Test passes if no red is visible except for anti-aliasing differences.</p>
+  <!-- bet <ls> alef <ls> <space stretched from justification> A <ls> B -->
+  <div class="control red">&#x5d0; &#x5d1;<div style="float: right">A B</div></div>
+  <div class="control">&#x5d0; &#x5d1;<div style="float: right">A B</div></div>
+
+  <!-- A <ls> B <ls> <space stretched from justification> alef <ls> bet -->
+  <div class="control red">A B<div style="float: right">&#x5d0; &#x5d1;</div></div>
+  <div class="control">A B<div style="float: right">&#x5d0; &#x5d1;</div></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-004-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-004-ref.xht
new file mode 100644
index 0000000000..a0326fcbaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-004-ref.xht
@@ -0,0 +1,27 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+    <style>
+      .control {
+          font: 50px/1 monospace;
+          font-kerning: none;
+          white-space: pre;
+      }
+      .red {
+          color: red;
+          position: absolute;
+          z-index: -1;
+      }
+      .control span {
+          background: green;
+      }
+    </style>
+ </head>
+ <body>
+  <p>Test passes if no red is visible except for anti-aliasing differences, and the green boxes are the width of a single letter.</p>
+  <!-- A <ls> B <ls> <bg>C</bg> <ls> gimel <ls> bet <ls> <bg>alef</bg> <gap> -->
+  <div class="control red">A B <span>C</span> &#x5d1; &#x5d2; <span style="unicode-bidi:embed">&#x5d0;</span></div>
+  <div class="control">A B <span>C</span> &#x5d1; &#x5d2; <span style="unicode-bidi:embed">&#x5d0;</span></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-005-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-005-ref.xht
new file mode 100644
index 0000000000..d93f98495a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-005-ref.xht
@@ -0,0 +1,27 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+    <style>
+      .control {
+          font: 50px/1 monospace;
+          font-kerning: none;
+          white-space: pre;
+      }
+      .red {
+          color: red;
+          position: absolute;
+          z-index: -1;
+      }
+      .control span {
+          background: green;
+      }
+    </style>
+ </head>
+ <body>
+  <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p>
+  <!-- A <ls> <ls> <bg>B <ls> bet <ls> alef <ls> C</bg> <ls> D <gap> -->
+  <div class="control red">A  <span>B &#x5d0; &#x5d1; C</span>  D</div>
+  <div class="control">A  <span>B &#x5d0; &#x5d1; C</span>  D</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-control-chars-001.ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-control-chars-001.ref.html
new file mode 100644
index 0000000000..977d821145
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-control-chars-001.ref.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>letter-spacing should not be applied to zero-width format controls</title>
+<style>
+.test {
+  font: 12px/2 monospace;
+  letter-spacing: 4px;
+}
+</style>
+</head>
+<body>
+The two lines below should match:<br>
+<div class=test>
+letterspacing should not be
+affected by
+zero-width
+format
+characters
+</div>
+<div class=test>
+letterspacing should not be
+affected by
+zero-width
+format
+characters
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-001-ref.html
new file mode 100644
index 0000000000..eb474ab8d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-family: monospace;
+  font-size: 3em;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4.
+<div>12345</div>
+<div>a aa</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-002-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-002-ref.html
new file mode 100644
index 0000000000..a99e1e2fa5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-002-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+div {
+  margin: 1em;
+  font: 24px monospace;
+  white-space: pre;
+  display: inline-block;
+  outline: 1px solid gray;
+}
+.letterspc {
+  letter-spacing: 10px;
+}
+.nospc {
+  letter-spacing: 0px;
+}
+</style>
+
+<p>None of these examples should wrap to a second line:</p>
+<div class=letterspc>1. a</div>
+<br>
+<div class=letterspc>2. b</div>
+<br>
+<div class=nospc>3. c</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-001-ref.html
new file mode 100644
index 0000000000..e4caf6587a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>text-justify:inter-character and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+@font-face {
+    font-family: 'mplus';
+    src: url('/fonts/mplus-1p-regular.woff');
+}
+div {
+    font-size: 2em;
+    font-family: mplus;
+    width: 12ch;
+    text-align: justify;
+    text-align-last: justify;
+    text-justify: inter-character;
+    font-variant-ligatures: none;
+    font-kerning: none;
+}
+span {
+    display: inline-block;
+    text-justify: auto;
+}
+.ref { color: blue;}
+.noref { color: orange; font-variant-ligatures: initial;}
+</style>
+<p>Test passes if the black text looks like the blue one, not the orange one.
+<div>office</div>
+<div class=ref>office</div>
+<div class=noref>o<span>ffi</span>ce</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-002-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-002-ref.html
new file mode 100644
index 0000000000..2cbe5b0a0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-002-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter spacing and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+@font-face {
+    font-family: 'mplus';
+    src: url('/fonts/mplus-1p-regular.woff');
+}
+div {
+    font-size: 2em;
+    font-family: mplus;
+    width: 12ch;
+    font-variant-ligatures: none;
+    letter-spacing: 0;
+    font-kerning: none;
+}
+i {
+    padding-left: 20px;
+}
+.ref {
+    color: blue;
+}
+</style>
+<p>Test passes if the black text looks like the blue one.
+<div>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div>
+<div class=ref>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-003-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-003-ref.html
new file mode 100644
index 0000000000..2d1e7bd038
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-003-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>text-justify:inter-character and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div {
+    font-size: 2em;
+    width: 12ch;
+}
+span { float: right; }
+.ref { color: blue; }
+</style>
+<p>Test passes if the black text looks like the blue one.
+<div lang=km>&#x179F;&#x17B6;<span>&#x17A0;&#x17B6;</span></div>
+<div lang=km class=ref>&#x179F;&#x17B6;<span>&#x17A0;&#x17B6;</span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-004-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-004-ref.html
new file mode 100644
index 0000000000..bb3881fc5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-004-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<meta charset="utf-8">
+<title>letter spacing and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div {
+    font-size: 2em;
+    width: 12ch;
+    font-kerning: none;
+}
+span {
+    padding-left: 20px;
+}
+.ref {
+    color: blue;
+}
+</style>
+<p>Test passes if the black text looks like the blue one.
+<div lang=km>&#x179F;&#x17B6;<span></span>&#x17A0;&#x17B6;</div>
+<div lang=km class=ref>&#x179F;&#x17B6;<span></span>&#x17A0;&#x17B6;</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-001-ref.html
new file mode 100644
index 0000000000..3d003f3621
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-family: monospace;
+  font-size: 3em;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 5.
+<div>123456</div>
+<div>aa aa</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-002-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-002-ref.html
new file mode 100644
index 0000000000..93eb6b0fca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-002-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-family: monospace;
+  font-size: 3em;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3.
+<div>12345</div>
+<div>aaa</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-003-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-003-ref.xht
new file mode 100644
index 0000000000..996f2a1e30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-003-ref.xht
@@ -0,0 +1,26 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+    <style>
+      .control {
+          font: 50px/1 monospace;
+          font-kerning: none;
+          white-space: pre;
+      }
+      .red {
+          color: red;
+          position: absolute;
+          z-index: -1;
+      }
+      .control span {
+          background: green;
+      }
+    </style>
+ </head>
+ <body>
+  <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p>
+  <!-- A <ls> <ls> <bg>B <ls> <ls> C</bg> <ls> D -->
+  <div class="control">A <span>B  C</span> D</div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/support/swatch-orange.png b/testing/web-platform/tests/css/css-text/letter-spacing/support/swatch-orange.png
new file mode 100644
index 0000000000..d3cd498b52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/support/swatch-orange.png
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-001.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-001.html
new file mode 100644
index 0000000000..6f2367035f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-001-ref.html">
+<meta name="assert" content="line-break:anywhere puts a soft wrap opportunity around every typographic character unit,
+                             including around punctuation or in the middle of words,
+                             disregarding any prohibition against line breaks introduced by characters with the GL, JW, or ZJW character class.">
+<style>
+#green {
+  position: absolute;
+  background: green;
+  font-family: monospace;
+  width: 1ch;
+  height: 19em;
+}
+#test {
+  width: 1ch;
+  line-height: 1;
+  color: red;
+  font-family: monospace;
+  line-break: anywhere;
+}
+span {
+  background: red;
+}
+</style>
+
+<p>Test passes if there is a green rectangle below and no red.</p>
+<div id=green></div>
+<!-- with line breaks everywhere, none of the following characters should stick out from under the green div -->
+<div id=test>aa-a.a)a,a）a<span>&nbsp;</span>a&#xfeff;a&#x2060;a&#x200d;a･a</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-002.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-002.html
new file mode 100644
index 0000000000..966d5c1c7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-002.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-001-ref.html">
+<meta name="assert" content="line-break:anywhere puts a soft wrap opportunity betwwen letters in the middle of words and hyphenation is not applied.">
+<style>
+#green {
+  position: absolute;
+  background: green;
+  font-family: monospace;
+  width: 1ch;
+  height: 19em;
+}
+#test {
+  width: 1ch;
+  line-height: 1;
+  color: red;
+  font-family: monospace;
+  line-break: anywhere;
+  hyphens: auto;
+}
+</style>
+
+<p>Test passes if there is a green rectangle below and no red.</p>
+<div id=green></div>
+<!-- Hyphenation, if it occurs, will produce a hyphen that sticks out from under the green rectangle.
+     Also, if the words fails to be wrapped between all letters, letters will also stick out from under the green rectangle -->
+<div id=test>no hyphenation</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-003.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-003.html
new file mode 100644
index 0000000000..0b004b04a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-003-ref.html">
+<meta name="assert" content="line-break: anywhere means lines may break between any two typographic letter units.">
+<style type='text/css'>
+.test { line-break: anywhere; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div>
+<div class="ref"><span>Latin latin latin lati<br/>n</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-004.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-004.html
new file mode 100644
index 0000000000..26bd466ae3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-004.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="The second word is broken, despite the word-break: keep-all, because line-break: anywhere disregarde any prohibition against line breaks mandate by word-break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 25px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  line-height: 1;
+  word-break: keep-all;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX X<br>XX</div>
+  <div class="test">XX XXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-005.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-005.html
new file mode 100644
index 0000000000..5e286a0d76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-005.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break: anywhere + break-spaces do allow a break
+between the last character of a word and the first space of a sequence of preserved
+spaces even if there is a previous breaking opportunity">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+  width: 4ch;
+  line-height: 1;
+}
+.red {
+  position: absolute;
+  white-space: pre;
+  color: red;
+  background: green;
+  z-index: -1;
+}
+.test {
+  white-space: break-spaces;
+  line-break: anywhere;
+  color: green;
+}
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="red">X XX<br> XX <br>X XX<br> X</div>
+<div class="test">X XX XX X XX X</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-006.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-006.html
new file mode 100644
index 0000000000..802d66f0cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-006.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break: anywhere' disgregard the prohibition against line breaks introduced by characters with the GL character class">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 25px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br>&nbsp;XXX<br>X X <br>X</div>
+  <div class="test">XXXX&nbsp;XXXX X X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-007.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-007.html
new file mode 100644
index 0000000000..02a4c77653
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-007.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break:anywhere allows breaking opportunities around punctuaction characters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">X XXX<br>XX</div>
+  <div class="test">X XX...</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-008.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-008.html
new file mode 100644
index 0000000000..dddfdc1fb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-008.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="break-all breaks between the last two letters, because breaking opportunities between the punctuaction characters are forbidden.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+  white-space: pre-wrap;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">X XXX<br>XX</div>
+  <div class="test">X XX...</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-009.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-009.html
new file mode 100644
index 0000000000..9d8e8888b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-009.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break: anywhere' disgregard the prohibition against line breaks introduced by characters with the GL character class">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 25px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  white-space: break-spaces;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br>&nbsp;XXX<br>X X <br>X</div>
+  <div class="test">XXXX&nbsp;XXXX X X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-010.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-010.html
new file mode 100644
index 0000000000..3e8247904b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-010.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break: anywhere' disgregard the prohibition against line breaks introduced by characters with the GL character class">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 25px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  white-space: pre-wrap;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br>&nbsp;XXX<br>X X <br>X</div>
+  <div class="test">XXXX&nbsp;XXXX X X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-011.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-011.html
new file mode 100644
index 0000000000..0565122568
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-011.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break:anywhere allows breaking opportunities around slash characters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">X XXX<br>XX</div>
+  <div class="test">X XX///</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-012.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-012.html
new file mode 100644
index 0000000000..872dc9d31d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-012.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break:anywhere allows breaking opportunities around backslash characters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">X XXX<br>XX</div>
+  <div class="test">X XX\\\</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-013.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-013.html
new file mode 100644
index 0000000000..55ad0b6f74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-013.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break:anywhere allows breaking opportunities before slash characters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXX<br>XX</div>
+  <div class="test">XXX/X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-014.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-014.html
new file mode 100644
index 0000000000..568b899fd6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-014.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break:anywhere allows breaking opportunities before backslash characters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXX<br>XX</div>
+  <div class="test">XXX\X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-015.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-015.html
new file mode 100644
index 0000000000..68c3562e29
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-015.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break:anywhere allows breaking opportunities after backslash characters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br>X</div>
+  <div class="test">XXX\X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-016.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-016.html
new file mode 100644
index 0000000000..ea09bb2865
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-016.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<meta name="assert" content="line-break:anywhere allows breaking opportunities after slash characters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br>X</div>
+  <div class="test">XXX/X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-017.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-017.html
new file mode 100644
index 0000000000..a2521cbcbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-017.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.3. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="The text is wrapped into two lines, since there is no need to break the second line using the space in the middle.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXX<br>X X</div>
+  <div class="test">XXXX<span> </span>X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-001.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-001.html
new file mode 100644
index 0000000000..a4158dc990
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-001.html
@@ -0,0 +1,39 @@
+
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere and the white-space property</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="'line-break: anywhere' can't prevent overflow under 'white-space: pre', because it line wrapping is not allowed. ">
+<style>
+div {
+  position: relative;
+  font: 10px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  line-break: anywhere;
+
+  white-space: pre;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<span style="color: green">XXXX</span>XX</div>
+  <div class="test">XXXX    XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-002.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-002.html
new file mode 100644
index 0000000000..2fbb53dca2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-002.html
@@ -0,0 +1,40 @@
+
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere and the white-space property</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-nowrap">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="'line-break: anywhere' can't prevent overflow under 'white-space: nowrap', because it line wrapping is not allowed. ">
+<style>
+div {
+  position: relative;
+  font: 10px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+  line-break: anywhere;
+
+  white-space: nowrap;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX XX</div>
+  <div class="test">XXXX    XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-003.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-003.html
new file mode 100644
index 0000000000..3002dc1064
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-003.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere and the white-space property</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="'line-break: anywhere' can't prevent overflow under 'white-space: pre', because it line wrapping is not allowed. ">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+  line-break: anywhere;
+
+  white-space: pre;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"><span style="color: green">X</span>XXX</div>
+  <div class="test"> XXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-004.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-004.html
new file mode 100644
index 0000000000..e6e1b39787
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-004.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere and the white-space property</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="The line is wrapped ignoring the white space, which will be removed honoring 'white-space: normal'">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  line-break: anywhere;
+
+  white-space: normal;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXX<br>XX</div>
+  <div class="test">XXX<span style="background: red"> </span>XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-005.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-005.html
new file mode 100644
index 0000000000..2f64d8704b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-005.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere and the white-space property</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="The line is wrapped ignoring the white space, which will be removed honoring 'white-space: normal'">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  line-break: anywhere;
+
+  white-space: normal;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br>X</div>
+  <div class="test"><span style="background: red"> </span>XXXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-006.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-006.html
new file mode 100644
index 0000000000..c804e37126
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-006.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere and the white-space property</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="'line-break: anywhere' can't break a preserved sequence of spaces under 'white-spate: pre-wrap', which should hang instead.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+
+  line-break: anywhere;
+  white-space: pre-wrap;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br>XX</div>
+  <div class="test">X<span style="background: green">   </span>XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-007.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-007.html
new file mode 100644
index 0000000000..d9b266db9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-007.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere and the white-space property</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="'line-break: anywhere' can't break before the first white-space affter a word under 'white-spate: pre-wrap', which should hang instead.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+
+  line-break: anywhere;
+  white-space: pre-wrap;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br>XX</div>
+  <div class="test">XXX<span style="background: green"> </span>XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-008.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-008.html
new file mode 100644
index 0000000000..aebd31ea68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-008.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere and the white-space property</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="'line-break: anywhere' allows preserved white spaces at the end of the line, honoring 'white-space: break-spaces'.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+
+  line-break: anywhere;
+  white-space: break-spaces;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX<span style="color: green">XX<br>XX</span>XX<br>XXX</div>
+  <div class="test">XX    XXXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-009.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-009.html
new file mode 100644
index 0000000000..f536c907a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-and-white-space-009.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere and the white-space property</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="'line-break: anywhere' allows breaking before the first character of a preserved white space sequence, honoring 'white-space: break-spaces'.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+
+  line-break: anywhere;
+  white-space: break-spaces;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br><span style="color: green">XXX</span>X<br>XXXX<br><span style="color: green">X</span>X</div>
+  <div class="test">XXXX   XXXXX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-001.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-001.html
new file mode 100644
index 0000000000..d18df4b38c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the WJ classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"></div>
+  <div class="test">XX&#x2060;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-002.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-002.html
new file mode 100644
index 0000000000..1255aa14d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-002.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the WJ classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"></div>
+  <div class="test">XX&#xFEFF;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-003.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-003.html
new file mode 100644
index 0000000000..7fe230e890
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the ZW classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  color: red;
+  background: green;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br>XX</div>
+  <div class="test">..&#x200B;...X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-004.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-004.html
new file mode 100644
index 0000000000..13706d5d9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-004.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"></div>
+  <div class="test">XX&nbsp;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-005.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-005.html
new file mode 100644
index 0000000000..175228d9c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-005.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX<br><span style="color: green">X</span>X</div>
+  <div class="test">XX&nbsp;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-006.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-006.html
new file mode 100644
index 0000000000..9bb557e7d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-006.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"></div>
+  <div class="test">XX &nbsp;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-007.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-007.html
new file mode 100644
index 0000000000..7f90bfd430
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-007.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 20px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  height: 100px;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXXX<br>XX</div>
+  <div class="test">XXX<span style="background: green"> &nbsp;X</span>XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-008.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-008.html
new file mode 100644
index 0000000000..40826540c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-008.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX<br>X</div>
+  <div class="test">XX&#x202F;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-009.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-009.html
new file mode 100644
index 0000000000..6d6ca3f743
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-009.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX<br>X</div>
+  <div class="test">XX&#x180E;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-010.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-010.html
new file mode 100644
index 0000000000..5f152c6629
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-010.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"></div>
+  <div class="test">XX &#x180E;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-011.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-011.html
new file mode 100644
index 0000000000..2196d983f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-011.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX<br>X</div>
+  <div class="test">XX&#x034F;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-012.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-012.html
new file mode 100644
index 0000000000..110d9cafc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-012.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"></div>
+  <div class="test">XX &#x034F;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-013.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-013.html
new file mode 100644
index 0000000000..2cda76c5cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-013.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"></div>
+  <div class="test">XX&#x2011;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-014.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-014.html
new file mode 100644
index 0000000000..d79efb7aee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-014.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the GL classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX X<br>XX</div>
+  <div class="test">XX &#x2011;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-015.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-015.html
new file mode 100644
index 0000000000..5eecd03da2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-015.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the ZWJ classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 50px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: red;
+  height: 100px;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"></div>
+  <div class="test">XX&#x200D;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-016.html b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-016.html
new file mode 100644
index 0000000000..d4ab337a7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-anywhere-overrides-uax-behavior-016.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: line-break: anywhere overrides behavior defined for the WJ, ZW, GL, and ZWJ classes</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#line-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/line-break-anywhere-004-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="Except where explicitly defined by 'line-break: anywhere' line breaking behavior defined for the ZWJ classes in [UAX14] must be honored. ">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  line-break: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX X<br>X</div>
+  <div class="test">XX &#x200D;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-011.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-011.xht
new file mode 100644
index 0000000000..604466a1f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-011.xht
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - loose and Japanese small kana</title>
+		<!-- Japanese small kana -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-loose-011-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: loose' allows line breaking before Japanese small kana such as 'Japanese small kana a (U+3041)' and  'Japanese small kana i (U+3043)'." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: loose;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL A -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL I -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL U -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL E -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL O -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-012.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-012.xht
new file mode 100644
index 0000000000..0deab610cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-012.xht
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - loose and  Katakana-Hiragana prolonged sound marks</title>
+		<!-- Katakana-Hiragana prolonged sound marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-loose-012-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: loose' allows line breaking before Katakana-Hiragana prolonged sound marks such as (U+30FC) and (U+FF70)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: loose;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - fullwidth -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - halfwidth -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-013.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-013.xht
new file mode 100644
index 0000000000..089d4613ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-013.xht
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - loose and hyphens</title>
+		<!-- hyphens -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-loose-013-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: loose' allows line breaking before U+301C and U+30A0." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: loose;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- hyphens -->
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-014.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-014.xht
new file mode 100644
index 0000000000..90cf3c769c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-014.xht
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - loose and iteration marks</title>
+		<!-- iteration marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-loose-014-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: loose' allows line breaking before iteration marks such as IDEOGRAPHIC ITERATION MARK (U+3005) and VERTICAL IDEOGRAPHIC ITERATION MARK (U+303B)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: loose;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- iteration marks -->
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-015.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-015.xht
new file mode 100644
index 0000000000..6384d8c14e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-015.xht
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - loose and  inseparable characters</title>
+		<!-- inseparable characters -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-loose-015-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: loose' allows line breaking between inseparable characters such as TWO DOT LEADER (U+2025) and HORIZONTAL ELLIPSIS (U+2026)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: loose;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- inseparable characters TWO DOT LEADER -->
+			<p class="test" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2025;<br />&#x2025;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- inseparable characters HORIZONTAL ELLIPSIS -->
+			<p class="test" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2026;<br />&#x2026;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-016a.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-016a.xht
new file mode 100644
index 0000000000..6397c03182
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-016a.xht
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - loose and centered punctuation marks</title>
+		<!-- centered punctuation marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-loose-016a-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: loose' allows line breaking before centered punctuation marks." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: loose;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks KATAKANA MIDDLE DOT -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH COLON -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH SEMICOLON -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-016b.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-016b.xht
new file mode 100644
index 0000000000..261cce5f67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-016b.xht
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - loose and centered punctuation marks</title>
+		<!-- centered punctuation marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-loose-016b-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: loose' allows line breaking before centered punctuation marks." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: loose;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE EXCLAMATION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE QUESTION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks QUESTION EXCLAMATION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks EXCLAMATION QUESTION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH QUESTION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-017a.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-017a.xht
new file mode 100644
index 0000000000..b63f1504c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-017a.xht
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - loose and postfixes</title>
+		<!-- postfixes -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-loose-017a-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: loose' allows line breaking before postfixes." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: loose;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.1em;		/* added extra .1em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PER MILLE SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PRIME -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes DOUBLE PRIME -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-017b.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-017b.xht
new file mode 100644
index 0000000000..6b89d125f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-017b.xht
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - loose and postfixes</title>
+		<!-- postfixes -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-loose-017b-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: loose' allows line breaking before postfixes." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: loose;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE CELSIUS -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH PERCENT SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH CENT SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-018.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-018.xht
new file mode 100644
index 0000000000..d5df229cf7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-018.xht
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - loose and prefixes</title>
+		<!-- prefixes -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-loose-018-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: loose' allows line breaking after prefixes." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: loose;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+            <!-- prefixes EURO SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x20ac;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x20ac;</span><br />サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes NUMERO SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x2116;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x2116;</span><br />サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH DOLLAR SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xff04;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xff04;</span><br />サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH POUND SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe1;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe1;</span><br />サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH YEN SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe5;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe5;</span><br />サンプル文</span>
+            </p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-hyphens-001.html b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-hyphens-001.html
new file mode 100644
index 0000000000..e8200d66d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-hyphens-001.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: hyphens and line-break:loose</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=match href="reference/line-break-loose-hyphens-001-ref.html">
+<meta name=assert content="breaks before U+2010 or U+2013 when line-break is loose are allowed if the preceding character has class ID.">
+<style>
+div {
+  width: 2em;
+  line-break: loose;
+  border: solid cyan;
+}
+</style>
+
+<p>The test passes if the second line in each box below starts with a hyphen.
+(Note: the hyphens in each box do no need to be the same size.)
+
+<div>文文‐文</div>
+<div>文文–文</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-hyphens-002.html b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-hyphens-002.html
new file mode 100644
index 0000000000..f2841c9b10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-hyphens-002.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: hyphens and line-break:loose</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel=match href="reference/line-break-loose-hyphens-002-ref.html">
+<meta name=assert content="breaks before U+2010 or U+2013 when line-break is loose are allowed if the preceding character is treated as having class ID due to word-break:break-all.">
+<style>
+div {
+  font-family: monospace;
+  width: 2ch;
+  line-break: loose;
+  word-break: break-all;
+  border: solid cyan;
+}
+</style>
+
+<p>The test passes if the second line in each box below starts with a hyphen.
+(Note: the hyphens in each box do no need to be the same size.)
+
+<div>aa‐a</div>
+<div>aa–a</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-loose-hyphens-003.html b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-hyphens-003.html
new file mode 100644
index 0000000000..4af970f73f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-loose-hyphens-003.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: hyphens and line-break:loose</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=match href="reference/line-break-loose-hyphens-003-ref.html">
+<meta name=assert content="breaks before U+2010 or U+2013 when line-break is loose are not allowed if the preceding character is not of line-breaking class ID.">
+<style>
+div {
+  font-family: monospace;
+  width: 2ch;
+  line-break: loose;
+}
+</style>
+
+<p>The test passes if there are two lines of text below
+and they both end with a hyphen.
+(Note: the hyphens do no need to be the same size.)
+
+<div>aa‐</div>
+<div>aa–</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-011.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-011.xht
new file mode 100644
index 0000000000..692468c527
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-011.xht
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and Japanese small kana</title>
+		<!-- Japanese small kana -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-011-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' allows line breaking before Japanese small kana such as 'Japanese small kana a (U+3041)' and  'Japanese small kana i (U+3043)'." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL A -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL I -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL U -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL E -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL O -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-012.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-012.xht
new file mode 100644
index 0000000000..a4b794f0f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-012.xht
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and  Katakana-Hiragana prolonged sound marks</title>
+		<!-- Katakana-Hiragana prolonged sound marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-012-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' allows line breaking before Katakana-Hiragana prolonged sound marks such as (U+30FC) and (U+FF70)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - fullwidth -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - halfwidth -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-013.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-013.xht
new file mode 100644
index 0000000000..f58fe39d69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-013.xht
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and hyphens</title>
+		<!-- hyphens -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-013-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' allows line breaking before U+301C and U+30A0.." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- hyphens -->
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-014.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-014.xht
new file mode 100644
index 0000000000..86a35bfb6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-014.xht
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and iteration marks</title>
+		<!-- iteration marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-014-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' does not allow line breaking before iteration marks such as IDEOGRAPHIC ITERATION MARK (U+3005) and VERTICAL IDEOGRAPHIC ITERATION MARK (U+303B)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- iteration marks -->
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-015a.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-015a.xht
new file mode 100644
index 0000000000..d2e0fe3499
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-015a.xht
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and  inseparable characters</title>
+		<!-- inseparable characters -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-015a-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' does not allow line breaking between inseparable characters such as TWO DOT LEADER (U+2025) and HORIZONTAL ELLIPSIS (U+2026)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- inseparable characters TWO DOT LEADER -->
+			<p class="test" lang="ja">
+				<span>サンプルサンプル文<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- inseparable characters HORIZONTAL ELLIPSIS -->
+			<p class="test" lang="ja">
+				<span>サンプルサンプル文<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-015b.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-015b.xht
new file mode 100644
index 0000000000..904b009ac6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-015b.xht
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and  inseparable characters</title>
+		<!-- inseparable characters -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-015b-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' does not allow line breaking between inseparable characters such as TWO DOT LEADER (U+2025) and HORIZONTAL ELLIPSIS (U+2026). Tailorable breaks between ID and CL, as well as CL and IN are also disallowed." />
+		<meta name="flags" content="should" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- inseparable characters TWO DOT LEADER -->
+			<p class="test" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- inseparable characters HORIZONTAL ELLIPSIS -->
+			<p class="test" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-016a.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-016a.xht
new file mode 100644
index 0000000000..c3b103ab7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-016a.xht
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and centered punctuation marks</title>
+		<!-- centered punctuation marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-016a-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' does not allow line breaking before centered punctuation marks such as COLON (U+003A) and SEMICOLON (U+003B)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks KATAKANA MIDDLE DOT -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH COLON -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH SEMICOLON -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-016b.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-016b.xht
new file mode 100644
index 0000000000..c73bb159d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-016b.xht
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and centered punctuation marks</title>
+		<!-- centered punctuation marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-016b-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' does not allow line breaking before centered punctuation marks such as COLON (U+003A) and SEMICOLON (U+003B)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE EXCLAMATION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE QUESTION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks QUESTION EXCLAMATION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks EXCLAMATION QUESTION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH QUESTION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-017a.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-017a.xht
new file mode 100644
index 0000000000..f9b5169cf4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-017a.xht
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and postfixes</title>
+		<!-- postfixes -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-017a-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' does not allow line breaking before postfixes such as PERCENT SIGN (U+0025) and CENT SIGN (U+00A2)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.1em;		/* added extra .1em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PER MILLE SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PRIME -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes DOUBLE PRIME -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-017b.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-017b.xht
new file mode 100644
index 0000000000..124ece3189
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-017b.xht
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and postfixes</title>
+		<!-- postfixes -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-017b-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' does not allow line breaking before postfixes such as PERCENT SIGN (U+0025) and CENT SIGN (U+00A2)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE CELSIUS -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH PERCENT SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH CENT SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-018.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-018.xht
new file mode 100644
index 0000000000..a1042e858a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-018.xht
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - normal and prefixes</title>
+		<!-- prefixes -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-normal-018-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: normal' does not allow line breaking after prefixes." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: normal;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+            <!-- prefixes EURO SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x20ac;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x20ac;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes NUMERO SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x2116;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x2116;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH DOLLAR SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xff04;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xff04;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH POUND SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe1;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe1;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH YEN SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe5;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe5;</span>サンプル文</span>
+            </p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-hyphens-001.html b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-hyphens-001.html
new file mode 100644
index 0000000000..245ebf3f10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-hyphens-001.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: hyphens and line-break:normal</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=match href="reference/line-break-normal-hyphens-001-ref.html">
+<meta name=assert content="breaks before U+2010 or U+2013 when line-break is normal are not allowed when the preceding character has class ID.">
+<style>
+div {
+  width: 2em;
+  line-break: normal;
+  border: solid cyan;
+}
+</style>
+
+<p>The test passes if the second line in each box below ends with a hyphen.
+(Note: the hyphens in each box do no need to be the same size.)
+
+<div>文文‐文</div>
+<div>文文–文</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-hyphens-002.html b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-hyphens-002.html
new file mode 100644
index 0000000000..d7de5c5f09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-hyphens-002.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: hyphens and line-break:normal</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel=match href="reference/line-break-normal-hyphens-002-ref.html">
+<meta name=assert content="breaks before U+2010 or U+2013 when line-break is normal are not allowed if the preceding character is treated as having class ID due to word-break:break-all.">
+<style>
+div {
+  font-family: monospace;
+  width: 2ch;
+  line-break: normal;
+  word-break: break-all;
+  border: solid cyan;
+}
+</style>
+
+<p>The test passes if the second line in each box below ends with a hyphen.
+(Note: the hyphens in each box do no need to be the same size.)
+
+<div>aa‐a</div>
+<div>aa–a</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-normal-hyphens-003.html b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-hyphens-003.html
new file mode 100644
index 0000000000..7e9054a4a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-normal-hyphens-003.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: hyphens and line-break:normal</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=match href="reference/line-break-loose-hyphens-003-ref.html">
+<meta name=assert content="breaks before U+2010 or U+2013 when line-break is normal are not allowed if the preceding character is not of line-breaking class ID.">
+<style>
+div {
+  font-family: monospace;
+  width: 2ch;
+  line-break: normal;
+}
+</style>
+
+<p>The test passes if there are two lines of text below
+and they both end with a hyphen.
+(Note: the hyphens do no need to be the same size.)
+
+<div>aa‐</div>
+<div>aa–</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-shaping-001.html b/testing/web-platform/tests/css/css-text/line-break/line-break-shaping-001.html
new file mode 100644
index 0000000000..4ce1da2f30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-shaping-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: line-break:anywhere and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#line-break-property">
+<link rel="match" href="reference/line-break-shaping-001-ref.html">
+<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by line-break:anywhere">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+  }
+  section {
+    float: left; /* to sizing to the intrinsic min of the ref box*/
+    position: relative;
+  }
+  #ref {
+    border: solid orange;
+    margin: 1rem;
+  }
+  #test {
+    border: solid blue;
+    position: absolute; /* to avoid influencing the size of the section */
+    left: 1rem;
+    right: 1rem;
+    line-break: anywhere;
+  }
+</style>
+
+<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
+<section>
+<div dir=rtl lang=ar id=ref>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+<div dir=rtl lang=ar id=test>عائلة</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-011.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-011.xht
new file mode 100644
index 0000000000..d9cecc788a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-011.xht
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and Japanese small kana</title>
+		<!-- Japanese small kana -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-011-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before Japanese small kana such as 'Japanese small kana a (U+3041)' and  'Japanese small kana i (U+3043)'." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL A -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL I -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL U -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL E -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL O -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-012.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-012.xht
new file mode 100644
index 0000000000..c9f80dd81a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-012.xht
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and  Katakana-Hiragana prolonged sound marks</title>
+		<!-- Katakana-Hiragana prolonged sound marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-012-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before Katakana-Hiragana prolonged sound marks such as (U+30FC) and (U+FF70)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+        text-autospace: no-autospace;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - fullwidth -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - halfwidth -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-013.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-013.xht
new file mode 100644
index 0000000000..d6746e4579
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-013.xht
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and hyphens</title>
+		<!-- hyphens -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-013-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before U+301C and U+30A0.." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- hyphens -->
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-014.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-014.xht
new file mode 100644
index 0000000000..90710cbdbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-014.xht
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and iteration marks</title>
+		<!-- iteration marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-014-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before iteration marks such as IDEOGRAPHIC ITERATION MARK (U+3005) and VERTICAL IDEOGRAPHIC ITERATION MARK (U+303B)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- iteration marks -->
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-015a.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-015a.xht
new file mode 100644
index 0000000000..ad31e4fc54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-015a.xht
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and  inseparable characters</title>
+		<!-- inseparable characters -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-015a-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking between inseparable characters such as TWO DOT LEADER (U+2025) and HORIZONTAL ELLIPSIS (U+2026)." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- inseparable characters TWO DOT LEADER -->
+			<p class="test" lang="ja">
+				<span>サンプルサンプル文<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- inseparable characters HORIZONTAL ELLIPSIS -->
+			<p class="test" lang="ja">
+				<span>サンプルサンプル文<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-015b.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-015b.xht
new file mode 100644
index 0000000000..563ae9da9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-015b.xht
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and  inseparable characters</title>
+		<!-- inseparable characters -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-015b-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking between inseparable characters such as TWO DOT LEADER (U+2025) and HORIZONTAL ELLIPSIS (U+2026). Tailorable breaks between ID and CL, as well as CL and IN are also disallowed." />
+		<meta name="flags" content="should" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- inseparable characters TWO DOT LEADER -->
+			<p class="test" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- inseparable characters HORIZONTAL ELLIPSIS -->
+			<p class="test" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-016a.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-016a.xht
new file mode 100644
index 0000000000..9e6e8b8690
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-016a.xht
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and centered punctuation marks</title>
+		<!-- centered punctuation marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-016a-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before centered punctuation marks." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks KATAKANA MIDDLE DOT -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH COLON -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH SEMICOLON -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-016b.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-016b.xht
new file mode 100644
index 0000000000..9a4a3c22ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-016b.xht
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and centered punctuation marks</title>
+		<!-- centered punctuation marks -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-016b-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before centered punctuation marks." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE EXCLAMATION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE QUESTION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks QUESTION EXCLAMATION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks EXCLAMATION QUESTION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH QUESTION MARK -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-017a.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-017a.xht
new file mode 100644
index 0000000000..795f2aecb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-017a.xht
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and postfixes</title>
+		<!-- postfixes -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-017a-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before postfixes." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.1em;		/* added extra .1em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PER MILLE SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PRIME -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes DOUBLE PRIME -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-017b.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-017b.xht
new file mode 100644
index 0000000000..c41b3afae2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-017b.xht
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and postfixes</title>
+		<!-- postfixes -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-017b-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking before postfixes." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE CELSIUS -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH PERCENT SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH CENT SIGN -->
+			<p class="test" lang="ja">
+				<span>サンプル文サンプル文<span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-018.xht b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-018.xht
new file mode 100644
index 0000000000..85a92d1688
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-018.xht
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Text Test: line-break - strict and prefixes</title>
+		<!-- prefixes -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<link rel="help" title="5.3. Line Breaking Rules: the 'line-break' property" href="https://drafts.csswg.org/css-text-3/#line-break-property" />
+		<link rel="match" href="reference/line-break-strict-018-ref.xht" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<meta name="assert" content="This test verifies that 'line-break: strict' does not allow line breaking after prefixes." />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			.test span {
+				line-break: strict;						/* The property to be tested */
+			}
+			p.test, p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+            <!-- prefixes EURO SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x20ac;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x20ac;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes NUMERO SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x2116;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x2116;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH DOLLAR SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xff04;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xff04;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH POUND SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe1;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe1;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH YEN SIGN -->
+            <p class="test" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe5;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe5;</span>サンプル文</span>
+            </p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-hyphens-001.html b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-hyphens-001.html
new file mode 100644
index 0000000000..0d8677e3bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-hyphens-001.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: hyphens and line-break:strict</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=match href="reference/line-break-normal-hyphens-001-ref.html">
+<meta name=assert content="breaks before U+2010 or U+2013 when line-break is strict are not allowed when the preceding character has class ID.">
+<style>
+div {
+  width: 2em;
+  line-break: strict;
+  border: solid cyan;
+}
+</style>
+
+<p>The test passes if the second line in each box below ends with a hyphen.
+(Note: the hyphens in each box do no need to be the same size.)
+
+<div>文文‐文</div>
+<div>文文–文</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-hyphens-002.html b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-hyphens-002.html
new file mode 100644
index 0000000000..cb5b8354e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-hyphens-002.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: hyphens and line-break:strict</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel=match href="reference/line-break-normal-hyphens-002-ref.html">
+<meta name=assert content="breaks before U+2010 or U+2013 when line-break is strict are not allowed if the preceding character is treated as having class ID due to word-break:break-all.">
+<style>
+div {
+  font-family: monospace;
+  width: 2ch;
+  line-break: strict;
+  word-break: break-all;
+  border: solid cyan;
+}
+</style>
+
+<p>The test passes if the second line in each box below ends with a hyphen.
+(Note: the hyphens in each box do no need to be the same size.)
+
+<div>aa‐a</div>
+<div>aa–a</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/line-break-strict-hyphens-003.html b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-hyphens-003.html
new file mode 100644
index 0000000000..f0d3adc88e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/line-break-strict-hyphens-003.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: hyphens and line-break:strict</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=match href="reference/line-break-loose-hyphens-003-ref.html">
+<meta name=assert content="breaks before U+2010 or U+2013 when line-break is strict are not allowed if the preceding character is not of line-breaking class ID.">
+<style>
+div {
+  font-family: monospace;
+  width: 2ch;
+  line-break: strict;
+}
+</style>
+
+<p>The test passes if there are two lines of text below
+and they both end with a hyphen.
+(Note: the hyphens do no need to be the same size.)
+
+<div>aa‐</div>
+<div>aa–</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-anywhere-001-ref.html b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-anywhere-001-ref.html
new file mode 100644
index 0000000000..daf17c9c0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-anywhere-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+#green {
+  position: absolute;
+  background: green;
+  font-family: monospace;
+  width: 1ch;
+  height: 19em;
+}
+</style>
+
+<p>Test passes if there is a green rectangle below and no red.</p>
+<div id=green></div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-anywhere-003-ref.html b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-anywhere-003-ref.html
new file mode 100644
index 0000000000..ceec198d03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-anywhere-003-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, latin</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref"><span>Latin latin latin lati<br/>n</span></div>
+<div class="ref"><span>Latin latin latin lati<br/>n</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-anywhere-004-ref.html b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-anywhere-004-ref.html
new file mode 100644
index 0000000000..0e0300a72d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-anywhere-004-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-011-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-011-ref.xht
new file mode 100644
index 0000000000..cc6d9023c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-011-ref.xht
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-loose-011.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL A -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL I -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL U -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL E -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL O -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-012-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-012-ref.xht
new file mode 100644
index 0000000000..4ffd2f90ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-012-ref.xht
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-loose-012.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - fullwidth -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - halfwidth -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-013-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-013-ref.xht
new file mode 100644
index 0000000000..27ea22e988
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-013-ref.xht
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-loose-013.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- hyphens -->
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-014-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-014-ref.xht
new file mode 100644
index 0000000000..bc8090819c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-014-ref.xht
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-loose-014.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- iteration marks -->
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-015-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-015-ref.xht
new file mode 100644
index 0000000000..c59d5af504
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-015-ref.xht
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-loose-015.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- inseparable characters TWO DOT LEADER -->
+			<p class="control" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2025;<br />&#x2025;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2025;<br />&#x2025;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- inseparable characters HORIZONTAL ELLIPSIS -->
+			<p class="control" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2026;<br />&#x2026;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル。<span class="target">&#x2026;<br />&#x2026;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-016a-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-016a-ref.xht
new file mode 100644
index 0000000000..4338d02bab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-016a-ref.xht
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-loose-016a.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks KATAKANA MIDDLE DOT -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH COLON -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH SEMICOLON -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-016b-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-016b-ref.xht
new file mode 100644
index 0000000000..0c80df6ec4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-016b-ref.xht
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-loose-016b.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE EXCLAMATION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE QUESTION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks QUESTION EXCLAMATION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks EXCLAMATION QUESTION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH QUESTION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-017a-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-017a-ref.xht
new file mode 100644
index 0000000000..dc1084a815
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-017a-ref.xht
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-loose-017a.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.1em;		/* added extra .1em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PER MILLE SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PRIME -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes DOUBLE PRIME -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-017b-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-017b-ref.xht
new file mode 100644
index 0000000000..7148339b05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-017b-ref.xht
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-loose-017b.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE CELSIUS -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH PERCENT SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH CENT SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-018-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-018-ref.xht
new file mode 100644
index 0000000000..c8f6b56124
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-018-ref.xht
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-loose-018.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+            <!-- prefixes EURO SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x20ac;</span><br />サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x20ac;</span><br />サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes NUMERO SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x2116;</span><br />サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#x2116;</span><br />サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH DOLLAR SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xff04;</span><br />サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xff04;</span><br />サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH POUND SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe1;</span><br />サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe1;</span><br />サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH YEN SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe5;</span><br />サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<span class="target">&#xffe5;</span><br />サンプル文</span>
+            </p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-hyphens-001-ref.html b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-hyphens-001-ref.html
new file mode 100644
index 0000000000..42746cb814
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-hyphens-001-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+  width: 2em;
+  white-space: pre;
+  border: solid cyan;
+}
+</style>
+
+<p>The test passes if the second line in each box below starts with a hyphen.
+(Note: the hyphens in each box do no need to be the same size.)
+
+<div>文文<br>‐文</div>
+<div>文文<br>–文</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-hyphens-002-ref.html b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-hyphens-002-ref.html
new file mode 100644
index 0000000000..a542fe86eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-hyphens-002-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+  font-family: monospace;
+  width: 2ch;
+  white-space: pre;
+  border: solid cyan;
+}
+</style>
+
+<p>The test passes if the second line in each box below starts with a hyphen.
+(Note: the hyphens in each box do no need to be the same size.)
+
+<div>aa<br>‐a</div>
+<div>aa<br>–a</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-hyphens-003-ref.html b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-hyphens-003-ref.html
new file mode 100644
index 0000000000..dbfc1a90c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-loose-hyphens-003-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+  font-family: monospace;
+  white-space: pre;
+}
+</style>
+
+<p>The test passes if there are two lines of text below
+and they both end with a hyphen.
+(Note: the hyphens do no need to be the same size.)
+
+<div>aa‐</div>
+<div>aa–</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-011-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-011-ref.xht
new file mode 100644
index 0000000000..dc37069bad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-011-ref.xht
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-011.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL A -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL I -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL U -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL E -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL O -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-012-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-012-ref.xht
new file mode 100644
index 0000000000..ecb86a902c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-012-ref.xht
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-012.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - fullwidth -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - halfwidth -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-013-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-013-ref.xht
new file mode 100644
index 0000000000..28ebcc404e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-013-ref.xht
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-013.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- hyphens -->
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル文<br /><span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-014-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-014-ref.xht
new file mode 100644
index 0000000000..577bf29a51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-014-ref.xht
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-014.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- iteration marks -->
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-015a-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-015a-ref.xht
new file mode 100644
index 0000000000..23cf1487b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-015a-ref.xht
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-015.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- inseparable characters TWO DOT LEADER -->
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- inseparable characters HORIZONTAL ELLIPSIS -->
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-015b-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-015b-ref.xht
new file mode 100644
index 0000000000..b4697babbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-015b-ref.xht
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-015.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- inseparable characters TWO DOT LEADER -->
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- inseparable characters HORIZONTAL ELLIPSIS -->
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-016a-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-016a-ref.xht
new file mode 100644
index 0000000000..4ebe678bd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-016a-ref.xht
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-016a.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks KATAKANA MIDDLE DOT -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH COLON -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH SEMICOLON -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-016b-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-016b-ref.xht
new file mode 100644
index 0000000000..4ee234b4cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-016b-ref.xht
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-016b.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE EXCLAMATION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE QUESTION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks QUESTION EXCLAMATION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks EXCLAMATION QUESTION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH QUESTION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-017a-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-017a-ref.xht
new file mode 100644
index 0000000000..d6d7080fdd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-017a-ref.xht
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-017a.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.1em;		/* added extra .1em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PER MILLE SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PRIME -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes DOUBLE PRIME -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-017b-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-017b-ref.xht
new file mode 100644
index 0000000000..7efb5296b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-017b-ref.xht
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-024.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE CELSIUS -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH PERCENT SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH CENT SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-018-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-018-ref.xht
new file mode 100644
index 0000000000..9b23b57dfe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-018-ref.xht
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-normal-018.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+            <!-- prefixes EURO SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x20ac;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x20ac;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes NUMERO SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x2116;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x2116;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH DOLLAR SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xff04;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xff04;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH POUND SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe1;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe1;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH YEN SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe5;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe5;</span>サンプル文</span>
+            </p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-hyphens-001-ref.html b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-hyphens-001-ref.html
new file mode 100644
index 0000000000..6b802e30e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-hyphens-001-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+  width: 2em;
+  white-space: pre;
+  border: solid cyan;
+}
+</style>
+
+<p>The test passes if the second line in each box below ends with a hyphen.
+(Note: the hyphens in each box do no need to be the same size.)
+
+<div>文<br>文‐<br>文</div>
+<div>文<br>文–<br>文</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-hyphens-002-ref.html b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-hyphens-002-ref.html
new file mode 100644
index 0000000000..23ab9b553b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-normal-hyphens-002-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+  font-family: monospace;
+  width: 2ch;
+  white-space: normal;
+  border: solid cyan;
+}
+</style>
+
+<p>The test passes if the second line in each box below ends with a hyphen.
+(Note: the hyphens in each box do no need to be the same size.)
+
+<div>a<br>a‐<br>a</div>
+<div>a<br>a–<br>a</div>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-shaping-001-ref.html b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-shaping-001-ref.html
new file mode 100644
index 0000000000..5543ab0729
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-shaping-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test ref</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+    margin: 1rem;
+  }
+  section {
+    float: left; /* to sizing to the intrinsic min of the ref box*/
+  }
+  #ref { border: solid orange; }
+  #test { border: solid blue; }
+</style>
+
+<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
+<section>
+<div dir=rtl lang=ar id=ref>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+<div dir=rtl lang=ar id=test>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-011-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-011-ref.xht
new file mode 100644
index 0000000000..ec17a31ec5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-011-ref.xht
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-011.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL A -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3041;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL I -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3043;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL U -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3045;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL E -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Japanese small kana: HIRAGANA LETTER SMALL O -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3049;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-012-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-012-ref.xht
new file mode 100644
index 0000000000..c221b0e440
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-012-ref.xht
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-012.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+        text-autospace: no-autospace;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - fullwidth -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30FC;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- Katakana-Hiragana prolonged sound mark - halfwidth -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff70;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-013-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-013-ref.xht
new file mode 100644
index 0000000000..c2e6d603ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-013-ref.xht
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-013.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- hyphens -->
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x301c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30a0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-014-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-014-ref.xht
new file mode 100644
index 0000000000..2af0a903eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-014-ref.xht
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-014.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<!-- iteration marks -->
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x3005;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x303b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309d;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x309e;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fd;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fe;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-015a-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-015a-ref.xht
new file mode 100644
index 0000000000..252818c22a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-015a-ref.xht
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-015.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- inseparable characters TWO DOT LEADER -->
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- inseparable characters HORIZONTAL ELLIPSIS -->
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプル<br />文<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-015b-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-015b-ref.xht
new file mode 100644
index 0000000000..8eceb2ae9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-015b-ref.xht
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-015.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- inseparable characters TWO DOT LEADER -->
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2025;&#x2025;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- inseparable characters HORIZONTAL ELLIPSIS -->
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプルサンプ<br />ル。<span class="target">&#x2026;&#x2026;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-016a-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-016a-ref.xht
new file mode 100644
index 0000000000..9c2d497a03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-016a-ref.xht
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-016.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks KATAKANA MIDDLE DOT -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x30fb;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH COLON -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1a;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH SEMICOLON -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1b;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks HALFWIDTH KATAKANA MIDDLE DOT -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff65;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-016b-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-016b-ref.xht
new file mode 100644
index 0000000000..d000b8087b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-016b-ref.xht
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-016.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 5px;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE EXCLAMATION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x203c;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks DOUBLE QUESTION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2047;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks QUESTION EXCLAMATION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2048;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks EXCLAMATION QUESTION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2049;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH EXCLAMATION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff01;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- centered punctuation marks FULLWIDTH QUESTION MARK -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff1f;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-017a-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-017a-ref.xht
new file mode 100644
index 0000000000..874b4ddcae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-017a-ref.xht
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-017.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.1em;		/* added extra .1em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x00b0;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PER MILLE SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2030;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes PRIME -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2032;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes DOUBLE PRIME -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2033;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-017b-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-017b-ref.xht
new file mode 100644
index 0000000000..c4b5c89b20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-017b-ref.xht
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-017b.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+			<!-- postfixes DEGREE CELSIUS -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#x2103;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH PERCENT SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xff05;</span>サンプル文</span>
+			</p>
+		</div>
+		<div class="wrapper">
+			<!-- postfixes FULLWIDTH CENT SIGN -->
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+			<p class="control" lang="ja">
+				<span>サンプル文サンプル<br />文<span class="target">&#xffe0;</span>サンプル文</span>
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-018-ref.xht b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-018-ref.xht
new file mode 100644
index 0000000000..c0c236a927
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-break/reference/line-break-strict-018-ref.xht
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Reftest Reference</title>
+		<!-- reftest for line-break-strict-018.xht -->
+		<link rel="author" title="Taka Oshiyama" href="mailto:takaoshiyama@gmail.com" />
+		<link rel="author" title="Shinyu Murakami" href="mailto:murakami@vivliostyle.org" />
+		<meta http-equiv="content-language" content="en, ja" />
+		<style type="text/css">
+			@font-face
+			{
+				font-family: "mplus-1p-regular";
+				src: url("/fonts/mplus-1p-regular.woff") format("woff");
+				/* filesize: 803300 bytes (784.5 KBytes) */
+				/*
+				mplus-1p-regular.ttf can be downloaded at/from [TBD later]
+				*/
+			}
+			p.control {
+				border: 1px solid gray;
+				color: blue;
+				font-family: "mplus-1p-regular";
+				width: 10.2em;		/* added extra .2em for some symbols wider than 1em */
+			}
+			span.target {
+				background-color: aqua;
+			}
+			div.wrapper {
+				display: inline-block;
+				border: 1px solid;
+				margin: 10px;
+				padding: 10px;
+			}
+		</style>
+	</head>
+	<body  lang="en">
+		<p>
+			Test passes if the highlighted characters in each pair of rectangles are at the exact same horizontal position.
+		</p>
+		<div class="wrapper">
+            <!-- prefixes EURO SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x20ac;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x20ac;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes NUMERO SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x2116;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#x2116;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH DOLLAR SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xff04;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xff04;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH POUND SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe1;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe1;</span>サンプル文</span>
+            </p>
+		</div>
+		<div class="wrapper">
+            <!-- prefixes FULLWIDTH YEN SIGN -->
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe5;</span>サンプル文</span>
+            </p>
+            <p class="control" lang="ja">
+                <span>サンプル文サンプル<br /><span class="target">&#xffe5;</span>サンプル文</span>
+            </p>
+		</div>
+	</body>
+</html>
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-028.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-028.html
new file mode 100644
index 0000000000..c82d4762a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-028.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 BA and EX 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=628825">
+<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">X&#x1361;!</div>
+  <div id="nonbreakable2">X&#x1680;!</div>
+  <div id="nonbreakable3">X&#x2009;!</div>
+  <div id="nonbreakable4">X&#x205F;!</div>
+</div>
+
+<script>
+test(function() {
+  assert_true(document.getElementById('nonbreakable1').offsetHeight <= 35);
+}, "U+0x1361 (BA) and U+0x0021 (EX)");
+test(function() {
+  assert_true(document.getElementById('nonbreakable2').offsetHeight <= 35);
+}, "U+0x1680 (BA) and U+0x0021 (EX)");
+test(function() {
+  assert_true(document.getElementById('nonbreakable3').offsetHeight <= 35);
+}, "U+0x2009 (BA) and U+0x0021 (EX)");
+test(function() {
+  assert_true(document.getElementById('nonbreakable4').offsetHeight <= 35);
+}, "U+0x205F (BA) and U+0x0021 (EX)");
+</script>
+
+<div id='log'></div>
+
+</body>
+</html>
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..39c50250f5
--- /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 no 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: 100px/1 Ahem;
+  color: green;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>A&#8239;<span>B</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..fc27424026
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-004.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NARROW NO-BREAK SPACE before atomic inline</title>
+<meta name=assert content="There is no 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/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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#8239;B</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..900487118c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-005.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — WORD JOINER after atomic inline</title>
+<meta name=assert content="There is no 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/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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#8288;B</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..5552ec0227
--- /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 no 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: 100px/1 Ahem;
+  color: green;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>A&#8288;<span>B</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-010.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-010.html
new file mode 100644
index 0000000000..318da447f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-010.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — ZERO WIDTH JOINER after atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a following ZERO WIDTH 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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#x200D;B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-011.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-011.html
new file mode 100644
index 0000000000..06fc493a66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-011.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — ZERO WIDTH JOINER before atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a preceeding ZERO WIDTH 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: 100px/1 Ahem;
+  color: green;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>A&#x200D;<span>B</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-012.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-012.html
new file mode 100644
index 0000000000..5bd3423f6e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-012.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — ZERO WIDTH NO-BREAK SPACE after atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a following ZERO WIDTH 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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#xFEFF;B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-013.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-013.html
new file mode 100644
index 0000000000..04a0ef7bc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-013.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — ZERO WIDTH NO-BREAK SPACE before atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a preceeding ZERO WIDTH 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: 100px/1 Ahem;
+  color: green;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>A&#xFEFF;<span>B</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-014.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-014.html
new file mode 100644
index 0000000000..70bc118c6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-014.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — MONGOLIAN VOWEL SEPARATOR after atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a preceeding MONGOLIAN VOWEL SEPARATOR">
+<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: 100px/1 Ahem;
+  color: green;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>A&#x180E;<span>B</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-015.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-015.html
new file mode 100644
index 0000000000..f696ce0a14
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-015.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — MONGOLIAN VOWEL SEPARATOR before atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a following MONGOLIAN VOWEL SEPARATOR">
+<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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#x180E;B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-016.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-016.html
new file mode 100644
index 0000000000..a3bbe40118
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-016.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — COMBINING GRAPHEME JOINER after atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a preceeding COMBINING GRAPHEME 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: 100px/1 Ahem;
+  color: green;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>A&#x034F;<span>B</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-017.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-017.html
new file mode 100644
index 0000000000..ac62af6ce0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-017.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — COMBINING GRAPHEME JOINER before atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a following COMBINING GRAPHEME 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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#x034F;B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-018.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-018.html
new file mode 100644
index 0000000000..3517dcebce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-018.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — FIGURE SPACE after atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a preceeding FIGURE SPACE (class GL)">
+<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: 100px/1 Ahem;
+  color: green;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div>A&#x2007;<span>B</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-019.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-019.html
new file mode 100644
index 0000000000..2c17306315
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-019.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — FIGURE SPACE before atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a following FIGURE SPACE (class GL)">
+<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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#x2007;B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-020.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-020.html
new file mode 100644
index 0000000000..02bd61f83d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-020.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NON-BREAKING HYPHEN after atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a preceeding NON-BREAKING HYPHEN">
+<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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+}
+a {
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><a>A</a>&#x2011;<span>B</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-021.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-021.html
new file mode 100644
index 0000000000..14c3dfbf03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-021.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NON-BREAKING HYPHEN before atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a following NON-BREAKING HYPHEN">
+<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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#x2011;B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-022.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-022.html
new file mode 100644
index 0000000000..b3541e9a21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-022.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — TIBETAN MARK SBRUL SHAD after atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a preceeding TIBETAN MARK SBRUL SHAD">
+<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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+}
+a {
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><a>A</a>&#x0F08;<span>B</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-023.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-023.html
new file mode 100644
index 0000000000..8616ca60aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-023.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — TIBETAN MARK SBRUL SHAD before atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a following TIBETAN MARK SBRUL SHAD">
+<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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#x0F08;B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-024.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-024.html
new file mode 100644
index 0000000000..b823dace2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-024.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — TIBETAN MARK DELIMITER TSHEG BSTAR after atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a preceeding TIBETAN MARK DELIMITER TSHEG BSTAR">
+<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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+}
+a {
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><a>A</a>&#x0F0C;<span>B</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-025.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-025.html
new file mode 100644
index 0000000000..541a82de96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-025.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — TIBETAN MARK DELIMITER TSHEG BSTAR before atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a following TIBETAN MARK DELIMITER TSHEG BSTAR">
+<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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#x0F0C;B</div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-026.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-026.html
new file mode 100644
index 0000000000..2b52e73041
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-026.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — TIBETAN MARK RGYA GRAM SHAD after atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a preceeding TIBETAN MARK RGYA GRAM SHAD">
+<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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+}
+a {
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><a>A</a>&#x0F12;<span>B</span></div>
diff --git a/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-027.html b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-027.html
new file mode 100644
index 0000000000..acbe4edf07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-atomic-027.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — TIBETAN MARK RGYA GRAM SHAD before atomic inline</title>
+<meta name=assert content="There is no soft wrap opportunity between an atomic inline and a following TIBETAN MARK RGYA GRAM SHAD">
+<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: 100px/1 Ahem;
+  color: transparent;
+  width: 100px;
+  background: red;
+}
+span {
+  display: inline-block;
+  color: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div><span>A</span>&#x0F12;B</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..d50c104ed0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-002.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NARROW NO-BREAK SPACE and replaced element</title>
+<meta name=assert content="There is no 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>
+.test {
+    width: 50px;
+}
+.red {
+    position: absolute;
+    color: red;
+    z-index: -1;
+    padding-left: 60px;
+    padding-top: 40px;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div class=red>&#8239;XX</div>
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50 height=100>&#8239;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50 height=100></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..81b15d9d4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/line-breaking-replaced-003.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — WORD JOINER and replaced element</title>
+<meta name=assert content="There is no 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>
+.test {
+    width: 50px;
+}
+.red {
+    position: absolute;
+    color: red;
+    z-index: -1;
+    padding-left: 60px;
+    padding-top: 40px;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div class=red>XX</div>
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50 height=100>&#8288;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50 height=100></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-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..8ab22c33e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/reference/line-breaking-replaced-002-ref.html
@@ -0,0 +1,8 @@
+<!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 height=100>&#8239;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50 height=100></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..a1721545b7
--- /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 height=100><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50 height=100></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>ＦＵＬＬＷＩＤＴＨＦＵＬＬＷＩＤＴＨ</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>ＦＵＬＬＷＩＤＴＨ&#x000a;ＦＵＬＬＷＩＤＴＨ</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>ＦＵＬＬＷＩＤＴＨﾃｽﾄ</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>ＦＵＬＬＷＩＤＴＨ&#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>ＦＵＬＬＷＩＤＴＨ測試</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>ＦＵＬＬＷＩＤＴＨ&#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>ＦＵＬＬＷＩＤＴＨ&#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>ＦＵＬＬＷＩＤＴＨ&#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>ＦＵＬＬＷＩＤＴＨ&#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>ＦＵＬＬＷＩＤＴＨ&#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>ＦＵＬＬＷＩＤＴＨ&#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>ＦＵＬＬＷＩＤＴＨ&#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>ＦＵＬＬＷＩＤＴＨ&#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>ＦＵＬＬＷＩＤＴＨ&#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>ﾃｽﾄＦＵＬＬＷＩＤＴＨ</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;ＦＵＬＬＷＩＤＴＨ</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>測試ＦＵＬＬＷＩＤＴＨ</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;ＦＵＬＬＷＩＤＴＨ</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;ＦＵＬＬＷＩＤＴＨ</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;ＦＵＬＬＷＩＤＴＨ</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;ＦＵＬＬＷＩＤＴＨ</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;ＦＵＬＬＷＩＤＴＨ</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;ＦＵＬＬＷＩＤＴＨ</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;ＦＵＬＬＷＩＤＴＨ</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;ＦＵＬＬＷＩＤＴＨ</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;ＦＵＬＬＷＩＤＴＨ</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..6689ef5f18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/line-breaking/tools/generate-segment-break-transformation-rules-tests.py
@@ -0,0 +1,107 @@
+#!/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.
+"""
+
+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)',         'ＦＵＬＬＷＩＤＴＨ'),
+        ('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__))
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/crashtests/overflow-wrap-leading-floats-crash.html b/testing/web-platform/tests/css/css-text/overflow-wrap/crashtests/overflow-wrap-leading-floats-crash.html
new file mode 100644
index 0000000000..0661cf7286
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/crashtests/overflow-wrap-leading-floats-crash.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link ref="help" href="crbug.com/1510579">
+<style>
+#container {
+  width: 0;
+  text-indent: 1em;
+  overflow-wrap: anywhere;
+}
+</style>
+<div id="container">
+  <div style="float: left"></div>
+  12
+</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001-ref.html
new file mode 100644
index 0000000000..92f1855268
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test Reference File</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #test {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box is within the orange box.</p>
+  <p id="test">FillerText<br>FillerText<br>FillerText<br>FillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001.html
new file mode 100644
index 0000000000..65d46f3a98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap - break-word (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="overflow-wrap-001-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="The 'overflow-wrap' property set 'break-word' breaks the word at an arbitrary point">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #test {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    overflow-wrap: break-word;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box is within the orange box.</p>
+  <p id="test">FillerTextFillerTextFillerTextFillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002-ref.html
new file mode 100644
index 0000000000..afb4c6835c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test Reference File</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #ref {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    width: 200px;
+  }
+  #test {
+    border: 5px solid blue;
+    font: 20px/1 Ahem;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box overflows the blue border box, but fits within the orange border box.</p>
+  <p id="ref">FillerText<br>FillerText<br>FillerText<br>FillerText</p>
+  <p id="test">FillerTextFillerTextFillerTextFillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002.html
new file mode 100644
index 0000000000..d1ff8bfa78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap - break-word and white-space - nowrap</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#white-space">
+<link rel="match" href="overflow-wrap-002-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Test checks that the 'overflow-wrap' property has effect if and only if the 'white-space' allows wrapping">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #ref {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    overflow-wrap: break-word;
+    width: 200px;
+  }
+  #test {
+    border: 5px solid blue;
+    font: 20px/1 Ahem;
+    overflow-wrap: break-word;
+    white-space: nowrap;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box overflows the blue border box, but fits within the orange border box.</p>
+  <p id="ref">FillerTextFillerTextFillerTextFillerText</p>
+  <p id="test">FillerTextFillerTextFillerTextFillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004-ref.html
new file mode 100644
index 0000000000..9b0a6eb442
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test Reference File</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #test {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box overflows the orange box.</p>
+  <p id="test">FillerTextFillerTextFillerTextFillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004.html
new file mode 100644
index 0000000000..9793e47792
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-004.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap - normal (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="overflow-wrap-004-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="The 'overflow-wrap' property set 'normal' overflows container">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #test {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    overflow-wrap: normal;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box overflows the orange box.</p>
+  <p id="test">FillerTextFillerTextFillerTextFillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-001.html
new file mode 100644
index 0000000000..efa453ca66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="sequences of nbsp characters that would cause overflow are expected to be broken when overflow-wrap is anywhere">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  font-family: Ahem;
+  color: red;
+  overflow-wrap: anywhere;
+  font-size: 25px;
+  line-height: 27px;
+}
+div::after{
+  content: "";
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  background: green;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-002.html
new file mode 100644
index 0000000000..a3ec2f5f06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere + white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-002-ref.html">
+<meta name="assert" content="anywhere + break-spaces do not allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are other wrapping opportunities earlier in the line">
+<style>
+div {
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+  font-family: monospace;
+  width: 5ch;
+  line-height: 1;
+  overflow: hidden;
+  height: 1em;
+}
+</style>
+
+<p>This test passes if there is nothing below this sentence.
+<div> FAIL <div>
+<!--
+white-space:break-spaces should cause the spaces at the end of the line to be preserved.
+Since there is an allowed break point between the first space and the F,
+that's where the line should wrap,
+not between the L and the subsequent space.
+-->
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-003.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-003.html
new file mode 100644
index 0000000000..4870b0867b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap:anywhere + white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-003-ref.html">
+<meta name="assert" content="anywhere + break-spaces do allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are no other wrapping opportunities earlier in the line">
+<style>
+div {
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+  font-family: monospace;
+  width: 4ch;
+  line-height: 1;
+  overflow: hidden;
+  height: 2em;
+}
+</style>
+
+<p>This test passes if the word FAIL does not appear below.
+<div>PASS FAIL<div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-004.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-004.html
new file mode 100644
index 0000000000..3d5f444977
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"><br>XXXXX</div>
+  <div class="test"> XXXXX </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-005.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-005.html
new file mode 100644
index 0000000000..d125a0b5c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-005.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXX<span>XX<br></span><span>XXXXX<br></span>XXXXX<br>XXXX<span>X<br></span><span>XXXXX</span></div>
+  <div class="test">XXX
+ XXXXXXXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-006.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-006.html
new file mode 100644
index 0000000000..ac90149ff3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-006.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="The word shouldn't be broken, honoring word-break: keep-all, but 'overflow-wrap: anywhere introduces additional soft wrap opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXXX<br>XXX</div>
+  <div class="test">XXXXXXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-007.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-007.html
new file mode 100644
index 0000000000..a5e10a84eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-007.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap - anywhere (basic)</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="overflow-wrap-001-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="The 'overflow-wrap' property set 'anywhere' breaks the word at an arbitrary point">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #test {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    overflow-wrap: anywhere;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box is within the orange box.</p>
+  <p id="test">FillerTextFillerTextFillerTextFillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-008.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-008.html
new file mode 100644
index 0000000000..ddb9562999
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-008.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap - anywhere and white-space - nowrap</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="3 White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-nowrap">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="overflow-wrap-002-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Test checks that the 'overflow-wrap' property has effect if and only if the 'white-space' allows wrapping">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #ref {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    overflow-wrap: anywhere;
+    width: 200px;
+  }
+  #test {
+    border: 5px solid blue;
+    font: 20px/1 Ahem;
+    overflow-wrap: anywhere;
+    white-space: nowrap;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box overflows the blue border box, but fits within the orange border box.</p>
+  <p id="ref">FillerTextFillerTextFillerTextFillerText</p>
+  <p id="test">FillerTextFillerTextFillerTextFillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-009.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-009.html
new file mode 100644
index 0000000000..90f2ad3337
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-009.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="The text is wrapped into two lines, since there is no need to break the second line using the space in the middle.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.ref {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="ref">XXX<br>X X</div>
+  <div class="test">XXXX<span> </span>X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-010.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-010.html
new file mode 100644
index 0000000000..0b4b75bc1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-010.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="'overflow-wrap: anywhere' applies correctly when there is styled text using 'span' elements.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: transparent;
+  width: 4ch;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"><span style="color: green">XX</span>XX<br>XX</div>
+  <div class="test">XX<span style="color: green">XXXX</span>XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011-ref.html
new file mode 100644
index 0000000000..25d7fc7958
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>CSS Text Reference: overflow-wrap: anywhere</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+  <style>
+  div {
+    /* Use sans-serif fonts to ensure the width of `&nbsp` is larger than `i`. */
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 100px;
+    width: min-content;
+    overflow-wrap: anywhere;
+    border: 5px solid blue;
+    margin-bottom: 5px; /* To separate <div>s visually. */
+  }
+  </style>
+
+  <p>The first three div should have the same width, but the fourth one should be wider.</p>
+  <div>i</div>
+  <div>i</div>
+  <div>i</div>
+  <div>i&nbsp;</div>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011.html
new file mode 100644
index 0000000000..0bc7a97980
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-011.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>CSS Text Test: overflow-wrap: anywhere</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+  <link rel="match" href="overflow-wrap-anywhere-011-ref.html">
+  <meta name="assert" content="End-of line space glyph (U+0020 and U+0009)'s width shouldn't contribute to container's min-content width with 'white-space: normal', and non-collapsible spaces should wrap with 'overflow-wrap: anywhere'.">
+
+  <style>
+  div {
+    /* Use sans-serif fonts to ensure the width of `&nbsp` is larger than `i`. */
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 100px;
+    width: min-content;
+    overflow-wrap: anywhere;
+    border: 5px solid blue;
+    margin-bottom: 5px; /* To separate <div>s visually. */
+  }
+  </style>
+
+  <p>The first three div should have the same width, but the fourth one should be wider.</p>
+  <div>i</div>
+  <div>i&#x20;</div>
+  <div>i&#x09;</div>
+  <div>i&nbsp;</div>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-fit-content-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-fit-content-001.html
new file mode 100644
index 0000000000..b4ff047d03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-fit-content-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere with fit-content</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-break-word-fit-content-001.html">
+<meta name="assert" content="The 'overflow-wrap: anywhere' must not break non-BMP characters (which might be represented as surrogate pairs internally)">
+<style>
+.test {
+  display: inline-block;
+  overflow-wrap: anywhere;
+  font-size: 20px;
+  line-height: 1;
+  margin-bottom: .2em;
+}
+</style>
+<body>
+<div id="log"></div>
+<p class="instructions">Tests pass if all lines do not wrap.
+<div><div class="test">&#x1D70B;</div></div>
+<div><div class="test">𝜋</div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-001.html
new file mode 100644
index 0000000000..5a93c87344
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>overlfow-wrap: anywhere on inline element</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="Ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="'overflow-wrap: anywhwre' allows breaking before punctuation characters">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+    font: 50px / 1 Ahem;
+}
+.fail {
+    position: absolute;
+    background: green;
+    color: red;
+    width: 100px;
+    z-index: -1;
+}
+.test {
+    color: green;
+    width: 1em;
+
+    overflow-wrap: anywhere;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">X<br>X</div>
+<div class="test"><span>X</span><span>.</span></div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html
new file mode 100644
index 0000000000..38dc19631d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>overlfow-wrap: anywhere on inline element</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="Ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="'overflow-wrap: anywhere' works when specified on inline element">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div, span {
+    font: 10px / 1 Ahem;
+    color: green;
+}
+.fail {
+    position: absolute;
+    background: green;
+    color: red;
+    height: 100px;
+    z-index: -1;
+}
+.testdiv {
+    width: 5ch;
+}
+.test {
+    overflow-wrap: anywhere;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">XXXXXXXXXX<br>XXXXX<br>XXXX<br>XXX</div>
+<div class="testdiv">XXXXXXXXXX<span class="test">XXXXXXXXX</span>XXX</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html
new file mode 100644
index 0000000000..9ed035fdc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>overlfow-wrap: anywhere on inline element</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="Ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="'overflow-wrap: anywhere' allows to break before the first character of the inline-block it applies to">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div, span {
+    font: 50px / 1 Ahem;
+    color: green;
+}
+.fail {
+    position: absolute;
+    color: red;
+    z-index: -1;
+}
+.testdiv {
+    width: 2ch;
+}
+.test {
+    overflow-wrap: anywhere;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">XX<br>XX</div>
+<div class="testdiv">XX<span class="test">XX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html
new file mode 100644
index 0000000000..e498e1eff1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>overlfow-wrap: anywhere on inline element</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="Ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="'overflow-wrap: anywhere' should break after the last character of the inline-block it applies to">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div, span {
+    font: 25px / 1 Ahem;
+    color: green;
+}
+.fail {
+    position: absolute;
+    background: green;
+    color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+.testdiv {
+    width: 2ch;
+}
+.test {
+    overflow-wrap: anywhere;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">XX<br>X<br>XX<br></div>
+<div class="testdiv">X<span class="test">XX</span>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-001.html
new file mode 100644
index 0000000000..c4a0e10fa4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Text Test: overflow-wrap: anywhere</title>
+<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/overflow-wrap-break-word-span-001-ref.html">
+<meta name="assert" content="Test when the `anywhere` value is applied to an inline element.">
+<style>
+div {
+  font-size: 10px;
+  line-height: 1;
+  width: 8ch;
+}
+span {
+  word-wrap: anywhere;
+}
+</style>
+<div>12345<span>67890</span></div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-002.html
new file mode 100644
index 0000000000..b149ca4d7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-anywhere-span-002.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS Text Test: overflow-wrap: anywhere</title>
+<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="assert" content="Test when the `anywhere` value is applied to an inline element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script><style>
+div {
+  font-size: 10px;
+  line-height: 1;
+  width: 5ch;
+}
+span {
+  word-wrap: anywhere;
+}
+</style>
+<div id=container data-expected-height=20>12345678<span>90</span></div>
+
+<script>
+checkLayout('#container')
+</script>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-001.html
new file mode 100644
index 0000000000..4d633d367d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-word</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="sequences of nbsp characters that would cause overflow are expected to be broken when overflow-wrap is break-word">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  font-family: Ahem;
+  color: red;
+  overflow-wrap: break-word;
+  font-size: 25px;
+  line-height: 27px;
+}
+div::after{
+  content: "";
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  background: green;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-002.html
new file mode 100644
index 0000000000..6f90f0c0cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-word + white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-002-ref.html">
+<meta name="assert" content="break-word + break-spaces do not allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are other wrapping opportunities earlier in the line">
+<style>
+div {
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+  font-family: monospace;
+  width: 5ch;
+  line-height: 1;
+  overflow: hidden;
+  height: 1em;
+}
+</style>
+
+<p>This test passes if there is nothing below this sentence.
+<div> FAIL </div>
+<!--
+white-space:break-spaces should cause the spaces at the end of the line to be preserved.
+Since there is an allowed break point between the first space and the F,
+that's where the line should wrap,
+not between the L and the subsequent space.
+-->
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-003.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-003.html
new file mode 100644
index 0000000000..05e570bbb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap:break-word + white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-003-ref.html">
+<meta name="assert" content="break-word + break-spaces do allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are no other wrapping opportunities earlier in the line">
+<style>
+div {
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+  font-family: monospace;
+  width: 4ch;
+  line-height: 1;
+  overflow: hidden;
+  height: 2em;
+}
+</style>
+
+<p>This test passes if the word FAIL does not appear below.
+<div>PASS FAIL</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-004.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-004.html
new file mode 100644
index 0000000000..26ab3f2cac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-004.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-word</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"><br>XXXXX</div>
+  <div class="test"> XXXXX </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-005.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-005.html
new file mode 100644
index 0000000000..721a1938e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-005.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-word</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXX<span>XX<br></span><span>XXXXX<br></span>XXXXX<br>XXXX<span>X<br></span><span>XXXXX</span></div>
+  <div class="test">XXX
+ XXXXXXXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-006.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-006.html
new file mode 100644
index 0000000000..2159aa591e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-006.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-word</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: break-spaces' property, that must prevent the word to be broken.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"><br>XXXXX</div>
+  <div class="test"> XXXXX </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html
new file mode 100644
index 0000000000..c114ccf7f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-word</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+  white-space: pre;
+}
+.test {
+  color: green;
+  width: 5ch;
+
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"> XX  <br>XXX</div>
+  <div class="test"> XX XXX </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-008.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-008.html
new file mode 100644
index 0000000000..8a0fb9959d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-008.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap:break-word + white-space:break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="break-word + break-spaces do allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are no other wrapping opportunities earlier in the line">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-family: Ahem;
+  font-size: 25px;
+  line-height: 1em;
+}
+.expected {
+  position: absolute;
+  color: green;
+  width: 100px;
+  height: 100px;
+  white-space: pre;
+}
+.test {
+  background: green;
+  color: red;
+  width: 4ch;
+  z-index: -1;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="expected">XXXX<br> <br>XXXX<br></div>
+<div class="test">XXXX XXXX </div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-009.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-009.html
new file mode 100644
index 0000000000..fbbcf2233c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-009.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-word</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="The text is wrapped into two lines, since there is no need to break the second line using the space in the middle.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.ref {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="ref">XXX<br>X X</div>
+  <div class="test">XXXX<span> </span>X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-010.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-010.html
new file mode 100644
index 0000000000..da45dea253
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-010.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-word</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="'overflow-wrap: break-word' applies correctly when there is styled text using 'span' elements.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.ref {
+  position: absolute;
+  background: green;
+  color: red;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: transparent;
+  width: 4ch;
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="ref"><span style="color: green">XX</span>XX<br>XX</div>
+  <div class="test">XX<span style="color: green">XXXX</span>XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-fit-content-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-fit-content-001.html
new file mode 100644
index 0000000000..7fde5287bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-fit-content-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-word with fit-content</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-break-word-fit-content-001.html">
+<meta name="assert" content="The 'overflow-wrap: break-word' must not break non-BMP characters (which might be represented as surrogate pairs internally)">
+<style>
+.test {
+  display: inline-block;
+  word-wrap: break-word;
+  font-size: 20px;
+  line-height: 1;
+  margin-bottom: .2em;
+}
+</style>
+<body>
+<div id="log"></div>
+<p class="instructions">Tests pass if all lines do not wrap.
+<div><div class="test">&#x1D70B;</div></div>
+<div><div class="test">𝜋</div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-keep-all-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-keep-all-001.html
new file mode 100644
index 0000000000..ec27b82b6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-keep-all-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSS Test: `break-word` should work with `word-break: keep-all`</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<meta charset="utf-8">
+<style>
+div {
+  overflow-wrap: break-word;
+  word-break: keep-all;
+  font-size: 10px;
+  width: 7ch;
+  line-height: 20px;
+  background: lightgray;
+  margin-bottom: 1em;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+  <div>0000000000</div>
+  <div>헬로우월드헬로우월드헬로우월드헬로우월드헬로우월드</div>
+<script>
+for (let e of document.getElementsByTagName('div')) {
+  test(() => {
+    // All boxes should wrap to more than 1 line.
+    assert_greater_than(e.offsetHeight, 20);
+  }, e.textContent);
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-long-crash.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-long-crash.html
new file mode 100644
index 0000000000..e318386ded
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-long-crash.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS Text Test: very long line with `overflow-wrap: break-word` should not crash</title>
+<link rel="help" href="https://crbug.com/961987">
+<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+html, body {
+  margin: 0;
+}
+body {
+  overflow-wrap: break-word;
+  width: 2147483648px;
+}
+div {
+  /* Double the width in case CSS parser clamps the body width. */
+  width: 200%;
+}
+span {
+  border-left: 2147483648px solid;
+}
+</style>
+<body>
+  <div><span>x</span></div>
+<script>
+test(() => { document.body.offsetTop; });
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-001.html
new file mode 100644
index 0000000000..0565b8bb75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Text Test: overflow-wrap: break-word</title>
+<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/overflow-wrap-break-word-span-001-ref.html">
+<meta name="assert" content="Test when the `break-word` value is applied to an inline element.">
+<style>
+div {
+  font-size: 10px;
+  line-height: 1;
+  width: 8ch;
+}
+span {
+  word-wrap: break-word;
+}
+</style>
+<div>12345<span>67890</span></div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-002.html
new file mode 100644
index 0000000000..39426d0420
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-span-002.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS Text Test: overflow-wrap: break-word</title>
+<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<meta name="assert" content="Test when the `break-word` value is applied to an inline element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script><style>
+div {
+  font-size: 10px;
+  line-height: 1;
+  width: 5ch;
+}
+span {
+  word-wrap: break-word;
+}
+</style>
+<div id=container data-expected-height=20>12345678<span>90</span></div>
+
+<script>
+checkLayout('#container')
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash-002.html
new file mode 100644
index 0000000000..085e5b6f12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash-002.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>CSS Text Test: A combination of `overflow-wrap: break-word` and `white-space` should not crash</title>
+<link rel="help" href="https://crbug.com/1001359">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+.container {
+  font-family: sans-serif;
+  font-size: 14px;
+  width: 680px;
+  word-wrap: break-word;
+}
+
+spacer {
+  display: inline-block;
+  width: 620px;
+}
+
+pre-wrap {
+  white-space: pre-wrap;
+}
+
+nowrap {
+  white-space: nowrap;
+}
+
+inline-block {
+  display: inline-block;
+}
+</style>
+<body>
+  <div class="container">
+    <spacer></spacer>
+    <nowrap><span><pre-wrap><inline-block></inline-block></pre-wrap></span>123456</nowrap>987654321
+</div>
+<script>
+test(() => { });
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash.html
new file mode 100644
index 0000000000..2bea6aed78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-break-word-white-space-crash.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS Text Test: A combination of `overflow-wrap: break-word` and `white-space` should not crash</title>
+<link rel="help" href="https://crbug.com/988832">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+  width: 10ch;
+  border: 1px blue solid;
+  overflow-wrap: break-word;
+}
+inline-block {
+  display: inline-block;
+  position: relative;
+  width: 3ch;
+  height: 1em;
+  background: orange;
+}
+</style>
+<body>
+<div>
+  123 56 <span style="white-space: pre"><inline-block></inline-block> <span style="white-space: normal">Flash</span></span> and
+</div>
+<script>
+test(() => { });
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-001.html
new file mode 100644
index 0000000000..797883b147
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: overflow-wrap:break-word and grapheme clusters</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-cluster-001-ref.html">
+<meta name="assert" content="grapheme clusters must stay together as one unit when a line is broken by overflow-wrap:break-word">
+<style>
+  div {
+    font-size: 4em;
+    width: 4em;
+  }
+  #test {
+    overflow-wrap: break-word;
+    width: 0;
+  }
+</style>
+
+<p>Test passes if there are four identical lines of text below.
+<div lang=hi id=ref>&#x0937;&#x093F;<br>&#x0937;&#x093F;</div>
+<div lang=hi id=test>&#x0937;&#x093F;&#x0937;&#x093F;</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-002.html
new file mode 100644
index 0000000000..70349b9c9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-cluster-002.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: overflow-wrap:anywhere and grapheme clusters</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-cluster-001-ref.html">
+<meta name="assert" content="grapheme clusters must stay together as one unit when a line is broken by overflow-wrap:anywhere">
+<style>
+  div {
+    font-size: 4em;
+    width: 4em;
+  }
+  #test {
+    overflow-wrap: anywhere;
+    width: 0;
+  }
+</style>
+
+<p>Test passes if there are four identical lines of text below.
+<div lang=hi id=ref>&#x0937;&#x093F;<br>&#x0937;&#x093F;</div>
+<div lang=hi id=test>&#x0937;&#x093F;&#x0937;&#x093F;</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html
new file mode 100644
index 0000000000..b483756467
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-min-content-size-001-ref.html">
+<meta name="assert" content="Soft wrap opportunities introduced by overflow-wrap:anywhere **are** considered when calculating min-content intrinsic sizes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+table {
+  font: 20px/1 Ahem;
+  overflow-wrap: anywhere;
+  max-width: 0;
+  border: 0;
+  border-collapse: collapse;
+}
+td {
+  padding: 0;
+  background: green;
+  color: transparent;
+}
+#red {
+  font: 20px/1 Ahem;
+  position: absolute;
+  z-index: -1;
+  background: red;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a green box below and no red.
+<div id=red>X<br>X<br>X<br>X</div>
+<table><tr><td>XXXX</table>
+
+<!--
+  width:min-content on the div directly without using a table
+  would achieve the goal of this test, and be a lot simpler.
+
+  However, width:min-content is not yet widely supported.
+
+  Using a table, and forcing it to be as small as possible
+  will achieve min-content sizing of the div in all browsers.
+-->
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-002.html
new file mode 100644
index 0000000000..2669f0da02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-min-content-size-002-ref.html">
+<meta name="assert" content="overflow-wrap:anywhere doesn't break grapheme cluster and min-content intrinsic size should take that into account.">
+<style>
+#wrapper {
+  width: 0px;
+  overflow-wrap: anywhere;
+}
+#test {
+  float: left;
+  border: 2px solid blue;
+}
+</style>
+
+<p>Test passes if the glyphs are completely inside the blue box.
+<div id="wrapper">
+  <div id="test">&#x0ba8;&#x0bbf;&#x0bbf;&#x0bbf;&#x0bbf;&#x0ba8;&#x0bbf;&#x0bbf;&#x0bbf;&#x0bbf;</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-003.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-003.html
new file mode 100644
index 0000000000..397ed8c450
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-003.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-min-content-size-003-ref.html">
+<meta name="assert" content="overflow-wrap:anywhere breaks at edge of inline elements.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#wrapper {
+  width: 0px;
+  font: 16px / 1 Ahem;
+  overflow-wrap: anywhere;
+  color: green;
+}
+#test {
+  float: left;
+}
+#reference {
+  position: absolute;
+  width: 16px;
+  height: 128px;
+  background: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a vertical green bar below.
+<div id="wrapper">
+  <div id="reference"></div>
+  <div id="test"><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-004.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-004.html
new file mode 100644
index 0000000000..16161ece69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-004.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-min-content-size-004-ref.html">
+<meta name="assert" content="Soft wrap opportunities introduced by overflow-wrap:break-word **are not** considered when calculating min-content intrinsic sizes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+table {
+  font: 20px/1 Ahem;
+  overflow-wrap: break-word;
+  max-width: 0;
+  border: 0;
+  border-collapse: collapse;
+}
+td {
+  padding: 0;
+  background: green;
+  color: transparent;
+}
+#red {
+  font: 20px/1 Ahem;
+  position: absolute;
+  z-index: -1;
+  background: red;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a green box below and no red.
+<div id=red>XXXX</div>
+<table><tr><td>XXXX</table>
+
+<!--
+  width:min-content on the div directly without using a table
+  would achieve the goal of this test, and be a lot simpler.
+
+  However, width:min-content is not yet widely supported.
+
+  Using a table, and forcing it to be as small as possible
+  will achieve min-content sizing of the div in all browsers.
+-->
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-005.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-005.html
new file mode 100644
index 0000000000..c8c2a1a433
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-005.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-min-content-size-001-ref.html">
+<meta name="assert" content="The word shouldn't be broken, honoring word-break: keep-all, but 'overflow-wrap: anywhere' introduce additional soft wrap opportunities, which **are** considered when calculating min-content intrinsic sizes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font: 20px/1 Ahem;
+}
+#red {
+  position: absolute;
+  z-index: -1;
+  background: red;
+  color: transparent;
+}
+.test {
+  background: green;
+  color: transparent;
+  width: min-content;
+
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a green box below and no red.
+  <div id=red>X<br>X<br>X<br>X</div>
+  <div class="test">XXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-006.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-006.html
new file mode 100644
index 0000000000..dbbd39301b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-006.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-min-content-size-004-ref.html">
+<meta name="assert" content="The word shouldn't be broken, honoring word-break: keep-all, but 'overflow-wrap: break-word' introduce additional soft wrap opportunities, which **are not** considered when calculating min-content intrinsic sizes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font: 20px/1 Ahem;
+}
+#red {
+  position: absolute;
+  z-index: -1;
+  background: red;
+  color: transparent;
+}
+.test {
+  background: green;
+  color: transparent;
+  width: min-content;
+
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a green box below and no red.
+  <div id=red>XXXX</div>
+  <div class="test">XXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-007.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-007.html
new file mode 100644
index 0000000000..7296b8d376
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-007.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="'overflow-wrap: anywhere' allows breaking before punctuation characters and it should be considered when computing the min-content size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+    font: 50px / 1 Ahem;
+}
+.fail {
+    position: absolute;
+    background: green;
+    color: red;
+    width: 100px;
+    z-index: -1;
+}
+.test {
+    color: green;
+    width: min-content;
+    overflow-wrap: anywhere;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">X<br>X</div>
+<div class="test"><span>X</span><span>.</span></div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-008.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-008.html
new file mode 100644
index 0000000000..5c2b3958bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-008.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
+<meta name="assert" content="'overflow-wrap: break-words allows breaking before punctuation characters, but these breaking opportunnites shouldn't be considered when computing the min-content size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+    font: 50px / 1 Ahem;
+}
+.fail {
+    background: green;
+    position: absolute;
+    color: red;
+    height: 100px;
+    z-index: -1;
+}
+.test {
+    color: green;
+    width: min-content;
+    overflow-wrap: break-word;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">XX</div>
+<div class="test"><span>X</span><span>.</span></div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-009.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-009.html
new file mode 100644
index 0000000000..e7887e7c1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-min-content-size-009.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: min-content sizing and white-space: pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/overflow-wrap-min-content-size-009-ref.html">
+<meta name="assert" content="Using 'overflow-wrap:anywhere' doesn't prevent the tabs sequence to hang (inconditionally) , honoring 'white-space: pre-wrap' hence glyphs **are not** considered when calculating min-content intrinsic sizes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 20px/1 Ahem;
+}
+.test {
+    color: green;
+    background: red;
+    z-index: -1;
+
+    width: min-content;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere
+}
+.ref {
+    position: absolute;
+    background: green;
+    color: transparent;
+}
+</style>
+
+<p>Test passes if there is a green box below and no red.
+<div class="ref"><br><br>X</div>
+<div class="test">&#9;&#9;<span>XX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-normal-keep-all-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-normal-keep-all-001.html
new file mode 100644
index 0000000000..8047aba133
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-normal-keep-all-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: word-break-keep-all and overflow-wrap:normal</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-normal-keep-all-001-ref.html">
+<meta name="flags" content="may">
+<meta name="assert" content="with overflow-wrap:normal, the restrictions introduced by word-break:keep-all may be relaxed to match word-break:normal if there are no otherwise-acceptable break points in the line.">
+<style>
+  div {
+    overflow-wrap: normal;
+    word-break: keep-all;
+    width: 0;
+  }
+</style>
+
+<p>Test passes if there is a column of 文 characters on top of eachother below.
+<div lang=ja>文文文文文文文文</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html
new file mode 100644
index 0000000000..8846038d0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: overflow-wrap:break-word and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-shaping-001-ref.html">
+<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by overflow-wrap:break-word">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+  }
+  section {
+    float: left; /* to sizing to the intrinsic min of the ref box*/
+    position: relative;
+  }
+  #ref {
+    border: solid orange;
+    margin: 1rem;
+  }
+  #test {
+    border: solid blue;
+    position: absolute; /* to avoid influencing the size of the section */
+    left: 1rem;
+    right: 1rem;
+    overflow-wrap: break-word;
+  }
+</style>
+
+<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
+<section>
+<div dir=rtl lang=ar id=ref>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+<div dir=rtl lang=ar id=test>عائلة</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html
new file mode 100644
index 0000000000..adb25c78b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/overflow-wrap-shaping-002.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: overflow-wrap:anywhere and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/overflow-wrap-shaping-001-ref.html">
+<meta name="assert" content="Shaping characters are still shaped as if the word were not broken when a line is broken by overflow-wrap:anywhere">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+  }
+  section {
+    float: left; /* to sizing to the intrinsic min of the ref box*/
+    position: relative;
+  }
+  #ref {
+    border: solid orange;
+    margin: 1rem;
+  }
+  #test {
+    border: solid blue;
+    position: absolute; /* to avoid influencing the size of the section */
+    left: 1rem;
+    right: 1rem;
+    overflow-wrap: anywhere;
+  }
+</style>
+
+<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
+<section>
+<div dir=rtl lang=ar id=ref>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+<div dir=rtl lang=ar id=test>عائلة</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-001-ref.html
new file mode 100644
index 0000000000..0e0300a72d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-002-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-002-ref.html
new file mode 100644
index 0000000000..5dca683817
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-002-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+
+<p>This test passes if there is nothing below this sentence.
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-003-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-003-ref.html
new file mode 100644
index 0000000000..e9ec3b346c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-003-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  font-family: monospace;
+  line-height: 1;
+}
+</style>
+
+<p>This test passes if the word FAIL does not appear below.
+<div>PASS<div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-fit-content-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-fit-content-001.html
new file mode 100644
index 0000000000..30787e204f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-fit-content-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-word with fit-content</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+.test {
+  display: inline-block;
+  font-size: 20px;
+  line-height: 1;
+  margin-bottom: .2em;
+}
+</style>
+<body>
+<div id="log"></div>
+<p class="instructions">Tests pass if all lines do not wrap.
+<div><div class="test">&#x1D70B;</div></div>
+<div><div class="test">𝜋</div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-span-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-span-001-ref.html
new file mode 100644
index 0000000000..0264bcf322
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-break-word-span-001-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<style>
+div {
+  font-size: 10px;
+  line-height: 1;
+}
+</style>
+<div>12345678<br>90</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-cluster-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-cluster-001-ref.html
new file mode 100644
index 0000000000..97393cc176
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-cluster-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  div {
+    font-size: 4em;
+    width: 4em;
+  }
+</style>
+
+<p>Test passes if there are four identical lines of text below.
+<div lang=hi>&#x0937;&#x093F;</div>
+<div lang=hi>&#x0937;&#x093F;</div>
+<div lang=hi>&#x0937;&#x093F;</div>
+<div lang=hi>&#x0937;&#x093F;</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html
new file mode 100644
index 0000000000..ef5c2e88ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 20px/1 Ahem;
+  position: absolute;
+  background: green;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a green box below and no red.
+<div>X<br>X<br>X<br>X</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-002-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-002-ref.html
new file mode 100644
index 0000000000..055ffbf3ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-002-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<style>
+#test {
+  float: left;
+  border: 2px solid blue;
+}
+</style>
+
+<p>Test passes if the glyphs are completely inside the blue box.
+<div id="wrapper">
+  <div id="test">&#x0ba8;&#x0bbf;&#x0bbf;&#x0bbf;&#x0bbf;<br>&#x0ba8;&#x0bbf;&#x0bbf;&#x0bbf;&#x0bbf;</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html
new file mode 100644
index 0000000000..cd9b069255
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#wrapper {
+  width: 0px;
+  font: 16px / 1 Ahem;
+  color: green;
+}
+#test {
+  float: left;
+}
+#reference {
+  position: absolute;
+  width: 16px;
+  height: 128px;
+  background: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a vertical green bar below.
+<div id="wrapper">
+  <div id="reference"></div>
+  <div id="test">X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-004-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-004-ref.html
new file mode 100644
index 0000000000..93e22ba71e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-004-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 20px/1 Ahem;
+  position: absolute;
+  background: green;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a green box below and no red.
+<div>XXXX</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-009-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-009-ref.html
new file mode 100644
index 0000000000..2517e708ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-min-content-size-009-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 20px/1 Ahem;
+  position: absolute;
+  background: green;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a green box below and no red.
+<div>X<br>X<br>X</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-normal-keep-all-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-normal-keep-all-001-ref.html
new file mode 100644
index 0000000000..f0b41134fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-normal-keep-all-001-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+
+<p>Test passes if there is a column of 文 characters on top of eachother below.
+<div lang=ja>文<br>文<br>文<br>文<br>文<br>文<br>文<br>文</div>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-shaping-001-ref.html b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-shaping-001-ref.html
new file mode 100644
index 0000000000..5543ab0729
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/reference/overflow-wrap-shaping-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test ref</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  div {
+    font-family: 'csstest_noto';
+    font-size: 4em;
+    margin: 1rem;
+  }
+  section {
+    float: left; /* to sizing to the intrinsic min of the ref box*/
+  }
+  #ref { border: solid orange; }
+  #test { border: solid blue; }
+</style>
+
+<p>Test passes if the blue and organge boxes are identical. Pay attention to characters at the left of the first line, and on the second line.
+<section>
+<div dir=rtl lang=ar id=ref>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+<div dir=rtl lang=ar id=test>&#xFECB;&#xFE8E;&#xFE8B;&#xFEE0;<br>&#xFE94;</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-001.html b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-001.html
new file mode 100644
index 0000000000..e5c2c5d0ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-wrap - break-word (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="overflow-wrap-001-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="The 'word-wrap' property set 'break-word' breaks the word at an arbitrary point">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #test {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    word-wrap: break-word;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box is within the orange box.</p>
+  <p id="test">FillerTextFillerTextFillerTextFillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-002.html b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-002.html
new file mode 100644
index 0000000000..5cc7e6a45e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-wrap - break-word and white-space - nowrap</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#white-space">
+<link rel="match" href="overflow-wrap-002-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Test checks that the 'word-wrap' property has effect if and only if the 'white-space' allows wrapping">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #ref {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    word-wrap: break-word;
+    width: 200px;
+  }
+  #test {
+    border: 5px solid blue;
+    font: 20px/1 Ahem;
+    word-wrap: break-word;
+    white-space: nowrap;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box overflows the blue border box, but fits within the orange border box.</p>
+  <p id="ref">FillerTextFillerTextFillerTextFillerText</p>
+  <p id="test">FillerTextFillerTextFillerTextFillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-004.html b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-004.html
new file mode 100644
index 0000000000..5650da9a83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-004.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-wrap - normal (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#overflow-wrap-property">
+<link rel="match" href="overflow-wrap-004-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="The 'word-wrap' property set 'normal' overflows container">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #test {
+    border: 5px solid orange;
+    font: 20px/1 Ahem;
+    word-wrap: normal;
+    width: 200px;
+  }
+</style>
+<body>
+  <p class="instructions">Test passes if the black box overflows the orange box.</p>
+  <p id="test">FillerTextFillerTextFillerTextFillerText</p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-alias.html b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-alias.html
new file mode 100644
index 0000000000..74e8aa2312
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/overflow-wrap/word-wrap-alias.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-word-wrap">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/866">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="test" style="word-wrap: break-word; overflow-wrap: break-word;"></div>
+<script>
+test(function() {
+    const div = document.getElementById("test");
+    assert_equals(div.style.cssText, "overflow-wrap: break-word;", "Only overflow-wrap should appear when serializing the declaration.");
+    assert_equals(div.style.wordWrap, "break-word");
+    assert_equals(div.style.overflowWrap, "break-word");
+    assert_equals(getComputedStyle(div).wordWrap, "break-word");
+    assert_equals(getComputedStyle(div).overflowWrap, "break-word");
+}, "word-wrap should be defined as an alias of overflow-wrap");
+</script>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hanging-punctuation-invalid.html b/testing/web-platform/tests/css/css-text/parsing/hanging-punctuation-invalid.html
new file mode 100644
index 0000000000..50ed22f1b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hanging-punctuation-invalid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing hanging-punctuation with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-hanging-punctuation">
+<meta name="assert" content="hanging-punctuation supports only the grammar 'none | [ first || [ force-end | allow-end ] || last ]'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("hanging-punctuation", "none first");
+test_invalid_value("hanging-punctuation", "last none");
+test_invalid_value("hanging-punctuation", "first first");
+test_invalid_value("hanging-punctuation", "force-end allow-end");
+test_invalid_value("hanging-punctuation", "allow-end last force-end");
+test_invalid_value("hanging-punctuation", "first allow-end last allow-end");
+test_invalid_value("hanging-punctuation", "last force-end last");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hanging-punctuation-valid.html b/testing/web-platform/tests/css/css-text/parsing/hanging-punctuation-valid.html
new file mode 100644
index 0000000000..3523a791b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hanging-punctuation-valid.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing hanging-punctuation with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-hanging-punctuation">
+<meta name="assert" content="hanging-punctuation supports the full grammar 'none | [ first || [ force-end | allow-end ] || last ]'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("hanging-punctuation", "none");
+
+test_valid_value("hanging-punctuation", "first");
+test_valid_value("hanging-punctuation", "force-end");
+test_valid_value("hanging-punctuation", "allow-end");
+test_valid_value("hanging-punctuation", "last");
+
+test_valid_value("hanging-punctuation", "first force-end");
+test_valid_value("hanging-punctuation", "first last");
+test_valid_value("hanging-punctuation", "allow-end first");
+test_valid_value("hanging-punctuation", "force-end last");
+test_valid_value("hanging-punctuation", "last first");
+test_valid_value("hanging-punctuation", "last allow-end");
+
+test_valid_value("hanging-punctuation", "first allow-end last");
+test_valid_value("hanging-punctuation", "first last force-end");
+test_valid_value("hanging-punctuation", "force-end first last");
+test_valid_value("hanging-punctuation", "allow-end last first");
+test_valid_value("hanging-punctuation", "last first force-end");
+test_valid_value("hanging-punctuation", "last allow-end first");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hyphenate-character-computed.html b/testing/web-platform/tests/css/css-text/parsing/hyphenate-character-computed.html
new file mode 100644
index 0000000000..9b8d96cdb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hyphenate-character-computed.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().hyphenateCharacter</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
+<meta name="assert" content="hyphenate-character computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("hyphenate-character", "auto");
+test_computed_value("hyphenate-character", "\"=\"");
+test_computed_value("hyphenate-character", "\"/-/\"");
+test_computed_value("hyphenate-character", "\"\\1400\"", "\"᐀\"");
+test_computed_value("hyphenate-character", "\"\"");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hyphenate-character-invalid.html b/testing/web-platform/tests/css/css-text/parsing/hyphenate-character-invalid.html
new file mode 100644
index 0000000000..29351085bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hyphenate-character-invalid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing hyphenate-character with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
+<meta name="assert" content="hyphenate-character supports only the grammar 'auto | &lt;string&gt;'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("hyphenate-character", "normal");
+test_invalid_value("hyphenate-character", "manual");
+test_invalid_value("hyphenate-character", "none");
+test_invalid_value("hyphenate-character", "auto auto");
+test_invalid_value("hyphenate-character", "\"-\" \"=\"");
+test_invalid_value("hyphenate-character", "1400");
+test_invalid_value("hyphenate-character", "U+1400");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hyphenate-character-valid.html b/testing/web-platform/tests/css/css-text/parsing/hyphenate-character-valid.html
new file mode 100644
index 0000000000..cef80e1c0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hyphenate-character-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing hyphenate-character with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#hyphenate-character">
+<meta name="assert" content="hyphens supports the full grammar 'auto | &lt;string&gt;'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("hyphenate-character", "auto");
+test_valid_value("hyphenate-character", "\"=\"");
+test_valid_value("hyphenate-character", "\"/-/\"");
+test_valid_value("hyphenate-character", "\"\\1400\"", "\"᐀\"");
+test_valid_value("hyphenate-character", "\"\"");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hyphenate-limit-chars-computed.html b/testing/web-platform/tests/css/css-text/parsing/hyphenate-limit-chars-computed.html
new file mode 100644
index 0000000000..bc265c8e81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hyphenate-limit-chars-computed.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>CSS Text: hyphenate-limit-chars with computed values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-chars">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_computed_value("hyphenate-character", "auto");
+test_computed_value("hyphenate-limit-chars", "auto auto", "auto");
+test_computed_value("hyphenate-limit-chars", "auto auto auto", "auto");
+test_computed_value("hyphenate-limit-chars", "5");
+test_computed_value("hyphenate-limit-chars", "5 2");
+test_computed_value("hyphenate-limit-chars", "5 2 3");
+test_computed_value("hyphenate-limit-chars", "5 2 calc(3.1)", "5 2 3");
+test_computed_value("hyphenate-limit-chars", "auto 2");
+test_computed_value("hyphenate-limit-chars", "auto 2 auto", "auto 2");
+test_computed_value("hyphenate-limit-chars", "auto auto 2");
+</script>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hyphenate-limit-chars-invalid.html b/testing/web-platform/tests/css/css-text/parsing/hyphenate-limit-chars-invalid.html
new file mode 100644
index 0000000000..5a25f747df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hyphenate-limit-chars-invalid.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Text: parsing hyphenate-limit-chars with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-chars">
+<meta name="assert" content="hyphenate-character supports only the grammar '[ auto | &lt;integer&gt; ]{1,3}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+test_invalid_value("hyphenate-limit-chars", "normal");
+test_invalid_value("hyphenate-limit-chars", "1 normal");
+test_invalid_value("hyphenate-limit-chars", "none");
+test_invalid_value("hyphenate-limit-chars", "1 none");
+test_invalid_value("hyphenate-limit-chars", "1.2");
+test_invalid_value("hyphenate-limit-chars", "1 1.2");
+test_invalid_value("hyphenate-limit-chars", "1 2 1.2");
+test_invalid_value("hyphenate-limit-chars", "1 2 3 4");
+</script>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hyphenate-limit-chars-valid.html b/testing/web-platform/tests/css/css-text/parsing/hyphenate-limit-chars-valid.html
new file mode 100644
index 0000000000..2f10e33f1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hyphenate-limit-chars-valid.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Text: parsing hyphenate-limit-chars with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-chars">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+test_valid_value("hyphenate-limit-chars", "auto");
+test_valid_value("hyphenate-limit-chars", "auto auto");
+test_valid_value("hyphenate-limit-chars", "auto auto auto");
+test_valid_value("hyphenate-limit-chars", "5");
+test_valid_value("hyphenate-limit-chars", "5 2");
+test_valid_value("hyphenate-limit-chars", "5 2 3");
+test_valid_value("hyphenate-limit-chars", "auto 2");
+test_valid_value("hyphenate-limit-chars", "auto 2 auto");
+test_valid_value("hyphenate-limit-chars", "auto auto 2");
+</script>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hyphens-computed.html b/testing/web-platform/tests/css/css-text/parsing/hyphens-computed.html
new file mode 100644
index 0000000000..094e47dab5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hyphens-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().hyphens</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-hyphens">
+<meta name="assert" content="hyphens computed value is specified keyword.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("hyphens", "none");
+test_computed_value("hyphens", "manual");
+test_computed_value("hyphens", "auto");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hyphens-invalid.html b/testing/web-platform/tests/css/css-text/parsing/hyphens-invalid.html
new file mode 100644
index 0000000000..521600f713
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hyphens-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing hyphens with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-hyphens">
+<meta name="assert" content="hyphens supports only the grammar 'none | manual | auto'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("hyphens", "normal");
+test_invalid_value("hyphens", "none manual");
+test_invalid_value("hyphens", "auto auto");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/hyphens-valid.html b/testing/web-platform/tests/css/css-text/parsing/hyphens-valid.html
new file mode 100644
index 0000000000..0ad72094c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/hyphens-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing hyphens with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-hyphens">
+<meta name="assert" content="hyphens supports the full grammar 'none | manual | auto'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("hyphens", "none");
+test_valid_value("hyphens", "manual");
+test_valid_value("hyphens", "auto");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/letter-spacing-computed.html b/testing/web-platform/tests/css/css-text/parsing/letter-spacing-computed.html
new file mode 100644
index 0000000000..45417d1b4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/letter-spacing-computed.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().letterSpacing</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-letter-spacing">
+<meta name="assert" content="letter-spacing computed value is an absolute length.">
+<meta name="assert" content="'normal' computes to zero, but the resolved value of 0px is 'normal', so that's the value that is observed.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("letter-spacing", "normal");
+test_computed_value("letter-spacing", "0px", "normal");
+
+test_computed_value("letter-spacing", "10px");
+test_computed_value("letter-spacing", "-20px");
+test_computed_value("letter-spacing", "calc(10px - 0.5em)", "-10px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/letter-spacing-invalid.html b/testing/web-platform/tests/css/css-text/parsing/letter-spacing-invalid.html
new file mode 100644
index 0000000000..e9ad4e56a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/letter-spacing-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing letter-spacing with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-letter-spacing">
+<meta name="assert" content="letter-spacing supports only the grammar 'normal | <length>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("letter-spacing", "auto");
+test_invalid_value("letter-spacing", "20");
+test_invalid_value("letter-spacing", "30%");
+test_invalid_value("letter-spacing", "calc(40% + 50px)");
+
+test_invalid_value("letter-spacing", "normal 10px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/letter-spacing-valid.html b/testing/web-platform/tests/css/css-text/parsing/letter-spacing-valid.html
new file mode 100644
index 0000000000..740d1fc398
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/letter-spacing-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing letter-spacing with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-letter-spacing">
+<meta name="assert" content="letter-spacing supports the full grammar 'normal | <length>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("letter-spacing", "normal");
+
+test_valid_value("letter-spacing", "0", "0px");
+test_valid_value("letter-spacing", "-10px");
+test_valid_value("letter-spacing", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/line-break-computed.html b/testing/web-platform/tests/css/css-text/parsing/line-break-computed.html
new file mode 100644
index 0000000000..268f4b8e2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/line-break-computed.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().lineBreak</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<meta name="assert" content="line-break computed value is specified keyword.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("line-break", "auto");
+test_computed_value("line-break", "loose");
+test_computed_value("line-break", "normal");
+test_computed_value("line-break", "strict");
+test_computed_value("line-break", "anywhere");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/line-break-invalid.html b/testing/web-platform/tests/css/css-text/parsing/line-break-invalid.html
new file mode 100644
index 0000000000..aca1664936
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/line-break-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing line-break with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<meta name="assert" content="line-break supports only the grammar 'auto | loose | normal | strict | anywhere'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("line-break", "none");
+test_invalid_value("line-break", "auto loose");
+test_invalid_value("line-break", "strict normal");
+test_invalid_value("line-break", "anywhere anywhere");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/line-break-valid.html b/testing/web-platform/tests/css/css-text/parsing/line-break-valid.html
new file mode 100644
index 0000000000..caaae9a5a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/line-break-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing line-break with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-line-break">
+<meta name="assert" content="line-break supports the full grammar 'auto | loose | normal | strict | anywhere'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("line-break", "auto");
+test_valid_value("line-break", "loose");
+test_valid_value("line-break", "normal");
+test_valid_value("line-break", "strict");
+test_valid_value("line-break", "anywhere");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/overflow-wrap-computed.html b/testing/web-platform/tests/css/css-text/parsing/overflow-wrap-computed.html
new file mode 100644
index 0000000000..5cc8b831a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/overflow-wrap-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().overflowWrap</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-overflow-wrap">
+<meta name="assert" content="overflow-wrap computed value is specified keyword.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("overflow-wrap", "normal");
+test_computed_value("overflow-wrap", "break-word");
+test_computed_value("overflow-wrap", "anywhere");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/overflow-wrap-invalid.html b/testing/web-platform/tests/css/css-text/parsing/overflow-wrap-invalid.html
new file mode 100644
index 0000000000..1a467d5f18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/overflow-wrap-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing overflow-wrap with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-overflow-wrap">
+<meta name="assert" content="overflow-wrap supports only the grammar 'normal | break-word | anywhere'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("overflow-wrap", "auto");
+test_invalid_value("overflow-wrap", "normal break-word");
+test_invalid_value("overflow-wrap", "anywhere anywhere");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/overflow-wrap-valid.html b/testing/web-platform/tests/css/css-text/parsing/overflow-wrap-valid.html
new file mode 100644
index 0000000000..8ab907c570
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/overflow-wrap-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing overflow-wrap with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-overflow-wrap">
+<meta name="assert" content="overflow-wrap supports the full grammar 'normal | break-word | anywhere'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("overflow-wrap", "normal");
+test_valid_value("overflow-wrap", "break-word");
+test_valid_value("overflow-wrap", "anywhere");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/tab-size-computed.html b/testing/web-platform/tests/css/css-text/parsing/tab-size-computed.html
new file mode 100644
index 0000000000..54d59bb6c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/tab-size-computed.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().tabSize</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-tab-size">
+<meta name="assert" content="tab-size computed value is the specified number or an absolute length.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("tab-size", "0");
+test_computed_value("tab-size", "16");
+test_computed_value("tab-size", "4");
+test_computed_value("tab-size", "2.5");
+
+test_computed_value("tab-size", "0px");
+test_computed_value("tab-size", "10px");
+test_computed_value("tab-size", "calc(10px + 0.5em)", "30px");
+test_computed_value("tab-size", "calc(10px - 0.5em)", "0px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/tab-size-invalid.html b/testing/web-platform/tests/css/css-text/parsing/tab-size-invalid.html
new file mode 100644
index 0000000000..c95c0462f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/tab-size-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing tab-size with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-tab-size">
+<meta name="assert" content="tab-size supports only the grammar '<number> | <length>'.">
+<meta name="assert" content="Negative tab-size values are not allowed.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("tab-size", "-10px");
+test_invalid_value("tab-size", "-20");
+test_invalid_value("tab-size", "30%");
+test_invalid_value("tab-size", "calc(40% + 50px)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/tab-size-valid.html b/testing/web-platform/tests/css/css-text/parsing/tab-size-valid.html
new file mode 100644
index 0000000000..ced5a36609
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/tab-size-valid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing tab-size with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-tab-size">
+<meta name="assert" content="tab-size supports the full grammar '<number> | <length>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("tab-size", "0");
+test_valid_value("tab-size", "2.5");
+
+test_valid_value("tab-size", "0px");
+test_valid_value("tab-size", "10px");
+test_valid_value("tab-size", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-align-all-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-align-all-invalid.html
new file mode 100644
index 0000000000..70cbadf588
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-align-all-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-align-all with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-align-all">
+<meta name="assert" content="text-align-all supports only the grammar 'start | end | left | right | center | justify | match-parent'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-align-all", "auto");
+test_invalid_value("text-align-all", "start end");
+test_invalid_value("text-align-all", "left right");
+test_invalid_value("text-align-all", "center justify");
+test_invalid_value("text-align-all", "match-parent match-parent");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-align-all-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-align-all-valid.html
new file mode 100644
index 0000000000..f65b15afde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-align-all-valid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-align-all with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-align-all">
+<meta name="assert" content="text-align-all supports the full grammar 'start | end | left | right | center | justify | match-parent'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-align-all", "start");
+test_valid_value("text-align-all", "end");
+test_valid_value("text-align-all", "left");
+test_valid_value("text-align-all", "right");
+test_valid_value("text-align-all", "center");
+test_valid_value("text-align-all", "justify");
+test_valid_value("text-align-all", "match-parent");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-align-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-align-computed.html
new file mode 100644
index 0000000000..30c231be66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-align-computed.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: getComputedStyle().textAlign</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-align">
+<meta name="assert" content="text-align computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #container {
+    text-align: center;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+test_computed_value("text-align", "start");
+test_computed_value("text-align", "end");
+test_computed_value("text-align", "left");
+test_computed_value("text-align", "right");
+test_computed_value("text-align", "center");
+test_computed_value("text-align", "justify");
+test_computed_value("text-align", "match-parent", "center");
+
+// TODO: Test justify-all
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-align-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-align-invalid.html
new file mode 100644
index 0000000000..38a56d914c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-align-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-align with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-align">
+<meta name="assert" content="text-align supports only the grammar 'start | end | left | right | center | justify | match-parent | justify-all'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-align", "auto");
+test_invalid_value("text-align", "start end");
+test_invalid_value("text-align", "left right");
+test_invalid_value("text-align", "center justify");
+test_invalid_value("text-align", "justify-all match-parent");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-align-last-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-align-last-computed.html
new file mode 100644
index 0000000000..3e8d0f52d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-align-last-computed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textAlignLast</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-align-last">
+<meta name="assert" content="text-align-last computed value is specified keyword.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-align-last", "auto");
+test_computed_value("text-align-last", "start");
+test_computed_value("text-align-last", "end");
+test_computed_value("text-align-last", "left");
+test_computed_value("text-align-last", "right");
+test_computed_value("text-align-last", "center");
+test_computed_value("text-align-last", "justify");
+test_computed_value("text-align-last", "match-parent");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-align-last-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-align-last-invalid.html
new file mode 100644
index 0000000000..c16e9a6c13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-align-last-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-align-last with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-align-last">
+<meta name="assert" content="text-align-last supports only the grammar 'auto | start | end | left | right | center | justify | match-parent'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-align-last", "none");
+test_invalid_value("text-align-last", "auto start");
+test_invalid_value("text-align-last", "end left");
+test_invalid_value("text-align-last", "right center");
+test_invalid_value("text-align-last", "justify match-parent");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-align-last-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-align-last-valid.html
new file mode 100644
index 0000000000..c64e7d8a39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-align-last-valid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-align-last with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-align-last">
+<meta name="assert" content="text-align-last supports the full grammar 'auto | start | end | left | right | center | justify | match-parent'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-align-last", "auto");
+test_valid_value("text-align-last", "start");
+test_valid_value("text-align-last", "end");
+test_valid_value("text-align-last", "left");
+test_valid_value("text-align-last", "right");
+test_valid_value("text-align-last", "center");
+test_valid_value("text-align-last", "justify");
+test_valid_value("text-align-last", "match-parent");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-align-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-align-valid.html
new file mode 100644
index 0000000000..e67f4f6f16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-align-valid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-align with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-align">
+<meta name="assert" content="text-align supports the full grammar 'start | end | left | right | center | justify | match-parent | justify-all'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-align", "start");
+test_valid_value("text-align", "end");
+test_valid_value("text-align", "left");
+test_valid_value("text-align", "right");
+test_valid_value("text-align", "center");
+test_valid_value("text-align", "justify");
+test_valid_value("text-align", "match-parent");
+test_valid_value("text-align", "justify-all");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-autospace-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-autospace-computed.html
new file mode 100644
index 0000000000..9656f70956
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-autospace-computed.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textAutospace</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-text-autospace">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-autospace", "normal");
+test_computed_value("text-autospace", "no-autospace");
+test_computed_value("text-autospace", "auto");
+
+test_computed_value("text-autospace", "ideograph-alpha");
+test_computed_value("text-autospace", "ideograph-numeric");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-autospace-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-autospace-invalid.html
new file mode 100644
index 0000000000..7be73ba76e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-autospace-invalid.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-autospace with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-text-autospace">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-autospace", "normal ideograph-alpha");
+test_invalid_value("text-autospace", "normal ideograph-alpha ideograph-numeric");
+test_invalid_value("text-autospace", "normal punctuation");
+test_invalid_value("text-autospace", "auto ideograph-alpha");
+test_invalid_value("text-autospace", "auto ideograph-alpha ideograph-numeric");
+test_invalid_value("text-autospace", "auto punctuation");
+
+test_invalid_value("text-autospace", "normal insert");
+test_invalid_value("text-autospace", "normal replace");
+test_invalid_value("text-autospace", "auto insert");
+test_invalid_value("text-autospace", "auto replace");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-autospace-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-autospace-valid.html
new file mode 100644
index 0000000000..903da68307
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-autospace-valid.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-autospace with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-text-autospace">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-autospace", "normal");
+test_valid_value("text-autospace", "no-autospace");
+
+test_valid_value("text-autospace", "auto");
+
+test_valid_value("text-autospace", "ideograph-alpha");
+test_valid_value("text-autospace", "ideograph-numeric");
+test_valid_value("text-autospace", "ideograph-alpha ideograph-numeric");
+
+test_valid_value("text-autospace", "punctuation");
+test_valid_value("text-autospace", "punctuation normal");
+test_valid_value("text-autospace", "punctuation ideograph-alpha");
+test_valid_value("text-autospace", "punctuation ideograph-alpha ideograph-numeric");
+
+test_valid_value("text-autospace", "ideograph-alpha insert");
+test_valid_value("text-autospace", "ideograph-numeric insert");
+test_valid_value("text-autospace", "ideograph-alpha ideograph-numeric insert");
+
+test_valid_value("text-autospace", "punctuation insert");
+test_valid_value("text-autospace", "punctuation normal insert");
+test_valid_value("text-autospace", "punctuation ideograph-alpha insert");
+
+test_valid_value("text-autospace", "insert ideograph-alpha");
+test_valid_value("text-autospace", "insert ideograph-numeric");
+test_valid_value("text-autospace", "insert ideograph-alpha ideograph-numeric");
+
+test_valid_value("text-autospace", "insert punctuation");
+test_valid_value("text-autospace", "insert punctuation normal");
+test_valid_value("text-autospace", "insert punctuation ideograph-alpha");
+test_valid_value("text-autospace", "insert punctuation ideograph-alpha ideograph-numeric");
+
+test_valid_value("text-autospace", "ideograph-alpha replace");
+test_valid_value("text-autospace", "ideograph-numeric replace");
+test_valid_value("text-autospace", "ideograph-alpha ideograph-numeric replace");
+
+test_valid_value("text-autospace", "punctuation replace");
+test_valid_value("text-autospace", "punctuation normal replace");
+test_valid_value("text-autospace", "punctuation ideograph-alpha replace");
+
+test_valid_value("text-autospace", "replace ideograph-alpha");
+test_valid_value("text-autospace", "replace ideograph-numeric");
+test_valid_value("text-autospace", "replace ideograph-alpha ideograph-numeric");
+
+test_valid_value("text-autospace", "replace punctuation");
+test_valid_value("text-autospace", "replace punctuation normal");
+test_valid_value("text-autospace", "replace punctuation ideograph-alpha");
+test_valid_value("text-autospace", "replace punctuation ideograph-alpha ideograph-numeric");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-group-align-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-group-align-invalid.html
new file mode 100644
index 0000000000..0c42067bf6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-group-align-invalid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-group-align with invalid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<meta name="assert" content="text-group-align supports only the grammar 'none | start | end | left | right | center'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-group-align", "auto");
+test_invalid_value("text-group-align", "match-parent");
+test_invalid_value("text-group-align", "justify");
+test_invalid_value("text-group-align", "wrap");
+test_invalid_value("text-group-align", "left right");
+test_invalid_value("text-group-align", "center start");
+test_invalid_value("text-group-align", "end start");
+test_invalid_value("text-group-align", "none center");
+test_invalid_value("text-group-align", "start center");
+test_invalid_value("text-group-align", "right center");
+test_invalid_value("text-group-align", "5px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-group-align-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-group-align-valid.html
new file mode 100644
index 0000000000..7f6680bdc5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-group-align-valid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-group-align with valid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<meta name="assert" content="text-group-align supports the full grammar 'none | start | end | left | right | center'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-group-align", "none");
+test_valid_value("text-group-align", "start");
+test_valid_value("text-group-align", "end");
+test_valid_value("text-group-align", "left");
+test_valid_value("text-group-align", "right");
+test_valid_value("text-group-align", "center");
+test_valid_value("text-group-align", "initial");
+test_valid_value("text-group-align", "inherit");
+test_valid_value("text-group-align", "unset");
+test_valid_value("text-group-align", "revert");
+test_valid_value("text-group-align", "revert-layer");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-indent-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-indent-computed.html
new file mode 100644
index 0000000000..0296544e5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-indent-computed.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textIndent</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-indent">
+<meta name="assert" content="text-indent computed value is computed <length-percentage> value, plus any specified keywords.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-indent", "10px");
+test_computed_value("text-indent", "20%");
+test_computed_value("text-indent", "calc(50% + 60px)");
+test_computed_value("text-indent", "-30px");
+test_computed_value("text-indent", "-40%");
+test_computed_value("text-indent", "calc(10px - 0.5em)", "-10px");
+
+test_computed_value("text-indent", "10px hanging");
+test_computed_value("text-indent", "20% each-line");
+test_computed_value("text-indent", "calc(50% + 60px) hanging each-line");
+test_computed_value("text-indent", "each-line hanging calc(10px + 0.5em)", "30px hanging each-line");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-indent-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-indent-invalid.html
new file mode 100644
index 0000000000..9b5d7754b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-indent-invalid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-indent with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-indent">
+<meta name="assert" content="text-indent supports only the grammar '[ <length-percentage> ] && hanging? && each-line?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-indent", "auto");
+test_invalid_value("text-indent", "hanging");
+test_invalid_value("text-indent", "each-line");
+test_invalid_value("text-indent", "10");
+
+test_invalid_value("text-indent", "10px hanging 20px");
+test_invalid_value("text-indent", "hanging 20% hanging");
+test_invalid_value("text-indent", "each-line each-line");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-indent-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-indent-valid.html
new file mode 100644
index 0000000000..9433ba3d9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-indent-valid.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-indent with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-indent">
+<meta name="assert" content="text-indent supports the full grammar '[ <length-percentage> ] && hanging? && each-line?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-indent", "10px");
+test_valid_value("text-indent", "20%");
+test_valid_value("text-indent", "calc(2em + 3ex)");
+test_valid_value("text-indent", "calc(50% + 60px)");
+test_valid_value("text-indent", "-30px");
+test_valid_value("text-indent", "-40%");
+
+test_valid_value("text-indent", "10px hanging");
+test_valid_value("text-indent", "20% each-line");
+test_valid_value("text-indent", "calc(2em + 3ex) hanging each-line");
+
+test_valid_value("text-indent", "hanging calc(50% + 60px)", "calc(50% + 60px) hanging");
+test_valid_value("text-indent", "each-line 10px", "10px each-line");
+test_valid_value("text-indent", "hanging 20% each-line", "20% hanging each-line");
+test_valid_value("text-indent", "each-line hanging calc(2em + 3ex)", "calc(2em + 3ex) hanging each-line");
+test_valid_value("text-indent", "calc(50% + 60px) each-line hanging", "calc(50% + 60px) hanging each-line");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-justify-computed-legacy.html b/testing/web-platform/tests/css/css-text/parsing/text-justify-computed-legacy.html
new file mode 100644
index 0000000000..ba47bd408e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-justify-computed-legacy.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textJustify distribute</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-justify">
+<meta name="assert" content="text-justify: distribute computed value (or is parse-time aliased with) 'inter-character'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-justify", "distribute", "inter-character");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-justify-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-justify-computed.html
new file mode 100644
index 0000000000..3766478d0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-justify-computed.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textJustify</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-justify">
+<meta name="assert" content="text-justify computed value is specified keyword.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-justify", "auto");
+test_computed_value("text-justify", "none");
+test_computed_value("text-justify", "inter-word");
+test_computed_value("text-justify", "inter-character");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-justify-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-justify-invalid.html
new file mode 100644
index 0000000000..a009ef08eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-justify-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-justify with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-justify">
+<meta name="assert" content="text-justify supports only the grammar 'auto | none | inter-word | inter-character'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-justify", "normal");
+test_invalid_value("text-justify", "auto none");
+test_invalid_value("text-justify", "inter-character inter-word");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-justify-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-justify-valid.html
new file mode 100644
index 0000000000..0991409da1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-justify-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-justify with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-justify">
+<meta name="assert" content="text-justify supports the full grammar 'auto | none | inter-word | inter-character'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-justify", "auto");
+test_valid_value("text-justify", "none");
+test_valid_value("text-justify", "inter-word");
+test_valid_value("text-justify", "inter-character");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-spacing-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-spacing-computed.html
new file mode 100644
index 0000000000..845cf075a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-spacing-computed.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textSpacing</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-spacing", "normal");
+test_computed_value("text-spacing", "none");
+test_computed_value("text-spacing", "auto");
+
+// `text-autospace`.
+test_computed_value("text-spacing", "no-autospace");
+
+// `text-spacing-trim`.
+test_computed_value("text-spacing", "trim-start");
+test_computed_value("text-spacing", "space-all");
+
+// `text-autospace` and `text-spacing-trim`.
+test_computed_value("text-spacing", "normal normal", "normal");
+test_computed_value("text-spacing", "normal trim-start", "trim-start");
+test_computed_value("text-spacing", "no-autospace normal", "no-autospace");
+test_computed_value("text-spacing", "no-autospace space-all", "none");
+test_computed_value("text-spacing", "no-autospace trim-start", "trim-start no-autospace");
+// Test the reversed order.
+test_computed_value("text-spacing", "trim-start normal ", "trim-start");
+test_computed_value("text-spacing", "normal no-autospace", "no-autospace");
+test_computed_value("text-spacing", "space-all no-autospace", "none");
+test_computed_value("text-spacing", "trim-start no-autospace", "trim-start no-autospace");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-spacing-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-spacing-invalid.html
new file mode 100644
index 0000000000..99cac86fb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-spacing-invalid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-spacing with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// These keywords must appear alone.
+for (const keyword of ['none', 'auto']) {
+  test_invalid_value("text-spacing", `${keyword} ${keyword}`);
+  for (const keyword2 of ['no-autospace', 'space-first']) {
+    test_invalid_value("text-spacing", `${keyword} ${keyword2}`);
+    test_invalid_value("text-spacing", `${keyword2} ${keyword}`);
+  }
+}
+test_invalid_value("text-spacing", `normal normal no-autospace`);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-spacing-trim-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-spacing-trim-computed.html
new file mode 100644
index 0000000000..163a740103
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-spacing-trim-computed.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textSpacingTrim</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-spacing-trim", "auto");
+test_computed_value("text-spacing-trim", "normal");
+test_computed_value("text-spacing-trim", "space-all");
+test_computed_value("text-spacing-trim", "trim-auto");
+test_computed_value("text-spacing-trim", "trim-all");
+test_computed_value("text-spacing-trim", "trim-start");
+test_computed_value("text-spacing-trim", "space-first");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-spacing-trim-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-spacing-trim-invalid.html
new file mode 100644
index 0000000000..9f835352b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-spacing-trim-invalid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-spacing-trim with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-spacing-trim", "none");
+test_invalid_value("text-spacing-trim", "normal space-all");
+test_invalid_value("text-spacing-trim", "normal space-first");
+test_invalid_value("text-spacing-trim", "auto space-all");
+test_invalid_value("text-spacing-trim", "auto space-first");
+test_invalid_value("text-spacing-trim", "allow-end");
+test_invalid_value("text-spacing-trim", "allow-end space-first");
+test_invalid_value("text-spacing-trim", "space-first allow-end");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-spacing-trim-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-spacing-trim-valid.html
new file mode 100644
index 0000000000..a83a099480
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-spacing-trim-valid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-spacing-trim with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-spacing-trim", "normal");
+test_valid_value("text-spacing-trim", "auto");
+test_valid_value("text-spacing-trim", "space-all");
+test_valid_value("text-spacing-trim", "trim-auto");
+test_valid_value("text-spacing-trim", "trim-all");
+test_valid_value("text-spacing-trim", "trim-start");
+test_valid_value("text-spacing-trim", "space-first");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-spacing-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-spacing-valid.html
new file mode 100644
index 0000000000..d0cb332d2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-spacing-valid.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-spacing with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-spacing", "normal");
+test_valid_value("text-spacing", "none");
+test_valid_value("text-spacing", "auto");
+
+// `text-autospace`.
+test_valid_value("text-spacing", "no-autospace");
+
+// `text-spacing-trim`.
+test_valid_value("text-spacing", "trim-start");
+test_valid_value("text-spacing", "space-all");
+
+// `text-autospace` and `text-spacing-trim`.
+test_valid_value("text-spacing", "normal normal", "normal");
+test_valid_value("text-spacing", "normal trim-start", "trim-start");
+test_valid_value("text-spacing", "no-autospace normal", "no-autospace");
+test_valid_value("text-spacing", "no-autospace space-all", "none");
+test_valid_value("text-spacing", "no-autospace trim-start", "trim-start no-autospace");
+// Test the reversed order.
+test_valid_value("text-spacing", "trim-start normal ", "trim-start");
+test_valid_value("text-spacing", "normal no-autospace", "no-autospace");
+test_valid_value("text-spacing", "space-all no-autospace", "none");
+test_valid_value("text-spacing", "trim-start no-autospace", "trim-start no-autospace");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-transform-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-transform-computed.html
new file mode 100644
index 0000000000..1808e6fdca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-transform-computed.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textTransform</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-transform">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<meta name="assert" content="text-transform computed value is specified keywords.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-transform", "none");
+
+test_computed_value("text-transform", "capitalize");
+test_computed_value("text-transform", "uppercase");
+test_computed_value("text-transform", "lowercase");
+test_computed_value("text-transform", "full-width");
+test_computed_value("text-transform", "full-size-kana");
+test_computed_value("text-transform", "math-auto");
+
+test_computed_value("text-transform", "capitalize full-width");
+test_computed_value("text-transform", "full-width full-size-kana");
+
+test_computed_value("text-transform", "uppercase full-width full-size-kana");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-transform-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-transform-invalid.html
new file mode 100644
index 0000000000..3981480d38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-transform-invalid.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-transform with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-transform">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<meta name="assert" content="text-transform supports only the grammar 'none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana | math-auto'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-transform", "none full-width");
+test_invalid_value("text-transform", "capitalize none");
+
+test_invalid_value("text-transform", "capitalize full-width lowercase");
+test_invalid_value("text-transform", "uppercase full-size-kana uppercase");
+test_invalid_value("text-transform", "full-width full-size-kana full-width");
+test_invalid_value("text-transform", "full-size-kana capitalize full-size-kana");
+
+
+// math-auto keyword cannot be combined with other values.
+test_invalid_value("text-transform", "none math-auto");
+test_invalid_value("text-transform", "math-auto none");
+test_invalid_value("text-transform", "uppercase math-auto");
+test_invalid_value("text-transform", "math-auto uppercase");
+test_invalid_value("text-transform", "lowercase math-auto");
+test_invalid_value("text-transform", "math-auto lowercase");
+test_invalid_value("text-transform", "capitalize math-auto");
+test_invalid_value("text-transform", "math-auto capitalize");
+test_invalid_value("text-transform", "full-width math-auto");
+test_invalid_value("text-transform", "math-auto full-width");
+test_invalid_value("text-transform", "full-size-kana math-auto");
+test_invalid_value("text-transform", "math-auto full-size-kana");
+test_invalid_value("text-transform", "math-auto math-auto");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-transform-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-transform-valid.html
new file mode 100644
index 0000000000..522eb791b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-transform-valid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-transform with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-text-transform">
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<meta name="assert" content="text-transform supports the full grammar 'none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana | math-auto'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-transform", "none");
+
+test_valid_value("text-transform", "capitalize");
+test_valid_value("text-transform", "uppercase");
+test_valid_value("text-transform", "lowercase");
+test_valid_value("text-transform", "full-width");
+test_valid_value("text-transform", "full-size-kana");
+test_valid_value("text-transform", "math-auto");
+
+test_valid_value("text-transform", "capitalize full-width");
+test_valid_value("text-transform", "uppercase full-size-kana");
+test_valid_value("text-transform", "full-width full-size-kana");
+
+// serialization canonicalizes the order of values: https://drafts.csswg.org/cssom/#serialize-a-css-value
+test_valid_value("text-transform", "full-width lowercase", "lowercase full-width");
+test_valid_value("text-transform", "full-size-kana capitalize", "capitalize full-size-kana");
+test_valid_value("text-transform", "full-size-kana full-width", "full-width full-size-kana");
+
+test_valid_value("text-transform", "capitalize full-width full-size-kana");
+
+// serialization canonicalizes the order of values
+test_valid_value("text-transform", "full-width full-size-kana uppercase", "uppercase full-width full-size-kana");
+test_valid_value("text-transform", "full-size-kana lowercase full-width", "lowercase full-width full-size-kana");
+test_valid_value("text-transform", "lowercase full-size-kana full-width", "lowercase full-width full-size-kana");
+test_valid_value("text-transform", "full-width uppercase full-size-kana", "uppercase full-width full-size-kana");
+test_valid_value("text-transform", "full-size-kana full-width capitalize", "capitalize full-width full-size-kana");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-wrap-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-wrap-computed.html
new file mode 100644
index 0000000000..aa9c3c5705
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-wrap-computed.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textWrap</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
+<meta name="assert" content="text-wrap computed value is '<text-wrap-mode> || <text-wrap-style>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-wrap", "wrap");
+test_computed_value("text-wrap", "nowrap");
+
+test_computed_value("text-wrap", "auto", "wrap");
+test_computed_value("text-wrap", "balance");
+test_computed_value("text-wrap", "stable");
+
+test_computed_value("text-wrap", "wrap auto", "wrap");
+test_computed_value("text-wrap", "wrap balance", "balance");
+test_computed_value("text-wrap", "wrap stable", "stable");
+test_computed_value("text-wrap", "auto wrap", "wrap");
+test_computed_value("text-wrap", "balance wrap", "balance");
+test_computed_value("text-wrap", "stable wrap", "stable");
+
+test_computed_value("text-wrap", "nowrap auto", "nowrap");
+test_computed_value("text-wrap", "nowrap balance");
+test_computed_value("text-wrap", "nowrap stable");
+test_computed_value("text-wrap", "auto nowrap", "nowrap");
+test_computed_value("text-wrap", "balance nowrap", "nowrap balance");
+test_computed_value("text-wrap", "stable nowrap", "nowrap stable");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-wrap-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-wrap-invalid.html
new file mode 100644
index 0000000000..b67cecc183
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-wrap-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-wrap with invalid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
+<meta name="assert" content="text-wrap supports only the grammar '<text-wrap-mode> || <text-wrap-style>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-wrap", "normal");
+test_invalid_value("text-wrap", "none");
+test_invalid_value("text-wrap", "wrap nowrap");
+test_invalid_value("text-wrap", "pretty balance");
+test_invalid_value("text-wrap", "balance stable");
+test_invalid_value("text-wrap", "stable pretty");
+test_invalid_value("text-wrap", "delicious wrap");
+test_invalid_value("text-wrap", "5px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-wrap-mode-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-wrap-mode-computed.html
new file mode 100644
index 0000000000..35e082b647
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-wrap-mode-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textWrapMode</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap-mode">
+<meta name="assert" content="text-wrap-mode computed value is wrap | nowrap">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-wrap-mode", "wrap");
+test_computed_value("text-wrap-mode", "nowrap");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-wrap-mode-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-wrap-mode-invalid.html
new file mode 100644
index 0000000000..d63c1901c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-wrap-mode-invalid.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-wrap-mode with invalid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap-mode">
+<meta name="assert" content="text-wrap-mode supports only the grammar '<text-wrap-mode>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-wrap-mode", "auto");
+test_invalid_value("text-wrap-mode", "normal");
+test_invalid_value("text-wrap-mode", "none");
+test_invalid_value("text-wrap-mode", "balance");
+test_invalid_value("text-wrap-mode", "pretty");
+test_invalid_value("text-wrap-mode", "stable");
+test_invalid_value("text-wrap-mode", "wrap stable");
+test_invalid_value("text-wrap-mode", "nowrap stable");
+test_invalid_value("text-wrap-mode", "wrap auto");
+test_invalid_value("text-wrap-mode", "balance balance");
+test_invalid_value("text-wrap-mode", "pretty pretty");
+test_invalid_value("text-wrap-mode", "stable stable");
+test_invalid_value("text-wrap-mode", "wrap nowrap");
+test_invalid_value("text-wrap-mode", "pretty balance");
+test_invalid_value("text-wrap-mode", "balance stable");
+test_invalid_value("text-wrap-mode", "stable pretty");
+test_invalid_value("text-wrap-mode", "delicious wrap");
+test_invalid_value("text-wrap-mode", "5px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-wrap-mode-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-wrap-mode-valid.html
new file mode 100644
index 0000000000..5dde8b377f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-wrap-mode-valid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-wrap-mode with valid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap-mode">
+<meta name="assert" content="text-wrap-mode supports the full grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-wrap-mode", "wrap");
+test_valid_value("text-wrap-mode", "nowrap");
+
+test_valid_value("text-wrap-mode", "initial");
+test_valid_value("text-wrap-mode", "inherit");
+test_valid_value("text-wrap-mode", "unset");
+test_valid_value("text-wrap-mode", "revert");
+test_valid_value("text-wrap-mode", "revert-layer");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-wrap-pretty.html b/testing/web-platform/tests/css/css-text/parsing/text-wrap-pretty.html
new file mode 100644
index 0000000000..425d1b9c97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-wrap-pretty.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: text-wrap: pretty parsing</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
+<meta name="assert" content="text-wrap: pretty parsing">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_valid_value("text-wrap", "pretty");
+test_valid_value("text-wrap", "wrap pretty", "pretty");
+test_valid_value("text-wrap", "pretty wrap", "pretty");
+test_valid_value("text-wrap", "stable wrap", "stable");
+test_valid_value("text-wrap", "nowrap pretty");
+test_valid_value("text-wrap", "pretty nowrap", "nowrap pretty");
+test_valid_value("text-wrap-style", "pretty");
+
+test_computed_value("text-wrap", "pretty");
+test_computed_value("text-wrap", "wrap pretty", "pretty");
+test_computed_value("text-wrap", "pretty wrap", "pretty");
+test_computed_value("text-wrap", "stable wrap", "stable");
+test_computed_value("text-wrap", "nowrap pretty");
+test_computed_value("text-wrap", "pretty nowrap", "nowrap pretty");
+test_computed_value("text-wrap-style", "pretty");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-wrap-style-computed.html b/testing/web-platform/tests/css/css-text/parsing/text-wrap-style-computed.html
new file mode 100644
index 0000000000..14c9f03cf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-wrap-style-computed.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textWrapStyle</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap-style">
+<meta name="assert" content="text-wrap-style computed value is auto | balance | pretty | stable">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("text-wrap-style", "auto");
+test_computed_value("text-wrap-style", "balance");
+test_computed_value("text-wrap-style", "stable");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-wrap-style-invalid.html b/testing/web-platform/tests/css/css-text/parsing/text-wrap-style-invalid.html
new file mode 100644
index 0000000000..dcda82e465
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-wrap-style-invalid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-wrap-style with invalid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap-style">
+<meta name="assert" content="text-wrap-style supports only the grammar '<text-wrap-style>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("text-wrap-style", "normal");
+test_invalid_value("text-wrap-style", "none");
+test_invalid_value("text-wrap-style", "wrap");
+test_invalid_value("text-wrap-style", "nowrap");
+test_invalid_value("text-wrap-style", "wrap wrap");
+test_invalid_value("text-wrap-style", "nowrap nowrap");
+test_invalid_value("text-wrap-style", "wrap nowrap");
+test_invalid_value("text-wrap-style", "pretty balance");
+test_invalid_value("text-wrap-style", "balance stable");
+test_invalid_value("text-wrap-style", "stable pretty");
+test_invalid_value("text-wrap-style", "delicious wrap");
+test_invalid_value("text-wrap-style", "5px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-wrap-style-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-wrap-style-valid.html
new file mode 100644
index 0000000000..f826bdd2f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-wrap-style-valid.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-wrap-style with valid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap-style">
+<meta name="assert" content="text-wrap-style supports the full grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-wrap-style", "auto");
+test_valid_value("text-wrap-style", "balance");
+test_valid_value("text-wrap-style", "stable");
+
+test_valid_value("text-wrap-style", "initial");
+test_valid_value("text-wrap-style", "inherit");
+test_valid_value("text-wrap-style", "unset");
+test_valid_value("text-wrap-style", "revert");
+test_valid_value("text-wrap-style", "revert-layer");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/text-wrap-valid.html b/testing/web-platform/tests/css/css-text/parsing/text-wrap-valid.html
new file mode 100644
index 0000000000..95a855338e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/text-wrap-valid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-wrap with valid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
+<meta name="assert" content="text-wrap supports the full grammar '<text-wrap-mode> || <text-wrap-style>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("text-wrap", "wrap");
+test_valid_value("text-wrap", "nowrap");
+
+test_valid_value("text-wrap", "auto", "wrap");
+test_valid_value("text-wrap", "balance");
+test_valid_value("text-wrap", "stable");
+
+test_valid_value("text-wrap", "wrap auto", "wrap");
+test_valid_value("text-wrap", "wrap balance", "balance");
+test_valid_value("text-wrap", "wrap stable", "stable");
+test_valid_value("text-wrap", "auto wrap", "wrap");
+test_valid_value("text-wrap", "balance wrap", "balance");
+test_valid_value("text-wrap", "stable wrap", "stable");
+
+test_valid_value("text-wrap", "nowrap auto", "nowrap");
+test_valid_value("text-wrap", "nowrap balance");
+test_valid_value("text-wrap", "nowrap stable");
+test_valid_value("text-wrap", "auto nowrap", "nowrap");
+test_valid_value("text-wrap", "balance nowrap", "nowrap balance");
+test_valid_value("text-wrap", "stable nowrap", "nowrap stable");
+
+test_valid_value("text-wrap", "initial");
+test_valid_value("text-wrap", "inherit");
+test_valid_value("text-wrap", "unset");
+test_valid_value("text-wrap", "revert");
+test_valid_value("text-wrap", "revert-layer");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/white-space-collapse-computed.html b/testing/web-platform/tests/css/css-text/parsing/white-space-collapse-computed.html
new file mode 100644
index 0000000000..506e257cbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/white-space-collapse-computed.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().whiteSpace</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">
+<meta name="assert" content="white-space computed value is specified keyword.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("white-space-collapse", "collapse");
+test_computed_value("white-space-collapse", "preserve");
+test_computed_value("white-space-collapse", "preserve-breaks");
+test_computed_value("white-space-collapse", "break-spaces");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/white-space-collapse-invalid.html b/testing/web-platform/tests/css/css-text/parsing/white-space-collapse-invalid.html
new file mode 100644
index 0000000000..0d2856ba37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/white-space-collapse-invalid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing white-space-collapse with invalid values</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#white-space-collapsing">
+<meta name="assert" content="white-space-collapse supports only the grammar 'collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("white-space-collapse", "auto");
+test_invalid_value("white-space-collapse", "none");
+test_invalid_value("white-space-collapse", "collapse preserve");
+test_invalid_value("white-space-collapse", "preserve preserve-breaks");
+test_invalid_value("white-space-collapse", "delicious collapse");
+test_invalid_value("white-space-collapse", "5px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/white-space-collapse-valid.html b/testing/web-platform/tests/css/css-text/parsing/white-space-collapse-valid.html
new file mode 100644
index 0000000000..23c0cd39bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/white-space-collapse-valid.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing white-space-collapse with valid values</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#white-space-collapsing">
+<meta name="assert" content="white-space-collapse supports the full grammar 'collapse | discard | preserve | preserve-breaks | preserve-spaces | break-spaces'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("white-space-collapse", "collapse");
+test_valid_value("white-space-collapse", "preserve");
+test_valid_value("white-space-collapse", "preserve-breaks");
+test_valid_value("white-space-collapse", "break-spaces");
+test_valid_value("white-space-collapse", "initial");
+test_valid_value("white-space-collapse", "inherit");
+test_valid_value("white-space-collapse", "unset");
+test_valid_value("white-space-collapse", "revert");
+test_valid_value("white-space-collapse", "revert-layer");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/white-space-computed.html b/testing/web-platform/tests/css/css-text/parsing/white-space-computed.html
new file mode 100644
index 0000000000..a7c2ec12eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/white-space-computed.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().whiteSpace</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">
+<meta name="assert" content="white-space computed value is specified keyword.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("white-space", "normal");
+test_computed_value("white-space", "pre");
+test_computed_value("white-space", "nowrap");
+test_computed_value("white-space", "pre-wrap");
+test_computed_value("white-space", "break-spaces");
+test_computed_value("white-space", "pre-line");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/white-space-invalid.html b/testing/web-platform/tests/css/css-text/parsing/white-space-invalid.html
new file mode 100644
index 0000000000..599bd699c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/white-space-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing white-space with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">
+<meta name="assert" content="white-space supports only the grammar 'normal | pre | nowrap | pre-wrap | break-spaces | pre-line'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("white-space", "auto");
+test_invalid_value("white-space", "normal pre");
+test_invalid_value("white-space", "nowrap pre-wrap");
+test_invalid_value("white-space", "pre-line break-spaces");
+test_invalid_value("white-space", "balance");
+test_invalid_value("white-space", "pretty");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/white-space-shorthand-text-wrap.html b/testing/web-platform/tests/css/css-text/parsing/white-space-shorthand-text-wrap.html
new file mode 100644
index 0000000000..b99dd19e48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/white-space-shorthand-text-wrap.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-white-space">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-text-wrap">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+.balance {
+  text-wrap: balance;
+}
+</style>
+<div id="balance" class="balance"></div>
+<script>
+test(() => {
+  const target = document.getElementById('balance');
+  assert_equals(getComputedStyle(target).textWrap, 'balance');
+}, "`text-wrap: balance` should be set");
+</script>
+
+<style>
+#text-wrap-after-white-space {
+  white-space: normal;
+  text-wrap: balance;
+}
+</style>
+<div id="text-wrap-after-white-space"></div>
+<script>
+test(() => {
+  const target = document.getElementById('text-wrap-after-white-space');
+  assert_equals(getComputedStyle(target).textWrap, 'balance');
+}, "`text-wrap` should not be affected by previous `white-space`");
+</script>
+
+<style>
+#white-space-after-text-wrap-balance {
+  text-wrap: balance;
+  white-space: normal;
+}
+</style>
+<div id="white-space-after-text-wrap-balance"></div>
+<script>
+test(() => {
+  const target = document.getElementById('white-space-after-text-wrap-balance');
+  assert_equals(getComputedStyle(target).textWrap, 'balance');
+}, "`white-space` should not overwrite previous `text-wrap-style: balance`");
+</script>
+
+<style>
+#white-space-after-text-wrap-nowrap {
+  text-wrap: nowrap balance;
+  white-space: normal;
+}
+</style>
+<div id="white-space-after-text-wrap-nowrap"></div>
+<script>
+test(() => {
+  const target = document.getElementById('white-space-after-text-wrap-nowrap');
+  assert_equals(getComputedStyle(target).textWrap, 'balance');
+}, "`white-space` should overwrite previous `text-wrap-mode: nowrap`");
+</script>
+
+<style>
+.normal {
+  white-space: normal;
+}
+</style>
+<div class="normal">
+  <div id="parent-white-space" class="balance"></div>
+</div>
+<script>
+test(() => {
+  const target = document.getElementById('parent-white-space');
+  assert_equals(getComputedStyle(target).textWrap, 'balance');
+}, "`text-wrap` should not be affected by `white-space` on the parent");
+</script>
+
+<div style="text-wrap: balance nowrap;">
+  <div id="parent-text-wrap" class="normal"></div>
+</div>
+<script>
+test(() => {
+  const target = document.getElementById('parent-text-wrap');
+  assert_equals(getComputedStyle(target).textWrap, 'balance');
+}, "`white-space` should overwrite `text-wrap-mode` on the parent");
+</script>
diff --git a/testing/web-platform/tests/css/css-text/parsing/white-space-shorthand.html b/testing/web-platform/tests/css/css-text/parsing/white-space-shorthand.html
new file mode 100644
index 0000000000..9cd4bdb43b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/white-space-shorthand.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>CSS Text Module Test: parsing white-space as a shorthand</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#propdef-white-space">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+function test_valid_and_computed_value(property, specified, serialized) {
+  test_valid_value(property, specified, serialized);
+  test_computed_value(property, specified, serialized);
+}
+
+test_valid_and_computed_value("white-space", "collapse", "normal");
+test_valid_and_computed_value("white-space", "wrap", "normal");
+test_valid_and_computed_value("white-space", "collapse wrap", "normal");
+test_valid_and_computed_value("white-space", "wrap collapse", "normal");
+
+test_valid_and_computed_value("white-space", "preserve nowrap", "pre");
+test_valid_and_computed_value("white-space", "nowrap preserve", "pre");
+
+test_valid_and_computed_value("white-space", "nowrap", "nowrap");
+test_valid_and_computed_value("white-space", "collapse nowrap", "nowrap");
+test_valid_and_computed_value("white-space", "nowrap collapse", "nowrap");
+
+test_valid_and_computed_value("white-space", "preserve", "pre-wrap");
+test_valid_and_computed_value("white-space", "preserve wrap", "pre-wrap");
+test_valid_and_computed_value("white-space", "wrap preserve", "pre-wrap");
+
+test_valid_and_computed_value("white-space", "break-spaces", "break-spaces");
+test_valid_and_computed_value("white-space", "break-spaces wrap", "break-spaces");
+test_valid_and_computed_value("white-space", "wrap break-spaces", "break-spaces");
+
+test_valid_and_computed_value("white-space", "preserve-breaks", "pre-line");
+test_valid_and_computed_value("white-space", "preserve-breaks wrap", "pre-line");
+test_valid_and_computed_value("white-space", "wrap preserve-breaks", "pre-line");
+
+// Combinations of existing values that are not pre-defined.
+test_valid_and_computed_value("white-space", "preserve-breaks nowrap", "preserve-breaks nowrap");
+test_valid_and_computed_value("white-space", "nowrap preserve-breaks", "preserve-breaks nowrap");
+
+// Values not available through the shorthand.
+test_invalid_value("white-space", "balance");
+test_invalid_value("white-space", "collapse balance");
+test_invalid_value("white-space", "balance collapse");
+test_invalid_value("white-space", "preserve balance");
+test_invalid_value("white-space", "balance preserve");
+</script>
diff --git a/testing/web-platform/tests/css/css-text/parsing/white-space-valid.html b/testing/web-platform/tests/css/css-text/parsing/white-space-valid.html
new file mode 100644
index 0000000000..d872c0b6fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/white-space-valid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing white-space with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-white-space">
+<meta name="assert" content="white-space supports the full grammar 'normal | pre | nowrap | pre-wrap | break-spaces | pre-line'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("white-space", "normal");
+test_valid_value("white-space", "pre");
+test_valid_value("white-space", "nowrap");
+test_valid_value("white-space", "pre-wrap");
+test_valid_value("white-space", "break-spaces");
+test_valid_value("white-space", "pre-line");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-break-computed.html b/testing/web-platform/tests/css/css-text/parsing/word-break-computed.html
new file mode 100644
index 0000000000..5a3b7f6685
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-break-computed.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().wordBreak</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-break">
+<meta name="assert" content="word-break computed value is specified keyword.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("word-break", "normal");
+test_computed_value("word-break", "keep-all");
+test_computed_value("word-break", "break-all");
+test_computed_value("word-break", "break-word");
+test_computed_value("word-break", "auto-phrase");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-break-invalid.html b/testing/web-platform/tests/css/css-text/parsing/word-break-invalid.html
new file mode 100644
index 0000000000..91b4a8ec47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-break-invalid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing word-break with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-break">
+<meta name="assert" content="word-break supports only the grammar 'normal | break-all| keep-all | manual | auto-phrase | break-word'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("word-break", "auto");
+test_invalid_value("word-break", "normal keep-all");
+test_invalid_value("word-break", "break-all break-all");
+test_invalid_value("word-break", "normal break-word");
+test_invalid_value("word-break", "break-word normal");
+test_invalid_value("word-break", "keep-all break-word");
+test_invalid_value("word-break", "break-all break-word");
+test_invalid_value("word-break", "word-break");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-break-valid.html b/testing/web-platform/tests/css/css-text/parsing/word-break-valid.html
new file mode 100644
index 0000000000..93c58e8557
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-break-valid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing word-break with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-break">
+<meta name="assert" content="word-break supports only the grammar 'normal | break-all| keep-all | manual | auto-phrase | break-word'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("word-break", "normal");
+test_valid_value("word-break", "break-all");
+test_valid_value("word-break", "keep-all");
+test_valid_value("word-break", "manual");
+test_valid_value("word-break", "auto-phrase");
+test_valid_value("word-break", "break-word");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-space-transform-computed.html b/testing/web-platform/tests/css/css-text/parsing/word-space-transform-computed.html
new file mode 100644
index 0000000000..2137305cec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-space-transform-computed.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().wordSpaceTransform</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<meta name="assert" content="word-space-transform computed value is specified keyword.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("word-space-transform", "none");
+test_computed_value("word-space-transform", "space");
+test_computed_value("word-space-transform", "ideographic-space");
+test_computed_value("word-space-transform", "space auto-phrase");
+test_computed_value("word-space-transform", "ideographic-space auto-phrase");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-space-transform-invalid.html b/testing/web-platform/tests/css/css-text/parsing/word-space-transform-invalid.html
new file mode 100644
index 0000000000..049bf1d0da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-space-transform-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing word-space-transform with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<meta name="assert" content="word-space-transform supports only the grammar 'none | [ space | ideographic-space ] && auto-phrase?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("word-space-transform", "auto");
+test_invalid_value("word-space-transform", "normal");
+test_invalid_value("word-space-transform", "spaces");
+test_invalid_value("word-space-transform", "space ideographic-space");
+test_invalid_value("word-space-transform", "auto-phrase");
+test_invalid_value("word-space-transform", "none auto-phrase");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-space-transform-valid.html b/testing/web-platform/tests/css/css-text/parsing/word-space-transform-valid.html
new file mode 100644
index 0000000000..2323931f53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-space-transform-valid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing word-space-transform with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<meta name="assert" content="word-space-transform supports the full grammar 'none | [ space | ideographic-space ] && auto-phrase?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("word-space-transform", "none");
+test_valid_value("word-space-transform", "space");
+test_valid_value("word-space-transform", "ideographic-space");
+test_valid_value("word-space-transform", "space auto-phrase");
+test_valid_value("word-space-transform", "ideographic-space auto-phrase");
+test_valid_value("word-space-transform", "auto-phrase space");
+test_valid_value("word-space-transform", "auto-phrase ideographic-space");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-spacing-computed.html b/testing/web-platform/tests/css/css-text/parsing/word-spacing-computed.html
new file mode 100644
index 0000000000..192dec6f7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-spacing-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().wordSpacing</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-spacing">
+<meta name="assert" content="word-spacing computed value is an absolute length.">
+<meta name="assert" content="'normal' computes to zero.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("word-spacing", "normal", "0px");
+
+test_computed_value("word-spacing", "10px");
+test_computed_value("word-spacing", "-20px");
+test_computed_value("word-spacing", "calc(10px - 0.5em)", "-10px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-spacing-invalid.html b/testing/web-platform/tests/css/css-text/parsing/word-spacing-invalid.html
new file mode 100644
index 0000000000..3a1c4ca487
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-spacing-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing word-spacing with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-spacing">
+<meta name="assert" content="word-spacing supports only the grammar 'normal | <length>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("word-spacing", "auto");
+test_invalid_value("word-spacing", "20%");
+
+test_invalid_value("word-spacing", "normal 10px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-spacing-valid.html b/testing/web-platform/tests/css/css-text/parsing/word-spacing-valid.html
new file mode 100644
index 0000000000..217b2488f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-spacing-valid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing word-spacing with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-spacing">
+<meta name="assert" content="word-spacing supports the full grammar 'normal | <length>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("word-spacing", "normal");
+
+test_valid_value("word-spacing", "10px");
+test_valid_value("word-spacing", "-20px");
+test_valid_value("word-spacing", "calc(2em + 3ex)");
+test_valid_value("word-spacing", "0", "0px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-wrap-computed.html b/testing/web-platform/tests/css/css-text/parsing/word-wrap-computed.html
new file mode 100644
index 0000000000..0f3639e2e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-wrap-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().wordWrap</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-wrap">
+<meta name="assert" content="word-wrap computed value is specified keyword.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("word-wrap", "normal");
+test_computed_value("word-wrap", "break-word");
+test_computed_value("word-wrap", "anywhere");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-wrap-invalid.html b/testing/web-platform/tests/css/css-text/parsing/word-wrap-invalid.html
new file mode 100644
index 0000000000..40890775ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-wrap-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing word-wrap with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-wrap">
+<meta name="assert" content="word-wrap supports only the grammar 'normal | break-word | anywhere'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("word-wrap", "auto");
+test_invalid_value("word-wrap", "normal break-word");
+test_invalid_value("word-wrap", "anywhere anywhere");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/parsing/word-wrap-valid.html b/testing/web-platform/tests/css/css-text/parsing/word-wrap-valid.html
new file mode 100644
index 0000000000..ce5731551a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/parsing/word-wrap-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing word-wrap with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-word-wrap">
+<meta name="assert" content="word-wrap supports the full grammar 'normal | break-word | anywhere'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("word-wrap", "normal");
+test_valid_value("word-wrap", "break-word");
+test_valid_value("word-wrap", "anywhere");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/removing-collapsible-crash.html b/testing/web-platform/tests/css/css-text/removing-collapsible-crash.html
new file mode 100644
index 0000000000..1930d36d5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/removing-collapsible-crash.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>CSS Text Test: Removing collapsible when overflowing cause Chrome to crash</title>
+<link rel="help" href="https://crbug.com/1132762">
+<style>
+    .test1 { word-spacing:-467616205px; }
+</style>
+<button>
+    <dfn class="test1" dir="rtl" >�
+(y<a id=
diff --git a/testing/web-platform/tests/css/css-text/removing-collapsible-spaces-before-float-crash.html b/testing/web-platform/tests/css/css-text/removing-collapsible-spaces-before-float-crash.html
new file mode 100644
index 0000000000..d1e5662672
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/removing-collapsible-spaces-before-float-crash.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>CSS Text Test: Removing collapsible space before a float element cause Chrome to crash</title>
+<link rel="help" href="https://crbug.com/1131470">
+<style type="text/css">
+    .CLASS9 {
+        zoom:1.3%;
+        padding:8589934592%;
+    }
+    .CLASS13 { float:left; }
+</style>
+<b class="CLASS9">
+>
+a C
+</b>
+<input class="CLASS13"/>
+c
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-ref.html
new file mode 100644
index 0000000000..46312eb7be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+</style>
+<link rel=mismatch href="shaping-000-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="ar" dir="rtl">ععع</div>
+<div class="ref" lang="ar" dir="rtl">ععع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-sanity-ref.html
new file mode 100644
index 0000000000..af43f98b0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-000-sanity-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;ع&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;ع&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-ref.html
new file mode 100644
index 0000000000..53a1093ace
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.text, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.color { color:blue; }
+</style>
+<link rel=mismatch href="shaping-001-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="color">&zwj;ع&zwj;</span>&zwj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="color">&zwj;ع&zwj;</span>&zwj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-sanity-ref.html
new file mode 100644
index 0000000000..802c65387c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-001-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.text, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.color { color:blue; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="color">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="color">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-ref.html
new file mode 100644
index 0000000000..1871724c1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+	font-family: 'csstest_noto';
+	src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+	}
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.fontweight { font-weight: bold; }
+</style>
+<link rel=mismatch href="shaping-002-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontweight">&zwj;ع&zwj;</span>&zwj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontweight">&zwj;ع&zwj;</span>&zwj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-sanity-ref.html
new file mode 100644
index 0000000000..5cb1200182
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-002-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+	font-family: 'csstest_noto';
+	src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+	}
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.fontweight { font-weight: bold; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="fontweight">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="fontweight">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-ref.html
new file mode 100644
index 0000000000..734e510af0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.fontstyle { font-style: italic; }
+</style>
+<link rel=mismatch href="shaping-003-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontstyle">&zwj;ع&zwj;</span>&zwj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontstyle">&zwj;ع&zwj;</span>&zwj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-sanity-ref.html
new file mode 100644
index 0000000000..6ca7f1c2df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-003-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.fontstyle { font-style: italic; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="fontstyle">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="fontstyle">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-ref.html
new file mode 100644
index 0000000000..42be6f8220
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.fontsizeplus { font-size:120%; }
+</style>
+<link rel=mismatch href="shaping-008-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsizeplus">&zwj;ع&zwj;</span>&zwj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsizeplus">&zwj;ع&zwj;</span>&zwj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-sanity-ref.html
new file mode 100644
index 0000000000..abad0b4f8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-008-sanity-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.fontsizeplus { font-size:120%; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="fontsizeplus">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="fontsizeplus">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-ref.html
new file mode 100644
index 0000000000..6ff0985ab9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.margin { margin: 0.5em; }
+</style>
+<link rel=mismatch href="shaping-009-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="margin">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="margin">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-sanity-ref.html
new file mode 100644
index 0000000000..b5545097a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-009-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.margin { margin: 0.5em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="margin">&zwj;ع&zwj;</span>&zwj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="margin">&zwj;ع&zwj;</span>&zwj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-ref.html
new file mode 100644
index 0000000000..18d3325625
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.padding { padding: 0.5em; }
+</style>
+<link rel=mismatch href="shaping-010-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="padding">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="padding">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-sanity-ref.html
new file mode 100644
index 0000000000..b9d951c887
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-010-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.padding { padding: 0.5em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="padding">&zwj;ع&zwj;</span>&zwj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="padding">&zwj;ع&zwj;</span>&zwj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-ref.html
new file mode 100644
index 0000000000..418b641e23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.border { border: 1px solid #ccc; }
+</style>
+<link rel=mismatch href="shaping-011-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="border">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="border">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-sanity-ref.html
new file mode 100644
index 0000000000..a57aadc301
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-011-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.border { border: 1px solid #ccc; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="border">&zwj;ع&zwj;</span>&zwj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="border">&zwj;ع&zwj;</span>&zwj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-ref.html
new file mode 100644
index 0000000000..8a2f7198a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+</style>
+<link rel=mismatch href="shaping-012-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;ع&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;ع&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-sanity-ref.html
new file mode 100644
index 0000000000..ce2a7ecbe5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-012-sanity-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ععع</div>
+<div class="ref" lang="ar" dir="rtl">ععع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-ref.html
new file mode 100644
index 0000000000..6555baf1c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+.styled { text-decoration: underline; text-decoration-skip-ink: none; }
+</style>
+<link rel=mismatch href="shaping-014-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-sanity-ref.html
new file mode 100644
index 0000000000..c47d28e223
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-sanity-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+.styled { text-decoration: underline; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-ref.html
new file mode 100644
index 0000000000..af931cd3c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { outline: 1px solid blue; }
+</style>
+<link rel=mismatch href="shaping-016-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-sanity-ref.html
new file mode 100644
index 0000000000..15debe37b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-016-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { outline: 1px solid blue; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-ref.html
new file mode 100644
index 0000000000..b5c4d4dcbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { color:blue; }
+</style>
+<link rel="mismatch" href="shaping-020-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-sanity-ref.html
new file mode 100644
index 0000000000..da3a1469be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-020-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { color:blue; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p>
+
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-ref.html
new file mode 100644
index 0000000000..c4e63eff6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { font-style:italic; }
+</style>
+<link rel="mismatch" href="shaping-021-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-sanity-ref.html
new file mode 100644
index 0000000000..103e38e6c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-021-sanity-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { font-style:italic; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-ref.html
new file mode 100644
index 0000000000..6db719d2c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { text-decoration: underline; }
+</style>
+<link rel="mismatch" href="shaping-022-sanity-ref.html">
+</head>
+<body>
+<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-sanity-ref.html
new file mode 100644
index 0000000000..fe28ab3a57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-022-sanity-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { text-decoration: underline; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwnj;<span class="styled">&zwnj;ߞ&zwnj;</span>&zwnj;ߞ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-ref.html
new file mode 100644
index 0000000000..35e6b75b4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="mismatch" href="shaping-023-sanity-ref.html">
+<link rel="mismatch" href="shaping-023-sanity-2-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; }
+/* the CSS above is not part of the test */
+.styled { color:blue; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwj;<span class="styled">&zwj;ᠨ&zwj;</span>&zwj;ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwj;<span class="styled">&zwj;ᠨ&zwj;</span>&zwj;ᠨ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-2-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-2-ref.html
new file mode 100644
index 0000000000..cbde30c641
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-2-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; text-orientation: upright;}
+/* the CSS above is not part of the test */
+.styled { color:blue; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-ref.html
new file mode 100644
index 0000000000..966579be1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-023-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; }
+/* the CSS above is not part of the test */
+.styled { color:blue; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-ref.html
new file mode 100644
index 0000000000..7f6cbf97a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="mismatch" href="shaping-024-sanity-ref.html">
+<link rel="mismatch" href="shaping-024-sanity-2-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; }
+/* the CSS above is not part of the test */
+.styled { font-style:italic; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwj;<span class="styled">&zwj;ᠨ&zwj;</span>&zwj;ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwj;<span class="styled">&zwj;ᠨ&zwj;</span>&zwj;ᠨ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-2-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-2-ref.html
new file mode 100644
index 0000000000..657478d9c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-2-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; text-orientation: upright;}
+/* the CSS above is not part of the test */
+.styled { font-style:italic; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-ref.html
new file mode 100644
index 0000000000..fe89eecf68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-024-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; }
+/* the CSS above is not part of the test */
+.styled { font-style:italic; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-ref.html
new file mode 100644
index 0000000000..0418c263eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="mismatch" href="shaping-025-sanity-ref.html">
+<link rel="mismatch" href="shaping-025-sanity-2-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; }
+/* the CSS above is not part of the test */
+.styled { text-decoration:underline; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwj;<span class="styled">&zwj;ᠨ&zwj;</span>&zwj;ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwj;<span class="styled">&zwj;ᠨ&zwj;</span>&zwj;ᠨ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-2-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-2-ref.html
new file mode 100644
index 0000000000..95e0ba2172
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-2-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; text-orientation: upright;}
+/* the CSS above is not part of the test */
+.styled { text-decoration:underline; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-ref.html
new file mode 100644
index 0000000000..a75dd158d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-025-sanity-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>reference</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; }
+/* the CSS above is not part of the test */
+.styled { text-decoration:underline; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwnj;<span class="styled">&zwnj;ᠨ&zwnj;</span>&zwnj;ᠨ</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-001-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-001-ref.html
new file mode 100644
index 0000000000..f1b3ee100d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>shaping: Arabic diacritics on NBSP - reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style type="text/css">
+@font-face {
+    font-family: ArabicTest;
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+}
+.test {
+    font: 120px/2 ArabicTest, sans-serif;
+}
+</style>
+</head>
+<body>
+    <p class="instructions">Test passes if the two lines are rendered identically,
+        with the superscript alef (&#x627;) directly above the raised hamza (&#x621;).</p>
+    <!-- Order of lines is reversed from the testcase; if they render identically
+         they should still match perfectly. -->
+    <div class=test>a<span dir=rtl>&nbsp;&#x670;&#x654;</span>z</div>
+    <div class=test>a<span dir=rtl>&nbsp;&#x654;&#x670;</span>z</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-002-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-002-ref.html
new file mode 100644
index 0000000000..d145e72ed8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-arabic-diacritics-002-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>shaping: Arabic diacritics on NBSP - reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style type="text/css">
+@font-face {
+    font-family: ArabicTest;
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+}
+.test {
+    font: 120px/2 ArabicTest, sans-serif;
+}
+.test span {
+    padding: .1em .05em 0;
+    background: black;
+}
+</style>
+</head>
+<body>
+    <p class="instructions">Test passes if the Arabic diacritics are entirely hidden by the black boxes.</p>
+    <!-- Diacritics removed from the test lines, as they should have been completely obscured
+         by the black background anyhow. -->
+    <div class=test>a<span dir=rtl>&nbsp;</span>z</div>
+    <div class=test>a<span dir=rtl>&nbsp;</span>z</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-000-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-000-ref.html
new file mode 100644
index 0000000000..7b92b83625
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-000-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>ligatures: span</title>
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters join.</p>
+<div class="ref" lang="ar" dir="rtl">علا</div>
+<div class="ref" lang="ar" dir="rtl">علا</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-001-ref.html b/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-001-ref.html
new file mode 100644
index 0000000000..df71a1d019
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping_lig-001-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: test for Chromium bug 1304876</title>
+<style type="text/css">
+@font-face {
+    font-family: GentiumPlus;
+    src: url('/fonts/GentiumPlus-R.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+.test {
+    font-family: GentiumPlus;
+    font-size: 18pt;
+    width: 300px;
+    border: 1px solid black;
+    margin: 1em;
+}
+.line {
+    display: block;
+    white-space: nowrap;
+}
+/* the CSS above is not part of the test */
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the word "office" is rendered without repeated letters.</p>
+<div class="test">
+    <div class="line">Sanitary measures in the</div>
+    <div class="line">office ought be adequately</div>
+    <div class="line"><b>maintained</b>.</div>
+</div>
+<div class="test">
+    <div class="line">Sanitary measures in the</div>
+    <div class="line">office ought be adequately</div>
+    <div class="line"><b>maintained</b>.</div>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-000.html b/testing/web-platform/tests/css/css-text/shaping/shaping-000.html
new file mode 100644
index 0000000000..cd682ac733
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-000.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: span</title>
+<meta name="assert" content="Shaping must not be broken across inline box boundaries with no styling change.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-000-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+<div class="test" lang="ar" dir="rtl">ع<span>ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ععع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-001.html b/testing/web-platform/tests/css/css-text/shaping/shaping-001.html
new file mode 100644
index 0000000000..2068aab769
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: colour</title>
+<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for changes to colour.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-001-ref.html">
+<meta name="flags" content="should">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.color { color:blue; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="color">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="color">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-002.html b/testing/web-platform/tests/css/css-text/shaping/shaping-002.html
new file mode 100644
index 0000000000..282e7d186d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: font-weight</title>
+<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for changes in font weight.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-002-ref.html">
+<meta name="flags" content="should">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    font-weight: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.fontweight { font-weight: bold; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="fontweight">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontweight">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-003.html b/testing/web-platform/tests/css/css-text/shaping/shaping-003.html
new file mode 100644
index 0000000000..58602316f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-003.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: font-style</title>
+<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for changes in font style.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-003-ref.html">
+<meta name="flags" content="should">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    font-style: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.fontstyle { font-style: italic; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="fontstyle">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontstyle">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-004.html b/testing/web-platform/tests/css/css-text/shaping/shaping-004.html
new file mode 100644
index 0000000000..4eaa25ad4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-004.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: margin 0</title>
+<meta name="assert" content="Shaping must not be broken across inline box boundaries when margin is set to 0.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-000-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.margin { margin:0; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="margin">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="margin">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-005.html b/testing/web-platform/tests/css/css-text/shaping/shaping-005.html
new file mode 100644
index 0000000000..809ea2f41c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-005.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: padding 0</title>
+<meta name="assert" content="Shaping must not be broken across inline box boundaries when padding is set to 0.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-000-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.padding { padding:0; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="padding">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="padding">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-006.html b/testing/web-platform/tests/css/css-text/shaping/shaping-006.html
new file mode 100644
index 0000000000..21a13c0487
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-006.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: border 0</title>
+<meta name="assert" content="Shaping must not be broken across inline box boundaries when border is set to 0.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-000-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.margin { margin:0; }
+.padding { padding:0; }
+.border { border:0; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="border">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="border">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-007.html b/testing/web-platform/tests/css/css-text/shaping/shaping-007.html
new file mode 100644
index 0000000000..a4f3dc10ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-007.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: font size 100%</title>
+<meta name="assert" content="Shaping must not be broken across inline box boundaries when font-size is set to 100%.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-000-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.fontsize { font-size:100%; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="fontsize">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsize">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-008.html b/testing/web-platform/tests/css/css-text/shaping/shaping-008.html
new file mode 100644
index 0000000000..509645b349
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-008.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: font size 120%</title>
+<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for changes to font-size.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-008-ref.html">
+<meta name="flags" content="should">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.fontsizeplus { font-size:120%; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="fontsizeplus">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsizeplus">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-009.html b/testing/web-platform/tests/css/css-text/shaping/shaping-009.html
new file mode 100644
index 0000000000..4d1d1f7c97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-009.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: margin &gt; 0</title>
+<meta name="assert" content="Shaping MUST be broken across inline box boundaries when marginis set to a non-zero value.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-009-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.margin { margin: 0.5em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="margin">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="margin">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-010.html b/testing/web-platform/tests/css/css-text/shaping/shaping-010.html
new file mode 100644
index 0000000000..cd318542bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-010.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: padding &gt; 0</title>
+<meta name="assert" content="Shaping MUST be broken across inline box boundaries when padding is set to a non-zero value.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-010-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.padding { padding: 0.5em; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="padding">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="padding">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-011.html b/testing/web-platform/tests/css/css-text/shaping/shaping-011.html
new file mode 100644
index 0000000000..64b464e80b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-011.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: border &gt; 0</title>
+<meta name="assert" content="Shaping MUST be broken across inline box boundaries when border is set to a non-zero value.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-011-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.border { border: 1px solid #ccc; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="border">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="border">&zwnj;ع&zwnj;</span>&zwnj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-012.html b/testing/web-platform/tests/css/css-text/shaping/shaping-012.html
new file mode 100644
index 0000000000..6ae3a9ba2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-012.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: isolation, bdi</title>
+<meta name="assert" content="Shaping MUST be broken across inline box boundaries when isolation occurs.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-012-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<bdi>ع</bdi>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
+<!-- Notes:
+This test only works if bdi is supported by the browser.
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-013.html b/testing/web-platform/tests/css/css-text/shaping/shaping-013.html
new file mode 100644
index 0000000000..e9b3359e78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-013.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: isolation, auto</title>
+<meta name="assert" content="Shaping MUST be broken across inline box boundaries when isolation occurs.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-012-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box DON'T join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span dir="auto">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;ع&zwnj;ع</div>
+<!-- Notes:
+This test only works if dir=auto is supported by the browser.
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-014.html b/testing/web-platform/tests/css/css-text/shaping/shaping-014.html
new file mode 100644
index 0000000000..b817f2c094
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-014.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: text-decoration</title>
+<meta name="assert" content="Shaping must not be broken across inline box boundaries for changes in text-decoration.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-014-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { text-decoration: underline; text-decoration-skip-ink: none; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-016.html b/testing/web-platform/tests/css/css-text/shaping/shaping-016.html
new file mode 100644
index 0000000000..b180056510
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-016.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: outline</title>
+<meta name="assert" content="Shaping must not be broken across inline box boundaries for changes in outline.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-016-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { outline: 1px solid blue; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-017.html b/testing/web-platform/tests/css/css-text/shaping/shaping-017.html
new file mode 100644
index 0000000000..e4dc68a126
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-017.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: em element</title>
+<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for the em element.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-003-ref.html">
+<meta name="flags" content="should">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    font-style: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { font-style: italic; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<em>ع</em>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+It also assumes that the default rendering for the em element is italic.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-018.html b/testing/web-platform/tests/css/css-text/shaping/shaping-018.html
new file mode 100644
index 0000000000..fc44d6e640
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-018.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: b element</title>
+<meta name="assert" content="Arabic shaping should not be broken across inline box boundaries for the b element.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-002-ref.html">
+<meta name="flags" content="should">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    font-weight: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { font-weight: bold; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="ar" dir="rtl">ع<b>ع</b>ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+It also assumes that the default rendering for the b element is bold.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-020.html b/testing/web-platform/tests/css/css-text/shaping/shaping-020.html
new file mode 100644
index 0000000000..a88b339e34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-020.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>n'ko, colour</title>
+<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to colour in N'Ko.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="help" href="http://www.unicode.org/versions/Unicode12.0.0/ch19.pdf">
+<link rel="match" href="reference/shaping-020-ref.html">
+<meta name="flags" content="should">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { color:blue; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</div>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
+<!-- Notes:
+This test uses the Noto Sans N'Ko font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-021.html b/testing/web-platform/tests/css/css-text/shaping/shaping-021.html
new file mode 100644
index 0000000000..b94a39e4db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-021.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>n'ko, font-style</title>
+<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to font-style in N'Ko.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-021-ref.html">
+<meta name="flags" content="should">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { font-style:italic; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p>
+
+<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</div>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
+<!-- Notes:
+This test uses the Noto Sans N'Ko font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-022.html b/testing/web-platform/tests/css/css-text/shaping/shaping-022.html
new file mode 100644
index 0000000000..131b23253f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-022.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>n'ko, text-decoration</title>
+<meta name="assert" content="Shaping must not be broken across inline box boundaries for changes to text-decoration in N'Ko.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-022-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansNko-regular-webfont.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+.styled { text-decoration: underline; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three N'Ko characters in each box join, making the two boxes identical.</p>
+<div class="test" lang="nqo" dir="rtl">ߞ<span class="styled">ߞ</span>ߞ</div>
+<div class="ref" lang="nqo" dir="rtl">ߞ&zwj;<span class="styled">&zwj;ߞ&zwj;</span>&zwj;ߞ</div>
+<!-- Notes:
+This test uses the Noto Sans N'Ko font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-023.html b/testing/web-platform/tests/css/css-text/shaping/shaping-023.html
new file mode 100644
index 0000000000..67009d57a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-023.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>mongolian, colour</title>
+<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to colour in Mongolian.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-023-ref.html">
+<meta name="flags" content="should">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; float:left; }
+/* the CSS above is not part of the test */
+.styled { color:blue; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="test" lang="mn" dir="rtl">ᠨ<span class="styled">ᠨ</span>ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwj;<span class="styled">&zwj;ᠨ&zwj;</span>&zwj;ᠨ</div>
+<!-- Notes:
+This test uses the Noto Sans Mongolian font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-024.html b/testing/web-platform/tests/css/css-text/shaping/shaping-024.html
new file mode 100644
index 0000000000..3ab2bbe951
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-024.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>mongolian, font-style</title>
+<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to font-style in Mongolian.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-024-ref.html">
+<meta name="flags" content="should">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; }
+/* the CSS above is not part of the test */
+.styled { font-style:italic; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="test" lang="mn" dir="rtl">ᠨ<span class="styled">ᠨ</span>ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwj;<span class="styled">&zwj;ᠨ&zwj;</span>&zwj;ᠨ</div>
+<!-- Notes:
+This test uses the Noto Sans Mongolian font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-025.html b/testing/web-platform/tests/css/css-text/shaping/shaping-025.html
new file mode 100644
index 0000000000..c888784cd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-025.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>mongolian, text-decoration</title>
+<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to text-decoration in Mongolian.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping-025-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; writing-mode: vertical-lr; }
+/* the CSS above is not part of the test */
+.styled { text-decoration:underline; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Mongolian characters in each box join, making the two boxes identical.</p>
+<div class="test" lang="mn" dir="rtl">ᠨ<span class="styled">ᠨ</span>ᠨ</div>
+<div class="ref" lang="mn" dir="rtl">ᠨ&zwj;<span class="styled">&zwj;ᠨ&zwj;</span>&zwj;ᠨ</div>
+<!-- Notes:
+This test uses the Noto Sans Mongolian font to control variables related to font choice.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-001.html b/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-001.html
new file mode 100644
index 0000000000..28f9a1e03d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>shaping: Arabic diacritics on NBSP</title>
+<meta name="assert" content="Shaping must work for diacritics rendered on NBSP as base">
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://www.unicode.org/versions/Unicode13.0.0/ch02.pdf">
+<link rel="help" href="https://www.unicode.org/reports/tr53/">
+<link rel="match" href="reference/shaping-arabic-diacritics-001-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-2">
+<style type="text/css">
+@font-face {
+    font-family: ArabicTest;
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+}
+.test {
+    font: 120px/2 ArabicTest, sans-serif;
+}
+</style>
+</head>
+<body>
+    <p class="instructions">Test passes if the two lines are rendered identically,
+        with the superscript alef (&#x627;) directly above the raised hamza (&#x621;).</p>
+    <!-- The Arabic characters here are ARABIC HAMZA ABOVE and ARABIC LETTER
+         SUPERSCRIPT ALEF, and according to UTR53 should always be sorted
+         as <hamza,alef> for rendering regardless of underlying order. -->
+    <div class=test>a<span dir=rtl>&nbsp;&#x654;&#x670;</span>z</div>
+    <div class=test>a<span dir=rtl>&nbsp;&#x670;&#x654;</span>z</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-002.html b/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-002.html
new file mode 100644
index 0000000000..ec252ef5ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-arabic-diacritics-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>shaping: Arabic diacritics on NBSP</title>
+<meta name="assert" content="Shaping must work for diacritics rendered on NBSP as base">
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://www.unicode.org/versions/Unicode13.0.0/ch02.pdf">
+<link rel="help" href="https://www.unicode.org/reports/tr53/">
+<link rel="match" href="reference/shaping-arabic-diacritics-002-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: ArabicTest;
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+}
+.test {
+    font: 120px/2 ArabicTest, sans-serif;
+}
+.test span {
+    padding: .1em .05em 0;
+    background: black;
+}
+</style>
+</head>
+<body>
+    <p class="instructions">Test passes if the Arabic diacritics are entirely hidden by the black boxes.</p>
+    <!-- The Arabic characters here are ARABIC HAMZA ABOVE and ARABIC LETTER
+         SUPERSCRIPT ALEF, and (using the NotoNaskhArabic font) they should both
+         be entirely within the (padded) width of the NBSP, if they are properly
+         positioned (regardless of their order). -->
+    <div class=test>a<span dir=rtl>&nbsp;&#x654;&#x670;</span>z</div>
+    <div class=test>a<span dir=rtl>&nbsp;&#x670;&#x654;</span>z</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping_lig-000.html b/testing/web-platform/tests/css/css-text/shaping/shaping_lig-000.html
new file mode 100644
index 0000000000..6b91835059
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping_lig-000.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>ligatures: span</title>
+<meta name="assert" content="Markup inside a ligature with no styling will NOT break joining behaviour.">
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#boundary-shaping">
+<link rel="match" href="reference/shaping_lig-000-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    }
+.test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
+/* the CSS above is not part of the test */
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the three Arabic characters join.</p>
+<div class="test" lang="ar" dir="rtl">ع<span>ل</span>ا</div>
+<div class="ref" lang="ar" dir="rtl">علا</div>
+<!-- Notes:
+This test uses the Noto Naskh Arabic font to control variables related to font choice.
+-->
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/shaping/shaping_lig-001.html b/testing/web-platform/tests/css/css-text/shaping/shaping_lig-001.html
new file mode 100644
index 0000000000..059b8df724
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping_lig-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>shaping: test for Chromium bug 1304876</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1304876">
+<link rel="match" href="reference/shaping_lig-001-ref.html">
+<style type="text/css">
+@font-face {
+    font-family: GentiumPlus;
+    src: url('/fonts/GentiumPlus-R.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+.test {
+    font-family: GentiumPlus;
+    font-size: 18pt;
+    width: 300px;
+    border: 1px solid black;
+    margin: 1em;
+}
+/* the CSS above is not part of the test */
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the word "office" is rendered without repeated letters.</p>
+<div class="test">Sanitary measures in the office ought be adequately <b>maintained</b>.</div>
+<div class="test">Sanitary measures in the<br>office ought be adequately <b>maintained</b>.</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/support/1x1-green.png b/testing/web-platform/tests/css/css-text/support/1x1-green.png
new file mode 100644
index 0000000000..b98ca0ba0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/1x1-green.png
diff --git a/testing/web-platform/tests/css/css-text/support/1x1-lime.png b/testing/web-platform/tests/css/css-text/support/1x1-lime.png
new file mode 100644
index 0000000000..cb397fb090
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/1x1-lime.png
diff --git a/testing/web-platform/tests/css/css-text/support/1x1-maroon.png b/testing/web-platform/tests/css/css-text/support/1x1-maroon.png
new file mode 100644
index 0000000000..3f86b07219
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/1x1-maroon.png
diff --git a/testing/web-platform/tests/css/css-text/support/1x1-navy.png b/testing/web-platform/tests/css/css-text/support/1x1-navy.png
new file mode 100644
index 0000000000..9b9a03955b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/1x1-navy.png
diff --git a/testing/web-platform/tests/css/css-text/support/1x1-red.png b/testing/web-platform/tests/css/css-text/support/1x1-red.png
new file mode 100644
index 0000000000..6bd73ac101
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/1x1-red.png
diff --git a/testing/web-platform/tests/css/css-text/support/1x1-white.png b/testing/web-platform/tests/css/css-text/support/1x1-white.png
new file mode 100644
index 0000000000..dd43faec54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/1x1-white.png
diff --git a/testing/web-platform/tests/css/css-text/support/60x60-gg-rr.png b/testing/web-platform/tests/css/css-text/support/60x60-gg-rr.png
new file mode 100644
index 0000000000..84f5b2a4f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/60x60-gg-rr.png
diff --git a/testing/web-platform/tests/css/css-text/support/60x60-green.png b/testing/web-platform/tests/css/css-text/support/60x60-green.png
new file mode 100644
index 0000000000..b3c8cf3eb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/60x60-green.png
diff --git a/testing/web-platform/tests/css/css-text/support/a-green.css b/testing/web-platform/tests/css/css-text/support/a-green.css
new file mode 100644
index 0000000000..b0dbb071d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/a-green.css
@@ -0,0 +1 @@
+.a { color: green; }
diff --git a/testing/web-platform/tests/css/css-text/support/b-green.css b/testing/web-platform/tests/css/css-text/support/b-green.css
new file mode 100644
index 0000000000..a0473f5ca2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/b-green.css
@@ -0,0 +1 @@
+.b { color: green; }
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/support/c-red.css b/testing/web-platform/tests/css/css-text/support/c-red.css
new file mode 100644
index 0000000000..d4ba5c64e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/c-red.css
@@ -0,0 +1 @@
+.c { color: red; }
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/support/cat.png b/testing/web-platform/tests/css/css-text/support/cat.png
new file mode 100644
index 0000000000..85dd732481
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/cat.png
diff --git a/testing/web-platform/tests/css/css-text/support/emphasis-black.png b/testing/web-platform/tests/css/css-text/support/emphasis-black.png
new file mode 100644
index 0000000000..01d99006ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/emphasis-black.png
diff --git a/testing/web-platform/tests/css/css-text/support/emphasis-blue.png b/testing/web-platform/tests/css/css-text/support/emphasis-blue.png
new file mode 100644
index 0000000000..5d6942be69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/emphasis-blue.png
diff --git a/testing/web-platform/tests/css/css-text/support/get-char-advances.js b/testing/web-platform/tests/css/css-text/support/get-char-advances.js
new file mode 100644
index 0000000000..0fd7332c4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/get-char-advances.js
@@ -0,0 +1,70 @@
+'use strict';
+
+/**
+ * Returns an array of advances for all characters in the descendants
+ * of the specified element.
+ *
+ * Technically speaking, advances and glyph bounding boxes are different things,
+ * and advances are not exposed. This function computes approximate values from
+ * bounding boxes.
+ */
+function getCharAdvances(element) {
+  const style = getComputedStyle(element);
+  const is_vertical = style.writingMode.startsWith('vertical');
+  const range = document.createRange();
+  const all_bounds = []
+
+  function walk(element) {
+    for (const node of element.childNodes) {
+      const nodeType = node.nodeType;
+      if (nodeType === Node.TEXT_NODE) {
+        const text = node.nodeValue;
+        for (let i = 0; i < text.length; ++i) {
+          range.setStart(node, i);
+          range.setEnd(node, i + 1);
+          let bounds = range.getBoundingClientRect();
+          // Transpose if it's in vertical flow. Guarantee that top < bottom
+          // and left < right are always true.
+          if (is_vertical) {
+            bounds = {
+              left: bounds.top,
+              top: bounds.left,
+              right: bounds.bottom,
+              bottom: bounds.right
+            };
+          }
+          all_bounds.push(bounds);
+        }
+      } else if (nodeType === Node.ELEMENT_NODE) {
+        walk(node);
+      }
+    }
+  }
+  walk(element);
+  all_bounds.sort(function(bound_a, bound_b) {
+    if (bound_a.bottom <= bound_b.top) {
+      return -1;
+    }
+    if (bound_b.bottom <= bound_a.top) {
+      return 1;
+    }
+    return bound_a.left - bound_b.left;
+  });
+  let origin = undefined;
+  let blockEnd = -1;
+  const advances = [];
+  for (let bounds of all_bounds) {
+    // Check if this is on the same line.
+    if (bounds.top >= blockEnd) {
+      origin = undefined;
+      blockEnd = bounds.bottom;
+    }
+    // For the first character, the left bound is closest to the origin.
+    if (origin === undefined)
+      origin = bounds.left;
+    // The right bound is a good approximation of the next origin.
+    advances.push(bounds.right - origin);
+    origin = bounds.right;
+  }
+  return advances;
+}
diff --git a/testing/web-platform/tests/css/css-text/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/css-text/support/pattern-grg-rgr-grg.png
new file mode 100644
index 0000000000..9b88fbd811
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/pattern-grg-rgr-grg.png
diff --git a/testing/web-platform/tests/css/css-text/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/css-text/support/pattern-grg-rrg-rgg.png
new file mode 100644
index 0000000000..fcf4f3fd7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/pattern-grg-rrg-rgg.png
diff --git a/testing/web-platform/tests/css/css-text/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/css-text/support/pattern-rgr-grg-rgr.png
new file mode 100644
index 0000000000..d454e3a630
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/pattern-rgr-grg-rgr.png
diff --git a/testing/web-platform/tests/css/css-text/support/pattern-tr.png b/testing/web-platform/tests/css/css-text/support/pattern-tr.png
new file mode 100644
index 0000000000..8b4b25364e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/pattern-tr.png
diff --git a/testing/web-platform/tests/css/css-text/support/ruler-h-50%.png b/testing/web-platform/tests/css/css-text/support/ruler-h-50%.png
new file mode 100644
index 0000000000..cf2eea6b43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/ruler-h-50%.png
diff --git a/testing/web-platform/tests/css/css-text/support/ruler-h-50px.png b/testing/web-platform/tests/css/css-text/support/ruler-h-50px.png
new file mode 100644
index 0000000000..9f46583665
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/ruler-h-50px.png
diff --git a/testing/web-platform/tests/css/css-text/support/ruler-v-100px.png b/testing/web-platform/tests/css/css-text/support/ruler-v-100px.png
new file mode 100644
index 0000000000..a837eca222
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/ruler-v-100px.png
diff --git a/testing/web-platform/tests/css/css-text/support/ruler-v-50px.png b/testing/web-platform/tests/css/css-text/support/ruler-v-50px.png
new file mode 100644
index 0000000000..8414102802
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/ruler-v-50px.png
diff --git a/testing/web-platform/tests/css/css-text/support/square-purple.png b/testing/web-platform/tests/css/css-text/support/square-purple.png
new file mode 100644
index 0000000000..0f522d7872
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/square-purple.png
diff --git a/testing/web-platform/tests/css/css-text/support/square-teal.png b/testing/web-platform/tests/css/css-text/support/square-teal.png
new file mode 100644
index 0000000000..e567f51b91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/square-teal.png
diff --git a/testing/web-platform/tests/css/css-text/support/square-white.png b/testing/web-platform/tests/css/css-text/support/square-white.png
new file mode 100644
index 0000000000..5853cbb238
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/square-white.png
diff --git a/testing/web-platform/tests/css/css-text/support/support/README b/testing/web-platform/tests/css/css-text/support/support/README
new file mode 100644
index 0000000000..ea8cb9ef35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/support/README
@@ -0,0 +1,4 @@
+The swatch-green.png file in this directory is really a RED swatch,
+and the swatch-red.png file is really a green swatch.
+
+This directory is used to test relative URIs.
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/support/support/swatch-green.png b/testing/web-platform/tests/css/css-text/support/support/swatch-green.png
new file mode 100644
index 0000000000..1caf25c992
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/support/swatch-green.png
diff --git a/testing/web-platform/tests/css/css-text/support/support/swatch-red.png b/testing/web-platform/tests/css/css-text/support/support/swatch-red.png
new file mode 100644
index 0000000000..0aa79b0c86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/support/swatch-red.png
diff --git a/testing/web-platform/tests/css/css-text/support/swatch-blue.png b/testing/web-platform/tests/css/css-text/support/swatch-blue.png
new file mode 100644
index 0000000000..bf2759634d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/swatch-blue.png
diff --git a/testing/web-platform/tests/css/css-text/support/swatch-green.png b/testing/web-platform/tests/css/css-text/support/swatch-green.png
new file mode 100644
index 0000000000..0aa79b0c86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/swatch-green.png
diff --git a/testing/web-platform/tests/css/css-text/support/swatch-lime.png b/testing/web-platform/tests/css/css-text/support/swatch-lime.png
new file mode 100644
index 0000000000..55fd7fdaed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/swatch-lime.png
diff --git a/testing/web-platform/tests/css/css-text/support/swatch-orange.png b/testing/web-platform/tests/css/css-text/support/swatch-orange.png
new file mode 100644
index 0000000000..d3cd498b52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/swatch-orange.png
diff --git a/testing/web-platform/tests/css/css-text/support/swatch-red.png b/testing/web-platform/tests/css/css-text/support/swatch-red.png
new file mode 100644
index 0000000000..1caf25c992
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/swatch-red.png
diff --git a/testing/web-platform/tests/css/css-text/support/swatch-white.png b/testing/web-platform/tests/css/css-text/support/swatch-white.png
new file mode 100644
index 0000000000..1a7d4323d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/swatch-white.png
diff --git a/testing/web-platform/tests/css/css-text/support/swatch-yellow.png b/testing/web-platform/tests/css/css-text/support/swatch-yellow.png
new file mode 100644
index 0000000000..1591aa0e2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/swatch-yellow.png
diff --git a/testing/web-platform/tests/css/css-text/support/test-bl.png b/testing/web-platform/tests/css/css-text/support/test-bl.png
new file mode 100644
index 0000000000..904e24e996
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/test-bl.png
diff --git a/testing/web-platform/tests/css/css-text/support/test-br.png b/testing/web-platform/tests/css/css-text/support/test-br.png
new file mode 100644
index 0000000000..f413ff5c1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/test-br.png
diff --git a/testing/web-platform/tests/css/css-text/support/test-inner-half-size.png b/testing/web-platform/tests/css/css-text/support/test-inner-half-size.png
new file mode 100644
index 0000000000..e473bf80ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/test-inner-half-size.png
diff --git a/testing/web-platform/tests/css/css-text/support/test-outer.png b/testing/web-platform/tests/css/css-text/support/test-outer.png
new file mode 100644
index 0000000000..82eeace7fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/test-outer.png
diff --git a/testing/web-platform/tests/css/css-text/support/test-tl.png b/testing/web-platform/tests/css/css-text/support/test-tl.png
new file mode 100644
index 0000000000..f6ac0ef7e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/test-tl.png
diff --git a/testing/web-platform/tests/css/css-text/support/test-tr.png b/testing/web-platform/tests/css/css-text/support/test-tr.png
new file mode 100644
index 0000000000..59843ae54b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/support/test-tr.png
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-min-rendered-width-1-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-min-rendered-width-1-ref.html
new file mode 100644
index 0000000000..e154e0ca62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-min-rendered-width-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Text Test: minimum rendered width of tab character</title>
+  <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+    span { background-color: yellow; display: inline-block; }
+    pre { position: absolute; top: 0; font: 16px Ahem; }
+    tt { font: 16px monospace; }
+  </style>
+</head>
+<body>
+<pre>
+</pre>
+<pre>
+</pre>
+<script>
+  let pre = document.getElementsByTagName("pre")[0];
+  let test = "";
+  for (i = 7.0; i <= 8.125; i += 0.125) {
+    test += `<span style="width:${i}ch"><tt>${i}ch</tt></span>\n`;
+  }
+  pre.innerHTML = test;
+  pre = document.getElementsByTagName("pre")[1];
+  test = "";
+  for (i = 0; i < 5; i++) {
+    test += `\t<tt>foo</tt>\n`;
+  }
+  for (i = 0; i < 5; i++) {
+    test += `\t\t<tt>foo</tt>\n`;
+  }
+  pre.innerHTML = test;
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-min-rendered-width-1.html b/testing/web-platform/tests/css/css-text/tab-size/tab-min-rendered-width-1.html
new file mode 100644
index 0000000000..e4cd2afaf1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-min-rendered-width-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Text Test: minimum rendered width of tab character</title>
+  <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+  <link rel="reviewer" title="Xidorn Quan" href="https://www.upsuper.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+  <link rel="match" href="tab-min-rendered-width-1-ref.html">
+  <meta name="assert" content="If [rendered width of tab would be] less than 0.5ch, then the subsequent tab stop is used instead.">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+    span { background-color: yellow; display: inline-block; }
+    /* Using 16px Ahem means that the 'ch' unit will be evenly divisible by 8 (for the 0.125ch
+       increment used below) without running into floating-point accuracy limitations */
+    pre { position: absolute; top: 0; font: 16px Ahem; }
+    tt { font: 16px monospace; }
+  </style>
+</head>
+<body>
+<pre>
+</pre>
+<script>
+  let pre = document.getElementsByTagName("pre")[0];
+  let test = "";
+  for (i = 7.0; i <= 8.125; i += 0.125) {
+    test += `<span style="width:${i}ch"><tt>${i}ch</tt></span>&#9;<tt>foo</tt>\n`;
+  }
+  pre.innerHTML = test;
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-block-ancestor-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-block-ancestor-ref.html
new file mode 100644
index 0000000000..bb1cdc93a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-block-ancestor-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+    font: 16px monospace;
+    white-space: pre;
+}
+b {
+    font: bold 16px monospace;
+}
+</style>
+
+<p>Test passes if the five “A” letters below are vertically aligned with each other.
+
+<div>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>A</b>
+</div>
+<div>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>A</b>
+</div>
+<div>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>A</b>
+</div>
+<div>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>A</b>
+</div>
+<div>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>A</b>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-block-ancestor.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-block-ancestor.html
new file mode 100644
index 0000000000..b295382a2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-block-ancestor.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: tab-size based on block ancestor's space</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="match" href="tab-size-block-ancestor-ref.html">
+<meta name="assert" content="tab width is based on space character in the block ancestor">
+<style>
+div {
+    font: 16px monospace;
+    white-space: pre;
+    tab-size: 10;
+}
+.test1 span {
+    font-size: 1px;
+}
+.test2 span {
+    font-size: 10px;
+}
+.test3 span {
+    tab-size: 5;
+}
+.test4 span {
+    font-size: 10px;
+    tab-size: 2.5;
+}
+b {
+    font: bold 16px monospace;
+}
+</style>
+
+<p>Test passes if the five “A” letters below are vertically aligned with each other.
+
+<div>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>A</b><!-- indented by 10 spaces -->
+</div>
+<div class=test1>
+<span>&#9;<b>A</b></span>
+</div>
+<div class=test2>
+<span>&#9;<b>A</b></span>
+</div>
+<div class=test3>
+<span>&#9;&#9;<b>A</b></span>
+</div>
+<div class=test4>
+<span>&#9;&#9;&#9;&#9;<b>A</b></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-computed-value-001.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-computed-value-001.html
new file mode 100644
index 0000000000..e0946135ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-computed-value-001.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: computed value of 'tab-size'</title>
+
+  <!--
+
+  Issue 463: [css-text] The computed value and animation type of tab-size
+  https://github.com/w3c/csswg-drafts/issues/463
+
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#tab-size-property">
+
+  <meta content="This test checks that the computed value of 'tab-size' is a number when it is specified as such or is a length (absolute or relative) when it is specified as such." name="assert">
+
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <script src="/resources/testharness.js"></script>
+
+  <script src="/resources/testharnessreport.js"></script>
+
+  <style>
+  div#target
+    {
+      font-family: Ahem;
+      font-size: 20px;
+    }
+  </style>
+
+  <div id="target">A</div>
+
+  <div id="log"></div>
+
+  <script>
+  function startTesting()
+  {
+
+  var targetElement = document.getElementById("target");
+
+    function verifyComputedStyle(property_name, specified_value, expected_value)
+    {
+
+    test(function()
+      {
+
+      targetElement.style.setProperty(property_name, "initial");
+
+      /*
+      The purpose of setting the property to its initial value
+      is to act as a fallback value in case the specified value
+      fails. Since we are running 11 consecutive tests on the
+      same element, then it is necessary to 'reset' its property
+      to an initial value.
+      */
+
+      targetElement.style.setProperty(property_name, specified_value);
+
+      assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
+
+      }, `testing ${property_name}: ${specified_value}`);
+    }
+
+    function compareValueCloseTo(property_name, specified_value, epsilon, expected_value)
+    {
+
+    test(function()
+      {
+
+      targetElement.style.setProperty(property_name, "initial");
+
+      targetElement.style.setProperty(property_name, specified_value);
+
+      var computedSpecifiedValue = parseFloat(getComputedStyle(targetElement)[property_name]);
+
+      assert_true(isFinite(computedSpecifiedValue)); /* We can not accept NaN as value */
+
+      targetElement.style.setProperty(property_name, expected_value);
+
+      var computedExpectedValue = parseFloat(getComputedStyle(targetElement)[property_name]);
+
+      assert_array_approx_equals(computedSpecifiedValue, computedExpectedValue, epsilon);
+
+    }, `testing ${property_name}: ${specified_value}`);
+
+  }
+
+    verifyComputedStyle("tab-size", "4", "4");
+
+ /* verifyComputedStyle(property_name, initial_value, specified_value, expected_value) */
+
+  /* absolute length units: in, cm, mm, pt, pc, Q, px */
+
+    verifyComputedStyle("tab-size", "0.5in", "48px");
+
+    verifyComputedStyle("tab-size", "2.54cm", "96px");
+
+    verifyComputedStyle("tab-size", "25.4mm", "96px");
+
+    verifyComputedStyle("tab-size", "18pt", "24px");
+
+    verifyComputedStyle("tab-size", "5pc", "80px");
+
+    verifyComputedStyle("tab-size", "101.6Q", "96px");
+
+    verifyComputedStyle("tab-size", "7px", "7px");
+
+ /* verifyComputedStyle(property_name, specified_value, expected_value) */
+
+  /* relative length units: em, ex, rem */
+
+    verifyComputedStyle("tab-size", "1em", "20px");
+
+ /* compareValueCloseTo(property_name, specified_value, epsilon, expected_value)  */
+
+    compareValueCloseTo("tab-size", "2ex", 0.001, "32px");
+
+    /*
+    For this sub-test, we set the tolerance precision (epsilon)
+    to (0.001 === 1 thousandth).
+    */
+
+    verifyComputedStyle("tab-size", "3rem", "48px");
+
+  /*
+
+  NOT tested are: vw, vh, vmin, vmax and ch units
+
+    verifyComputedStyle("tab-size", "4vw", "?px");
+
+    verifyComputedStyle("tab-size", "5vh", "?px");
+
+    verifyComputedStyle("tab-size", "6vmin", "?px");
+
+    verifyComputedStyle("tab-size", "7vmax", "?px");
+
+    verifyComputedStyle("tab-size", "8ch", "?px");
+
+  */
+
+  }
+
+  startTesting();
+
+  </script>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-inheritance-001-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inheritance-001-ref.html
new file mode 100644
index 0000000000..5e253df949
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inheritance-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  margin-left: 50px;
+  width: 20px;
+  height: 20px;
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a green square and no red.
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-inheritance-001.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inheritance-001.html
new file mode 100644
index 0000000000..0cba27079b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inheritance-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: tab-size in lengths inherit as absolute lengths</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="match" href="tab-size-inheritance-001-ref.html">
+<meta name="assert" content="tab-size in lengths inherit as absolute lengths">
+<style>
+.test {
+  font-family: monospace;
+  font-size: 10px;
+  tab-size: 5em;
+}
+.test div {
+  white-space: pre;
+  font-size: 20px
+}
+.test span {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background: green;
+}
+.ref {
+  z-index: -1;
+  margin-left: 50px;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background: red;
+
+  /* this is to avoid antialiasing effects at the edge */
+  box-sizing: border-box;
+  border: 2px solid white;
+}
+</style>
+
+<p>Test passes if there is a green square and no red.
+<div class=ref></div>
+<div class=test><div>&#x09;<span></span></div></div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-001-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-001-ref.html
new file mode 100644
index 0000000000..0f412e26df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+    font-family: monospace;
+}
+</style>
+
+<p>Test passes if the three “A” letters below are vertically aligned with eachother.
+<div class=ref><br>
+          A<br>
+          A<br>
+          A
+</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-001.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-001.html
new file mode 100644
index 0000000000..ecdcfeff01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: inline box tab-size</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="match" href="tab-size-inline-001-ref.html">
+<meta name="assert" content="tab-size applies to inline boxes">
+<style>
+div {
+    font-family: monospace;
+    white-space: pre;
+    tab-size: 2;
+}
+.t5 {
+    tab-size: 5;
+}
+.t10 {
+    tab-size: 10;
+}
+</style>
+
+<p>Test passes if the three “A” letters below are vertically aligned with eachother.
+
+<div>
+          A
+<span class=t5>&#x09;&#x09;A</span>
+<span class=t10>&#x09;A</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-002-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-002-ref.html
new file mode 100644
index 0000000000..ade76fea77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-002-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+    font-family: monospace;
+    white-space: pre;
+    font-size: 2em;
+}
+.wrong { color: orange; }
+.right { color: blue; }
+</style>
+
+<p>Test passes if the black “A” lines up vertically with the blue one, not the orange one.
+
+            <div>            A</div>
+
+<div class=right>            A</div>
+<div class=wrong>              A</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-002.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-002.html
new file mode 100644
index 0000000000..f87c107949
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-inline-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: inline box tab-size tab stops</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="tab-size-inline-002-ref.html">
+<meta name="assert" content="tab-stops are calculated separatey for each tab with a different tab-size, not stacked up somehow">
+<style>
+div {
+    font-family: monospace;
+    white-space: pre;
+    tab-size: 10;
+    font-size: 2em;
+}
+span {
+    tab-size: 4;
+}
+.wrong { color: orange; }
+.right { color: blue; }
+</style>
+
+<p>Test passes if the black “A” lines up vertically with the blue one, not the orange one.
+
+<div>&#x09;<span>&#x09;A</span></div>
+
+<div class=right>            A</div> <!-- 12 = n * 4, such with n such that n*4 > 10 -->
+<div class=wrong>              A</div> <!-- 14 = 10 + 4 -->
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-001-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-001-ref.html
new file mode 100644
index 0000000000..db1d6b0ed5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Text Test: tab-size: 4</title>
+    <link rel="author" title="David Storey" href="mailto:david@openweb.io">
+    <style type="text/css">
+        .container {
+            position: absolute;
+        }
+        .green {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: green;
+         }
+        .red {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: red;
+            tab-size: 4;
+        }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is no red.</p>
+    <div class="container">
+        <pre class="green">    </pre>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-001.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-001.html
new file mode 100644
index 0000000000..410df6fceb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Text Test: tab-size: 4</title>
+    <link rel="author" title="David Storey" href="mailto:david@openweb.io">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#tab-size">
+    <link rel="match" href="tab-size-integer-001-ref.html">
+    <meta name="assert" content="Tab should be rendered as 4 times the space character’s advance width (U+0020)">
+    <style type="text/css">
+        .container {
+            position: absolute;
+        }
+        .green {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: green;
+         }
+        .red {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: red;
+            tab-size: 4;
+        }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is no red.</p>
+    <div class="container">
+        <pre class="red">&#09;</pre>
+        <pre class="green">    </pre>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-002.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-002.html
new file mode 100644
index 0000000000..ef98b7621f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-002.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Text Test: tab-size: -4</title>
+    <link rel="author" title="David Storey" href="mailto:david@openweb.io">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#tab-size">
+    <link rel="match" href="tab-size-integer-001-ref.html">
+    <meta name="assert" content="Tab-size negative values are not allowed">
+    <style type="text/css">
+        .container {
+            position: absolute;
+        }
+        .green {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: green;
+         }
+        .red {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: red;
+            tab-size: 4;
+            tab-size: -4;
+        }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is no red.</p>
+    <div class="container">
+        <pre class="red">&#09;</pre>
+        <pre class="green">    </pre>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-003.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-003.html
new file mode 100644
index 0000000000..b73a5067e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Text Test: tab-size: 0</title>
+    <link rel="author" title="David Storey" href="mailto:david@openweb.io">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#tab-size">
+    <link rel="match" href="tab-size-integer-001-ref.html">
+    <meta name="assert" content="Tab should be rendered as 0 times the space character’s advance width (U+0020)">
+    <style type="text/css">
+        .container {
+            position: absolute;
+        }
+        .green {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: green;
+         }
+        .red {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: red;
+            tab-size: 0;
+        }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is no red.</p>
+    <div class="container">
+        <pre class="red">&#09;</pre>
+        <pre class="green">    </pre>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-004-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-004-ref.html
new file mode 100644
index 0000000000..0f29998d23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-004-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.neat">
+<style>
+div {
+    white-space: pre;
+}
+span {
+    font-size: 2em;
+    font-family: monospace;
+}
+</style>
+
+<p>Test passes if the two “X” letters bellow are vertically algined.
+
+<div>    <span>X<span></div>
+<div>    <span>X<span></div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-004.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-004.html
new file mode 100644
index 0000000000..70dc7bf6f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-004.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Text Test: tab-size: bloc container</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.neat">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#tab-size">
+<link rel="match" href="tab-size-integer-004-ref.html">
+<meta name="assert" content="Integer tab sizes are based on the nearest block container ancestor, not on the tab itself">
+<style>
+div {
+    white-space: pre;
+    tab-size: 2; /* Overridden, as tab-size applies to inline boxes */
+}
+span {
+    tab-size: 4;
+
+    /* Various factors that are taken into account in the calculation of the tab size,
+       but do not matter here because it must be calculated based on the block container
+       rather than the inline.
+    */
+    font-size: 2em;
+    font-family: monospace;
+    letter-spacing: 5px;
+    word-spacing: 5px;
+}
+</style>
+
+<p>Test passes if the two “X” letters bellow are vertically algined.
+
+<div><span>&#09;X<span></div>
+<div class=ref>    <span>X<span></div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-005-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-005-ref.html
new file mode 100644
index 0000000000..3e0a04b957
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-005-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<meta charset=utf-8>
+<title>CSS Text Reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+@font-face {
+    /* this font-family does not support <space>, so should not be used to resolve tab-size */
+    font-family: without-space;
+    src: url("/fonts/CanvasTest-nospace.ttf");
+}
+@font-face {
+    /* the <space> in this font is much narrower than the default/.notdef in "first" */
+    font-family: with-space;
+    src: url("/fonts/GentiumPlus-R.woff");
+}
+div {
+    font: 40px/2 without-space, with-space, sans-serif;
+}
+span {
+    font-family: with-space, sans-serif;
+}
+</style>
+
+<p>Test passes if the two black squares below are vertically aligned.
+
+<div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>E</div>
+<div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>E</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-005.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-005.html
new file mode 100644
index 0000000000..a58e4ea23a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-integer-005.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<meta charset=utf-8>
+<title>CSS Text Test: tab-size</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#tab-size">
+<link rel="match" href="tab-size-integer-005-ref.html">
+<meta name="assert" content="Integer tab sizes are based on the width of <space> in the block container">
+<style>
+@font-face {
+    /* this font-family does not support <space>, so should not be used to resolve tab-size */
+    font-family: without-space;
+    src: url("/fonts/CanvasTest-nospace.ttf");
+}
+@font-face {
+    /* the <space> in this font is much narrower than the default/.notdef in "first" */
+    font-family: with-space;
+    src: url("/fonts/GentiumPlus-R.woff");
+}
+div {
+    font: 40px/2 without-space, with-space, sans-serif;
+    white-space: pre;
+    tab-size: 8;
+}
+span {
+    font-family: with-space, sans-serif;
+}
+</style>
+
+<p>Test passes if the two black squares below are vertically aligned.
+
+<div><span>&nbsp;</span>&#09;E</div>
+<div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>E</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-length-001-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-length-001-ref.html
new file mode 100644
index 0000000000..8b574c694f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-length-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Text Test: tab-size: length</title>
+    <link rel="author" title="David Storey" href="mailto:david@openweb.io">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css">
+        .container {
+            position: absolute;
+        }
+        .test {
+            font-family: Ahem;
+            font-size: 20px;
+
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: green;
+
+        }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is no red.</p>
+    <div class="container">
+        <pre class="green test">  </pre>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-length-001.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-length-001.html
new file mode 100644
index 0000000000..2e466da025
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-length-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Text Test: tab-size: 1em</title>
+    <link rel="author" title="David Storey" href="mailto:david@openweb.io">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#tab-size">
+    <link rel="match" href="tab-size-length-001-ref.html">
+    <meta name="assert" content="Tab should be rendered as 1em (20px)">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css">
+        .container {
+            position: absolute;
+        }
+        .test {
+            font-family: Ahem;
+            font-size: 20px;
+
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .green {
+            background: green;
+         }
+        .red {
+            background: red;
+            tab-size: 1em;
+        }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is no red.</p>
+    <div class="container">
+        <pre class="red test">&#09;</pre>
+        <pre class="green test">  </pre>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-length-002.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-length-002.html
new file mode 100644
index 0000000000..adccbd6bc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-length-002.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Text Test: tab-size: -1em</title>
+    <link rel="author" title="David Storey" href="mailto:david@openweb.io">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#tab-size">
+    <link rel="match" href="tab-size-length-001-ref.html">
+    <meta name="assert" content="Tab-size negative length values are not allowed">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css">
+        .container {
+            position: absolute;
+        }
+        .test {
+            font-family: Ahem;
+            font-size: 20px;
+
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .green {
+            background: green;
+         }
+        .red {
+            background: red;
+            tab-size: 1em;
+            tab-size: -1em;
+        }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is no red.</p>
+    <div class="container">
+        <pre class="red test">&#09;</pre>
+        <pre class="green test">  </pre>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-percent-001.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-percent-001.html
new file mode 100644
index 0000000000..875d3e98fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-percent-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Text Test: tab-size: 100%</title>
+    <link rel="author" title="David Storey" href="mailto:david@openweb.io">
+    <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#tab-size">
+    <link rel="match" href="tab-size-length-001-ref.html">
+    <meta name="assert" content="Tab-size percentage values are not allowed">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style type="text/css">
+        .container {
+            position: absolute;
+        }
+        .test {
+            font-family: Ahem;
+            font-size: 20px;
+
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .green {
+            background: green;
+         }
+        .red {
+            background: red;
+            tab-size: 0;
+            tab-size: 100%;
+        }
+    </style>
+</head>
+<body>
+    <p>The test passes if there is no red.</p>
+    <div class="container">
+        <pre class="red test">&#09;</pre>
+        <pre class="green test">  </pre>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-001-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-001-ref.html
new file mode 100644
index 0000000000..2711617476
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  font-family: monospace;
+  width: 20px;
+  height: 20px;
+  background: green;
+  margin-left: calc( 8ch + 8 * 2px + 8 * 10px );
+}
+</style>
+
+<p>Test passes if there is a green square and no red.
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-001.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-001.html
new file mode 100644
index 0000000000..65943dcd32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: tab-size, word-spacing and letter-spacing</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-spacing-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<link rel="match" href="tab-size-spacing-001-ref.html">
+<meta name="assert" content="For the tab-size property, a <number> represents the measure as a multiple of the space character’s advance width (U+0020) including its associated letter-spacing and word-spacing">
+<style>
+.test {
+  white-space: pre;
+  tab-size: 8; /* the initial value, but since we're measuring against it, we might as well be sure */
+  font-family: monospace; /* because the ch unit is based on the size of the 0 character,
+                             and we want to measure space characters
+                             so they need to be the same size. */
+  letter-spacing: 2px;
+  word-spacing: 10px;
+}
+span {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background: green;
+}
+.ref {
+  position: absolute;
+  z-index: -1;
+  width: 20px;
+  height: 20px;
+  background: red;
+  margin-left: calc( 8ch + 8 * 2px + 8 * 10px );
+
+   /* this is to avoid antialiasing effects at the edge */
+   box-sizing: border-box;
+   border: 2px solid white;
+}
+</style>
+
+<p>Test passes if there is a green square and no red.
+<div class=ref></div>
+<div class=test>&#x09;<span></span></div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-002-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-002-ref.html
new file mode 100644
index 0000000000..65621a0ec1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-002-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+  font-family: monospace; /* so we can compare tab with a count of preserved spaces */
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the "1"s all line up vertically:
+<div>1 2 3 1 2 3 1 2 3 1
+1     1     1     1
+1     1     1     1</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-002.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-002.html
new file mode 100644
index 0000000000..01bc6cafad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: tab-size and letter-spacing</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<link rel="match" href="tab-size-spacing-002-ref.html">
+<meta name="assert" content="For the tab-size property, a <number> represents the measure as a multiple of the space character’s advance width (U+0020) including its associated letter-spacing and word-spacing">
+<style>
+div {
+  font-family: monospace; /* so we can compare tab with a count of preserved spaces */
+  white-space: pre;
+}
+.test {
+  letter-spacing: 1ch; /* effectively double the advance of the characters */
+  tab-size: 3;
+}
+.ref1 {
+  letter-spacing: 1ch;
+}
+.ref2 {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the "1"s all line up vertically:
+<div class=ref1>1231231231</div>
+<div class=test>1&#9;1&#9;1&#9;1</div>
+<div class=ref2>1     1     1     1</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-003-ref.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-003-ref.html
new file mode 100644
index 0000000000..b8a7bc105c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-003-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+  font-family: monospace; /* so we can compare tab with a count of preserved spaces */
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the "1"s all line up vertically:
+<div>1  2  1  2  1  2  1
+1     1     1     1
+1     1     1     1</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-003.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-003.html
new file mode 100644
index 0000000000..767cc59244
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size-spacing-003.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: tab-size and word-spacing</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
+<link rel="match" href="tab-size-spacing-003-ref.html">
+<meta name="assert" content="For the tab-size property, a <number> represents the measure as a multiple of the space character’s advance width (U+0020) including its associated letter-spacing and word-spacing">
+<style>
+div {
+  font-family: monospace; /* so we can compare tab with a count of preserved spaces */
+  white-space: pre;
+}
+.test {
+  word-spacing: 100%; /* effectively double the size of SPACE, and hence of tabs */
+  tab-size: 3;
+}
+.ref1 {
+  word-spacing: 100%;
+}
+.ref2 {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the "1"s all line up vertically:
+<div class=ref1>1 2 1 2 1 2 1</div>
+<div class=test>1&#9;1&#9;1&#9;1</div>
+<div class=ref2>1     1     1     1</div>
diff --git a/testing/web-platform/tests/css/css-text/tab-size/tab-size.html b/testing/web-platform/tests/css/css-text/tab-size/tab-size.html
new file mode 100644
index 0000000000..d9b1b57fec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/tab-size/tab-size.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test: CSS value type of the CSS property 'tab-size'</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+body {
+  font-family: Ahem;
+  font-size: 13px;
+}
+.px-tab-size {
+  tab-size: 60px;
+}
+.em-tab-size {
+  tab-size: 7em;
+}
+.int-tab-size {
+  tab-size: 9;
+}
+.fractional-tab-size {
+  tab-size: 2.5;
+}
+</style>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<div style="background-repeat: repeat-x;">
+<div><pre id="leading-px" class="px-tab-size">&Tab;<span>leading text, tab-size in px.</span></pre></div>
+<div><pre id="leading-em" class="em-tab-size">&Tab;<span>leading text, tab-size in em.</span></pre></div>
+<div><pre id="leading-int" class="int-tab-size">&Tab;<span>leading text, tab-size in spaces.</span></pre></div>
+<div><pre id="leading-fraction" class="fractional-tab-size">&Tab;<span>leading text, tab-size in fraction.</span></pre></div>
+<div><pre id="trailing-px" class="px-tab-size"><span>leading text</span>&Tab;<span>trailing text, tab-size in px.</span></pre></div>
+<div><pre id="trailing-em" class="em-tab-size"><span>leading text</span>&Tab;<span>trailing text, tab-size in em.</span></pre></div>
+<div><pre id="trailing-int" class="int-tab-size"><span>leading text</span>&Tab;<span>trailing text, tab-size in spaces.</span></pre></div>
+<div><pre id="trailing-fraction" class="fractional-tab-size"><span>leading text</span>&Tab;<span>trailing text, tab-size in fraction.</span></pre></div>
+<div><pre>Some spaces... '<span id="space-size-reference">         </span>' ... for size reference.</pre></div>
+<div><pre>A space... '<span id="one-space-size-reference"> </span>' ... for size reference.</pre></div>
+<div><pre>'<span id="leading-text-size-reference">leading text</span>', for size reference.</pre></div>
+<script>
+test(function() {
+  // Tests with a tab character at the beginning of the line.
+  var pxPre = document.getElementById('leading-px');
+  var emPre = document.getElementById('leading-em');
+  var intPre = document.getElementById('leading-int');
+  var fractionPre = document.getElementById("leading-fraction");
+
+  var pxLeadingSpan = pxPre.firstElementChild;
+  var emLeadingSpan = emPre.firstElementChild;
+  var intLeadingSpan = intPre.firstElementChild;
+  var fractionLeadingspan = fractionPre.firstElementChild;
+
+  var pxExpected = 60;  // tab size in px.
+  var emExpected = 13 * 7;  // (font size) * (tab size in em)
+  var intExpected = document.getElementById('space-size-reference').getBoundingClientRect().width;
+  var fractionExpected = 2.5 * document.getElementById('one-space-size-reference').getBoundingClientRect().width;
+
+  var pxTabLength = pxLeadingSpan.getBoundingClientRect().left - pxPre.getBoundingClientRect().left;
+  var emTabLength = emLeadingSpan.getBoundingClientRect().left - emPre.getBoundingClientRect().left;
+  var intTabLength = intLeadingSpan.getBoundingClientRect().left - intPre.getBoundingClientRect().left;
+  var fractionTabLength = fractionLeadingspan.getBoundingClientRect().left - fractionPre.getBoundingClientRect().left;
+
+  assert_approx_equals(pxTabLength, pxExpected, 0.02);
+  assert_approx_equals(emTabLength, emExpected, 0.02);
+  assert_approx_equals(intTabLength, intExpected, 0.02);
+  assert_approx_equals(fractionTabLength, fractionExpected, 0.02);
+
+  // Tests with a tab character after leading text.
+  var leadingTextSize = document.getElementById('leading-text-size-reference').getBoundingClientRect().width;
+  pxExpected = pxExpected - (leadingTextSize % pxExpected);
+  emExpected = emExpected - (leadingTextSize % emExpected);
+  intExpected = intExpected - (leadingTextSize % intExpected);
+  fractionExpected = fractionExpected - (leadingTextSize % fractionExpected);
+
+  pxPre = document.getElementById('trailing-px');
+  emPre = document.getElementById('trailing-em');
+  intPre = document.getElementById('trailing-int');
+  fractionPre = document.getElementById("trailing-fraction");
+
+  pxLeadingSpan = pxPre.firstElementChild;
+  emLeadingSpan = emPre.firstElementChild;
+  intLeadingSpan = intPre.firstElementChild;
+  fractionLeadingspan = fractionPre.firstElementChild;
+
+  pxTrailingSpan = pxPre.lastElementChild;
+  emTrailingSpan = emPre.lastElementChild;
+  intTrailingSpan = intPre.lastElementChild;
+  fractionTrailingSpan = fractionPre.lastElementChild;
+
+  pxTabLength = pxTrailingSpan.getBoundingClientRect().left - pxLeadingSpan.getBoundingClientRect().right;
+  emTabLength = emTrailingSpan.getBoundingClientRect().left - emLeadingSpan.getBoundingClientRect().right;
+  intTabLength = intTrailingSpan.getBoundingClientRect().left - intLeadingSpan.getBoundingClientRect().right;
+  fractionTabLength = fractionTrailingSpan.getBoundingClientRect().left - fractionLeadingspan.getBoundingClientRect().right;
+
+  assert_approx_equals(pxTabLength, pxExpected, 0.02);
+  assert_approx_equals(emTabLength, emExpected, 0.02);
+  assert_approx_equals(intTabLength, intExpected, 0.02);
+  assert_approx_equals(fractionTabLength, fractionExpected, 0.02);
+}, "Test tab-size measurements");
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-001.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-001.html
new file mode 100644
index 0000000000..480b568171
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="ref">REFER</div>
+<div class="ref">REFER</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-002.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-002.html
new file mode 100644
index 0000000000..bab8bd715c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div style="direction: rtl;">
+<div class="ref">REFER</div>
+<div class="ref">REFER</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-003.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-003.html
new file mode 100644
index 0000000000..c6710c64e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-003.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div class="ref">REFER</div>
+<div class="ref">REFER</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-004.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-004.html
new file mode 100644
index 0000000000..010c665841
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-004.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="ref">REFER</div>
+<div class="ref">REFER</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-005.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-005.html
new file mode 100644
index 0000000000..3510f890f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-005.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-006.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-006.html
new file mode 100644
index 0000000000..365e21fe9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-006.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div style="direction: rtl;">
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-007.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-007.html
new file mode 100644
index 0000000000..9b7d51c210
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-007.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-008.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-008.html
new file mode 100644
index 0000000000..9196a4de3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-008.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-009.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-009.html
new file mode 100644
index 0000000000..563794c61c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-009.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=auto, RTL first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-010.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-010.html
new file mode 100644
index 0000000000..d4797c93f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-010.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=auto, LTR first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-014.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-014.html
new file mode 100644
index 0000000000..65b431fc39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-014.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, pre, dir=rtl inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="ref">REF<br>ERE</div>
+<div class="ref">REF<br>ERE</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-015.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-015.html
new file mode 100644
index 0000000000..26a8ef62a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-015.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, pre, dir=ltr inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div class="ref">REF<br>ERE</div>
+<div class="ref">REF<br>ERE</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-016.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-016.html
new file mode 100644
index 0000000000..f571c9e3d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-end-ref-016.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, pre, dir=auto</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.ref1, .ref2 { border-inline: 1px solid orange; margin-left: 20px; margin-right: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref1 { border-top: 1px solid orange; margin-top: 20px; text-align: right; }
+.ref2 { border-bottom: 1px solid orange; margin-bottom: 20px; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div class="ref1">REF</div>
+<div class="ref2">ERE</div>
+<div class="ref1">REF</div>
+<div class="ref2">ERE</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-001.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-001.html
new file mode 100644
index 0000000000..f13a494819
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: right;">REF REF REF</div>
+</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: right;">REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-002.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-002.html
new file mode 100644
index 0000000000..63206ff29e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div style="direction: rtl;">
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: left;">REF REF REF</div>
+</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: left;">REF REF REF</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-003.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-003.html
new file mode 100644
index 0000000000..9437b4fa2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: right;">REF REF REF</div>
+</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: right;">REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-004.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-004.html
new file mode 100644
index 0000000000..fe2bbe8d46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-004.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: left;">REF REF REF</div>
+</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: left;">REF REF REF</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-005.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-005.html
new file mode 100644
index 0000000000..bb383de0d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-005.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, dir=auto, RTL first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: right;">REF REF REF</div>
+</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: right;">REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-006.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-006.html
new file mode 100644
index 0000000000..cead2a2551
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-ref-006.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, dir=auto, LTR first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
+<div dir="rtl">
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: left;">REF REF REF</div>
+</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: left;">REF REF REF</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-shy-ref-001.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-shy-ref-001.html
new file mode 100644
index 0000000000..e7148ece53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-shy-ref-001.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+div {
+  text-align: justify;
+  width: 10ch;
+}
+</style>
+<div>abc def ghijkl</div>
+<div>abc def ghijkl</div>
+<div>abc def ghijkl</div>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-tabs-001-ref.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-tabs-001-ref.html
new file mode 100644
index 0000000000..6f47afab8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-tabs-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify and preserved tabs - reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+<style>
+div {
+  font: 25px Ahem, monospace;
+  width: 30ch;
+  white-space: pre-wrap;
+  tab-size: 8;
+  border: 1px solid gray;
+  padding: 2px;
+  margin: 2px;
+}
+</style>
+</head>
+
+<body>
+<p>The layout in the two boxes should be the same:</p>
+<div>a b c&#9;tab 1&#9;tab 2&#9;jklmnop</div>
+<div>a b c&#9;tab 1&#9;tab 2&#9;jklmnop</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-tabs-002-ref.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-tabs-002-ref.html
new file mode 100644
index 0000000000..105f7aa2ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justify-tabs-002-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify and preserved tabs - reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+<style>
+div {
+  font: 25px Ahem, monospace;
+  width: 30ch;
+  white-space: pre-wrap;
+  tab-size: 8;
+  border: 1px solid gray;
+  padding: 2px;
+  margin: 2px;
+}
+</style>
+</head>
+
+<body>
+<p>The layout in the two boxes should be the same:</p>
+<div>a b c&#9;tab 1&#9;tab  2  jklmno<br>pqrs</div>
+<div>a b c&#9;tab 1&#9;tab  2  jklmno<br>pqrs</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justifyall-ref-001.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justifyall-ref-001.html
new file mode 100644
index 0000000000..e9d071ee99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justifyall-ref-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify-all, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; word-spacing: 20px; }
+div.last-line { word-spacing: 90px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
+<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justifyall-ref-002.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justifyall-ref-002.html
new file mode 100644
index 0000000000..30160d43f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-justifyall-ref-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify-all, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; word-spacing: 20px; }
+div.last-line { word-spacing: 90px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div style="direction: rtl;">
+<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
+<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-last-wins-001-ref.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-last-wins-001-ref.html
new file mode 100644
index 0000000000..997d58a798
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-last-wins-001-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>test reference</title>
+<style>
+div {
+  text-align: right;
+  width: 300px;
+  border: solid;
+}
+</style>
+
+<p>Test passes if the words below are aligned to the right of the box.
+
+<div>right<br>right</div>
+
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-001.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-001.html
new file mode 100644
index 0000000000..5d14b17626
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="ref">REFER</div>
+<div class="ref">REFER</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-002.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-002.html
new file mode 100644
index 0000000000..fc54ede6cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div style="direction: rtl;">
+<div class="ref">REFER</div>
+<div class="ref">REFER</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-003.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-003.html
new file mode 100644
index 0000000000..fa5e76a275
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-003.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div class="ref">REFER</div>
+<div class="ref">REFER</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-004.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-004.html
new file mode 100644
index 0000000000..1deee0c701
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-004.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="ref">REFER</div>
+<div class="ref">REFER</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-005.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-005.html
new file mode 100644
index 0000000000..701845e993
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-005.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-006.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-006.html
new file mode 100644
index 0000000000..914df4654b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-006.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div style="direction: rtl;">
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-007.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-007.html
new file mode 100644
index 0000000000..62cca9b99c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-007.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right;}
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-008.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-008.html
new file mode 100644
index 0000000000..1b09404b2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-008.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-009.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-009.html
new file mode 100644
index 0000000000..0cfe79e6c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-009.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=auto, RTL first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-010.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-010.html
new file mode 100644
index 0000000000..727fb656e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-010.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=auto, LTR first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-014.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-014.html
new file mode 100644
index 0000000000..8113fe23f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-014.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, pre, dir=rtl inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="ref">REF<br>ERE</div>
+<div class="ref">REF<br>ERE</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-015.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-015.html
new file mode 100644
index 0000000000..d61b2585e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-015.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, pre, dir=ltr inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="ltr">
+<div class="ref">REF<br>ERE</div>
+<div class="ref">REF<br>ERE</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-016.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-016.html
new file mode 100644
index 0000000000..3df6be4048
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-016.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, pre, dir=auto</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref1, .ref2 { border-left: 1px solid orange; border-right: 1px solid orange; margin-left: 20px; margin-right: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref1 { border-top: 1px solid orange; margin-top: 20px; text-align: left; }
+.ref2 { border-bottom: 1px solid orange; margin-bottom: 20px; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div class="ref1">REF</div>
+<div class="ref2">ERE</div>
+<div class="ref1">REF</div>
+<div class="ref2">ERE</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-017.html b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-017.html
new file mode 100644
index 0000000000..89b5c4028d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/reference/text-align-start-ref-017.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, pre, dir=auto on surrounding block</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div class="ref">REF<br>ERE</div>
+<div class="ref">REF<br>ERE</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-006-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-006-ref.html
new file mode 100644
index 0000000000..550a03c3b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-006-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test Reference File</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<style>
+  div {
+    border: 1px solid blue;
+  }
+</style>
+<body>
+  <p>Test passes if the words "Filler Text" below are aligned to the left, inside the blue box.</p>
+  <div>Filler Text</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-006.html b/testing/web-platform/tests/css/css-text/text-align/text-align-006.html
new file mode 100644
index 0000000000..4e8c097f81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-006.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align - start (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.1. Text Alignment: the 'text-align' property" href="http://www.w3.org/TR/css-text-3/#text-align">
+<link rel="match" href="text-align-006-ref.html">
+<meta name="assert" content="The 'text-align' property set to 'start' on a block element aligns the text to the start edge.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align: start;
+  }
+</style>
+<body>
+  <p>Test passes if the words "Filler Text" below are aligned to the left, inside the blue box.</p>
+  <div>Filler Text</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-007-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-007-ref.html
new file mode 100644
index 0000000000..68c1642930
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-007-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test Reference File</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<style>
+  div {
+    border: 1px solid blue;
+    direction: rtl;
+  }
+</style>
+<body>
+  <p>Test passes if the words "Filler Text" below are aligned to the right, inside the blue box.</p>
+  <div>Filler Text</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-007.html b/testing/web-platform/tests/css/css-text/text-align/text-align-007.html
new file mode 100644
index 0000000000..4d416123a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-007.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align - end (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.1. Text Alignment: the 'text-align' property" href="http://www.w3.org/TR/css-text-3/#text-align">
+<link rel="match" href="text-align-007-ref.html">
+<meta name="assert" content="The 'text-align' property set to 'end' on a block element aligns the text to the end edge.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align: end;
+  }
+</style>
+<body>
+  <p>Test passes if the words "Filler Text" below are aligned to the right, inside the blue box.</p>
+  <div>Filler Text</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-center.html b/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-center.html
new file mode 100644
index 0000000000..97c2b7840f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-center.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-center-last-start.html">
+  <link rel="mismatch" href="text-align-center-last-end.html">
+  <link rel="mismatch" href="text-align-center-last-justify.html">
+  <style>
+   p {
+     text-align: center;
+     text-align-last: center;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-default.html b/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-default.html
new file mode 100644
index 0000000000..0b3a7ad9eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-default.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="match" href="text-align-center-last-center.html">
+  <style>
+   p {
+     text-align: center;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-end.html b/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-end.html
new file mode 100644
index 0000000000..c23eb03812
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-end.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-center-last-start.html">
+  <link rel="mismatch" href="text-align-center-last-center.html">
+  <link rel="mismatch" href="text-align-center-last-justify.html">
+  <style>
+   p {
+     text-align: center;
+     text-align-last: end;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-justify.html b/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-justify.html
new file mode 100644
index 0000000000..10a06696e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-justify.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-center-last-start.html">
+  <link rel="mismatch" href="text-align-center-last-end.html">
+  <link rel="mismatch" href="text-align-center-last-center.html">
+  <style>
+   p {
+     text-align: center;
+     text-align-last: justify;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-start.html b/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-start.html
new file mode 100644
index 0000000000..10f68edec3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-center-last-start.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-center-last-center.html">
+  <link rel="mismatch" href="text-align-center-last-end.html">
+  <link rel="mismatch" href="text-align-center-last-justify.html">
+  <style>
+   p {
+     text-align: center;
+     text-align-last: start;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-default-last-default.html b/testing/web-platform/tests/css/css-text/text-align/text-align-default-last-default.html
new file mode 100644
index 0000000000..ee626a6ac9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-default-last-default.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="match" href="text-align-start-last-start.html">
+  <style>
+   p {
+     text-align: start;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-001.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-001.html
new file mode 100644
index 0000000000..4570b22708
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-001.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; direction: rtl; }
+.ref { text-align: left; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="test">TESTI</div>
+<div class="ref">REFER</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-002.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-002.html
new file mode 100644
index 0000000000..6144d4d511
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-002.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; direction: ltr; }
+.ref { text-align: right; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div style="direction: rtl;">
+<div class="test">TESTI</div>
+<div class="ref">REFER</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-003.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-003.html
new file mode 100644
index 0000000000..0539f6b79a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-003.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; }
+.ref { text-align: left; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div class="test" dir="rtl">TESTI</div>
+<div class="ref">REFER</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-004.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-004.html
new file mode 100644
index 0000000000..7e5badd945
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-004.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-004.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; }
+.ref { text-align: right; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="test" dir="ltr">TESTI</div>
+<div class="ref">REFER</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-005.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-005.html
new file mode 100644
index 0000000000..94a41b59e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-005.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-005.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; direction: rtl; }
+.ref { text-align: left; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="test">TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-006.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-006.html
new file mode 100644
index 0000000000..9e1006f7ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-006.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-006.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; direction: ltr; }
+.ref { text-align: right; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div style="direction: rtl;">
+<div class="test">TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-007.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-007.html
new file mode 100644
index 0000000000..2f4b5e4f50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-007.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-007.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is horizontal, rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; }
+.ref { text-align: left; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="test" dir="rtl">TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-008.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-008.html
new file mode 100644
index 0000000000..88ced38fb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-008.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-008.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is horizontal, ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; }
+.ref { text-align: right; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="test" dir="ltr">TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-009.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-009.html
new file mode 100644
index 0000000000..8fdeff7069
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-009.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=auto, RTL first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-009.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. left when direction is auto and first strong character is rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; }
+.ref { text-align: left; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div class="test" dir="auto">&rlm;TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<!-- Notes:
+The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-010.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-010.html
new file mode 100644
index 0000000000..fffe06ffe3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-010.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, dir=auto, LTR first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-010.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is auto and first strong character is ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; }
+.ref { text-align: right; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="test" dir="auto">&lrm;TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-014.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-014.html
new file mode 100644
index 0000000000..d51c7cd0e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-014.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, pre, dir=rtl inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-014.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. left when base direction is rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; }
+.ref { text-align: left; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<pre class="test">TES
+&rlm;ING</pre>
+<div class="ref">REF<br>ERE</div>
+</div>
+<!-- Notes:
+The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-015.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-015.html
new file mode 100644
index 0000000000..0661c2bd9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-015.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, pre, dir=ltr inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-015.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. right when base direction is ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: end; }
+.ref { text-align: right; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="ltr">
+<pre class="test">TES
+&rlm;ING</pre>
+</div>
+<div class="ref">REF<br>ERE</div>
+<!-- Notes:
+The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-016.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-016.html
new file mode 100644
index 0000000000..2b8a9b3829
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-016.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, pre, dir=auto</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-016.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. right when direction is auto and first strong character is ltr, and left when first strong is rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test { text-align: end; }
+/* the CSS below is not part of the test */
+.test, .ref1, .ref2 { width: 300px; color: orange; font: 25px/1 Ahem; }
+.test { border: 1px solid orange; margin: 20px; }
+.ref1, .ref2 { border-inline: 1px solid orange; margin: 0 20px; }
+.ref1 { border-top: 1px solid orange; text-align: right; }
+.ref2 { border-bottom: 1px solid orange; text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<pre class="test" dir="auto">TES
+&rlm;ING</pre>
+<div class="ref1">REF</div>
+<div class="ref2">ERE</div>
+<!-- Notes:
+The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-017.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-017.html
new file mode 100644
index 0000000000..4420808eaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-017.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: end, pre, dir=auto on surrounding block</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-end-ref-015.html'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. since dir=auto is not inherited by pre, to right in ltr context.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test { text-align: end; }
+.ref { text-align: right; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="auto">
+<pre class="test">TES
+&rlm;ING</pre>
+</div>
+<div class="ref">REF<br>ERE</div>
+<!-- Notes:
+The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
+The rationale for the expected outcome here is described at
+https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext
+"Because the unicode-bidi property does not inherit, setting bidi-override or plaintext on a block box will not affect any descendant blocks. Therefore these values are best used on blocks and inlines that do not contain any block-level structures. "
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-018.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-018.html
new file mode 100644
index 0000000000..d7351da0db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-018.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-align: end, textarea, dir=rtl inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. left when base direction is rtl.">
+<style type='text/css'>
+.test { text-align: end; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 300px;  font-size: 24px; line-height: 1;}
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if both words are left-aligned in the box.</div>
+<div dir="rtl">
+<textarea class="test">latin
+و·کمی</textarea>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-019.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-019.html
new file mode 100644
index 0000000000..9d5f987148
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-019.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-align: end, textarea, dir=ltr inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. right when base direction is ltr.">
+<style type='text/css'>
+.test { text-align: end; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 300px;  font-size: 24px; line-height: 1;}
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if both words are right-aligned in the box.</div>
+<div dir="ltr">
+<textarea class="test">latin
+و·کمی</textarea>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-020.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-020.html
new file mode 100644
index 0000000000..58c21326a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-020.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-align: end, textarea dir=auto on control</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. when dir=auto on textarea, right when first strong is ltr, left when rtl.">
+<style type='text/css'>
+.test { text-align: end; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 300px;  font-size: 24px; line-height: 1;}
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the first word is right-aligned, and the second left-aligned in the box.</div>
+<div>
+<textarea class="test" dir="auto">latin
+و·کمی</textarea>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-021.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-021.html
new file mode 100644
index 0000000000..5806cdcad1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-021.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-align: end, textarea, dir=auto on surrounding block</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:end aligns inline-level content to the end edge of the line box – ie. since dir=auto is not inherited by textarea, to right in ltr context.">
+<style type='text/css'>
+.test { text-align: end; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 300px;  font-size: 24px; line-height: 1;}
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if both words are right-aligned in both boxes.</div>
+<div dir="auto">
+<textarea class="test">latin
+و·کمی</textarea>
+</div>
+<div dir="auto">
+<textarea class="test">و·کمی
+latin</textarea>
+</div>
+<!--
+Notes:
+The rationale for the expected outcome here is described at
+https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext
+"Because the unicode-bidi property does not inherit, setting bidi-override or plaintext on a block box will not affect any descendant blocks. Therefore these values are best used on blocks and inlines that do not contain any block-level structures. "
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-center.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-center.html
new file mode 100644
index 0000000000..993d98d514
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-center.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-end-last-start.html">
+  <link rel="mismatch" href="text-align-end-last-end.html">
+  <link rel="mismatch" href="text-align-end-last-justify.html">
+  <style>
+   p {
+     text-align: end;
+     text-align-last: center;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-default.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-default.html
new file mode 100644
index 0000000000..b730ba6994
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-default.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="match" href="text-align-end-last-end.html">
+  <style>
+   p {
+     text-align: end;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-end.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-end.html
new file mode 100644
index 0000000000..97ff926347
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-end.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-end-last-start.html">
+  <link rel="mismatch" href="text-align-end-last-center.html">
+  <link rel="mismatch" href="text-align-end-last-justify.html">
+  <style>
+   p {
+     text-align: end;
+     text-align-last: end;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-justify.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-justify.html
new file mode 100644
index 0000000000..3c4957ddb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-justify.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-end-last-start.html">
+  <link rel="mismatch" href="text-align-end-last-end.html">
+  <link rel="mismatch" href="text-align-end-last-center.html">
+  <style>
+   p {
+     text-align: end;
+     text-align-last: justify;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-start.html b/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-start.html
new file mode 100644
index 0000000000..d98221f2a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-end-last-start.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-end-last-center.html">
+  <link rel="mismatch" href="text-align-end-last-end.html">
+  <link rel="mismatch" href="text-align-end-last-justify.html">
+  <style>
+   p {
+     text-align: end;
+     text-align-last: start;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-inline-end-crash.html b/testing/web-platform/tests/css/css-text/text-align/text-align-inline-end-crash.html
new file mode 100644
index 0000000000..4bfcbd30b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-inline-end-crash.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>CSS Text: Don't crash with text-align-[last,all]:inline-end</title>
+<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-property">
+<link rel="help" href="https://crbug.com/1313002">
+<style>
+  div {
+    text-align: inline-end;
+    text-align-all: inline-end;
+    text-align-last: inline-end;
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-001.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-001.html
new file mode 100644
index 0000000000..9e1319e91e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, direction: rtl</title>
+<link rel='match' href='reference/text-align-justify-ref-001.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the right.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify; direction: rtl; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
+<div class="test">TES TES TES TES TES TES TES TES TES TES TES </div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: right;">REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-002.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-002.html
new file mode 100644
index 0000000000..250f680393
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, direction: ltr</title>
+<link rel='match' href='reference/text-align-justify-ref-002.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the left.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify; direction: ltr; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div style="direction: rtl;">
+<div class="test">TES TES TES TES TES TES TES TES TES TES TES </div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: left;">REF REF REF</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-003.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-003.html
new file mode 100644
index 0000000000..b08cd88e7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-justify-ref-003.html'>
+<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the right.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
+<div class="test" dir="rtl">TES TES TES TES TES TES TES TES TES TES TES </div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: right;">REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-004.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-004.html
new file mode 100644
index 0000000000..20ca4fe242
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-004.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-justify-ref-004.html'>
+<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the left.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="test" dir="ltr">TES TES TES TES TES TES TES TES TES TES TES </div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: left;">REF REF REF</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-005.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-005.html
new file mode 100644
index 0000000000..851e1a0950
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-005.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, dir=auto, RTL first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-justify-ref-005.html'>
+<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the right.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
+<div dir="auto" class="test">&rlm;TES TES TES TES TES TES TES TES TES TES TES</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: right;">REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-006.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-006.html
new file mode 100644
index 0000000000..d02fa47aea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-006.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify, dir=auto, LTR first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-justify-ref-006.html'>
+<meta name="assert" content="text-align:justify aligns text in order to exactly fill the line box. Unless otherwise specified by text-align-last, the last line before a forced break or the end of the block is start-aligned – in this case, to the left.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 450px; color: orange; font: 25px/1 Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
+<div dir="rtl">
+<div dir="auto" class="test">TES TES TES TES TES TES TES TES TES TES TES</div>
+<div class="ref">
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="word-spacing: 1em;">REF REF REF REF</div>
+<div style="text-align: left;">REF REF REF</div>
+</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-center.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-center.html
new file mode 100644
index 0000000000..8aba126e14
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-center.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-justify-last-start.html">
+  <link rel="mismatch" href="text-align-justify-last-end.html">
+  <link rel="mismatch" href="text-align-justify-last-justify.html">
+  <style>
+   p {
+     text-align: justify;
+     text-align-last: center;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-default.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-default.html
new file mode 100644
index 0000000000..b744958c47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-default.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="match" href="text-align-justify-last-start.html">
+  <style>
+   p {
+     text-align: justify;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-end.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-end.html
new file mode 100644
index 0000000000..6e084f33e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-end.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-justify-last-start.html">
+  <link rel="mismatch" href="text-align-justify-last-center.html">
+  <link rel="mismatch" href="text-align-justify-last-justify.html">
+  <style>
+   p {
+     text-align: justify;
+     text-align-last: end;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-justify.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-justify.html
new file mode 100644
index 0000000000..c1bdfc38e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-justify.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-justify-last-start.html">
+  <link rel="mismatch" href="text-align-justify-last-center.html">
+  <link rel="mismatch" href="text-align-justify-last-end.html">
+  <style>
+   p {
+     text-align: justify;
+     text-align-last: justify;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-start.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-start.html
new file mode 100644
index 0000000000..ca4f0d9223
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-last-start.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-justify-last-end.html">
+  <link rel="mismatch" href="text-align-justify-last-center.html">
+  <link rel="mismatch" href="text-align-justify-last-justify.html">
+  <style>
+   p {
+     text-align: justify;
+     text-align-last: start;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-shy-001.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-shy-001.html
new file mode 100644
index 0000000000..3d15488024
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-shy-001.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>text-align: justify with soft-hyphens</title>
+<link rel='author' title='Koji Ishii' href='mailto:kojii@chromium.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-justify-shy-ref-001.html'>
+<style>
+div {
+  text-align: justify;
+  width: 10ch;
+}
+</style>
+<div>abc def ghijkl</div>
+<div>ab&shy;c def ghijkl</div>
+<div>ab<span>&shy;</span>c def ghijkl</div>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-001.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-001.html
new file mode 100644
index 0000000000..6905b4b601
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify and preserved tabs</title>
+<link rel='match' href='reference/text-align-justify-tabs-001-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<link rel='help' href='https://www.w3.org/TR/css-text-4/#text-align-property'>
+<meta name="assert" content="If an element’s white space is not collapsible ...
+ensure that tab stops continue to line up as required by the white space processing rules.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+<style>
+div {
+  font: 25px Ahem, monospace;
+  width: 30ch;
+  white-space: pre-wrap;
+  tab-size: 8;
+  border: 1px solid gray;
+  padding: 2px;
+  margin: 2px;
+}
+.test {
+  text-align: justify;
+}
+</style>
+</head>
+
+<body>
+<p>The layout in the two boxes should be the same:</p>
+<div>a b c&#9;tab 1&#9;tab 2&#9;jklmnop</div>
+<div class=test>a b c&#9;tab 1&#9;tab 2&#9;jklmnop</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-002.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-002.html
new file mode 100644
index 0000000000..473a960bda
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-002.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify and preserved tabs</title>
+<link rel='match' href='reference/text-align-justify-tabs-002-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<link rel='help' href='https://www.w3.org/TR/css-text-4/#text-align-property'>
+<meta name="assert" content="If an element’s white space is not collapsible ...
+ensure that tab stops continue to line up as required by the white space processing rules.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+<style>
+div {
+  font: 25px Ahem, monospace;
+  width: 30ch;
+  white-space: pre-wrap;
+  tab-size: 8;
+  border: 1px solid gray;
+  padding: 2px;
+  margin: 2px;
+}
+.test {
+  text-align: justify;
+}
+</style>
+</head>
+
+<body>
+<p>The layout in the two boxes should be the same:</p>
+<div>a b c&#9;tab 1&#9;tab  2  jklmno<br>pqrs</div>
+<div class=test>a b c&#9;tab 1&#9;tab 2 jklmno pqrs</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-003.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-003.html
new file mode 100644
index 0000000000..f3fb0cf93b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-003.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify and preserved tabs</title>
+<link rel='match' href='reference/text-align-justify-tabs-002-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<link rel='help' href='https://www.w3.org/TR/css-text-4/#text-align-property'>
+<meta name="assert" content="If an element’s white space is not collapsible ...
+ensure that tab stops continue to line up as required by the white space processing rules.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+<style>
+div {
+  font: 25px Ahem, monospace;
+  width: 30ch;
+  white-space: pre-wrap;
+  tab-size: 8;
+  border: 1px solid gray;
+  padding: 2px;
+  margin: 2px;
+}
+.test {
+  text-align: justify;
+}
+</style>
+</head>
+
+<body>
+<p>The layout in the two boxes should be the same:</p>
+<div>a b c&#9;tab 1&#9;tab  2  jklmno<br>pqrs</div>
+<div class=test>a b c<b>&#9;</b>tab 1<b>&#9;</b>tab 2 jklmno pqrs</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-004.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-004.html
new file mode 100644
index 0000000000..689f6f6a69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justify-tabs-004.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify and preserved tabs</title>
+<link rel='match' href='reference/text-align-justify-tabs-002-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<link rel='help' href='https://www.w3.org/TR/css-text-4/#text-align-property'>
+<meta name="assert" content="If an element’s white space is not collapsible ...
+ensure that tab stops continue to line up as required by the white space processing rules.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+<style>
+div {
+  font: 25px Ahem, monospace;
+  width: 30ch;
+  white-space: pre-wrap;
+  tab-size: 8;
+  border: 1px solid gray;
+  padding: 2px;
+  margin: 2px;
+}
+.test {
+  text-align: justify;
+}
+</style>
+</head>
+
+<body>
+<p>The layout in the two boxes should be the same:</p>
+<div>a b c&#9;tab 1&#9;tab  2  jklmno<br>pqrs</div>
+<div class=test>a b c&#9;<span><span>tab 1<b>&#9;</b>tab 2</span> jklmno</span> pqrs</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-001.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-001.html
new file mode 100644
index 0000000000..34b40871ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify-all, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-justifyall-ref-001.html'>
+<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify-all; direction: rtl; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
+.ref { word-spacing: 20px; }
+.last-line { word-spacing: 90px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div class="test">TES TES TES TES TES TES TES TES TES TES TES </div>
+<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-002.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-002.html
new file mode 100644
index 0000000000..d6c631b893
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify-all, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-justifyall-ref-002.html'>
+<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify-all; direction: ltr; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
+.ref { word-spacing: 20px; }
+.last-line { word-spacing: 90px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div style="direction: rtl;">
+<div class="test">TES TES TES TES TES TES TES TES TES TES TES </div>
+<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-003.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-003.html
new file mode 100644
index 0000000000..4826429495
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-003.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify-all, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-justifyall-ref-001.html'>
+<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
+.ref { word-spacing: 20px; }
+.last-line { word-spacing: 90px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div class="test" dir="rtl">TES TES TES TES TES TES TES TES TES TES TES </div>
+<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-004.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-004.html
new file mode 100644
index 0000000000..293acea298
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify-all, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='match' href='reference/text-align-justifyall-ref-002.html'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
+.ref { word-spacing: 20px; }
+.last-line { word-spacing: 90px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="test">TES TES TES TES TES TES TES TES TES TES TES </div>
+<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-005.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-005.html
new file mode 100644
index 0000000000..f18d8bbbb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify-all, dir=auto, RTL first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-justifyall-ref-001.html'>
+<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
+.ref { word-spacing: 20px; }
+.last-line { word-spacing: 90px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div dir="auto" class="test">&rlm;TES TES TES TES TES TES TES TES TES TES TES</div>
+<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-006.html b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-006.html
new file mode 100644
index 0000000000..41a18ef2ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-justifyall-006.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: justify-all, dir=auto, LTR first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-justifyall-ref-002.html'>
+<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: justify-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 510px; color: orange; font: 30px/1 Ahem; }
+.ref { word-spacing: 20px; }
+.last-line { word-spacing: 90px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div dir="auto" class="test">TES TES TES TES TES TES TES TES TES TES TES</div>
+<div class="ref"><div>REF REF REF REF</div><div>REF REF REF REF</div><div class="last-line">REF REF REF </div></div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-001.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-001.html
new file mode 100644
index 0000000000..4dce7472db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - start (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="The 'text-align-last' property set to 'start' on a block element aligns the last line text to the start edge.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align: right;
+    text-align-last: start;
+    width: 200px;
+  }
+</style>
+<body>
+  <p>Test passes if the last line of "FillerText" below is aligned to the left, inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-002.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-002.html
new file mode 100644
index 0000000000..05023a1342
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - end (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="The 'text-align-last' property set to 'right' on a block element aligns the last line text to the end edge.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align: left;
+    text-align-last: end;
+    width: 200px;
+  }
+</style>
+<body>
+  <p>Test passes if the last line of "FillerText" below is aligned to the right, inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-003.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-003.html
new file mode 100644
index 0000000000..97c609396a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-003.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - left (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="The 'text-align-last' property set to 'left' on a block element aligns the last line text to the left.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align: right;
+    text-align-last: left;
+    width: 200px;
+  }
+</style>
+<body>
+  <p>Test passes if the last line of "FillerText" below is aligned to the left, inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-004.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-004.html
new file mode 100644
index 0000000000..2877edd49a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-004.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - right (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="The 'text-align-last' property set to 'right' on a block element aligns the last line text to the right.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align: left;
+    text-align-last: right;
+    width: 200px;
+  }
+</style>
+<body>
+  <p>Test passes if the last line of "FillerText" below is aligned to the right, inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-005.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-005.html
new file mode 100644
index 0000000000..0d0b648dc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-005.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - center (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="The 'text-align-last' property set to 'center' on a block element aligns the last line text to the center.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align-last: center;
+    width: 200px;
+  }
+</style>
+<body>
+  <p>Test passes if the last line of "FillerText" below is centered inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-006.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-006.html
new file mode 100644
index 0000000000..469df1630a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-006.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - justify (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="The 'text-align-last' property set to 'justify' on a block element aligns the last line text to
+both left and right edges">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align-last: justify;
+    width: 150px;
+  }
+</style>
+<body>
+  <p>Test passes if the last line of "FillerText" below is aligned to both left and right edges inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-007.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-007.html
new file mode 100644
index 0000000000..cdb2f674b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-007.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - auto and text-align - right</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the right
+when text-align set 'right'.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align: right;
+    text-align-last: auto;
+    width: 200px;
+  }
+</style>
+<body>
+  <p>Test passes if the last line of "FillerText" below is aligned to the right, inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-008.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-008.html
new file mode 100644
index 0000000000..a93ae9f33a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-008.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - auto and text-align - end</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the right
+when text-align set 'end'.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align: end;
+    text-align-last: auto;
+    width: 200px;
+  }
+</style>
+<body>
+  <p>Test passes if the last line of "FillerText" below is aligned to the right, inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-009.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-009.html
new file mode 100644
index 0000000000..b6fb60e053
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-009.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - auto and text-align - center</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="The 'text-align-last' property set to 'auto' on a block element aligns the last line text to the center
+when text-align set 'center'.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align: center;
+    text-align-last: auto;
+    width: 200px;
+  }
+</style>
+<body>
+  <p>Test passes if the last line of "FillerText" below is centered inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-010-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-010-ref.html
new file mode 100644
index 0000000000..2f26b42723
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-010-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test Reference File</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<style>
+  div {
+    border: 1px solid blue;
+    direction: rtl;
+  }
+</style>
+<body>
+  <p>Test passes if the line of "FillerText" below is aligned to the right, inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-010.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-010.html
new file mode 100644
index 0000000000..40d288ade3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-010.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - right(one line inside block element)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<link rel="match" href="text-align-last-010-ref.html">
+<meta name="assert" content="The 'text-align-last' property set to 'right' on a block element aligns the only one line text to the right.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align-last: right;
+  }
+</style>
+<body>
+  <p>Test passes if the line of "FillerText" below is aligned to the right, inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-011.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-011.html
new file mode 100644
index 0000000000..83760f81be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-011.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - end(one line inside block element)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<link rel="match" href="text-align-last-010-ref.html">
+<meta name="assert" content="The 'text-align-last' property set to 'end' on a block element aligns the only one line text to the right.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align-last: end;
+  }
+</style>
+<body>
+  <p>Test passes if the line of "FillerText" below is aligned to the right, inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-012.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-012.html
new file mode 100644
index 0000000000..a2b78acc0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-012.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last - center(one line inside block element)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="The 'text-align-last' property set to 'center' on a block element aligns the only one line text to the center.">
+<style>
+  div {
+    border: 1px solid blue;
+    text-align-last: center;
+  }
+</style>
+<body>
+  <p>Test passes if the line of "FillerText" below is centered inside the blue box.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-013.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-013.html
new file mode 100644
index 0000000000..112c79b9b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-013.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last applied to "display: inline" div element</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="Test checks that the 'text-align-last' property is invalid if the container element is not block element.">
+<style>
+  div {
+    border: 1px solid blue;
+    display: inline;
+    text-align-last: right;
+  }
+</style>
+<body>
+  <p>Test passes if the line of "FillerText" below is justified inside the blue box and not break line.</p>
+  <div>FillerText FillerText FillerText FillerText FillerText</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-014.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-014.html
new file mode 100644
index 0000000000..4051073aee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-014.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last applied to "display: block" span element</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.2. Last Line Alignment: the 'text-align-last' property" href="http://www.w3.org/TR/css-text-3/#text-align-last">
+<meta name="assert" content="Test checks that the 'text-align-last' property is valid if the span element set 'display: block'.">
+<style>
+  span {
+    border: 1px solid blue;
+    display: block;
+    text-align-last: center;
+    width: 200px;
+  }
+</style>
+<body>
+  <p>Test passes if the last line of "FillerText" below is centered inside the blue box.</p>
+  <span>FillerText FillerText FillerText FillerText FillerText</span>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-015-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-015-ref.html
new file mode 100644
index 0000000000..75fc7d22c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-015-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference: text-align-last applied to last line in the second column</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+<style>
+:root {
+  font: 25px/1 Ahem;
+}
+.multicol {
+  width: 200px;
+  border: 5px solid orange;
+}
+</style>
+
+<div class="multicol">
+  <div>ab&nbsp;&nbsp;ab</div>
+  <div>ab&nbsp;&nbsp;&nbsp;&nbsp;ab</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-015.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-015.html
new file mode 100644
index 0000000000..a0d8fa4df9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-015.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align-last applied to last line in the second column</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1817235">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="text-align-last-015-ref.html">
+
+<style>
+:root {
+  font: 25px/1 Ahem;
+}
+.multicol {
+  width: 200px;
+  column-count: 2;
+  column-gap: 0;
+  border: 5px solid orange;
+}
+.multicol > div {
+  text-align: start;
+  text-align-last: end;
+}
+</style>
+
+<div class="multicol">
+  <div>ab ab ab ab</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-center-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-center-ref.html
new file mode 100644
index 0000000000..6ad0e6396d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-center-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last: center</title>
+  <meta charset="utf-8">
+  <style>
+   p {
+     text-align: center;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum</p>
+ <p dir="rtl">אמר המחבר</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-center.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-center.html
new file mode 100644
index 0000000000..639156062d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-center.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last: center</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="match" href="text-align-last-center-ref.html">
+  <style>
+   p {
+     text-align-last: center;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum</p>
+ <p dir="rtl">אמר המחבר</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-empty-inline.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-empty-inline.html
new file mode 100644
index 0000000000..fd3d706d1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-empty-inline.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>Tests justification of empty inline element</title>
+<link rel="author" title="Emil A Eklund" href="eae@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property" title="6.3. Last Line Alignment: the text-align-last property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #justify {
+    text-align-last: justify;
+    margin-bottom: 5px;
+  }
+  #justify > span, #reference > span {
+    padding: 1px;
+    background: black;
+  }
+  #reference {
+    text-align: center;
+  }
+</style>
+<body>
+  <div id="justify"><span></span></div>
+  <div id="reference"><span></span></div>
+  <p>
+    The two black line segments above should align.
+  </p>
+</body>
+<script>
+test(function() {
+  const justify_element = document.getElementById('justify');
+  const justify_rect = justify_element.firstElementChild.getBoundingClientRect();
+  const ref_element = document.getElementById('reference');
+  const ref_rect = ref_element.firstElementChild.getBoundingClientRect();
+  assert_equals(justify_rect.left, ref_rect.left);
+  assert_equals(justify_rect.right, ref_rect.right);
+}, 'content that cannot be justified should be centered when text-align-last is justify');
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-end-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-end-ref.html
new file mode 100644
index 0000000000..ded6defa8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-end-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last: end</title>
+  <meta charset="utf-8">
+  <style>
+   p {
+     text-align: end;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum</p>
+ <p dir="rtl">אמר המחבר</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-end.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-end.html
new file mode 100644
index 0000000000..4b6fe43392
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-end.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last: end</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="match" href="text-align-last-end-ref.html">
+  <style>
+   p {
+     text-align-last: end;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum</p>
+ <p dir="rtl">אמר המחבר</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-interpolation.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-interpolation.html
new file mode 100644
index 0000000000..1af0f91e7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-interpolation.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>text-align-last interpolation</title>
+    <link rel="author" title="Kiet Ho" href="mailto:tho22@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-text/#text-align-last-property">
+    <meta name="assert" content="text-align-last supports discrete animation">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      test_no_interpolation({
+        property: 'text-align-last',
+        from: 'auto',
+        to: 'start'
+      });
+
+      test_no_interpolation({
+        property: 'text-align-last',
+        from: 'justify',
+        to: 'center'
+      });
+
+      test_no_interpolation({
+        property: 'text-align-last',
+        from: 'left',
+        to: 'right'
+      });
+
+      test_no_interpolation({
+        property: 'text-align-last',
+        from: 'end',
+        to: 'match-parent'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-ref.html
new file mode 100644
index 0000000000..d07bed3f77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last: justify</title>
+  <meta charset="utf-8">
+  <style>
+   span.left {
+     position: relative;
+     float: left;
+   }
+   span.right {
+     position: relative;
+     float: right;
+   }
+  </style>
+ </head>
+ <body>
+ <p><span class="left">Lorem</span><span class="right">ipsum</span></p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-rtl-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-rtl-ref.html
new file mode 100644
index 0000000000..d3b941e900
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-rtl-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last: justify in RTL</title>
+  <meta charset="utf-8">
+  <style>
+   span.left {
+     float: left;
+   }
+   span.right {
+     float: right;
+   }
+  </style>
+ </head>
+ <body>
+ <p><span class="right">אמר</span><span class="left">המחבר</span></p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-rtl.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-rtl.html
new file mode 100644
index 0000000000..835e4cdd5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify-rtl.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last: justify in RTL</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="match" href="text-align-last-justify-rtl-ref.html">
+  <style>
+   p {
+     text-align-last: justify;
+   }
+  </style>
+ </head>
+ <body>
+ <p dir="rtl">אמר המחבר</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify.html
new file mode 100644
index 0000000000..c48678b74a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-justify.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last: justify</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="match" href="text-align-last-justify-ref.html">
+  <style>
+   p {
+     text-align-last: justify;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-simple-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-simple-ref.html
new file mode 100644
index 0000000000..3c8ba2e580
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-simple-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+.test {
+    width: 208px;
+    border: 1px solid #000000;
+    font-family: Ahem, monospace;
+    font-size: 1em;
+}
+</style>
+</head>
+<body>
+<div>
+This test checks that text-align-last property works properly.<br/>
+</div>
+<div class="test" style="text-align: end">start end</div>
+
+<div class="test" style="text-align: start">end start</div>
+
+<div class="test" style="text-align: right">left right</div>
+
+<div class="test" style="text-align: left">right left</div>
+
+<div class="test" style="text-align: left">center left</div>
+
+<div class="test" style="text-align: start">start auto</div>
+
+<div class="test" style="text-align: end">end auto</div>
+
+<div class="test" style="text-align: left">left auto</div>
+
+<div class="test" style="text-align: right">right auto</div>
+
+<div class="test" style="text-align: center">center auto</div>
+
+<div class="test" style="text-align: start">justify auto</div>
+
+<div class="test" style="text-align: start">auto&nbsp; justify</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-simple.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-simple.html
new file mode 100644
index 0000000000..6dabb111fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-simple.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>text-align-last</title>
+<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-last-property">
+<link rel="match" href="text-align-last-simple-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+.test {
+    width: 208px;
+    border: 1px solid #000000;
+    font-family: Ahem, monospace;
+    font-size: 1em;
+}
+</style>
+</head>
+<body>
+<div>
+This test checks that text-align-last property works properly.<br/>
+</div>
+<div class="test" style="text-align: start; text-align-last: end">start end</div>
+
+<div class="test" style="text-align: end; text-align-last: start">end start</div>
+
+<div class="test" style="text-align: left; text-align-last: right">left right</div>
+
+<div class="test" style="text-align: right; text-align-last: left">right left</div>
+
+<div class="test" style="text-align: center; text-align-last: left">center left</div>
+
+<div class="test" style="text-align: start; text-align-last: auto">start auto</div>
+
+<div class="test" style="text-align: end; text-align-last: auto">end auto</div>
+
+<div class="test" style="text-align: left; text-align-last: auto">left auto</div>
+
+<div class="test" style="text-align: right; text-align-last: auto">right auto</div>
+
+<div class="test" style="text-align: center; text-align-last: auto">center auto</div>
+
+<div class="test" style="text-align: justify; text-align-last: auto">justify auto</div>
+
+<div class="test" style="text-align: auto; text-align-last: justify">auto justify</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-start-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-start-ref.html
new file mode 100644
index 0000000000..be564fda0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-start-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last: start</title>
+  <meta charset="utf-8">
+  <style>
+   p {
+     text-align: start;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum</p>
+ <p dir="rtl">אמר המחבר</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-start.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-start.html
new file mode 100644
index 0000000000..af5b49dd96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-start.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last: start</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="match" href="text-align-last-start-ref.html">
+  <style>
+   p {
+     text-align: end;
+     text-align-last: start;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum</p>
+ <p dir="rtl">אמר המחבר</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-last-wins-001.html b/testing/web-platform/tests/css/css-text/text-align/text-align-last-wins-001.html
new file mode 100644
index 0000000000..30f1a07864
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-last-wins-001.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS text test: text-align-last has precedence over text-align-all</title>
+<link rel=help href="https://drafts.csswg.org/css-text-3/#text-align-all-property">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+<link rel="match" href="reference/text-align-last-wins-001-ref.html">
+<meta name=assert content="If a line is both the first and last line, text-align-last applies">
+<style>
+div {
+  text-align-last: right;
+  width: 300px;
+  border: solid;
+}
+</style>
+
+<p>Test passes if the words below are aligned to the right of the box.
+
+<div>right<br>right</div>
+
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-001.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-001.html
new file mode 100644
index 0000000000..f1afda9a03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align - match-parent (basic)</title>
+<link rel="author" title="Intel" href="http://www.intel.com">
+<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com">
+<link rel="help" title="7.1. Text Alignment: the 'text-align' property" href="http://www.w3.org/TR/css-text-3/#text-align">
+<link rel="match" href="text-align-007-ref.html">
+<meta name="assert" content="The 'text-align' property set to 'match-parent' on a block element behaves the same as 'inherit'.">
+<style>
+  body {
+    text-align: end;
+  }
+
+  p {
+    text-align: left;
+  }
+
+  div {
+    border: 1px solid blue;
+    text-align: match-parent;
+  }
+</style>
+<body>
+  <p>Test passes if the words "Filler Text" below are aligned to the right, inside the blue box.</p>
+  <div>Filler Text</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-002.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-002.html
new file mode 100644
index 0000000000..19596e36af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-align - computed value for match-parent on the root element</title>
+<link rel="help" href="https://drafts.csswg.org/css-text/#valdef-text-align-match-parent">
+<meta name="assert" content="'text-align: match-parent' on the root element with 'direction: rtl' should compute to 'start'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  html {
+    text-align: match-parent;
+    direction: rtl;
+  }
+  #log {
+    direction: ltr;
+    text-align: start;
+  }
+</style>
+<div id="log"></div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(document.documentElement).textAlign, 'start');
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-01.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-01.html
new file mode 100644
index 0000000000..7560a425ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-01.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="assert" content="Text checks that an element with
+     text-align: match-parent inherits its parent's value and calculates
+     'start' and 'end' with respect to its parent's direction">
+     <link rel="match" href="text-align-match-parent-ref.html">
+    <style type="text/css">
+div.start  { text-align: start; }
+div.end    { text-align: end; }
+div.left   { text-align: left; }
+div.right  { text-align: right; }
+div > div  { text-align: match-parent; }
+    </style>
+  </head>
+  <body>
+   <div>Test passes if each line that says "Left" is aligned left and
+   each line that says "Right" is aligned right</div>
+   <div class="start" dir="ltr"><div dir="ltr">Left</div></div>
+   <div class="start" dir="ltr"><div dir="rtl">Left</div></div>
+   <div class="start" dir="rtl"><div dir="ltr">Right</div></div>
+   <div class="start" dir="rtl"><div dir="rtl">Right</div></div>
+   <div class="end" dir="ltr"><div dir="ltr">Right</div></div>
+   <div class="end" dir="ltr"><div dir="rtl">Right</div></div>
+   <div class="end" dir="rtl"><div dir="ltr">Left</div></div>
+   <div class="end" dir="rtl"><div dir="rtl">Left</div></div>
+   <div class="left" dir="ltr"><div dir="ltr">Left</div></div>
+   <div class="left" dir="ltr"><div dir="rtl">Left</div></div>
+   <div class="left" dir="rtl"><div dir="ltr">Left</div></div>
+   <div class="left" dir="rtl"><div dir="rtl">Left</div></div>
+   <div class="right" dir="ltr"><div dir="ltr">Right</div></div>
+   <div class="right" dir="ltr"><div dir="rtl">Right</div></div>
+   <div class="right" dir="rtl"><div dir="ltr">Right</div></div>
+   <div class="right" dir="rtl"><div dir="rtl">Right</div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-02.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-02.html
new file mode 100644
index 0000000000..0d567cb021
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-02.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Text checks that an element with
+      text-align: match-parent still aligns correctly if the parent's
+      dir attribute is changed">
+     <link rel="match" href="text-align-match-parent-ref.html">
+    <style type="text/css">
+div.start  { text-align: start; }
+div.end    { text-align: end; }
+div.left   { text-align: left; }
+div.right  { text-align: right; }
+div > div  { text-align: match-parent; }
+    </style>
+    <script type="text/javascript">
+function changeParentDir()
+{
+  for (parent = 0; parent < 16; ++parent) {
+     var parentDiv = document.getElementById("d" + parent);
+     if (parentDiv.dir == "rtl") {
+       parentDiv.dir = "ltr";
+     } else {
+       parentDiv.dir = "rtl";
+     }
+   }
+
+  document.documentElement.removeAttribute("class");
+}
+    </script>
+  </head>
+  <body onload="changeParentDir()">
+   <div>Test passes if each line that says "Left" is aligned left and
+   each line that says "Right" is aligned right</div>
+   <div id="d0" class="start" dir="rtl"><div dir="ltr">Left</div></div>
+   <div id="d1" class="start" dir="rtl"><div dir="rtl">Left</div></div>
+   <div id="d2" class="start" dir="ltr"><div dir="ltr">Right</div></div>
+   <div id="d3" class="start" dir="ltr"><div dir="rtl">Right</div></div>
+   <div id="d4" class="end" dir="rtl"><div dir="ltr">Right</div></div>
+   <div id="d5" class="end" dir="rtl"><div dir="rtl">Right</div></div>
+   <div id="d6" class="end" dir="ltr"><div dir="ltr">Left</div></div>
+   <div id="d7" class="end" dir="ltr"><div dir="rtl">Left</div></div>
+   <div id="d8" class="left" dir="rtl"><div dir="ltr">Left</div></div>
+   <div id="d9" class="left" dir="rtl"><div dir="rtl">Left</div></div>
+   <div id="d10" class="left" dir="ltr"><div dir="ltr">Left</div></div>
+   <div id="d11" class="left" dir="ltr"><div dir="rtl">Left</div></div>
+   <div id="d12" class="right" dir="rtl"><div dir="ltr">Right</div></div>
+   <div id="d13" class="right" dir="rtl"><div dir="rtl">Right</div></div>
+   <div id="d14" class="right" dir="ltr"><div dir="ltr">Right</div></div>
+   <div id="d15" class="right" dir="ltr"><div dir="rtl">Right</div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-03.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-03.html
new file mode 100644
index 0000000000..55887fd5d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-03.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Text checks that an element whose
+      text-align property is changed to match-parent aligns correctly">
+     <link rel="match" href="text-align-match-parent-ref.html">
+    <style type="text/css">
+div.start  { text-align: start; }
+div.end    { text-align: end; }
+div.left   { text-align: left; }
+div.right  { text-align: right; }
+div.center { text-align: center; }
+div.match  { text-align: match-parent; }
+    </style>
+   <script type="text/javascript">
+function changeChildAlign()
+{
+  for (child = 0; child < 16; ++child) {
+     var childDiv = document.getElementById("d" + child);
+     childDiv.className = "match";
+   }
+
+  document.documentElement.removeAttribute("class");
+}
+   </script>
+  </head>
+  <body onload="changeChildAlign()">
+   <div>Test passes if each line that says "Left" is aligned left and
+   each line that says "Right" is aligned right</div>
+   <div class="start" dir="ltr"><div id="d0" class="center" dir="ltr">Left</div></div>
+   <div class="start" dir="ltr"><div id="d1" class="center" dir="rtl">Left</div></div>
+   <div class="start" dir="rtl"><div id="d2" class="center" dir="ltr">Right</div></div>
+   <div class="start" dir="rtl"><div id="d3" class="center" dir="rtl">Right</div></div>
+   <div class="end" dir="ltr"><div id="d4" class="center" dir="ltr">Right</div></div>
+   <div class="end" dir="ltr"><div id="d5" class="center" dir="rtl">Right</div></div>
+   <div class="end" dir="rtl"><div id="d6" class="center" dir="ltr">Left</div></div>
+   <div class="end" dir="rtl"><div id="d7" class="center" dir="rtl">Left</div></div>
+   <div class="left" dir="ltr"><div id="d8" class="center" dir="ltr">Left</div></div>
+   <div class="left" dir="ltr"><div id="d9" class="center" dir="rtl">Left</div></div>
+   <div class="left" dir="rtl"><div id="d10" class="center" dir="ltr">Left</div></div>
+   <div class="left" dir="rtl"><div id="d11" class="center" dir="rtl">Left</div></div>
+   <div class="right" dir="ltr"><div id="d12" class="center" dir="ltr">Right</div></div>
+   <div class="right" dir="ltr"><div id="d13" class="center" dir="rtl">Right</div></div>
+   <div class="right" dir="rtl"><div id="d14" class="center" dir="ltr">Right</div></div>
+   <div class="right" dir="rtl"><div id="d15" class="center" dir="rtl">Right</div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-04.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-04.html
new file mode 100644
index 0000000000..dc1c0adcd0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-04.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Text checks that an element with
+      text-align: match-parent still aligns correctly if the parent's
+      width is changed">
+     <link rel="match" href="text-align-match-parent-ref.html">
+    <style type="text/css">
+div.start  { text-align: start; }
+div.end    { text-align: end; }
+div.left   { text-align: left; }
+div.right  { text-align: right; }
+div > div  { text-align: match-parent; }
+    </style>
+    <script type="text/javascript">
+function changeParentWidth()
+{
+  for (parent = 0; parent < 16; ++parent) {
+     var parentDiv = document.getElementById("d" + parent);
+     parentDiv.style.width = "";
+   }
+
+  document.documentElement.removeAttribute("class");
+}
+   </script>
+  </head>
+  <body onload="changeParentWidth()">
+   <div>Test passes if each line that says "Left" is aligned left and
+   each line that says "Right" is aligned right</div>
+   <div id="d0" style="width: 50%;" class="start" dir="ltr"><div dir="ltr">Left</div></div>
+   <div id="d1" style="width: 50%;" class="start" dir="ltr"><div dir="rtl">Left</div></div>
+   <div id="d2" style="width: 50%;" class="start" dir="rtl"><div dir="ltr">Right</div></div>
+   <div id="d3" style="width: 50%;" class="start" dir="rtl"><div dir="rtl">Right</div></div>
+   <div id="d4" style="width: 50%;" class="end" dir="ltr"><div dir="ltr">Right</div></div>
+   <div id="d5" style="width: 50%;" class="end" dir="ltr"><div dir="rtl">Right</div></div>
+   <div id="d6" style="width: 50%;" class="end" dir="rtl"><div dir="ltr">Left</div></div>
+   <div id="d7" style="width: 50%;" class="end" dir="rtl"><div dir="rtl">Left</div></div>
+   <div id="d8" style="width: 50%;" class="left" dir="ltr"><div dir="ltr">Left</div></div>
+   <div id="d9" style="width: 50%;" class="left" dir="ltr"><div dir="rtl">Left</div></div>
+   <div id="d10" style="width: 50%;" class="left" dir="rtl"><div dir="ltr">Left</div></div>
+   <div id="d11" style="width: 50%;" class="left" dir="rtl"><div dir="rtl">Left</div></div>
+   <div id="d12" style="width: 50%;" class="right" dir="ltr"><div dir="ltr">Right</div></div>
+   <div id="d13" style="width: 50%;" class="right" dir="ltr"><div dir="rtl">Right</div></div>
+   <div id="d14" style="width: 50%;" class="right" dir="rtl"><div dir="ltr">Right</div></div>
+   <div id="d15" style="width: 50%;" class="right" dir="rtl"><div dir="rtl">Right</div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-05-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-05-ref.html
new file mode 100644
index 0000000000..de42ee7a5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-05-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text 3 tests: match parent on text-align-last</title>
+<link rel="author" title="Florian RIvoal" href="https://florian.rivoal.net">
+<style>
+section {
+    font-family: monospace;
+    width: 3ch;
+}
+</style>
+
+<p>Test passes if the two “2” are vertically aligned.
+<section>
+    <div>1 2<br>&nbsp; 2</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-05.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-05.html
new file mode 100644
index 0000000000..390d98acc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-05.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text 3 tests: match parent on text-align-last</title>
+<link rel="author" title="Florian RIvoal" href="https://florian.rivoal.net">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+<meta name="assert" content="Check that setting text-align to match parent has the correct effect on text-align-last (even if text-align-all is overridden).">
+<link rel="match" href="text-align-match-parent-05-ref.html">
+<style>
+section {
+    font-family: monospace;
+    width: 3ch;
+}
+div {
+    text-align: match-parent;
+    text-align-all: left;
+}
+</style>
+
+<p>Test passes if the two “2” are vertically aligned.
+<section dir=rtl>
+  <div dir=ltr>1 2 2</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-ref.html
new file mode 100644
index 0000000000..f916b44c98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <style type="text/css">
+div.left   { text-align: left; }
+div.right  { text-align: right; }
+    </style>
+  </head>
+  <body>
+   <div>Test passes if each line that says "Left" is aligned left and
+   each line that says "Right" is aligned right</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-logical.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-logical.html
new file mode 100644
index 0000000000..719fa04fe7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-logical.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html dir="rtl">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent on root, ignoring body propagation</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="author" title="Florian RIvoal" href="https://florian.rivoal.net">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="assert" content="Text checks that
+      text-align: match-parent on a root element with dir=ltr is
+      equivalent to text-align: start (not a physical left or right),
+      inheriting as a logical value">
+    <link rel="match" href="text-align-match-parent-root-ltr-ref.html">
+    <style type="text/css">
+html { text-align: match-parent; }
+    </style>
+  </head>
+  <body dir=ltr>
+    <p>This line should be aligned left</p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-ltr-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-ltr-ref.html
new file mode 100644
index 0000000000..422f4fa51d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-ltr-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <style type="text/css">
+html { text-align: start; }
+    </style>
+  </head>
+  <body>
+    <p>This line should be aligned left</p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-ltr.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-ltr.html
new file mode 100644
index 0000000000..6665703b68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-ltr.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="assert" content="Text checks that
+      text-align: match-parent on a root element with dir=ltr is
+      equivalent to text-align: start">
+    <link rel="match" href="text-align-match-parent-root-ltr-ref.html">
+    <style type="text/css">
+html { text-align: match-parent; }
+    </style>
+  </head>
+  <body>
+    <p>This line should be aligned left</p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-rtl-ref.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-rtl-ref.html
new file mode 100644
index 0000000000..a96db45756
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-rtl-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html dir="rtl">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <style type="text/css">
+html { text-align: start; }
+    </style>
+  </head>
+  <body>
+    <p>This line should be aligned right</p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-rtl.html b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-rtl.html
new file mode 100644
index 0000000000..a2d8f22904
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-match-parent-root-rtl.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="rtl">
+  <head>
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="assert" content="Text checks that
+      text-align: match-parent on a root element with dir=rtl is
+      equivalent to text-align: start">
+    <link rel="match" href="text-align-match-parent-root-rtl-ref.html">
+    <style type="text/css">
+html { text-align: match-parent; }
+    </style>
+  </head>
+  <body>
+    <p>This line should be aligned right</p>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-001.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-001.html
new file mode 100644
index 0000000000..3af1130f2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-001.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; direction: rtl; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="test">TESTI</div>
+<div class="ref">REFER</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-002.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-002.html
new file mode 100644
index 0000000000..27aad6fde6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-002.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; direction: ltr; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div style="direction: rtl;">
+<div class="test">TESTI</div>
+<div class="ref">REFER</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-003.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-003.html
new file mode 100644
index 0000000000..9a007f09fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-003.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div class="test" dir="rtl">TESTI</div>
+<div class="ref">REFER</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-004.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-004.html
new file mode 100644
index 0000000000..b1e01e3ed9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-004.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-004.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="test" dir="ltr">TESTI</div>
+<div class="ref">REFER</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-005.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-005.html
new file mode 100644
index 0000000000..37c6115480
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-005.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, direction: rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-005.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; direction: rtl; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="test">TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-006.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-006.html
new file mode 100644
index 0000000000..b55c7cb7da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-006.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, direction: ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-006.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; direction: ltr; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
+<div style="direction: rtl;">
+<div class="test">TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-007.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-007.html
new file mode 100644
index 0000000000..f79c10947c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-007.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=rtl</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-007.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is horizontal, rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="test" dir="rtl">TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-008.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-008.html
new file mode 100644
index 0000000000..81ff886f75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-008.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=ltr</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-008.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is horizontal, ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="test" dir="ltr">TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-009.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-009.html
new file mode 100644
index 0000000000..bf231c5642
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-009.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=auto, RTL first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-009.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. right when direction is auto and first strong character is rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div class="test" dir="auto">&rlm;TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+<!-- Notes:
+The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-010.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-010.html
new file mode 100644
index 0000000000..215e60b389
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-010.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, dir=auto, LTR first strong</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-010.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is auto and first strong character is ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<div class="test" dir="auto">TES TES TES TES TES TES TES TES</div>
+<div class="ref">REF REF REF REF REF REF REF REF</div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-014.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-014.html
new file mode 100644
index 0000000000..add058c380
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-014.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, pre, dir=rtl inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-014.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. right when base direction is rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="rtl">
+<pre class="test">TES
+&rlm;TIN</pre>
+<div class="ref">REF<br>ERE</div>
+</div>
+<!-- Notes:
+The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-015.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-015.html
new file mode 100644
index 0000000000..b8432da1c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-015.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, pre, dir=ltr inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-015.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. left when base  direction is  ltr.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="ltr">
+<pre class="test">TES
+&rlm;TIN</pre>
+<div class="ref">REF<br>ERE</div>
+</div>
+<!-- Notes:
+The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-016.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-016.html
new file mode 100644
index 0000000000..ab9bc30b59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-016.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, pre, dir=auto</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-016.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. left when direction is auto and first strong character is ltr, and right when first strong is rtl.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test, .ref1, .ref2 { width: 300px; color: orange; font: 25px/1 Ahem; }
+.test { border: 1px solid orange; margin: 20px; }
+.ref1, .ref2 { border-left: 1px solid orange; border-right: 1px solid orange; margin: 0 20px; }
+.ref1 { border-top: 1px solid orange; text-align: left; }
+.ref2 { border-bottom: 1px solid orange; text-align: right; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<pre class="test" dir="auto">TES
+&rlm;TIN</pre>
+<div class="ref1">REF</div>
+<div class="ref2">ERE</div>
+<!-- Notes:
+The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-017.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-017.html
new file mode 100644
index 0000000000..554adb8faf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-017.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>text-align: start, pre, dir=auto on surrounding block</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-align-start-ref-017.html'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. since dir=auto is not inherited by pre, to left in ltr context.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange; margin: 20px; width: 300px; color: orange; font: 25px/1 Ahem; }
+.ref { text-align: left; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if shading in both orange boxes is identical.</div>
+<div dir="auto">
+<pre class="test">TES
+&rlm;TIN</pre>
+<div class="ref">REF<br>ERE</div>
+</div>
+<!-- Notes:
+The &rlm isn't in the Ahem font, so it may cause a spurious effect, such as a thin white line in the middle of a block in IE. This should be ignored. The test needs a RTL character in the Ahem font, so that the &RLM can be removed.
+The rationale for the expected outcome here is described at
+https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext
+"Because the unicode-bidi property does not inherit, setting bidi-override or plaintext on a block box will not affect any descendant blocks. Therefore these values are best used on blocks and inlines that do not contain any block-level structures. "
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-018.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-018.html
new file mode 100644
index 0000000000..a090e56921
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-018.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-align: start, textarea, dir=rtl inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. right when base direction is rtl.">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 300px;  font-size: 24px; line-height: 1;}
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if both words are right-aligned in the box.</div>
+<div dir="rtl">
+<textarea class="test">latin
+و·کمی</textarea>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-019.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-019.html
new file mode 100644
index 0000000000..ec4e4eedde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-019.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-align: start, textarea, dir=ltr inherited</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. left when base direction is ltr.">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 300px;  font-size: 24px; line-height: 1;}
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if both words are left-aligned in the box.</div>
+<div dir="ltr">
+<textarea class="test">latin
+و·کمی</textarea>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-020.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-020.html
new file mode 100644
index 0000000000..41e3716c4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-020.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-align: start, textarea dir=auto on control</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. when dir=auto on textarea, left when first strong is ltr, right when rtl.">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 300px;  font-size: 24px; line-height: 1;}
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the first word is left-aligned, and the second right-aligned in the box.</div>
+<div>
+<textarea class="test" dir="auto">latin
+و·کمی</textarea>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-021.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-021.html
new file mode 100644
index 0000000000..1b8d9728b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-021.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-align: start, textarea, dir=auto on surrounding block</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-align:start aligns inline-level content to the start edge of the line box – ie. since dir=auto is not inherited by textarea, to left in ltr context.">
+<style type='text/css'>
+.test { text-align: start; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 300px;  font-size: 24px; line-height: 1;}
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if both words are left-aligned in both boxes.</div>
+<div dir="auto">
+<textarea class="test">latin
+و·کمی</textarea>
+</div>
+<div dir="auto">
+<textarea class="test">و·کمی
+latin</textarea>
+</div>
+<!--
+Notes:
+The rationale for the expected outcome here is described at
+https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext
+"Because the unicode-bidi property does not inherit, setting bidi-override or plaintext on a block box will not affect any descendant blocks. Therefore these values are best used on blocks and inlines that do not contain any block-level structures. "
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-center.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-center.html
new file mode 100644
index 0000000000..3b8af4537d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-center.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-start-last-start.html">
+  <link rel="mismatch" href="text-align-start-last-end.html">
+  <link rel="mismatch" href="text-align-start-last-justify.html">
+  <style>
+   p {
+     text-align: start;
+     text-align-last: center;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-default.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-default.html
new file mode 100644
index 0000000000..ee626a6ac9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-default.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="match" href="text-align-start-last-start.html">
+  <style>
+   p {
+     text-align: start;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-end.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-end.html
new file mode 100644
index 0000000000..8c7d153fc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-end.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-start-last-start.html">
+  <link rel="mismatch" href="text-align-start-last-center.html">
+  <link rel="mismatch" href="text-align-start-last-justify.html">
+  <style>
+   p {
+     text-align: start;
+     text-align-last: end;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-justify.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-justify.html
new file mode 100644
index 0000000000..2d1714af59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-justify.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-start-last-start.html">
+  <link rel="mismatch" href="text-align-start-last-center.html">
+  <link rel="mismatch" href="text-align-start-last-end.html">
+  <style>
+   p {
+     text-align: start;
+     text-align-last: justify;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-start.html b/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-start.html
new file mode 100644
index 0000000000..2e33fd15b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-start-last-start.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>text-align-last</title>
+  <meta charset="utf-8">
+  <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-align-last-property">
+  <link rel="mismatch" href="text-align-start-last-end.html">
+  <link rel="mismatch" href="text-align-start-last-center.html">
+  <link rel="mismatch" href="text-align-start-last-justify.html">
+  <style>
+   p {
+     text-align: start;
+     text-align-last: start;
+     margin-right: 310px;
+   }
+  </style>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit amet ante molestie a vehicula nulla gravida. Mauris elementum cursus urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut mi at elit consequat aliquam id eu lectus. Etiam tincidunt diam et ante ullamcorper a convallis erat lobortis. Sed blandit ultrices dui et bibendum. Sed condimentum velit eget nibh rutrum cursus. Quisque pretium iaculis gravida. Proin risus eros, iaculis quis fermentum a, adipiscing&nbsp;id&nbsp;mauris.</p>
+ <p dir="rtl">אמר המחבר: החיבור הזה לא חברתיו ללמד לבני האדם את אשר לא ידעו, אלא להזכירם את הידוע להם כבר ומפורסם אצלם פירסום גדול. כי לא תמצא ברוב דברי, אלא דברים שרוב בני האדם יודעים אותם ולא מסתפקים בהם כלל, אלא שכפי רוב פרסומם וכנגד מה שאמתתם גלויה לכל, כך ההעלם מהם מצוי מאד והשכחה רבה. על כן אין התועלת הנלקט מזה הספר יוצא מן הקריאה בו פעם אחת, כי כבר אפשר שלא ימצא הקורא בשכלו חדושים אחר קריאתו שלא היו בו לפני קריאתו, אלא מעט. אבל התועלת יוצא מן החזרה עליו וההתמדה. כי יזכרו לו הדברים האלה הנשכחים מבני האדם בטבע, וישים אל לבו חובתו אשר הוא&nbsp;מתעלם&nbsp;ממנה.</p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-align/text-align-webkit-match-parent.html b/testing/web-platform/tests/css/css-text/text-align/text-align-webkit-match-parent.html
new file mode 100644
index 0000000000..aaf481a9d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-align/text-align-webkit-match-parent.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>text-align: -webkit-match-parent should not be supported</title>
+<link rel="help" href="https://drafts.csswg.org/css-text/#valdef-text-align-match-parent">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+test(function() {
+  assert_false(CSS.supports('text-align: -webkit-match-parent'));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/crashtests/text-autospace-shape-cache-crash.html b/testing/web-platform/tests/css/css-text/text-autospace/crashtests/text-autospace-shape-cache-crash.html
new file mode 100644
index 0000000000..4c4360f5d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/crashtests/text-autospace-shape-cache-crash.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<span>る</span>
+<div>X</div>
+<div>X</div>
+<script>
+document.body.offsetHeight;
+const span = document.querySelector('span');
+const divs = Array.prototype.slice.call(document.querySelectorAll('div'));
+for (const e of divs) {
+  const n = span.cloneNode(span);
+  e.appendChild(n);
+  e.offsetHeight;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-001.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-001.html
new file mode 100644
index 0000000000..40a98861ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../support/get-char-advances.js"></script>
+<style>
+.test {
+  font-family: Ahem;
+  font-size: 40px;
+}
+.no-autospace {
+  text-autospace: no-autospace;
+}
+</style>
+<div id="container">
+  <div class="test" expect="1,3">国国XX国</div>
+  <div class="test" expect="3">国。XX国</div>
+  <div dir="rtl" class="test" expect="1,3">国国XX国</div>
+  <div dir="rtl" class="test" expect="3">国。XX国</div>
+  <div class="test" expect="1,3"><span>国国11国</span></div>
+</div>
+<script>
+// Compute expected advances from advances without `text-autospace` and the
+// `expect` attribute.
+const container = document.getElementById('container');
+container.classList.add('no-autospace');
+const tests = [];
+for (const element of document.getElementsByClassName('test')) {
+  const em = parseFloat(getComputedStyle(element).fontSize);
+  const spacing = em / 8;
+  const advances = getCharAdvances(element);
+  const expect = element.getAttribute('expect').split(',').map(i => parseInt(i));
+  for (const i of expect) {
+    advances[i] += spacing;
+  }
+  tests.push({element: element, advances: advances});
+}
+
+// Apply `text-autospace` and compare the actual advances.
+container.classList.remove('no-autospace');
+for (const t of tests) {
+  const advances = getCharAdvances(t.element);
+  test(() => {
+    assert_array_equals(advances, t.advances);
+  })
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-break-001-ref.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-break-001-ref.html
new file mode 100644
index 0000000000..130c89fcba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-break-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test-container {
+  font-family: Ahem;
+  font-size: 40px;
+  width: 4.5em;
+}
+.test > span {
+  outline: 1px solid blue;
+}
+</style>
+<div class="test-container">
+  <div class="test"><span>国国国国<br>X国</span></div>
+  <div class="test"><span>国国国国<br>1国</span></div>
+  <div class="test"><span>XXXX<br>国X</span></div>
+  <div class="test"><span>1111<br>国1</span></div>
+  <div class="test">国<span>国X<br>国</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-break-001.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-break-001.html
new file mode 100644
index 0000000000..5af0e1f65a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-break-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="match" href="text-autospace-break-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test-container {
+  font-family: Ahem;
+  font-size: 40px;
+  width: 4em;
+}
+.test > span {
+  outline: 1px solid blue;
+}
+</style>
+<div class="test-container">
+  <div class="test"><span>国国国国X国</span></div>
+  <div class="test"><span>国国国国1国</span></div>
+  <div class="test"><span>XXXX国X</span></div>
+  <div class="test"><span>1111国1</span></div>
+  <div class="test">国<span>国X国</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-001.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-001.html
new file mode 100644
index 0000000000..db718eca8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="match" href="text-autospace-no-001-ref.html">
+<link rel="mismatch" href="text-autospace-no-001-mismatch-ref.html">
+<style>
+.no-as { text-autospace: no-autospace; }
+</style>
+<div class="test no-as">国国AA国国AA国国</div>
+<div class="test">国国AA国国AA国国</div>
+<script>
+document.body.offsetTop;  // Force layout.
+for (const element of document.getElementsByClassName('test')) {
+  element.classList.toggle('no-as');
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-001-ref.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-001-ref.html
new file mode 100644
index 0000000000..d26fae09b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-001-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div id="target">国国AA国国AA国々</div>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-001.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-001.html
new file mode 100644
index 0000000000..dfde20a265
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-001.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="help" href="text-autospace-dynamic-text-001-ref.html">
+<div id="target">国国</div>
+<script>
+const target_text = document.getElementById('target').firstChild;
+for (const ch of 'AA国国AA国国') {
+  document.body.offsetTop;  // Force layout.
+  target_text.appendData(ch);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-002.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-002.html
new file mode 100644
index 0000000000..ffc3d907ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-002.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="help" href="text-autospace-dynamic-text-001-ref.html">
+<div id="target">国国国国</div>
+<script>
+const target_text = document.getElementById('target').firstChild;
+document.body.offsetTop;  // Force layout.
+target_text.insertData(2, 'AA国国AA');
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-003.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-003.html
new file mode 100644
index 0000000000..cf2237d48e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-003.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="help" href="text-autospace-dynamic-text-001-ref.html">
+<div id="target">国国国国国</div>
+<script>
+const target_text = document.getElementById('target').firstChild;
+document.body.offsetTop;  // Force layout.
+target_text.replaceData(2, 1, 'AA国国AA');
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-004.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-004.html
new file mode 100644
index 0000000000..c1057fc900
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-dynamic-text-004.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="help" href="text-autospace-dynamic-text-001-ref.html">
+<div id="target">国国AAAA国国AAAA国国</div>
+<script>
+const target_text = document.getElementById('target').firstChild;
+document.body.offsetTop;  // Force layout.
+target_text.deleteData(2, 2);
+document.body.offsetTop;  // Force layout.
+target_text.deleteData(6, 2);
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-first-line-001.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-first-line-001.html
new file mode 100644
index 0000000000..7294856b8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-first-line-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../support/get-char-advances.js"></script>
+<style>
+.test {
+  font-family: Ahem;
+  font-size: 40px;
+}
+.first-line::first-line {
+  font-size: 200%;
+}
+</style>
+<div id="container">
+  <div id="test1" class="test first-line">国国XX国<br>国国XX国</div>
+</div>
+<script>
+test(() => {
+  const advances = getCharAdvances(test1);
+  assert_array_equals(advances, [80, 90, 80, 90, 80, 40, 45, 40, 45, 40]);
+})
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-ligature-001.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-ligature-001.html
new file mode 100644
index 0000000000..0d431f65d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-ligature-001.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+@font-face {
+  font-family: ligature-font;
+  src: url('../../css-fonts/support/fonts/Lato-Medium-Liga.ttf');
+}
+#test-container {
+  font-family: ligature-font;
+  font-size: 40px;
+}
+.base {
+  text-autospace: no-autospace;
+}
+</style>
+<div id="test-container">
+  <div id="test1">国fi</div>
+  <div id="test2">fi国</div>
+  <div id="test3">国fi国</div>
+</div>
+<script>
+function getAdvance(node, start, end) {
+  const range = document.createRange();
+  range.setStart(node, start);
+  range.setEnd(node, end);
+  const bounds = range.getBoundingClientRect();
+  return bounds.width;
+}
+
+class AutoSpaceTest {
+  constructor(id) {
+    const element = document.getElementById(id);
+
+    // Create a base element with the `base` class.
+    const baseElement = element.cloneNode(true);
+    baseElement.removeAttribute('id');
+    baseElement.classList.add('base');
+    element.after(baseElement);
+
+    this.element = element;
+    this.baseElement = baseElement;
+  }
+
+  assert(start, end, spacing) {
+    const node = this.element.firstChild;
+    const advance = getAdvance(node, start, end);
+    const baseNode = this.baseElement.firstChild;
+    const baseAdvance = getAdvance(baseNode, start, end);
+    assert_approx_equals(advance, baseAdvance + spacing, 0.001);
+  }
+}
+
+const test1 = new AutoSpaceTest('test1');
+const test2 = new AutoSpaceTest('test2');
+const test3 = new AutoSpaceTest('test3');
+
+function run() {
+  if (!CSS.supports('text-autospace', 'no-autospace')) {
+    test(() => assert_true(false), 'text-autospace not implemented');
+    return;
+  }
+
+  // The `getBoundingClientRect()` for the middle of a ligature isn't
+  // well-defined. Ensure ligatures are measured as a range.
+  const spacing = 5;
+  test(() => test1.assert(0, 1, spacing));
+  test(() => test1.assert(1, 3, 0));
+
+  test(() => test2.assert(0, 2, spacing));
+  test(() => test2.assert(2, 3, 0));
+
+  test(() => test3.assert(0, 1, spacing));
+  test(() => test3.assert(1, 3, spacing));
+  test(() => test3.assert(3, 4, 0));
+}
+
+setup({explicit_done: true});
+window.addEventListener('load', () => {
+  document.fonts.ready.then(() => {
+    run();
+    done();
+  });
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-mixed-001.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-mixed-001.html
new file mode 100644
index 0000000000..731f74561a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-mixed-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../support/get-char-advances.js"></script>
+<style>
+.test {
+  font-family: Ahem;
+  font-size: 40px;
+}
+.no-autospace {
+  text-autospace: no-autospace;
+}
+</style>
+<div id="container">
+  <div class="test" expect="1,5">国国&#x5d0;&#x5d1;&#x5d2;国国</div>
+  <div class="test" expect="1,5">国国<span>&#x5d0;&#x5d1;</span>&#x5d2;国国</div>
+  <div class="test" expect="1,11">国国&#1605;&#1615;&#1585;&#1614;&#1576;&#1614;&#1617;&#1593;&#1618;国国</div>
+</div>
+<script>
+// Compute expected advances from advances without `text-autospace` and the
+// `expect` attribute.
+const container = document.getElementById('container');
+container.classList.add('no-autospace');
+const tests = [];
+for (const element of document.getElementsByClassName('test')) {
+  const em = parseFloat(getComputedStyle(element).fontSize);
+  const spacing = em / 8;
+  const advances = getCharAdvances(element);
+  const expect = element.getAttribute('expect').split(',').map(i => parseInt(i));
+  for (const i of expect) {
+    advances[i] += spacing;
+  }
+  tests.push({element: element, advances: advances});
+}
+
+// Apply `text-autospace` and compare the actual advances.
+container.classList.remove('no-autospace');
+for (const t of tests) {
+  const advances = getCharAdvances(t.element);
+  test(() => {
+    assert_array_equals(advances, t.advances);
+  })
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-no-001-mismatch-ref.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-no-001-mismatch-ref.html
new file mode 100644
index 0000000000..b249fd63c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-no-001-mismatch-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<div>国国AA国国AA国国</div>
+<div>国国AA国国AA国国</div>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-no-001-ref.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-no-001-ref.html
new file mode 100644
index 0000000000..e706405772
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-no-001-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<div>国国AA国国AA国国</div>
+<div>国国&ZeroWidthSpace;AA&ZeroWidthSpace;国国&ZeroWidthSpace;AA&ZeroWidthSpace;国国</div>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-no-001.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-no-001.html
new file mode 100644
index 0000000000..6b5fd6132d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-no-001.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="match" href="text-autospace-no-001-ref.html">
+<link rel="mismatch" href="text-autospace-no-001-mismatch-ref.html">
+<style>
+.no-as { text-autospace: no-autospace; }
+</style>
+<div>国国AA国国AA国国</div>
+<div class="no-as">国国AA国国AA国国</div>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-combine-001-ref.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-combine-001-ref.html
new file mode 100644
index 0000000000..36c1cb45a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-combine-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+#container {
+  writing-mode: vertical-rl;
+  font-size: 20px;
+}
+.tcy {
+  text-combine-upright: all;
+}
+.no-autospace {
+  text-autospace: no-autospace;
+}
+</style>
+<div id="container">
+  <div class="no-autospace">国<span class="tcy">XX</span>国</div>
+  <div class="no-autospace">国<span class="tcy">11</span>国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-combine-001.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-combine-001.html
new file mode 100644
index 0000000000..bed306e159
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-combine-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="match" href="text-autospace-vertical-combine-001-ref.html">
+<style>
+#container {
+  writing-mode: vertical-rl;
+  font-size: 20px;
+}
+.tcy {
+  text-combine-upright: all;
+}
+</style>
+<div id="container">
+  <div>国<span class="tcy">XX</span>国</div>
+  <div>国<span class="tcy">11</span>国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-upright-001-ref.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-upright-001-ref.html
new file mode 100644
index 0000000000..1c9caec112
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-upright-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+#container {
+  writing-mode: vertical-rl;
+  font-size: 20px;
+}
+.upright {
+  text-orientation: upright;
+}
+.no-autospace {
+  text-autospace: no-autospace;
+}
+</style>
+<div id="container">
+  <div class="upright no-autospace">国X国</div>
+  <div class="upright no-autospace">国1国</div>
+  <div class="no-autospace">国<span class="upright">X</span>国</div>
+  <div class="no-autospace">国<span class="upright">1</span>国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-upright-001.html b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-upright-001.html
new file mode 100644
index 0000000000..21d454e713
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-autospace/text-autospace-vertical-upright-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<link rel="match" href="text-autospace-vertical-upright-001-ref.html">
+<style>
+#container {
+  writing-mode: vertical-rl;
+  font-size: 20px;
+}
+.upright {
+  text-orientation: upright;
+}
+</style>
+<div id="container">
+  <div class="upright">国X国</div>
+  <div class="upright">国1国</div>
+  <div>国<span class="upright">X</span>国</div>
+  <div>国<span class="upright">1</span>国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-join-001-ref.html b/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-join-001-ref.html
new file mode 100644
index 0000000000..1baeea5b0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-join-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  table {
+    font-family: 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl>
+<tr><!-- alef, final form as it doesn't have a medial form -->
+  <td>&#xFE8E;
+  <td>&#xFE8E;
+<tr><!-- alef, final form -->
+  <td>&#xFE8E;
+  <td>&#xFE8E;
+<tr><!-- beh, initial form -->
+  <td>&#xFE91;
+  <td>&#xFE91;
+<tr><!-- beh, medial form -->
+  <td>&#xFE92;
+  <td>&#xFE92;
+<tr><!-- beh, final form -->
+  <td>&#xFE90;
+  <td>&#xFE90;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-no-join-001-ref.html b/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-no-join-001-ref.html
new file mode 100644
index 0000000000..4bf1b4aed7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-no-join-001-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test test</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+  }
+  table {
+    font-family: 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl lang=ar>
+<tr><!-- alef, isolated rather than final -->
+  <td>&#x640;&#xFE8D;
+  <td>&#x640;&#xFE8D;
+<tr><!-- beh, isolated rather than initial -->
+  <td>&#xFE8F;&#x640;
+  <td>&#xFE8F;&#x640;
+<tr><!-- beh, final rather than medial -->
+  <td>&#x640;&#xFE90;&#x640;
+  <td>&#x640;&#xFE90;&#x640;
+<tr><!-- beh, isolated rather than medial -->
+  <td>&#x640;&#xFE8F;&#x640;
+  <td>&#x640;&#xFE8F;&#x640;
+<tr><!-- beh, initial rather than medial -->
+  <td>&#x640;&#xFE91;&#x640;
+  <td>&#x640;&#xFE91;&#x640;
+<tr><!-- beh, isolated rather than final -->
+  <td>&#x640;&#xFE8F;
+  <td>&#x640;&#xFE8F;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-tatweel-001-ref.html b/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-tatweel-001-ref.html
new file mode 100644
index 0000000000..87880e666a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-tatweel-001-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+  }
+  table {
+    font-family: 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl lang=ar>
+<tr><!-- alef, final form as it doesn't have a medial form -->
+  <td>&#x640;&#xFE8E;&#x640;
+  <td>&#x640;&#xFE8E;&#x640;
+<tr><!-- alef, final form -->
+  <td>&#x640;&#xFE8E;
+  <td>&#x640;&#xFE8E;
+<tr><!-- beh, initial form -->
+  <td>&#xFE91;&#x640;
+  <td>&#xFE91;&#x640;
+<tr><!-- beh, medial form -->
+  <td>&#x640;&#xFE92;&#x640;
+  <td>&#x640;&#xFE92;&#x640;
+<tr><!-- beh, final form -->
+  <td>&#x640;&#xFE90;
+  <td>&#x640;&#xFE90;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-tatweel-002-ref.html b/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-tatweel-002-ref.html
new file mode 100644
index 0000000000..4393172ac2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/reference/shaping-tatweel-002-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'tatweel';
+    src: url('/fonts/Scheherazade-Regular.woff') format('woff');
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  span {
+    font-family: 'tatweel';
+    line-height: 0;
+  }
+  table {
+    font-family: 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl lang=ar>
+<tr><!-- alef, final form as it doesn't have a medial form -->
+  <td><span>&#x640;</span>&#xFE8E;<span>&#x640;</span>
+  <td><span>&#x640;</span>&#xFE8E;<span>&#x640;</span>
+<tr><!-- alef, final form -->
+  <td><span>&#x640;</span>&#xFE8E;
+  <td><span>&#x640;</span>&#xFE8E;
+<tr><!-- beh, initial form -->
+  <td>&#xFE91;<span>&#x640;</span>
+  <td>&#xFE91;<span>&#x640;</span>
+<tr><!-- beh, medial form -->
+  <td><span>&#x640;</span>&#xFE92;<span>&#x640;</span>
+  <td><span>&#x640;</span>&#xFE92;<span>&#x640;</span>
+<tr><!-- beh, final form -->
+  <td><span>&#x640;</span>&#xFE90;
+  <td><span>&#x640;</span>&#xFE90;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/shaping-join-001.html b/testing/web-platform/tests/css/css-text/text-encoding/shaping-join-001.html
new file mode 100644
index 0000000000..c4a4d00c92
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/shaping-join-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: zwj and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch23.pdf">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch09.pdf">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_joining_enforcement">
+<link rel="match" href="reference/shaping-join-001-ref.html">
+<meta name="assert" content="Arabic characters next to a ZERO WIDTH JOINER character must take their correct positional form.">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  table {
+    font-family: 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl>
+<tr><!-- alef, final form as it doesn't have a medial form -->
+  <td>&zwj;&#x0627;&zwj;
+  <td>&#xFE8E;
+<tr><!-- alef, final form -->
+  <td>&zwj;&#x0627;
+  <td>&#xFE8E;
+<tr><!-- beh, initial form -->
+  <td>&#x0628;&zwj;
+  <td>&#xFE91;
+<tr><!-- beh, medial form -->
+  <td>&zwj;&#x0628;&zwj;
+  <td>&#xFE92;
+<tr><!-- beh, final form -->
+  <td>&zwj;&#x0628;
+  <td>&#xFE90;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/shaping-join-002.html b/testing/web-platform/tests/css/css-text/text-encoding/shaping-join-002.html
new file mode 100644
index 0000000000..1e4eaf7fe9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/shaping-join-002.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: zwj and text-shaping, cross font, fallback</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch23.pdf">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch09.pdf">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_joining_enforcement">
+<link rel="match" href="reference/shaping-join-001-ref.html">
+<meta name="assert" content="Arabic characters next to a ZERO WIDTH JOINER character must take their correct positional form, even if the ZWJ comes from a differnt font due to font fallback.">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'primary';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    unicode-range: U+20;
+  }
+  @font-face {
+    font-family: 'joiners';
+    src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
+    unicode-range: U+200C-200D;
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  table {
+    /*using a primary font with just U+20 (space) to get the baseline right*/
+    font-family: 'primary', 'joiners', 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl>
+<tr><!-- alef, final form as it doesn't have a medial form -->
+  <td>&zwj;&#x0627;&zwj;
+  <td>&#xFE8E;
+<tr><!-- alef, final form -->
+  <td>&zwj;&#x0627;
+  <td>&#xFE8E;
+<tr><!-- beh, initial form -->
+  <td>&#x0628;&zwj;
+  <td>&#xFE91;
+<tr><!-- beh, medial form -->
+  <td>&zwj;&#x0628;&zwj;
+  <td>&#xFE92;
+<tr><!-- beh, final form -->
+  <td>&zwj;&#x0628;
+  <td>&#xFE90;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/shaping-join-003.html b/testing/web-platform/tests/css/css-text/text-encoding/shaping-join-003.html
new file mode 100644
index 0000000000..71459335d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/shaping-join-003.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: zwj and text-shaping, cross font, explicit</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch23.pdf">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch09.pdf">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_joining_enforcement">
+<link rel="match" href="reference/shaping-join-001-ref.html">
+<meta name="assert" content="Arabic characters next to a ZERO WIDTH JOINER character must take their correct positional form, even if the ZWJ comes from a differnt font due to being in a different element with an explicit different font.">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'joiners';
+    src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  span {
+    font-family: 'joiners';
+    line-height: 0;
+  }
+  table {
+    font-family: 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl>
+<tr><!-- alef, final form as it doesn't have a medial form -->
+  <td><span>&zwj;</span>&#x0627;<span>&zwj;</span>
+  <td>&#xFE8E;
+<tr><!-- alef, final form -->
+  <td><span>&zwj;</span>&#x0627;
+  <td>&#xFE8E;
+<tr><!-- beh, initial form -->
+  <td>&#x0628;<span>&zwj;</span>
+  <td>&#xFE91;
+<tr><!-- beh, medial form -->
+  <td><span>&zwj;</span>&#x0628;<span>&zwj;</span>
+  <td>&#xFE92;
+<tr><!-- beh, final form -->
+  <td><span>&zwj;</span>&#x0628;
+  <td>&#xFE90;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/shaping-no-join-001.html b/testing/web-platform/tests/css/css-text/text-encoding/shaping-no-join-001.html
new file mode 100644
index 0000000000..738189d3a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/shaping-no-join-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: zwnj and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch23.pdf">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch09.pdf">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_disjoining_enforcement">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_joining_enforcement">
+<link rel="match" href="reference/shaping-no-join-001-ref.html">
+<meta name="assert" content="Arabic characters next to a ZERO WIDTH NON JOINER character must not take their positional form. ">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  table {
+    font-family: 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl lang=ar>
+<tr><!-- alef, isolated rather than final -->
+  <td>&#x640;&zwnj;&#x0627;
+  <td>&#x640;&#xFE8D;
+<tr><!-- beh, isolated rather than initial -->
+  <td>&#x0628;&zwnj;&#x640;
+  <td>&#xFE8F;&#x640;
+<tr><!-- beh, final rather than medial -->
+  <td>&#x640;&#x0628;&zwnj;&#x640;
+  <td>&#x640;&#xFE90;&#x640;
+<tr><!-- beh, isolated rather than medial -->
+  <td>&#x640;&zwnj;&#x0628;&zwnj;&#x640;
+  <td>&#x640;&#xFE8F;&#x640;
+<tr><!-- beh, initial rather than medial -->
+  <td>&#x640;&zwnj;&#x0628;&#x640;
+  <td>&#x640;&#xFE91;&#x640;
+<tr><!-- beh, isolated rather than final -->
+  <td>&#x640;&zwnj;&#x0628;
+  <td>&#x640;&#xFE8F;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/shaping-no-join-002.html b/testing/web-platform/tests/css/css-text/text-encoding/shaping-no-join-002.html
new file mode 100644
index 0000000000..14fa73ed85
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/shaping-no-join-002.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: zwnj and text-shaping, cross font, fallback</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch23.pdf">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch09.pdf">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_disjoining_enforcement">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_joining_enforcement">
+<link rel="match" href="reference/shaping-no-join-001-ref.html">
+<meta name="assert" content="Arabic characters next to a ZERO WIDTH NON JOINER character must not take their positional form, even if the ZWNJ comes from a differnt font due to font fallback.">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'primary';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    unicode-range: U+20;
+  }
+  @font-face {
+    font-family: 'joiners';
+    src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
+    unicode-range: U+200C-200D;
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  table {
+    /*using a primary font with just U+20 (space) to get the baseline right*/
+    font-family: 'primary', 'joiners', 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl lang=ar>
+<tr><!-- alef, isolated rather than final -->
+  <td>&#x640;&zwnj;&#x0627;
+  <td>&#x640;&#xFE8D;
+<tr><!-- beh, isolated rather than initial -->
+  <td>&#x0628;&zwnj;&#x640;
+  <td>&#xFE8F;&#x640;
+<tr><!-- beh, final rather than medial -->
+  <td>&#x640;&#x0628;&zwnj;&#x640;
+  <td>&#x640;&#xFE90;&#x640;
+<tr><!-- beh, isolated rather than medial -->
+  <td>&#x640;&zwnj;&#x0628;&zwnj;&#x640;
+  <td>&#x640;&#xFE8F;&#x640;
+<tr><!-- beh, initial rather than medial -->
+  <td>&#x640;&zwnj;&#x0628;&#x640;
+  <td>&#x640;&#xFE91;&#x640;
+<tr><!-- beh, isolated rather than final -->
+  <td>&#x640;&zwnj;&#x0628;
+  <td>&#x640;&#xFE8F;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/shaping-no-join-003.html b/testing/web-platform/tests/css/css-text/text-encoding/shaping-no-join-003.html
new file mode 100644
index 0000000000..e7d8c85701
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/shaping-no-join-003.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: zwnj and text-shaping, cross font, explicit</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch23.pdf">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch09.pdf">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_disjoining_enforcement">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_joining_enforcement">
+<link rel="match" href="reference/shaping-no-join-001-ref.html">
+<meta name="assert" content="Arabic characters next to a ZERO WIDTH NON JOINER character must not take their positional form, even if the ZWNJ comes from a differnt font due to being in a different element with an explicit different font.">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'joiners';
+    src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  span {
+    font-family: 'joiners';
+    line-height: 0;
+  }
+  table {
+    font-family: 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl lang=ar>
+<tr><!-- alef, isolated rather than final -->
+  <td>&#x640;<span>&zwnj;</span>&#x0627;
+  <td>&#x640;&#xFE8D;
+<tr><!-- beh, isolated rather than initial -->
+  <td>&#x0628;<span>&zwnj;</span>&#x640;
+  <td>&#xFE8F;&#x640;
+<tr><!-- beh, final rather than medial -->
+  <td>&#x640;&#x0628;<span>&zwnj;</span>&#x640;
+  <td>&#x640;&#xFE90;&#x640;
+<tr><!-- beh, isolated rather than medial -->
+  <td>&#x640;<span>&zwnj;</span>&#x0628;<span>&zwnj;</span>&#x640;
+  <td>&#x640;&#xFE8F;&#x640;
+<tr><!-- beh, initial rather than medial -->
+  <td>&#x640;<span>&zwnj;</span>&#x0628;&#x640;
+  <td>&#x640;&#xFE91;&#x640;
+<tr><!-- beh, isolated rather than final -->
+  <td>&#x640;<span>&zwnj;</span>&#x0628;
+  <td>&#x640;&#xFE8F;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/shaping-tatweel-001.html b/testing/web-platform/tests/css/css-text/text-encoding/shaping-tatweel-001.html
new file mode 100644
index 0000000000..eaf5c9d338
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/shaping-tatweel-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: tatweel and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch09.pdf">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_joining_enforcement">
+<link rel="match" href="reference/shaping-tatweel-001-ref.html">
+<meta name="assert" content="Arabic characters next to a U+0640 ARABIC TATWEEL character must take their correct positional form.">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  table {
+    font-family: 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl lang=ar>
+<tr><!-- alef, final form as it doesn't have a medial form -->
+  <td>&#x640;&#x0627;&#x640;
+  <td>&#x640;&#xFE8E;&#x640;
+<tr><!-- alef, final form -->
+  <td>&#x640;&#x0627;
+  <td>&#x640;&#xFE8E;
+<tr><!-- beh, initial form -->
+  <td>&#x0628;&#x640;
+  <td>&#xFE91;&#x640;
+<tr><!-- beh, medial form -->
+  <td>&#x640;&#x0628;&#x640;
+  <td>&#x640;&#xFE92;&#x640;
+<tr><!-- beh, final form -->
+  <td>&#x640;&#x0628;
+  <td>&#x640;&#xFE90;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/shaping-tatweel-002.html b/testing/web-platform/tests/css/css-text/text-encoding/shaping-tatweel-002.html
new file mode 100644
index 0000000000..f6878efe70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/shaping-tatweel-002.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: tatweel and text-shaping, cross font, fallback</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch09.pdf">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_joining_enforcement">
+<link rel="match" href="reference/shaping-tatweel-002-ref.html">
+<meta name="assert" content="Arabic characters next to a U+0640 ARABIC TATWEEL character must take their correct positional form, even if the tatweel comes from a differnt font via font due to font fallback.">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'primary';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+    unicode-range: U+20;
+  }
+  @font-face {
+    font-family: 'tatweel';
+    src: url('/fonts/Scheherazade-Regular.woff') format('woff');
+    unicode-range: U+0640;
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  table {
+    /*using a primary font with just U+20 (space) to get the baseline right*/
+    font-family: 'primary', 'tatweel', 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl lang=ar>
+<tr><!-- alef, final form as it doesn't have a medial form -->
+  <td>&#x640;&#x0627;&#x640;
+  <td>&#x640;&#xFE8E;&#x640;
+<tr><!-- alef, final form -->
+  <td>&#x640;&#x0627;
+  <td>&#x640;&#xFE8E;
+<tr><!-- beh, initial form -->
+  <td>&#x0628;&#x640;
+  <td>&#xFE91;&#x640;
+<tr><!-- beh, medial form -->
+  <td>&#x640;&#x0628;&#x640;
+  <td>&#x640;&#xFE92;&#x640;
+<tr><!-- beh, final form -->
+  <td>&#x640;&#x0628;
+  <td>&#x640;&#xFE90;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-encoding/shaping-tatweel-003.html b/testing/web-platform/tests/css/css-text/text-encoding/shaping-tatweel-003.html
new file mode 100644
index 0000000000..7e7107bc73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-encoding/shaping-tatweel-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: tatweel and text-shaping, cross font, explicit</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://www.unicode.org/versions/Unicode11.0.0/ch09.pdf">
+<link rel="help" href="https://www.w3.org/TR/alreq/#h_joining_enforcement">
+<link rel="match" href="reference/shaping-tatweel-002-ref.html">
+<meta name="assert" content="Arabic characters next to a U+0640 ARABIC TATWEEL character must take their correct positional form, even if the tatweel comes from a differnt font due to being in a different element with an explicit different font.">
+<style>
+  table {
+    font-size: 3em;
+    border-spacing: 0 3px;
+  }
+  td {
+    padding: 0 0.5ch;
+    line-height: 1;
+    border: 1px solid;
+  }
+  @font-face {
+    font-family: 'tatweel';
+    src: url('/fonts/Scheherazade-Regular.woff') format('woff');
+  }
+  @font-face {
+    font-family: 'csstest_noto';
+    src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+  }
+  span {
+    font-family: 'tatweel';
+    line-height: 0;
+  }
+  table {
+    font-family: 'csstest_noto';
+  }
+</style>
+
+<p>Test passes if both halves of each of the pairs below are identical:
+
+<table dir=rtl lang=ar>
+<tr><!-- alef, final form as it doesn't have a medial form -->
+  <td><span>&#x640;</span>&#x0627;<span>&#x640;</span>
+  <td><span>&#x640;</span>&#xFE8E;<span>&#x640;</span>
+<tr><!-- alef, final form -->
+  <td><span>&#x640;</span>&#x0627;
+  <td><span>&#x640;</span>&#xFE8E;
+<tr><!-- beh, initial form -->
+  <td>&#x0628;<span>&#x640;</span>
+  <td>&#xFE91;<span>&#x640;</span>
+<tr><!-- beh, medial form -->
+  <td><span>&#x640;</span>&#x0628;<span>&#x640;</span>
+  <td><span>&#x640;</span>&#xFE92;<span>&#x640;</span>
+<tr><!-- beh, final form -->
+  <td><span>&#x640;</span>&#x0628;
+  <td><span>&#x640;</span>&#xFE90;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/support/fake-group-align.css b/testing/web-platform/tests/css/css-text/text-group-align/support/fake-group-align.css
new file mode 100644
index 0000000000..d1a7d1aab0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/support/fake-group-align.css
@@ -0,0 +1,27 @@
+.group {
+    inline-size: min-content;
+}
+
+.group-align-left {
+    /* Only the one that matches the inline axis will apply */
+    margin-bottom: auto;
+    margin-right: auto;
+}
+
+.group-align-right {
+    /* Only the one that matches the inline axis will apply */
+    margin-top: auto;
+    margin-left: auto;
+}
+
+.group-align-center {
+    margin-inline: auto;
+}
+
+.group-align-start {
+    margin-inline-end: auto;
+}
+
+.group-align-end {
+    margin-inline-start: auto;
+}
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/support/test-helpers.css b/testing/web-platform/tests/css/css-text/text-group-align/support/test-helpers.css
new file mode 100644
index 0000000000..d79e79cd86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/support/test-helpers.css
@@ -0,0 +1,9 @@
+.text-container {
+    inline-size: 200px;
+    border: 1px solid black;
+    display: inline-block;
+}
+
+.pre {
+    white-space: pre;
+}
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/support/test-helpers.js b/testing/web-platform/tests/css/css-text/text-group-align/support/test-helpers.js
new file mode 100644
index 0000000000..27b6a7baf1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/support/test-helpers.js
@@ -0,0 +1,36 @@
+const simpleTestString = `ABCDEFGHIJKLO
+AAAAAAAA
+AAAA
+AA
+A`;
+
+function generateSimpleTest({ textGroupAlign, textAlign, direction, writingMode }) {
+    if (!direction)
+        direction = "ltr";
+    if (!writingMode)
+        writingMode = "horizontal-tb";
+
+    const container = document.createElement("div");
+    container.textContent = simpleTestString;
+    container.style = `text-group-align: ${textGroupAlign}; text-align: ${textAlign}; direction: ${direction}; writing-mode: ${writingMode}`;
+    container.classList.add("text-container", "pre");
+    document.body.append(container);
+}
+
+function generateSimpleReference({ textGroupAlign, textAlign, direction, writingMode }) {
+    if (!direction)
+        direction = "ltr";
+    if (!writingMode)
+        writingMode = "horizontal-tb";
+
+    const container = document.createElement("div");
+    container.classList.add("text-container", "pre");
+    container.style = `text-align: ${textAlign}; direction: ${direction}; writing-mode: ${writingMode}`;
+
+    const group = document.createElement("div");
+    group.textContent = simpleTestString;
+    group.classList.add("group", `group-align-${textGroupAlign}`);
+    container.append(group);
+
+    document.body.append(container);
+}
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center-ref.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center-ref.html
new file mode 100644
index 0000000000..919747cebb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference: text-group-align: center</title>
+<link rel="stylesheet" href="support/test-helpers.css">
+<link rel="stylesheet" href="support/fake-group-align.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleReference({ textGroupAlign: "center", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center-vlr-ref.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center-vlr-ref.html
new file mode 100644
index 0000000000..6b74aac823
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center-vlr-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference: text-group-align: center</title>
+<link rel="stylesheet" href="support/test-helpers.css">
+<link rel="stylesheet" href="support/fake-group-align.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleReference({ textGroupAlign: "center", writingMode: "vertical-lr", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center-vlr.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center-vlr.html
new file mode 100644
index 0000000000..e18cf34830
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center-vlr.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>text-group-align: center</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<link rel="match" href="text-group-align-center-vlr-ref.html">
+<link rel="stylesheet" href="support/test-helpers.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleTest({ textGroupAlign: "center", writingMode: "vertical-lr", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center.html
new file mode 100644
index 0000000000..e4acc744c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-center.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>text-group-align: center</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<link rel="match" href="text-group-align-center-ref.html">
+<link rel="stylesheet" href="support/test-helpers.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleTest({ textGroupAlign: "center", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end-ref.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end-ref.html
new file mode 100644
index 0000000000..2c8d2da99d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference: text-group-align: end</title>
+<link rel="stylesheet" href="support/test-helpers.css">
+<link rel="stylesheet" href="support/fake-group-align.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleReference({ textGroupAlign: "end", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end-vlr-ref.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end-vlr-ref.html
new file mode 100644
index 0000000000..9ea04f6c6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end-vlr-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference: text-group-align: end</title>
+<link rel="stylesheet" href="support/test-helpers.css">
+<link rel="stylesheet" href="support/fake-group-align.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleReference({ textGroupAlign: "end", writingMode: "vertical-lr", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end-vlr.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end-vlr.html
new file mode 100644
index 0000000000..1f690b44d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end-vlr.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>text-group-align: end</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<link rel="match" href="text-group-align-end-vlr-ref.html">
+<link rel="stylesheet" href="support/test-helpers.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleTest({ textGroupAlign: "end", writingMode: "vertical-lr", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end.html
new file mode 100644
index 0000000000..1929f59ee0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-end.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>text-group-align: end</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<link rel="match" href="text-group-align-end-ref.html">
+<link rel="stylesheet" href="support/test-helpers.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleTest({ textGroupAlign: "end", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left-ref.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left-ref.html
new file mode 100644
index 0000000000..f04180608a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference: text-group-align: left</title>
+<link rel="stylesheet" href="support/test-helpers.css">
+<link rel="stylesheet" href="support/fake-group-align.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleReference({ textGroupAlign: "left", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left-vlr-ref.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left-vlr-ref.html
new file mode 100644
index 0000000000..a7df839259
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left-vlr-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference: text-group-align: left</title>
+<link rel="stylesheet" href="support/test-helpers.css">
+<link rel="stylesheet" href="support/fake-group-align.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleReference({ textGroupAlign: "left", writingMode: "vertical-lr", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left-vlr.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left-vlr.html
new file mode 100644
index 0000000000..4a9ed599b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left-vlr.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>text-group-align: left</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<link rel="match" href="text-group-align-left-vlr-ref.html">
+<link rel="stylesheet" href="support/test-helpers.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleTest({ textGroupAlign: "left", writingMode: "vertical-lr", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left.html
new file mode 100644
index 0000000000..e74de0e1a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-left.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>text-group-align: left</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<link rel="match" href="text-group-align-left-ref.html">
+<link rel="stylesheet" href="support/test-helpers.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleTest({ textGroupAlign: "left", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right-ref.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right-ref.html
new file mode 100644
index 0000000000..1b11e61836
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference: text-group-align: right</title>
+<link rel="stylesheet" href="support/test-helpers.css">
+<link rel="stylesheet" href="support/fake-group-align.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleReference({ textGroupAlign: "right", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right-vlr-ref.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right-vlr-ref.html
new file mode 100644
index 0000000000..5bfe0a766a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right-vlr-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference: text-group-align: right</title>
+<link rel="stylesheet" href="support/test-helpers.css">
+<link rel="stylesheet" href="support/fake-group-align.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleReference({ textGroupAlign: "right", writingMode: "vertical-lr", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right-vlr.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right-vlr.html
new file mode 100644
index 0000000000..9f612aa910
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right-vlr.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>text-group-align: right</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<link rel="match" href="text-group-align-right-vlr-ref.html">
+<link rel="stylesheet" href="support/test-helpers.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleTest({ textGroupAlign: "right", writingMode: "vertical-lr", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right.html
new file mode 100644
index 0000000000..688022a5bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-right.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>text-group-align: right</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<link rel="match" href="text-group-align-right-ref.html">
+<link rel="stylesheet" href="support/test-helpers.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleTest({ textGroupAlign: "right", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start-ref.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start-ref.html
new file mode 100644
index 0000000000..4c57fcbdcd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference: text-group-align: start</title>
+<link rel="stylesheet" href="support/test-helpers.css">
+<link rel="stylesheet" href="support/fake-group-align.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleReference({ textGroupAlign: "start", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start-vlr-ref.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start-vlr-ref.html
new file mode 100644
index 0000000000..051c622bb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start-vlr-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>Reference: text-group-align: start</title>
+<link rel="stylesheet" href="support/test-helpers.css">
+<link rel="stylesheet" href="support/fake-group-align.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleReference({ textGroupAlign: "start", writingMode: "vertical-lr", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start-vlr.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start-vlr.html
new file mode 100644
index 0000000000..6dce935f11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start-vlr.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>text-group-align: start</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<link rel="match" href="text-group-align-start-vlr-ref.html">
+<link rel="stylesheet" href="support/test-helpers.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleTest({ textGroupAlign: "start", writingMode: "vertical-lr", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start.html b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start.html
new file mode 100644
index 0000000000..0951f2c50a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-group-align/text-group-align-start.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>text-group-align: start</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-group-align-property">
+<link rel="match" href="text-group-align-start-ref.html">
+<link rel="stylesheet" href="support/test-helpers.css">
+<body>
+<script src="support/test-helpers.js"></script>
+<script>
+for (let direction of ["ltr", "rtl"]) {
+    for (let textAlign of ["start", "end", "left", "right", "center"]) {
+        generateSimpleTest({ textGroupAlign: "start", direction, textAlign });
+    }
+    document.body.append(document.createElement("br"));
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-text/text-indent/WEB_FEATURES.yml
new file mode 100644
index 0000000000..7933ffd974
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: text-indent
+  files: "**"
diff --git a/testing/web-platform/tests/css/css-text/text-indent/anonymous-flex-item-001.html b/testing/web-platform/tests/css/css-text/text-indent/anonymous-flex-item-001.html
new file mode 100644
index 0000000000..0b305fc307
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/anonymous-flex-item-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>text-indent in anonymous flex and grid items</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="match" href="reference/anonymous-flex-grid-item-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property" title="Anonymous flex/grid items aren't anonymous block boxes.">
+<link rel="help" href="https://crbug.com/1159311">
+<meta name="flags" content="ahem">
+<meta name="assert" content="text-indent applies to the first line of an anonymous flex item that is not the first item in the flex/grid container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+main {
+  font: 10px/1 Ahem;
+  color: orange;
+}
+</style>
+
+<p>
+Pass conditions:
+<ul>
+  <li>The top left quadrant of the black-bordered rectangle is white.
+  <li>Only the top left quadrant of the black-bordered rectangle is white.
+  <li>The rest of the black-bordered rectangle is orange.
+  <li>No orange is outside the black-bordered rectangle.
+</ul>
+</p>
+
+<main>
+<div style="text-indent: 50px; border: 3px solid black; width: 100px; display: flex;">
+  <div style="width: 0px;"></div>
+  ABCDE
+  ABCDEABCDE
+</div>
+</main>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/anonymous-grid-item-001.html b/testing/web-platform/tests/css/css-text/text-indent/anonymous-grid-item-001.html
new file mode 100644
index 0000000000..2683658072
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/anonymous-grid-item-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>text-indent in anonymous flex and grid items</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="match" href="reference/anonymous-flex-grid-item-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property" title="Anonymous flex/grid items aren't anonymous block boxes.">
+<link rel="help" href="https://crbug.com/1159311">
+<meta name="flags" content="ahem">
+<meta name="assert" content="text-indent applies to the first line of an anonymous grid item that is not the first item in the flex/grid container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+main {
+  font: 10px/1 Ahem;
+  color: orange;
+}
+</style>
+
+<p>
+Pass conditions:
+<ul>
+  <li>The top left quadrant of the black-bordered rectangle is white.
+  <li>Only the top left quadrant of the black-bordered rectangle is white.
+  <li>The rest of the black-bordered rectangle is orange.
+  <li>No orange is outside the black-bordered rectangle.
+</ul>
+</p>
+
+<main>
+<div style="text-indent: 50px; border: 3px solid black; width: 100px; display: grid; grid-template-columns: auto auto;">
+  <div style="width: 0px;"></div>
+  ABCDE
+  ABCDEABCDE
+</div>
+</main>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/percentage-value-intrinsic-size.html b/testing/web-platform/tests/css/css-text/text-indent/percentage-value-intrinsic-size.html
new file mode 100644
index 0000000000..d63a9f1ba2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/percentage-value-intrinsic-size.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-indent-property">
+<meta name="assert" content="Percentages should be ignored when calculating min/max intrinsic sizes.">
+<p>Test passes if there is a filled green square.</p>
+<div id="container" data-expected-width="50" style="position:relative; float:left; height:100px; background:green;">
+  <div id="foo">
+    <div data-offset-x="50" data-expected-width="50" style="display:inline-block; width:50px; height:100px; background:green;"></div>
+    <div style="width:50px;"></div>
+  </div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  document.body.offsetTop;
+  foo.style.textIndent = "100%";
+  checkLayout("#container");
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/anonymous-flex-grid-item-001-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/anonymous-flex-grid-item-001-ref.html
new file mode 100644
index 0000000000..517f9e65fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/anonymous-flex-grid-item-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>text-indent in anonymous flex and grid items</title>
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+main {
+  font: 10px/1 Ahem;
+  color: orange;
+}
+</style>
+
+<p>
+Pass conditions:
+<ul>
+  <li>The top left quadrant of the black-bordered rectangle is white.
+  <li>Only the top left quadrant of the black-bordered rectangle is white.
+  <li>The rest of the black-bordered rectangle is orange.
+  <li>No orange is outside the black-bordered rectangle.
+</ul>
+</p>
+
+<main>
+<div style="text-indent: 50px; border: 3px solid black; width: 100px;">
+  ABCDE ABCDEABCDE
+</div>
+</main>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-each-line-hanging-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-each-line-hanging-ref.html
new file mode 100644
index 0000000000..3357d7d8f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-each-line-hanging-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>text-indent 'each-line' and 'hanging' modifiers</title>
+
+    <link rel="stylesheet" href="/fonts/ahem.css" />
+    <style>
+    div { width:80px; font: 10px Ahem; background-color:lightgray; }
+    .indent { color: blue; padding-left:4em; }
+    </style>
+</head>
+<body>
+All black boxes should be left-aligned. All blue boxes should be right-aligned.
+
+<div>
+<span class="indent">xxxx</span><br>xxxx<br>xxxx
+</div>
+<br>
+<div>
+<span class="indent">xxxx</span> xxxx xxxx
+</div>
+<br>
+<div>
+<span class="indent">xxxx</span><br><span class="indent">xxxx</span><br><span class="indent">xxxx</span>
+</div>
+<br>
+<div>
+<span class="indent">xxxx</span> xxxx<br><span class="indent">xxxx</span>
+</div>
+<br>
+<div>
+xxxx<br><span class="indent">xxxx</span><br><span class="indent">xxxx</span>
+</div>
+<br>
+<div>
+xxxx <span class="indent">xxxx</span> <span class="indent">xxxx</span>
+</div>
+<br>
+<div>
+xxxx<br>xxxx<br>xxxx
+</div>
+<br>
+<div>
+xxxx <span class="indent">xxxx</span><br>xxxx
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-length-001-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-length-001-ref.html
new file mode 100644
index 0000000000..3d3df4e031
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-length-001-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+pre {
+  font: 10px/1 Ahem;
+  margin: 0;
+}
+</style>
+<pre>
+XX XXX
+  XX X
+  XXX
+
+ XX XXX
+  XX X
+  XXX
+
+  XX XXX
+  XX X
+  XXX
+
+   XX
+  XXX XX
+  X XXX
+
+     XX
+  XXX XX
+  X XXX
+
+        XX
+  XXX XX
+  X XXX
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-length-002-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-length-002-ref.html
new file mode 100644
index 0000000000..9f8158a912
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-length-002-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+pre {
+  font: 10px/1 Ahem;
+  margin: 0;
+}
+</style>
+<pre>
+ X
+X
+
+ X
+X
+
+ X
+ X
+ X
+
+ X
+X
+ X
+X
+ X
+
+ X
+ X
+X
+ X
+X
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-min-max-content-001-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-min-max-content-001-ref.html
new file mode 100644
index 0000000000..faa6adc4dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-min-max-content-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  border: 1px solid;
+  font: 10px Ahem;
+  text-indent: 5em;
+}
+.min {
+  width: min-content;
+}
+.max {
+  width: max-content;
+}
+</style>
+<div class="min">
+  12<br>456<br>89012
+</div>
+<div class="max">
+  12&nbsp;456&nbsp;89012
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-overflow-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-overflow-ref.html
new file mode 100644
index 0000000000..578cc76067
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-overflow-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-indent causing text to overflow container</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<style>
+.container {
+  border: solid;
+  width: 200px;
+}
+
+.content {
+  display: inline-block;
+  width: 50px;
+  height: 20px;
+  background: green;
+}
+</style>
+
+<p>Test passes if the green square is positioned just past the content edge of the box.</p>
+
+<div class="container">
+  <span style="margin-left: 200px;"><div class="content"></div></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-001-ref.xht b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-001-ref.xht
new file mode 100644
index 0000000000..5b065d1db7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-001-ref.xht
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-indent Percentage - basic cases</title>
+		<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css"><![CDATA[
+			#parent
+			{
+				font: 16px/1em Ahem;
+				position: relative;
+				width: 400px;
+			}
+			.reference{
+				margin-left: 50%;
+			}
+		]]></style>
+	</head>
+	<body>
+		<p>Test passes if there is no red visible on the page.</p>
+		<div id="parent">
+			<div style="padding-left: 100px">X</div>
+		</div>
+		<p>Test passes if the following two text blocks look same in terms of margin-left and text-indent respectively.</p>
+		<div>
+			<span class="reference">abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz.</span><br />
+			ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br />
+		</div>
+		<div>
+			<span class="reference">abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz.</span><br />
+			ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br />
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html
new file mode 100644
index 0000000000..0160c34fb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-percentage-002-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+body { background: white; }
+div {
+  padding-left: 50px;
+}
+span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a green square below and no red.
+<div><span></span></div>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-tab-positions-001-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-tab-positions-001-ref.html
new file mode 100644
index 0000000000..4d85456dd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-tab-positions-001-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text reference file</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/>
+<style>
+p { font-family: monospace; white-space: pre; tab-size: 8ch;
+    width: 40ch; margin: 1em 8ch; border: 1px solid silver; }
+</style>
+The tab-stop positions should be the same in all three blocks below;
+only the ‘a’ characters affected by text-indent should be unaligned.
+<p>a&#9;b&#9;c<br>d&#9;e&#9;f</p>
+<p>&nbsp;&nbsp;&nbsp;a&#9;b&#9;c<br>d&#9;e&#9;f</p>
+<p><span style="margin-left:-3ch;">a&nbsp;&nbsp;</span>a'&#9;b&#9;c<br>d&#9;e&#9;f</p>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-text-align-end-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-text-align-end-ref.html
new file mode 100644
index 0000000000..c4619235d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-text-align-end-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-indent with text-align: end</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<meta name="assert" content="Percentages in text-indent refer to width of the element's content box">
+<style>
+.container {
+  border: solid;
+  width: 200px;
+  text-align: end;
+}
+
+.content {
+  display: inline-block;
+  width: 50px;
+  height: 20px;
+  background: green;
+}
+</style>
+
+<p>Test passes if the green square is positioned against the right edge of the box.</p>
+
+<div class="container">
+  <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-with-absolute-pos-child-ref.html b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-with-absolute-pos-child-ref.html
new file mode 100644
index 0000000000..e5feb2c7f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/reference/text-indent-with-absolute-pos-child-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>This tests that first line text-indent is applied properly when the child is a statically positioned out-of-flow renderer.</title>
+
+<link rel="stylesheet" href="/fonts/ahem.css" />
+<style>
+ body {
+  margin: 40px;
+ }
+
+.container {
+  display: block;
+  background-color: green;
+  width: 100px;
+  height: 20px;
+  color: green;
+  font-family: Ahem;
+  font-size: 10px;
+}
+
+.inner {
+  display: block;
+  background-color: blue;
+  width: 20px;
+  height: 20px;
+}
+</style>
+</head>
+<body>
+<div>
+<div class=container><div class=inner style="margin-left: 20px;"></div></div>
+<div class=container><div class=inner style="margin-left: 20px;"></div></div>
+<div class=container><div class=inner style="margin-left: 20px;"></div></div>
+<div class=container><div class=inner style="margin-left: 20px;"></div></div>
+<div class=container><div class=inner style="position: relative; left: 70px;"></div></div>
+<div class=container><div class=inner style="margin-left: -20px;"></div></div>
+<div class=container><div class=inner style="left: 40px;"></div></div>
+<div class=container><div class=inner></div></div>
+<div class=container><div class=inner></div></div>
+<div class=container><div class=inner style="position: relative; top: 10px"></div></div>
+<div class=container><div class=inner></div></div>
+</div>
+
+<div style="direction: rtl;">
+<div class=container><div class=inner style="margin-right: 20px;"></div></div>
+<div class=container><div class=inner style="margin-right: 20px;"></div></div>
+<div class=container><div class=inner style="margin-right: 20px;"></div></div>
+<div class=container><div class=inner style="margin-right: 20px;"></div></div>
+<div class=container><div class=inner style="position: relative; right: 70px;"></div></div>
+<div class=container><div class=inner style="margin-right: -20px;"></div></div>
+<div class=container><div class=inner style="right: 40px;"></div></div>
+<div class=container><div class=inner></div></div>
+<div class=container><div class=inner></div></div>
+<div class=container><div class=inner style="position: relative; top: 10px"></div></div>
+<div class=container><div class=inner></div></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-each-line-hanging.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-each-line-hanging.html
new file mode 100644
index 0000000000..2c3ac08df4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-each-line-hanging.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>text-indent 'each-line' and 'hanging' modifiers</title>
+    <link rel="author" title="Jaehun Lim" href="mailto:ljaehun.lim@samsung.com">
+    <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+    <link rel="match" href="reference/text-indent-each-line-hanging-ref.html">
+    <meta name="assert" content="'each-line' and 'hanging' properly works">
+
+    <link rel="stylesheet" href="/fonts/ahem.css" />
+    <style>
+    div { width:80px; font: 10px Ahem; background-color:lightgray; }
+    .normal { text-indent: 4em; }
+    .eachline { text-indent: 4em each-line; }
+    .hanging { text-indent: 4em hanging; }
+    .eachlinehanging { text-indent: 4em each-line hanging; }
+    .indent { color: blue; }
+    </style>
+</head>
+<body>
+All black boxes should be left-aligned. All blue boxes should be right-aligned.
+
+<!-- normal text-indent -->
+<div class="normal">
+<span class="indent">xxxx</span> xxxx<br>xxxx
+</div>
+<br>
+<!-- each-line with a soft wrap break -->
+<div class="eachline">
+<span class="indent">xxxx</span> xxxx xxxx
+</div>
+<br>
+<!-- each-line with a forced line break -->
+<div class="eachline">
+<span class="indent">xxxx</span><br><span class="indent">xxxx</span><br><span class="indent">xxxx</span>
+</div>
+<br>
+<!-- each-line with a soft wrap break and a forced line break -->
+<div class="eachline">
+<span class="indent">xxxx</span> xxxx<br><span class="indent">xxxx</span>
+</div>
+<br>
+<!-- normal text-indent with hanging -->
+<div class="hanging">
+xxxx <span class="indent">xxxx</span><br><span class="indent">xxxx</span>
+</div>
+<br>
+<!-- each-line and hanging with a soft wrap break -->
+<div class="eachlinehanging">
+xxxx <span class="indent">xxxx</span> <span class="indent">xxxx</span>
+</div>
+<br>
+<!-- each-line and hanging with a forced line break -->
+<div class="eachlinehanging">
+xxxx<br>xxxx<br>xxxx
+</div>
+<br>
+<!-- each-line and hanging with a soft wrap break and a forced line break -->
+<div class="eachlinehanging">
+xxxx <span class="indent">xxxx</span><br>xxxx
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-length-001.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-length-001.html
new file mode 100644
index 0000000000..49fe68733a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-length-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-indent length</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<link rel="match" href="reference/text-indent-length-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+article {
+  font: 10px/1 Ahem;
+  width: 60px;
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<article style="text-indent: -20px">XX XXX XX X XXX</article>
+<article style="text-indent: -10px">XX XXX XX X XXX</article>
+<article style="text-indent: 0px">XX XXX XX X XXX</article>
+<article style="text-indent: 10px">XX XXX XX X XXX</article>
+<article style="text-indent: 30px">XX XXX XX X XXX</article>
+<article style="text-indent: 60px">XX XXX XX X XXX</article>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-length-002.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-length-002.html
new file mode 100644
index 0000000000..efb9d7e3d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-length-002.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-indent length</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<link rel="match" href="reference/text-indent-length-002-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+article {
+  font: 10px/1 Ahem;
+  margin-bottom: 10px;
+  text-indent: 10px;
+}
+</style>
+<article>
+  X<br>X
+</article>
+<article>
+  X<span style="white-space:pre">&#10;</span>X
+</article>
+<article>
+  <div>X</div>
+  <div>X</div>
+  <div>X</div>
+</article>
+<article>
+  <div>X</div>
+  X
+  <div>X</div>
+  X
+  <div>X</div>
+</article>
+<article>
+  X
+  <div>X</div>
+  X
+  <div>X</div>
+  X
+</article>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-long-line-crash.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-long-line-crash.html
new file mode 100644
index 0000000000..9b5e079837
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-long-line-crash.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Very long line with `text-indent` should not crash</title>
+<link rel="help" href="https://crbug.com/963794">
+<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+body {
+  width: 2147483648px;
+}
+div {
+  text-indent: 2147483648px;
+  width: 200%; /* Double the width in case CSS parser clamps the body width */
+}
+</style>
+<body>
+  <div>XXX</div>
+<script>test(() => { document.body.offsetTop; });</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-min-max-content-001.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-min-max-content-001.html
new file mode 100644
index 0000000000..93ddac50d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-min-max-content-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<link rel="match" href="reference/text-indent-min-max-content-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  border: 1px solid;
+  font: 10px Ahem;
+  text-indent: 5em;
+}
+.min {
+  width: min-content;
+}
+.max {
+  width: max-content;
+}
+</style>
+<div class="min">
+  12 456 89012
+</div>
+<div class="max">
+  12 456 89012
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-overflow.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-overflow.html
new file mode 100644
index 0000000000..faefbf628f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-overflow.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-indent causing text to overflow container</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<link rel="match" href="reference/text-indent-overflow-ref.html">
+<style>
+.container {
+  border: solid;
+  width: 200px;
+  text-indent: 200px;
+  text-align: right;
+}
+
+.content {
+  display: inline-block;
+  width: 50px;
+  height: 20px;
+  background: green;
+}
+</style>
+
+<p>Test passes if the green square is positioned just past the content edge of the box.</p>
+
+<!--
+  In this case the `text-indent` is as wide as the container, but should be
+  handled like the linebox had a large left margin, causing the content to
+  overflow the container.
+-->
+<div class="container">
+  <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-001.xht b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-001.xht
new file mode 100644
index 0000000000..6da26308b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-001.xht
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-indent Percentage - basic cases</title>
+		<link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
+		<link rel="help" title="CSS Text Level 3: 10.1. Indent Text: the ‘text-indent’ property" href="http://www.w3.org/TR/css-text-3/#text-indent" />
+		<link rel="match" href="reference/text-indent-percentage-001-ref.xht"/>
+		<meta name="flags" content="ahem" />
+		<meta name="assert" content="Ensure that text-indent +50% adds 50% of its containing block's width in front of the text." />
+		<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+		<style type="text/css"><![CDATA[
+			#parent
+			{
+				font: 16px/1em Ahem;
+				position: relative;
+				width: 400px;
+			}
+			#reference1
+			{
+				color: red;
+				left: 100px; /* see comments for #test1 below */
+				position: absolute;
+				top: 0;
+				z-index: -1;
+			}
+			#reference2
+			{
+				margin-left: 50%;
+			}
+			#test1
+			{
+    			margin-left: -50%; /* -50% * 400px = -200px which makes the inline-size of this block 600px */
+    			text-indent: 50%;  /* 50% * 600px = 300px (which is 100px from the start of #parent due to the negative margin) */
+			}
+			#test2
+			{
+    			text-indent: 50%;
+			}
+		]]></style>
+	</head>
+	<body>
+		<p>Test passes if there is no red visible on the page.</p>
+		<div id="parent">
+			<div id="reference1">X</div>
+			<div id="test1">X</div>
+		</div>
+		<p>Test passes if the following two text blocks look same in terms of margin-left and text-indent respectively.</p>
+		<div id="test2">
+			abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz.<br/>
+			ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br/>
+		</div>
+		<div>
+			<span id="reference2">abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz.</span><br/>
+			ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br/>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-002.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-002.html
new file mode 100644
index 0000000000..b60f99e819
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-002.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: text-indent percentage resolution basis</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<link rel="match" href="reference/text-indent-percentage-002-ref.html">
+<meta name="assert" content="Percentages in text-indent refer to width of the element's content box">
+<style>
+body { background: white; }
+section { position: absolute; }
+section, div {
+  border-right: 10px solid white;
+  margin-right: 10px;
+  padding-right: 10px;
+}
+div {
+  box-sizing: border-box;
+  width: 120px;
+}
+span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: green;
+}
+.ref span {
+  background: red;
+  /* the next two lines are to avoid antialiasing artifacts causing a tiny about of red to be visible */
+  box-sizing: border-box;
+  border: 1px solid white;
+}
+.test div { text-indent: 50%; }
+.ref div { text-indent: 50px; }
+</style>
+
+<p>Test passes if there is a green square below and no red.
+<section class=ref><div><span></span></div></section>
+<section class=test><div><span></span></div></section>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-003.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-003.html
new file mode 100644
index 0000000000..ba5ce8f871
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-003.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: text-indent percentage resolution basis</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<link rel="match" href="reference/text-indent-percentage-002-ref.html">
+<meta name="assert" content="Percentages in text-indent refer to width of the element's content box">
+<style>
+body { background: white; }
+section { position: absolute; }
+section, div {
+  border-right: 10px solid white;
+  margin-right: 10px;
+  padding-right: 10px;
+}
+div {
+  box-sizing: border-box;
+  width: 120px;
+}
+span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: green;
+}
+.ref span {
+  background: red;
+  /* the next two lines are to avoid antialiasing artifacts causing a tiny about of red to be visible */
+  box-sizing: border-box;
+  border: 1px solid white;
+}
+.test div { text-indent: 50%; overflow: hidden; } /* overflow:hidden should not make any difference, but it does in some browsers */
+.ref div { text-indent: 50px; }
+</style>
+
+<p>Test passes if there is a green square below and no red.
+<section class=ref><div><span></span></div></section>
+<section class=test><div><span></span></div></section>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-004.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-004.html
new file mode 100644
index 0000000000..79829e6b08
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-percentage-004.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: text-indent percentage resolution basis, in a calc expressiong</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<link rel="match" href="reference/text-indent-percentage-002-ref.html">
+<meta name="assert" content="Percentages in text-indent refer to width of the element's content box, when used in a calc expression">
+<style>
+body { background: white; }
+section { position: absolute; }
+section, div {
+  border-right: 10px solid white;
+  margin-right: 10px;
+  padding-right: 10px;
+}
+div {
+  box-sizing: border-box;
+  width: 120px;
+}
+span {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  background: green;
+}
+.ref span {
+  background: red;
+  /* the next two lines are to avoid antialiasing artifacts causing a tiny about of red to be visible */
+  box-sizing: border-box;
+  border: 1px solid white;
+}
+.test div { text-indent: calc(25px + 25%); }
+.ref div { text-indent: 50px; }
+</style>
+
+<p>Test passes if there is a green square below and no red.
+<section class=ref><div><span></span></div></section>
+<section class=test><div><span></span></div></section>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-ruby-crash.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-ruby-crash.html
new file mode 100644
index 0000000000..881aef1f6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-ruby-crash.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1861716">
+<style>
+    * {
+        display: ruby-text-container !important;
+        width: 37721429.21472704in;
+        text-indent: 29%;
+    }
+</style>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-tab-positions-001.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-tab-positions-001.html
new file mode 100644
index 0000000000..5bf766ce76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-tab-positions-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text testcase - text-indent should not affect tab-stop positions</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/text-indent-tab-positions-001-ref.html">
+<meta name="assert" content="Tab stops occur at points that are multiples of the tab size from the block’s starting content edge.">
+<style>
+p { font-family: monospace; white-space: pre; tab-size: 8ch;
+    width: 40ch; margin: 1em 8ch; border: 1px solid silver; }
+.indent { text-indent: 3ch; }
+.outdent { text-indent: -3ch; }
+</style>
+The tab-stop positions should be the same in all three blocks below;
+only the ‘a’ characters affected by text-indent should be unaligned.
+<p>a&#9;b&#9;c<br>d&#9;e&#9;f</p>
+<p class=indent>a&#9;b&#9;c<br>d&#9;e&#9;f</p>
+<p class=outdent>a&#9;a'&#9;b&#9;c<br>d&#9;e&#9;f</p>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-text-align-end.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-text-align-end.html
new file mode 100644
index 0000000000..6afda2b5ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-text-align-end.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-indent with text-align: end</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<link rel="match" href="reference/text-indent-text-align-end-ref.html">
+<style>
+.container {
+  border: solid;
+  width: 200px;
+  text-indent: 50px;
+  text-align: end;
+}
+
+.content {
+  display: inline-block;
+  width: 50px;
+  height: 20px;
+  background: green;
+}
+</style>
+
+<p>Test passes if the green square is positioned against the right edge of the box.</p>
+
+<!--
+  In this case the `text-indent` doesn't affect the positioning of the content
+  when text-align positions it further than the indent does.
+-->
+<div class="container">
+  <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-indent/text-indent-with-absolute-pos-child.html b/testing/web-platform/tests/css/css-text/text-indent/text-indent-with-absolute-pos-child.html
new file mode 100644
index 0000000000..16a6deb476
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-indent/text-indent-with-absolute-pos-child.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>This tests that first line text-indent is applied properly when the child is a statically positioned out-of-flow renderer.</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property">
+<link rel="match" href="reference/text-indent-with-absolute-pos-child-ref.html">
+<meta name="assert" content="First line text-indent is applied properly when the child is a statically positioned out-of-flow renderer.">
+
+<link rel="stylesheet" href="/fonts/ahem.css" />
+<style>
+  body {
+    margin: 40px;
+  }
+
+  .container {
+    display: block;
+    background-color: green;
+    width: 100px;
+    height: 20px;
+    color: green;
+    font-family: Ahem;
+    font-size: 10px;
+  }
+
+  .inner {
+    display: inline;
+    position: absolute;
+    background-color: blue;
+    width: 20px;
+    height: 20px;
+  }
+</style>
+</head>
+<body>
+<div>
+<div class=container style="text-indent: 20px"><div class=inner></div></div>
+<div class=container style="text-indent: 20px"><div class=inner style="display: inline-block;"></div></div>
+<div class=container style="text-indent: 20px"><div class=inner></div>foobar</div>
+<div class=container style="text-indent: 20px"><div class=inner style="text-indent: 20px;">f</div></div>
+<div class=container style="text-indent: 10px">foobar<div class=inner></div></div>
+<div class=container style="text-indent: -20px"><div class=inner></div></div>
+<div class=container style="text-indent: 20px"><div class=inner style="left: 40px;"></div></div>
+<div class=container style="text-indent: 20px"><div class=inner style="display: block;"></div></div>
+<div class=container style="text-indent: 20px"><div class=inner style="position: relative; display: block;"></div></div>
+<div class=container style="text-indent: 20px">foobar<br><div class=inner></div></div>
+<div class=container><div class=inner></div></div>
+</div>
+
+<div style="direction: rtl;">
+<div class=container style="text-indent: 20px"><div class=inner></div></div>
+<div class=container style="text-indent: 20px"><div class=inner style="display: inline-block;"></div></div>
+<div class=container style="text-indent: 20px"><div class=inner></div>foobar</div>
+<div class=container style="text-indent: 20px"><div class=inner style="text-indent: 20px;">f</div></div>
+<div class=container style="text-indent: 10px">foobar<div class=inner></div></div>
+<div class=container style="text-indent: -20px"><div class=inner></div></div>
+<div class=container style="text-indent: 20px"><div class=inner style="right: 40px;"></div></div>
+<div class=container style="text-indent: 20px"><div class=inner style="display: block;"></div></div>
+<div class=container style="text-indent: 20px"><div class=inner style="position: relative; display: block;"></div></div>
+<div class=container style="text-indent: 20px">foobar<br><div class=inner></div></div>
+<div class=container><div class=inner></div></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/distribute-alias.tentative.html b/testing/web-platform/tests/css/css-text/text-justify/distribute-alias.tentative.html
new file mode 100644
index 0000000000..62854b52c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/distribute-alias.tentative.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel=author href="https://mozilla.org" title="Mozilla">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6156">
+<title>text-justify: distribute is a parse-time alias of inter-character</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  test(function() {
+    let style = document.createElement("div").style;
+    style.textJustify = "distribute";
+    assert_equals(style.textJustify, "inter-character");
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-006-ref.html b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-006-ref.html
new file mode 100644
index 0000000000..595485c5f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-006-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<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: 20px/1 Ahem;
+  white-space: pre;
+}
+#ref {
+  color: orange;
+}
+#test {
+  color: blue;
+}
+
+/* this is just filler content to have an invisible last line, as jutification does not affect the last line */
+a { color: white; }
+</style>
+
+<p>Test passes if the the blue and orange boxes are aligned.
+
+<div id=ref>X   X X   X</div>
+<div id=test>X   X X   X</div>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-001-ref.html b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-001-ref.html
new file mode 100644
index 0000000000..de1aa16466
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+div {
+  width: 7ch;
+  font: 20px monospace;
+  background: blue;
+}
+span {
+    background: green;
+}
+</style>
+
+<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
+<div><span>XX&nbsp;&nbsp;&nbsp;XX&nbsp;<br>XXX</span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-003-ref.html b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-003-ref.html
new file mode 100644
index 0000000000..6dc81769a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-003-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+div {
+  width: 7ch;
+  font: 20px monospace;
+  background: blue;
+  margin-left: 20px;
+  direction: rtl;
+}
+span {
+  background: green;
+}
+</style>
+
+<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
+<div><span>XX&nbsp;&nbsp;&nbsp;XX&nbsp;<br>XXX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-005-ref.html b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-005-ref.html
new file mode 100644
index 0000000000..593ed2befd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-005-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+div {
+  font-family: ezra_silregular, monospace;
+  font-size: 15px;
+}
+</style>
+
+<p>Test passes if we have a first line with hebrew justified and XXX in the second line (left-edge trailing space if not removed)</p>
+<div style="position: relative; width: 20px;">
+  <div style="display: inline; background: green; position: absolute; right: 0px;">&nbsp;</div>
+</div>
+<div style="position: relative; margin-left: 20px; width: 70px;">
+  <div style="float: right; background: green;">הם</div>
+  <div style="background: green;">דה<br></div>
+</div>
+<div style="position: relative; margin-left: 20px; background: blue; width: 70px; direction: rtl;">
+  <div style="display: inline; background: green; ">XXX</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-alt-001-ref.html b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-alt-001-ref.html
new file mode 100644
index 0000000000..b05af606a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-alt-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+div {
+  width: 7ch;
+  font: 20px monospace;
+  background: blue;
+}
+span {
+    background: green;
+}
+</style>
+
+<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
+<div><span>XX&nbsp;&nbsp;&nbsp;XX<br>XXX</span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-alt-003-ref.html b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-alt-003-ref.html
new file mode 100644
index 0000000000..d4dbf95417
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-alt-003-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+div {
+  width: 7ch;
+  font: 20px monospace;
+  background: blue;
+  margin-left: 20px;
+  direction: rtl;
+}
+span {
+  background: green;
+}
+</style>
+
+<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
+<div><span>XX&nbsp;&nbsp;&nbsp;XX<br>XXX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-alt-005-ref.html b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-alt-005-ref.html
new file mode 100644
index 0000000000..e3131010d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-and-trailing-spaces-alt-005-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+div {
+  font-family: ezra_silregular, monospace;
+  font-size: 15px;
+}
+</style>
+
+<p>Test passes if we have a first line with hebrew justified and XXX in the second line (left-edge trailing space if not removed)</p>
+<div style="position: relative; margin-left: 20px; width: 70px;">
+  <div style="float: right; background: green;">הם</div>
+  <div style="background: green;">דה<br></div>
+</div>
+<div style="position: relative; margin-left: 20px; background: blue; width: 70px; direction: rtl;">
+  <div style="display: inline; background: green; ">XXX</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-ref-001.html b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-ref-001.html
new file mode 100644
index 0000000000..976df7f4dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/reference/text-justify-ref-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-justify: none</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style type='text/css'>
+.test, .ref { border: 1px solid orange;  margin: 20px; width: 290px; color: orange; font: 24px/24px Ahem; }
+.ref { position: relative;  height: 72px; }
+.rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px;  height: 72px; }
+.rb2 { position: absolute; top: 0; left: 96px; background-color: orange; width: 72px;  height: 72px; }
+.rb3 { position: absolute; top: 0; left: 192px; background-color: orange; width: 72px;  height: 48px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
+<div class="ref"><div class="rb1"></div><div class="rb2"></div><div class="rb3"></div></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-001.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-001.html
new file mode 100644
index 0000000000..4c1d46525d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-justify: none</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<link rel='match' href='reference/text-justify-ref-001.html'>
+<meta name="assert" content="text-justify:none means justification is disabled: there are no justification opportunities within the text.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style type='text/css'>
+.test { text-align: justify; text-justify: none; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px; width: 290px; color: orange; font: 24px/24px Ahem; }
+.ref { position: relative;  height: 72px; }
+#rb1 { position: absolute; top: 0; left: 0; background-color: orange; width: 72px;  height: 72px; }
+#rb2 { position: absolute; top: 0; left: 96px; background-color: orange; width: 72px;  height: 72px; }
+#rb3 { position: absolute; top: 0; left: 192px; background-color: orange; width: 72px;  height: 48px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the shading in both orange boxes looks the same.</div>
+<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX</div>
+<div class="ref"><div id="rb1"></div><div id="rb2"></div><div id="rb3"></div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-002.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-002.html
new file mode 100644
index 0000000000..91b6381e7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-justify: inter-character</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-justify:inter-character means justification adjusts spacing between each pair of adjacent typographic character units.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style type='text/css'>
+.test { text-align: justify; text-justify: inter-character; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 290px; color: blue; font: 24px/24px Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if, on the first line only, the last box is flush with the right edge, and the line is composed of boxes about one third the size of those on the second line, and with small gaps between each.</div>
+<div class="test">XXX XXX XXX XXX XXX</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-003.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-003.html
new file mode 100644
index 0000000000..41dfdf0622
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-003.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-justify: distribute</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style type='text/css'>
+.test { text-align: justify; text-justify: distribute; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 290px; color: blue; font: 24px/24px Ahem; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if, on the first line only, the last box is flush with the right edge, and the line is composed of boxes about one third the size of those on the second line, and with small gaps between each.</div>
+<div class="test">XXX XXX XXX XXX XXX</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-004.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-004.html
new file mode 100644
index 0000000000..497320feb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-004.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-justify: inter-character, arabic</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-justify:inter-character means justification adjusts spacing between each pair of adjacent typographic character units. Justification must not introduce gaps between the joined typographic letter units of cursive scripts such as Arabic.">
+<style type='text/css'>
+.test { text-align: justify; text-justify: inter-character; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 290px; font-size: 28px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the sequence مممممع has no gaps in it.</div>
+<div class="test">مممممع مممممع مممممع مممممع مممممع</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-005.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-005.html
new file mode 100644
index 0000000000..afbc036cce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-005.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>text-justify: distribute, arabic</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
+<meta name="assert" content="text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units. Justification must not introduce gaps between the joined typographic letter units of cursive scripts such as Arabic.">
+<style type='text/css'>
+.test { text-align: justify; text-justify: distribute; }
+/* the CSS below is not part of the test */
+.test { border: 1px solid blue;  margin: 20px; width: 290px; font-size: 28px; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the sequence مممممع has no gaps in it.</div>
+<div class="test">مممممع مممممع مممممع مممممع مممممع</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-006.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-006.html
new file mode 100644
index 0000000000..7744f52afe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-006.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>CSS text tests: text-justify applies inline</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
+<link rel='match' href='reference/text-justify-006-ref.html'>
+<meta name="assert" content="text-justify applies to inline elements">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+  width: 11ch;
+}
+#ref {
+  white-space: pre;
+  color: orange;
+}
+#test {
+  text-align: justify;
+  color: blue;
+}
+span {
+  text-justify: none;
+}
+
+/* this is just filler content to have an invisible last line, as jutification does not affect the last line */
+a { color: white; }
+</style>
+
+<p>Test passes if the the blue and orange boxes are aligned.
+
+<div id=ref>X   X X   X</div>
+<div id=test>X <span>X X</span> X <a>###########</a></div>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-001.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-001.html
new file mode 100644
index 0000000000..3c7dd9d316
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>CSS text tests: How trailing spaces affect text-justify </title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-001-ref.html'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-001-ref.html'>
+<meta name="assert" content="The text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
+<style>
+.test {
+  width: 7ch;
+  font: 20px monospace;
+  background: blue;
+
+  white-space: pre-wrap;
+  text-align: justify;
+}
+.test > span {
+  background: green;;
+}
+</style>
+<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
+<div class="test"><span>XX XX </span><span>XXX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-002.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-002.html
new file mode 100644
index 0000000000..b596b33f95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>CSS text tests: How trailing spaces affect text-justify </title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-001-ref.html'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-001-ref.html'>
+<meta name="assert" content="The text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
+<style>
+.test {
+  width: 7ch;
+  font: 20px monospace;
+  background: blue;
+
+  white-space: pre-wrap;
+  text-align: justify;
+}
+.test > span {
+  background: green;;
+}
+</style>
+<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
+<div class="test"><span>XX XX XXX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-003.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-003.html
new file mode 100644
index 0000000000..1768ca3238
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-003.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>CSS text tests: How trailing spaces affect text-justify </title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-003-ref.html'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-003-ref.html'>
+<meta name="assert" content="The RTL text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
+<style>
+.test {
+  width: 7ch;
+  font: 20px monospace;
+  background: blue;
+  margin-left: 20px;
+
+  direction: rtl;
+
+  white-space: pre-wrap;
+  text-align: justify;
+}
+.test > span {
+  background: green;;
+}
+</style>
+<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
+<div class="test"><span>XX XX </span><span>XXX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-004.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-004.html
new file mode 100644
index 0000000000..d2f614ae94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-004.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>CSS text tests: How trailing spaces affect text-justify </title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-003-ref.html'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-003-ref.html'>
+<meta name="assert" content="The RTL text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
+<style>
+.test {
+  width: 7ch;
+  font: 20px monospace;
+  background: blue;
+  margin-left: 20px;
+
+  direction: rtl;
+
+  white-space: pre-wrap;
+  text-align: justify;
+}
+.test > span {
+  background: green;;
+}
+</style>
+<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
+<div class="test"><span>XX XX XXX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-005.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-005.html
new file mode 100644
index 0000000000..496c9e240e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-005.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>CSS text tests: How trailing spaces affect text-justify </title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-005-ref.html'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-005-ref.html'>
+<meta name="assert" content="The RTL text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
+<style>
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+.test {
+  width: 70px;
+  font-family: ezra_silregular, monospace;
+  font-size: 15px;
+  background: blue;
+  margin-left: 20px;
+
+  direction: rtl;
+
+  white-space: pre-wrap;
+  text-align: justify;
+}
+.test > span {
+  background: green;;
+}
+</style>
+<p>Test passes if we have a first line with hebrew justified and XXX in the second line (left-edge trailing space if not removed)</p>
+<div class="test"><span>הם דה </span><span>XXX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-006.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-006.html
new file mode 100644
index 0000000000..83dfaed80a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-and-trailing-spaces-006.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>CSS text tests: How trailing spaces affect text-justify </title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-005-ref.html'>
+<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-005-ref.html'>
+<meta name="assert" content="The RTL text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
+<style>
+@font-face {
+    font-family: 'ezra_silregular';
+    src: url('/fonts/sileot-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+.test {
+  width: 70px;
+  font-family: ezra_silregular, monospace;
+  font-size: 15px;
+  background: blue;
+  margin-left: 20px;
+
+  direction: rtl;
+
+  white-space: pre-wrap;
+  text-align: justify;
+}
+.test > span {
+  background: green;;
+}
+</style>
+<p>Test passes if we have a first line with hebrew justified and XXX in the second line (left-edge trailing space if not removed)</p>
+<div class="test"><span>הם דה XXX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-distribute-001.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-distribute-001.html
new file mode 100644
index 0000000000..4d29f0fee5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-distribute-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 7.4. Justification Method: text-justify: distribute</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/#text-justify-property">
+<link rel='match' href='text-justify-inter-character-001-ref.html'>
+<meta name="assert" content="text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units.">
+<style type='text/css'>
+p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  margin-right: 310px;
+}
+.test {
+  text-align-last: justify;
+  text-justify: distribute;
+}
+</style>
+</head>
+<body>
+<p lang="en" class="test">XX</p>
+<p lang="ja" class="test">文字</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-character-001-ref.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-character-001-ref.html
new file mode 100644
index 0000000000..0a42a5cf8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-character-001-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 7.4. Justification Method: text-justify: inter-character</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style type='text/css'>
+p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  margin-right: 310px;
+}
+.right {
+  float: right;
+}
+</style>
+</head>
+<body>
+<p lang="en">X<span class="right">X</span></p>
+<p lang="ja">文<span class="right">字</span></p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-character-001.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-character-001.html
new file mode 100644
index 0000000000..639ab7ecb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-character-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 7.4. Justification Method: text-justify: inter-character</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/#text-justify-property">
+<link rel='match' href='text-justify-inter-character-001-ref.html'>
+<meta name="assert" content="text-justify:inter-character means justification adjusts spacing between each pair of adjacent typographic character units.">
+<style type='text/css'>
+p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  margin-right: 310px;
+}
+.test {
+  text-align-last: justify;
+  text-justify: inter-character;
+}
+</style>
+</head>
+<body>
+<p lang="en" class="test">XX</p>
+<p lang="ja" class="test">文字</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-word-001-ref.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-word-001-ref.html
new file mode 100644
index 0000000000..687e864e7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-word-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 7.4. Justification Method: text-justify: inter-word</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style type='text/css'>
+p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  margin-right: 310px;
+}
+.right {
+  float: right;
+}
+</style>
+</head>
+<body>
+<p lang="en">Latin<span class="right">text</span></p>
+<p lang="ja">日本<span class="right">文字</span></p>
+<p lang="th">อักษรไทย<span class="right">อักษรไทย</span></p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-word-001.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-word-001.html
new file mode 100644
index 0000000000..75aec2f5f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-inter-word-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 7.4. Justification Method: text-justify: inter-word</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/#text-justify-property">
+<link rel='match' href='text-justify-inter-word-001-ref.html'>
+<meta name="assert" content="text-justify:inter-word means justification adjusts spacing at word separators only.">
+<style type='text/css'>
+p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  margin-right: 310px;
+}
+.test {
+  text-align-last: justify;
+  text-justify: inter-word;
+}
+</style>
+</head>
+<body>
+<p lang="en" class="test">Latin text</p>
+<p lang="ja" class="test">日本 文字</p>
+<p lang="th" class="test">อักษรไทย อักษรไทย</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-interpolation.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-interpolation.html
new file mode 100644
index 0000000000..cb6103f0c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-interpolation.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>text-justify interpolation</title>
+    <link rel="author" title="Kiet Ho" href="mailto:tho22@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-text/#text-justify-property">
+    <meta name="assert" content="text-justify supports discrete animation">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      test_no_interpolation({
+        property: 'text-justify',
+        from: 'auto',
+        to: 'inter-word'
+      });
+
+      test_no_interpolation({
+        property: 'text-justify',
+        from: 'auto',
+        to: 'inter-character'
+      });
+
+      test_no_interpolation({
+        property: 'text-justify',
+        from: 'inter-character',
+        to: 'distribute'
+      });
+
+      test_no_interpolation({
+        property: 'text-justify',
+        from: 'inter-word',
+        to: 'distribute'
+      });
+
+      test_no_interpolation({
+        property: 'text-justify',
+        from: 'distribute',
+        to: 'none'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-none-001-ref.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-none-001-ref.html
new file mode 100644
index 0000000000..c8500ac9f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-none-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 7.4. Justification Method: text-justify: none</title>
+<link rel="author" title="Chun-Min (Jeremy) Chen" href="mailto:jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style type='text/css'>
+p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  margin-right: 310px;
+}
+</style>
+</head>
+<body>
+<p lang="en">Latin text</p>
+<p lang="ja">日本 文字</p>
+<p lang="th">อักษรไทย อักษรไทย</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-none-001.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-none-001.html
new file mode 100644
index 0000000000..2b55111954
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-none-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text 7.4. Justification Method: text-justify: none</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/#text-justify-property">
+<link rel='match' href='text-justify-none-001-ref.html'>
+<meta name="assert" content="text-justify:none means justification is disabled: there are no justification opportunities within the text.">
+<style type='text/css'>
+p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  margin-right: 310px;
+}
+.test {
+  text-align-last: justify;
+  text-justify: none;
+}
+</style>
+</head>
+<body>
+<p lang="en" class="test">Latin text</p>
+<p lang="ja" class="test">日本 文字</p>
+<p lang="th" class="test">อักษรไทย อักษรไทย</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-word-separators-ref.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-word-separators-ref.html
new file mode 100644
index 0000000000..99154cff39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-word-separators-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+    <link rel="help" href="https://drafts.csswg.org/css-text/#word-separator">
+    <meta name="assert" content="text-justify:inter-word should adjust spacing at all word separators.">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+        .justified {
+            font: 10px/1 Ahem;
+            text-align: justify;
+            text-justify: inter-word;
+            width: 120px;
+            border: solid 1px black;
+        }
+    </style>
+</head>
+<body>
+    <div class="justified">XXXX XXXX XXXX</div>
+    <div class="justified">XXXX XXXX XXXX</div>
+    <div class="justified">XXXX XXXX XXXX</div>
+    <div class="justified">XXXX XXXX XXXX</div>
+    <div class="justified">XXXX XXXX XXXX</div>
+    <div class="justified">XXXX XXXX XXXX</div>
+    <div class="justified">XXXX XXXX XXXX</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-justify/text-justify-word-separators.html b/testing/web-platform/tests/css/css-text/text-justify/text-justify-word-separators.html
new file mode 100644
index 0000000000..028b69e40e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-justify/text-justify-word-separators.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSS Text 6.4. Justification Method: text-justify: inter-word</title>
+    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+    <link rel="help" href="https://drafts.csswg.org/css-text/#word-separator">
+    <link rel='match' href='text-justify-word-separators-ref.html'>
+    <meta name="assert" content="text-justify:inter-word should adjust spacing at all word separators.">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+        .justified {
+            font: 10px/1 Ahem;
+            text-align: justify;
+            text-justify: inter-word;
+            width: 120px;
+            border: solid 1px black;
+        }
+        /* Hide the word separators, in case the system doesn't
+           have an appropriate font installed and shows tofu.
+           Justification should still work in this case. */
+        .hidden {
+            color: transparent;
+        }
+    </style>
+</head>
+<body>
+    <!-- A normal space -->
+    <div class="justified">XXXX XXXX XXXX</div>
+
+    <!-- Non-breaking space -->
+    <div class="justified">XXXX<span class="hidden">&nbsp;</span>XXXX XXXX</div>
+
+    <!-- Ethiopic word space -->
+    <div class="justified">XXXX<span class="hidden">&#x1361;</span>XXXX XXXX</div>
+
+    <!-- Aegean word separators -->
+    <div class="justified">XXXX<span class="hidden">&#x10100;</span>XXXX XXXX</div>
+    <div class="justified">XXXX<span class="hidden">&#x10101;</span>XXXX XXXX</div>
+
+    <!-- Ugaritic word divider -->
+    <div class="justified">XXXX<span class="hidden">&#x1039F;</span>XXXX XXXX</div>
+
+    <!-- Phoenician word separator -->
+    <div class="justified">XXXX<span class="hidden">&#x1091F;</span>XXXX XXXX</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/support/variant-class.js b/testing/web-platform/tests/css/css-text/text-spacing-trim/support/variant-class.js
new file mode 100644
index 0000000000..28cf85ff9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/support/variant-class.js
@@ -0,0 +1,17 @@
+'use strict';
+
+/**
+ * Add `class` search params to the `class` attribute of the root element.
+ */
+if (window.location.search) {
+  const params = new URLSearchParams(window.location.search);
+  if (params.has('class')) {
+    const values = params.getAll('class')
+                         .flatMap(value => value.split(','));
+    document.documentElement.classList.add(...values);
+  }
+  const lang = params.get('lang');
+  if (lang) {
+    document.documentElement.lang = lang;
+  }
+}
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/support/variant-feature.js b/testing/web-platform/tests/css/css-text/text-spacing-trim/support/variant-feature.js
new file mode 100644
index 0000000000..4fee3e43c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/support/variant-feature.js
@@ -0,0 +1,16 @@
+'use strict';
+
+/**
+ * Add `style` and `feature` search params to the `style` attribute.
+ */
+if (window.location.search) {
+  const params = new URLSearchParams(window.location.search);
+  const styles = params.getAll('style');
+  const features = params.getAll('feature');
+  for (const feature of features) {
+    styles.push(`font-feature-settings: '${feature}'`);
+  }
+  if (styles.length) {
+    document.documentElement.style = styles.join(';');
+  }
+}
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-001-ref.html
new file mode 100644
index 0000000000..d49abab380
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-001-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  text-spacing-trim: space-all;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+halt {
+  font-feature-settings: 'halt' 1, 'vhal' 1;
+}
+</style>
+<div id="container">
+  <!-- Open + Open/Close/Middle -->
+  <div>国（<halt>（</halt>国</div>
+  <div>国（<halt>（（</halt>国</div>
+  <div>国（）国</div>
+  <div>国（・国</div>
+  <div>国（　国</div>
+  <!-- Close + Open/Close/Middle -->
+  <div>国）<halt>（</halt>国</div>
+  <div>国<halt>）</halt>）国</div>
+  <div>国<halt>））</halt>）国</div>
+  <div>国<halt>）</halt>・国</div>
+  <div>国<halt>）</halt>　国</div>
+  <!-- Middle + Open/Middle/Close -->
+  <div>国・<halt>（</halt>国</div>
+  <div>国・・国</div>
+  <div>国・）国</div>
+  <div>国　<halt>（</halt>国</div>
+  <div>国　　国</div>
+  <div>国　）国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-001.html
new file mode 100644
index 0000000000..b34cd0a550
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-001.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-001-ref.html">
+<meta name="variant" content="?class=halt,htb">
+<meta name="variant" content="?class=chws,htb">
+<meta name="variant" content="?class=halt,vrl">
+<meta name="variant" content="?class=chws,vrl">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+}
+.chws #container {
+  font-family: chws-font;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+</style>
+<div id="container">
+  <!-- Open + Open/Close/Middle -->
+  <div>国（（国</div>
+  <div>国（（（国</div>
+  <div>国（）国</div>
+  <div>国（・国</div>
+  <div>国（　国</div>
+  <!-- Close + Open/Close/Middle -->
+  <div>国）（国</div>
+  <div>国））国</div>
+  <div>国）））国</div>
+  <div>国）・国</div>
+  <div>国）　国</div>
+  <!-- Middle + Open/Middle/Close -->
+  <div>国・（国</div>
+  <div>国・・国</div>
+  <div>国・）国</div>
+  <div>国　（国</div>
+  <div>国　　国</div>
+  <div>国　）国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-colon-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-colon-001-ref.html
new file mode 100644
index 0000000000..f36743fd1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-colon-001-ref.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  position: relative;
+  text-spacing-trim: space-all;
+}
+#container > div {
+  position: absolute;
+}
+:root:not(.vrl) .col1 {
+  left: 6em;
+}
+:root:not(.vrl) .col2 {
+  left: 12em;
+}
+:root.vrl {
+  writing-mode: vertical-rl;
+}
+:root.vrl .col1 {
+  top: 6em;
+}
+:root.vrl div.col2 {
+  top: 12em;
+}
+halt {
+  font-feature-settings: 'halt' 1, 'vhal' 1;
+}
+novhal halt {
+  font-feature-settings: 'halt' 1;
+}
+</style>
+<div id="container">
+  <div lang="ja">
+    <!-- In Adobe's convention, colon rotates, while semicolon is upright. -->
+    <!-- In this case, colon can be either middle or other. -->
+    <!-- Colon + Open/Close/Middle -->
+    <div>国：<halt>（</halt>国</div>
+    <div>国：）国</div>
+    <div>国：・国</div>
+    <div>国：　国</div>
+    <!-- Open/Close/Middle + Colon -->
+    <div>国（：国</div>
+    <div>国<halt>）</halt>：国</div>
+    <div>国・：国</div>
+    <div>国　：国</div>
+    <novhal>
+      <!-- Semicolon + Open/Close/Middle -->
+      <div>国；<halt>（</halt>国</div>
+      <div>国；）国</div>
+      <div>国；・国</div>
+      <div>国；　国</div>
+      <!-- Open/Close/Middle + Semicolon -->
+      <div>国（；国</div>
+      <div>国<halt>）</halt>；国</div>
+      <div>国・；国</div>
+      <div>国　；国</div>
+    </novhal>
+  </div>
+
+  <!-- The same content with "zh-hans". -->
+  <div lang="zh-hans" class="col1">
+    <!-- In Adobe's convention, both colon and semicolon are upright. -->
+    <novhal>
+      <!-- Colon + Open/Close/Middle -->
+      <div>国：<halt>（</halt>国</div>
+      <div>国<halt>：</halt>）国</div>
+      <div>国<halt>：</halt>・国</div>
+      <div>国<halt>：</halt>　国</div>
+      <!-- Open/Close/Middle + Colon -->
+      <div>国（：国</div>
+      <div>国<halt>）</halt>：国</div>
+      <div>国・：国</div>
+      <div>国　：国</div>
+      <!-- Semicolon + Open/Close/Middle -->
+      <div>国；<halt>（</halt>国</div>
+      <div>国<halt>；</halt>）国</div>
+      <div>国<halt>；</halt>・国</div>
+      <div>国<halt>；</halt>　国</div>
+      <!-- Open/Close/Middle + Semicolon -->
+      <div>国（；国</div>
+      <div>国<halt>）</halt>；国</div>
+      <div>国・；国</div>
+      <div>国　；国</div>
+    </novhal>
+  </div>
+
+  <!-- The same content with "zh-hant". -->
+  <div lang="zh-hant" class="col2">
+    <!-- In Adobe's convention, both colon and semicolon are upright. -->
+    <novhal>
+      <!-- Colon + Open/Close/Middle -->
+      <div>国：<halt>（</halt>国</div>
+      <div>国：）国</div>
+      <div>国：・国</div>
+      <div>国：　国</div>
+      <!-- Open/Close/Middle + Colon -->
+      <div>国（：国</div>
+      <div>国<halt>）</halt>：国</div>
+      <div>国・：国</div>
+      <div>国　：国</div>
+      <!-- Semicolon + Open/Close/Middle -->
+      <div>国；<halt>（</halt>国</div>
+      <div>国；）国</div>
+      <div>国；・国</div>
+      <div>国；　国</div>
+      <!-- Open/Close/Middle + Semicolon -->
+      <div>国（；国</div>
+      <div>国<halt>）</halt>；国</div>
+      <div>国・；国</div>
+      <div>国　；国</div>
+    </novhal>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-colon-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-colon-001.html
new file mode 100644
index 0000000000..a36f6a369b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-colon-001.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-colon-001-ref.html">
+<meta name="variant" content="?class=halt,htb">
+<meta name="variant" content="?class=chws,htb">
+<meta name="variant" content="?class=halt,vrl">
+<meta name="variant" content="?class=chws,vrl">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  position: relative;
+}
+.chws #container {
+  font-family: chws-font;
+}
+#container > div {
+  position: absolute;
+}
+:root:not(.vrl) .col1 {
+  left: 6em;
+}
+:root:not(.vrl) .col2 {
+  left: 12em;
+}
+:root.vrl {
+  writing-mode: vertical-rl;
+}
+:root.vrl .col1 {
+  top: 6em;
+}
+:root.vrl div.col2 {
+  top: 12em;
+}
+</style>
+<div id="container">
+  <div lang="ja">
+    <!-- Colon + Open/Close/Middle -->
+    <div>国：（国</div>
+    <div>国：）国</div>
+    <div>国：・国</div>
+    <div>国：　国</div>
+    <!-- Open/Close/Middle + Colon -->
+    <div>国（：国</div>
+    <div>国）：国</div>
+    <div>国・：国</div>
+    <div>国　：国</div>
+    <!-- Semicolon + Open/Close/Middle -->
+    <div>国；（国</div>
+    <div>国；）国</div>
+    <div>国；・国</div>
+    <div>国；　国</div>
+    <!-- Open/Close/Middle + Semicolon -->
+    <div>国（；国</div>
+    <div>国）；国</div>
+    <div>国・；国</div>
+    <div>国　；国</div>
+  </div>
+
+  <!-- The same content with "zh-hans". -->
+  <div lang="zh-hans" class="col1">
+    <!-- Colon + Open/Close/Middle -->
+    <div>国：（国</div>
+    <div>国：）国</div>
+    <div>国：・国</div>
+    <div>国：　国</div>
+    <!-- Open/Close/Middle + Colon -->
+    <div>国（：国</div>
+    <div>国）：国</div>
+    <div>国・：国</div>
+    <div>国　：国</div>
+    <!-- Semicolon + Open/Close/Middle -->
+    <div>国；（国</div>
+    <div>国；）国</div>
+    <div>国；・国</div>
+    <div>国；　国</div>
+    <!-- Open/Close/Middle + Semicolon -->
+    <div>国（；国</div>
+    <div>国）；国</div>
+    <div>国・；国</div>
+    <div>国　；国</div>
+  </div>
+
+  <!-- The same content with "zh-hant". -->
+  <div lang="zh-hant" class="col2">
+    <!-- Colon + Open/Close/Middle -->
+    <div>国：（国</div>
+    <div>国：）国</div>
+    <div>国：・国</div>
+    <div>国：　国</div>
+    <!-- Open/Close/Middle + Colon -->
+    <div>国（：国</div>
+    <div>国）：国</div>
+    <div>国・：国</div>
+    <div>国　：国</div>
+    <!-- Semicolon + Open/Close/Middle -->
+    <div>国；（国</div>
+    <div>国；）国</div>
+    <div>国；・国</div>
+    <div>国；　国</div>
+    <!-- Open/Close/Middle + Semicolon -->
+    <div>国（；国</div>
+    <div>国）；国</div>
+    <div>国・；国</div>
+    <div>国　；国</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-combinations-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-combinations-001.html
new file mode 100644
index 0000000000..78c47f51d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-combinations-001.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<!--
+  Test patterns are from "Fullwidth Punctuation Collapsing":
+  https://drafts.csswg.org/css-text-4/#fullwidth-collapsing
+-->
+<meta name="variant" content="?class=htb&test=CC:HF">
+<meta name="variant" content="?class=htb&test=CM:HF">
+<meta name="variant" content="?class=htb&test=CO:FH">
+<meta name="variant" content="?class=htb&test=MO:FH">
+<meta name="variant" content="?class=htb&test=OO:FH">
+<meta name="variant" content="?class=vrl&test=CC:HF">
+<meta name="variant" content="?class=vrl&test=CM:HF">
+<meta name="variant" content="?class=vrl&test=CO:FH">
+<meta name="variant" content="?class=vrl&test=MO:FH">
+<meta name="variant" content="?class=vrl&test=OO:FH">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/variant-class.js"></script>
+<script src="../support/get-char-advances.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+}
+.vrl #container {
+  writing-mode: vertical-rl;
+}
+</style>
+<div id="log"></div>
+<div id="container"></div>
+<script>
+const classes = {
+  // Open. Noto CJK doesn't have these glyphs or `halt`/`valt`:
+  // \u3008\u301A\u3010\uFF3B
+  'O': '\u300A\u300C\u300E\u3014\u3016\u3018\u301D' +
+       '\uFF08\uFF5B\uFF5F',
+  // Close. Noto CJK doesn't have these glyphs or `halt`/`valt`:
+  // \u3009\u301B\u3011\u301E\uFF3D
+  'C': '\u300B\u300D\u300F\u3015\u3017\u3019\u301F' +
+       '\uFF09\uFF5D\uFF60',
+  // Open Quotes.
+  'Q': '\u2018\u201C',
+  // Close quotes.
+  'R': '\u2019\u201D',
+  // Middle and ideographic space.
+  'M': '\u30FB\u3000',
+  // Dot (comma and full stops.)
+  'D': '\u3001\u3002\uFF0C\uFF0E',
+  // Colon.
+  'L': '\uFF1A',
+  // Semicolon. Colon and Semicolon may be different in vertical flow.
+  'S': '\uFF1B',
+  // Exclamation marks.
+  'E': '\uFF01\uFF1F',
+};
+const container = document.getElementById('container');
+const em = parseInt(getComputedStyle(container).fontSize);
+const threshold = em * .8;
+
+// Generate a list of text from a pattern.
+// For example, a pattern 'OC' generates all combinations from
+// characters in `classes['O']` and `classes['C']`.
+function* textFromPattern(pattern, prefix = '') {
+  const key = pattern[0];
+  const rest = pattern.substr(1);
+  for (const ch of classes[key]) {
+    if (!rest) {
+      yield prefix + ch;
+      continue;
+    }
+    yield *textFromPattern(rest, prefix + ch);
+  }
+}
+
+class TestData {
+  constructor(text, expect) {
+    const element = document.createElement('div');
+    element.textContent = text;
+    this.text = text;
+    this.element = element;
+    this.expect = expect;
+  }
+
+  static all = [];
+
+  static generate(pattern, expect, container) {
+    for (const text of textFromPattern(pattern)) {
+      const data = new TestData(text, expect);
+      container.appendChild(data.element);
+      TestData.all.push(data);
+    }
+  }
+
+  static runAll(indices) {
+    if (indices && indices.length) {
+      for (const index of indices) {
+        TestData.all[index].run(index);
+      }
+      return;
+    }
+    TestData.all.forEach((data, i) => {
+      data.run(i);
+    })
+  }
+
+  run(index) {
+    const advances = getCharAdvances(this.element);
+    const results = advances.map(advance => advance >= threshold ? 'F' : 'H');
+    const result = results.join('');
+    test(() => {
+      assert_equals(result, this.expect);
+    }, `${index}: ${this.text}`);
+  }
+}
+
+setup(() => {
+  assert_implements(CSS.supports('text-spacing-trim', 'initial'));
+}, {explicit_done: true});
+(async function () {
+  const params = new URLSearchParams(window.location.search);
+  const style= getComputedStyle(container);
+  const is_vertical = style.writingMode.startsWith('vertical');
+
+  // Assign dots and colons using the Noto's Japanese convention.
+  classes['C'] += classes['D'];
+  classes['M'] += classes['L'];
+  if (!is_vertical) classes['M'] += classes['S'];
+
+  const args = params.getAll('test').flatMap(i => i.split(','));
+  for (const arg of args) {
+    const [pattern, expect] = arg.split(':');
+    TestData.generate(pattern, expect, container);
+  }
+
+  await document.fonts.ready;
+  const indices = params.getAll('i').flatMap(i => i.split(','))
+                        .map(i => parseInt(i));
+  TestData.runAll(indices);
+  done();
+})();
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-dot-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-dot-001-ref.html
new file mode 100644
index 0000000000..acbf37f250
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-dot-001-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  position: relative;
+  text-spacing-trim: space-all;
+}
+#container > div {
+  position: absolute;
+}
+:root:not(.vrl) .col1 {
+  left: 6em;
+}
+:root:not(.vrl) .col2 {
+  left: 12em;
+}
+:root.vrl {
+  writing-mode: vertical-rl;
+}
+:root.vrl .col1 {
+  top: 6em;
+}
+:root.vrl div.col2 {
+  top: 12em;
+}
+halt {
+  font-feature-settings: 'halt' 1, 'vhal' 1;
+}
+</style>
+<div id="container">
+  <div lang="ja">
+    <!-- Dot + Open/Close/Middle -->
+    <div>国。<halt>（</halt>国</div>
+    <div>国<halt>。</halt>）国</div>
+    <div>国<halt>。</halt>・国</div>
+    <div>国<halt>。</halt>　国</div>
+    <!-- Open/Close/Middle + Dot -->
+    <div>国（。国</div>
+    <div>国<halt>）</halt>。国</div>
+    <div>国・。国</div>
+    <div>国　。国</div>
+  </div>
+
+  <!-- The same content with "zh-hans". -->
+  <div lang="zh-hans" class="col1">
+    <!-- Dot + Open/Close/Middle -->
+    <div>国。<halt>（</halt>国</div>
+    <div>国<halt>。</halt>）国</div>
+    <div>国<halt>。</halt>・国</div>
+    <div>国<halt>。</halt>　国</div>
+    <!-- Open/Close/Middle + Dot -->
+    <div>国（。国</div>
+    <div>国<halt>）</halt>。国</div>
+    <div>国・。国</div>
+    <div>国　。国</div>
+  </div>
+
+  <!-- The same content with "zh-hant". -->
+  <div lang="zh-hant" class="col2">
+    <!-- Dot + Open/Close/Middle -->
+    <div>国。<halt>（</halt>国</div>
+    <div>国。）国</div>
+    <div>国。・国</div>
+    <div>国。　国</div>
+    <!-- Open/Close/Middle + Dot -->
+    <div>国（。国</div>
+    <div>国<halt>）</halt>。国</div>
+    <div>国・。国</div>
+    <div>国　。国</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-dot-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-dot-001.html
new file mode 100644
index 0000000000..721a585f7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-dot-001.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-dot-001-ref.html">
+<meta name="variant" content="?class=halt,htb">
+<meta name="variant" content="?class=chws,htb">
+<meta name="variant" content="?class=halt,vrl">
+<meta name="variant" content="?class=chws,vrl">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  position: relative;
+}
+.chws #container {
+  font-family: chws-font;
+}
+#container > div {
+  position: absolute;
+}
+:root:not(.vrl) .col1 {
+  left: 6em;
+}
+:root:not(.vrl) .col2 {
+  left: 12em;
+}
+:root.vrl {
+  writing-mode: vertical-rl;
+}
+:root.vrl .col1 {
+  top: 6em;
+}
+:root.vrl div.col2 {
+  top: 12em;
+}
+</style>
+<div id="container">
+  <div lang="ja">
+    <!-- Dot + Open/Close/Middle -->
+    <div>国。（国</div>
+    <div>国。）国</div>
+    <div>国。・国</div>
+    <div>国。　国</div>
+    <!-- Open/Close/Middle + Dot -->
+    <div>国（。国</div>
+    <div>国）。国</div>
+    <div>国・。国</div>
+    <div>国　。国</div>
+  </div>
+
+  <!-- The same content with "zh-hans". -->
+  <div lang="zh-hans" class="col1">
+    <!-- Dot + Open/Close/Middle -->
+    <div>国。（国</div>
+    <div>国。）国</div>
+    <div>国。・国</div>
+    <div>国。　国</div>
+    <!-- Open/Close/Middle + Dot -->
+    <div>国（。国</div>
+    <div>国）。国</div>
+    <div>国・。国</div>
+    <div>国　。国</div>
+  </div>
+
+  <!-- The same content with "zh-hant". -->
+  <div lang="zh-hant" class="col2">
+    <!-- Dot + Open/Close/Middle -->
+    <div>国。（国</div>
+    <div>国。）国</div>
+    <div>国。・国</div>
+    <div>国。　国</div>
+    <!-- Open/Close/Middle + Dot -->
+    <div>国（。国</div>
+    <div>国）。国</div>
+    <div>国・。国</div>
+    <div>国　。国</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-dynamic-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-dynamic-001.html
new file mode 100644
index 0000000000..3fc949efd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-dynamic-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-space-all-001-ref.html">
+<meta name="variant" content="?class=halt">
+<meta name="variant" content="?class=chws">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  width: 4em;
+}
+.chws #container {
+  font-family: chws-font;
+}
+#container > div > span {
+  background: black;
+}
+.off {
+  text-spacing-trim: space-all;
+}
+</style>
+<div id="container">
+  <div><span>国）（国国（（国（国</span></div>
+</div>
+<script>
+document.fonts.ready.then(() => {
+  document.body.offsetTop;
+  const container = document.getElementById('container');
+  container.classList.add('off');
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-end-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-end-001-ref.html
new file mode 100644
index 0000000000..5701388232
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-end-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+</style>
+<div id="container">
+  <div>国国国）<br>国国国）</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-end-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-end-001.html
new file mode 100644
index 0000000000..c5293f0998
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-end-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-end-001-ref.html">
+<script src="support/variant-class.js"></script>
+<meta name="variant" content="?class=halt,htb">
+<meta name="variant" content="?class=chws,htb">
+<meta name="variant" content="?class=halt,vrl">
+<meta name="variant" content="?class=chws,vrl">
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  inline-size: 3.6em;
+  text-spacing-trim: trim-start;
+}
+.chws #container {
+  font-family: chws-font;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+</style>
+<div id="container">
+  <div>国国国）国国国）</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-feature-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-feature-001-ref.html
new file mode 100644
index 0000000000..86b61e0640
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-feature-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="support/variant-class.js"></script>
+<script src="support/variant-feature.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  text-spacing-trim: space-all;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+</style>
+<div id="container">
+  <div><span>国）（国国（（国（国</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-feature-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-feature-001.html
new file mode 100644
index 0000000000..25ddad34ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-feature-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-feature-001-ref.html">
+<meta name="variant" content="?class=htb&feature=halt">
+<meta name="variant" content="?class=htb&feature=hwid">
+<meta name="variant" content="?class=htb&feature=palt">
+<meta name="variant" content="?class=htb&feature=pwid">
+<meta name="variant" content="?class=htb&style=font-variant-east-asian:proportional-width">
+<meta name="variant" content="?class=vrl&feature=vhal">
+<meta name="variant" content="?class=vrl&feature=vpal">
+<meta name="variant" content="?class=vrl&style=font-variant-east-asian:proportional-width">
+<script src="support/variant-class.js"></script>
+<script src="support/variant-feature.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+}
+.chws #container {
+  font-family: chws-font;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+</style>
+<div id="container">
+  <div><span>国）（国国（（国（国</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-narrow-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-narrow-001-ref.html
new file mode 100644
index 0000000000..0aef32b553
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-narrow-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+halt {
+  font-feature-settings: 'halt' 1, 'vhal' 1;
+}
+</style>
+<div id="container">
+  <div>国<halt>）</halt>)国</div>
+  <div>国）(国</div>
+  <div>国(<halt>（国</halt></div>
+  <div>国)（国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-narrow-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-narrow-001.html
new file mode 100644
index 0000000000..cd906770f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-narrow-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-narrow-001-ref.html">
+<meta name="variant" content="?class=halt,htb">
+<meta name="variant" content="?class=chws,htb">
+<meta name="variant" content="?class=halt,vrl">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+}
+.chws #container {
+  font-family: chws-font;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+</style>
+<div id="container">
+  <div>国）)国</div>
+  <div>国）(国</div>
+  <div>国(（国</div>
+  <div>国)（国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-quote-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-quote-001-ref.html
new file mode 100644
index 0000000000..47f953cfca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-quote-001-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  text-spacing-trim: space-all;
+}
+.vrl {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+halt {
+  font-feature-settings: 'halt' 1, 'vhal' 1;
+}
+if-zh { display: none; }
+:root:lang(zh-hans), :root:lang(zh-hant) {
+  if-ja { display: none; }
+  if-zh { display: block; }
+}
+</style>
+<div id="container">
+  <div>国）<halt>‘（</halt>国</div>
+  <div>国）<halt>“（</halt>国</div>
+  <if-ja>
+    <div>国<halt>）</halt>’（国</div>
+    <div>国<halt>）</halt>”（国</div>
+  </if-ja>
+  <if-zh>
+    <div>国<halt>）</halt>’<halt>（</halt>国</div>
+    <div>国<halt>）</halt>”<halt>（</halt>国</div>
+  </if-zh>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-quote-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-quote-001.html
new file mode 100644
index 0000000000..a8bc462bad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-quote-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-quote-001-ref.html">
+<meta name="variant" content="?class=halt,htb&lang=ja">
+<meta name="variant" content="?class=halt,htb&lang=zh-hans">
+<meta name="variant" content="?class=halt,htb&lang=zh-hant">
+<meta name="variant" content="?class=halt,vrl&lang=zh-hans">
+<meta name="variant" content="?class=halt,vrl&lang=zh-hant">
+<meta name="variant" content="?class=chws,htb&lang=zh-hans">
+<meta name="variant" content="?class=chws,htb&lang=zh-hant">
+<meta name="variant" content="?class=chws,vrl&lang=zh-hans">
+<meta name="variant" content="?class=chws,vrl&lang=zh-hant">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+}
+.chws #container {
+  font-family: chws-font;
+}
+.vrl {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+</style>
+<div id="container">
+  <div>国）‘（国</div>
+  <div>国）“（国</div>
+  <div>国）’（国</div>
+  <div>国）”（国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-space-all-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-space-all-001-ref.html
new file mode 100644
index 0000000000..d33e3b62ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-space-all-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  text-spacing-trim: space-all;
+  width: 4em;
+}
+#container > div > span {
+  background: black;
+}
+</style>
+<div id="container">
+  <div><span>国国国国国国国国国国</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-space-all-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-space-all-001.html
new file mode 100644
index 0000000000..20e59c5a01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-space-all-001.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-space-all-001-ref.html">
+<meta name="variant" content="?class=halt">
+<meta name="variant" content="?class=chws">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  text-spacing-trim: space-all;
+  width: 4em;
+}
+.chws #container {
+  font-family: chws-font;
+}
+#container > div > span {
+  background: black;
+}
+</style>
+<div id="container">
+  <div><span>国）（国国（（国（国</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-001-ref.html
new file mode 100644
index 0000000000..60a255160f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-001-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  inline-size: 4em;
+  text-spacing-trim: space-all;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+halt {
+  font-feature-settings: 'halt' 1, 'vhal' 1;
+}
+.trim-start {
+  ps, ls { font-feature-settings: 'halt' 1, 'vhal' 1; }
+}
+.space-first {
+  ls { font-feature-settings: 'halt' 1, 'vhal' 1; }
+}
+</style>
+<div id="container">
+  <div><ps>（</ps>国国国<ls>（</ls>国国国<ls>（</ls>国</div>
+  <div>国国国）<ls>（</ls>国国）<ls>（</ls>国</div>
+  <div>国国国国<ls>（</ls></div>
+  <div lang="zh-hans">国国国国<ls>“</ls></div>
+
+  <div><ps>（</ps>国国国<br><ps>（</ps>国国国<br><ps>（</ps>国</div>
+  <div>国国国国<br><ps>（</ps></div>
+  <div lang="zh-hans">国国国国<br><ps>“</ps></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-001.html
new file mode 100644
index 0000000000..f007245277
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-001.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-start-001-ref.html">
+<meta name="variant" content="?class=halt,htb">
+<meta name="variant" content="?class=chws,htb">
+<meta name="variant" content="?class=halt,vrl">
+<meta name="variant" content="?class=chws,vrl">
+<meta name="variant" content="?class=space-first,halt,htb">
+<meta name="variant" content="?class=space-first,chws,htb">
+<meta name="variant" content="?class=space-first,halt,vrl">
+<meta name="variant" content="?class=space-first,chws,vrl">
+<meta name="variant" content="?class=trim-start,halt,htb">
+<meta name="variant" content="?class=trim-start,chws,htb">
+<meta name="variant" content="?class=trim-start,halt,vrl">
+<meta name="variant" content="?class=trim-start,chws,vrl">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  inline-size: 4em;
+}
+.chws #container {
+  font-family: chws-font;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+.trim-start {
+  text-spacing-trim: trim-start;
+}
+.space-first {
+  text-spacing-trim: space-first;
+}
+</style>
+<div id="container">
+  <div>（国国国（国国国（国</div>
+  <div>国国国）（国国）（国</div>
+  <div>国国国国（</div>
+  <div lang="zh-hans">国国国国“</div>
+
+  <div>（国国国<br>（国国国<br>（国</div>
+  <div>国国国国<br>（</div>
+  <div lang="zh-hans">国国国国<br>“</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-002-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-002-ref.html
new file mode 100644
index 0000000000..fd4ca6d691
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-002-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  text-spacing-trim: trim-start;
+}
+halt {
+  font-feature-settings: 'halt' 1, 'vhal' 1;
+}
+</style>
+<div id="container">
+  <div>
+    <halt>（</halt>国国国<br>
+    <halt>（</halt>国国国<br>
+    <halt>（</halt>国国国
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-002.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-002.html
new file mode 100644
index 0000000000..0d8b192726
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-start-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-start-002-ref.html">
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  inline-size: 3.6em;
+  text-spacing-trim: trim-start;
+}
+</style>
+<div id="container">
+  <!--
+    The available width is set to fit 3.5 full-width characters, but not 4.
+    4 characters can fit only if the first open parenthesis is set half-width.
+  -->
+  <div>（国国国（国国国<br>（国国国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-trim-all-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-trim-all-001-ref.html
new file mode 100644
index 0000000000..d541fcc5f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-trim-all-001-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  text-spacing-trim: space-all;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+halt {
+  font-feature-settings: 'halt' 1;
+}
+.vrl halt {
+  font-feature-settings: 'halt' 1, 'vhal' 1;
+}
+</style>
+<div id="container">
+  <div>国<halt>（</halt>国</div>
+  <div>国<halt>）</halt>国</div>
+  <div>国<halt>、</halt>国</div>
+  <div>国<halt>・</halt>国</div>
+  <div>国<halt>。</halt>国</div>
+  <div>国<halt>「</halt>国</div>
+  <div>国<halt>」</halt>国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-trim-all-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-trim-all-001.html
new file mode 100644
index 0000000000..ca2b1ccd03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-trim-all-001.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-trim-all-001-ref.html">
+<meta name="variant" content="?class=halt,htb">
+<meta name="variant" content="?class=chws,htb">
+<meta name="variant" content="?class=halt,vrl">
+<meta name="variant" content="?class=chws,vrl">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
+}
+@font-face {
+  font-family: chws-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-chws.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+}
+.chws #container {
+  font-family: chws-font;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+</style>
+<div id="container">
+  <div>国（国</div>
+  <div>国）国</div>
+  <div>国、国</div>
+  <div>国・国</div>
+  <div>国。国</div>
+  <div>国「国</div>
+  <div>国」国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-stroke-width-subpixel-notref.html b/testing/web-platform/tests/css/css-text/text-stroke-width-subpixel-notref.html
new file mode 100644
index 0000000000..ba5e8d90f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-stroke-width-subpixel-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<div style="font: 20px monospace; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: lime; color: white">A</div>
diff --git a/testing/web-platform/tests/css/css-text/text-stroke-width-subpixel.html b/testing/web-platform/tests/css/css-text/text-stroke-width-subpixel.html
new file mode 100644
index 0000000000..97cbc3f44d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-stroke-width-subpixel.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<title>-webkit-text-stroke-width is not snapped to device pixels</title>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1837692">
+<link rel="mismatch" href="text-stroke-width-subpixel-notref.html">
+<div style="font: 20px monospace; -webkit-text-stroke-width: 0.1px; -webkit-text-stroke-color: lime; color: white">A</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/math/italic-mapping.js b/testing/web-platform/tests/css/css-text/text-transform/math/italic-mapping.js
new file mode 100644
index 0000000000..ba17d3f6b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/math/italic-mapping.js
@@ -0,0 +1,115 @@
+// Generated by mathml/tools/mathvariant.py; DO NOT EDIT.
+let italic_mapping = {
+  0x41: 0x1D434,
+  0x42: 0x1D435,
+  0x43: 0x1D436,
+  0x44: 0x1D437,
+  0x45: 0x1D438,
+  0x46: 0x1D439,
+  0x47: 0x1D43A,
+  0x48: 0x1D43B,
+  0x49: 0x1D43C,
+  0x4A: 0x1D43D,
+  0x4B: 0x1D43E,
+  0x4C: 0x1D43F,
+  0x4D: 0x1D440,
+  0x4E: 0x1D441,
+  0x4F: 0x1D442,
+  0x50: 0x1D443,
+  0x51: 0x1D444,
+  0x52: 0x1D445,
+  0x53: 0x1D446,
+  0x54: 0x1D447,
+  0x55: 0x1D448,
+  0x56: 0x1D449,
+  0x57: 0x1D44A,
+  0x58: 0x1D44B,
+  0x59: 0x1D44C,
+  0x5A: 0x1D44D,
+  0x61: 0x1D44E,
+  0x62: 0x1D44F,
+  0x63: 0x1D450,
+  0x64: 0x1D451,
+  0x65: 0x1D452,
+  0x66: 0x1D453,
+  0x67: 0x1D454,
+  0x68: 0x210E,
+  0x69: 0x1D456,
+  0x6A: 0x1D457,
+  0x6B: 0x1D458,
+  0x6C: 0x1D459,
+  0x6D: 0x1D45A,
+  0x6E: 0x1D45B,
+  0x6F: 0x1D45C,
+  0x70: 0x1D45D,
+  0x71: 0x1D45E,
+  0x72: 0x1D45F,
+  0x73: 0x1D460,
+  0x74: 0x1D461,
+  0x75: 0x1D462,
+  0x76: 0x1D463,
+  0x77: 0x1D464,
+  0x78: 0x1D465,
+  0x79: 0x1D466,
+  0x7A: 0x1D467,
+  0x131: 0x1D6A4,
+  0x237: 0x1D6A5,
+  0x391: 0x1D6E2,
+  0x392: 0x1D6E3,
+  0x393: 0x1D6E4,
+  0x394: 0x1D6E5,
+  0x395: 0x1D6E6,
+  0x396: 0x1D6E7,
+  0x397: 0x1D6E8,
+  0x398: 0x1D6E9,
+  0x399: 0x1D6EA,
+  0x39A: 0x1D6EB,
+  0x39B: 0x1D6EC,
+  0x39C: 0x1D6ED,
+  0x39D: 0x1D6EE,
+  0x39E: 0x1D6EF,
+  0x39F: 0x1D6F0,
+  0x3A0: 0x1D6F1,
+  0x3A1: 0x1D6F2,
+  0x3F4: 0x1D6F3,
+  0x3A3: 0x1D6F4,
+  0x3A4: 0x1D6F5,
+  0x3A5: 0x1D6F6,
+  0x3A6: 0x1D6F7,
+  0x3A7: 0x1D6F8,
+  0x3A8: 0x1D6F9,
+  0x3A9: 0x1D6FA,
+  0x2207: 0x1D6FB,
+  0x3B1: 0x1D6FC,
+  0x3B2: 0x1D6FD,
+  0x3B3: 0x1D6FE,
+  0x3B4: 0x1D6FF,
+  0x3B5: 0x1D700,
+  0x3B6: 0x1D701,
+  0x3B7: 0x1D702,
+  0x3B8: 0x1D703,
+  0x3B9: 0x1D704,
+  0x3BA: 0x1D705,
+  0x3BB: 0x1D706,
+  0x3BC: 0x1D707,
+  0x3BD: 0x1D708,
+  0x3BE: 0x1D709,
+  0x3BF: 0x1D70A,
+  0x3C0: 0x1D70B,
+  0x3C1: 0x1D70C,
+  0x3C2: 0x1D70D,
+  0x3C3: 0x1D70E,
+  0x3C4: 0x1D70F,
+  0x3C5: 0x1D710,
+  0x3C6: 0x1D711,
+  0x3C7: 0x1D712,
+  0x3C8: 0x1D713,
+  0x3C9: 0x1D714,
+  0x2202: 0x1D715,
+  0x3F5: 0x1D716,
+  0x3D1: 0x1D717,
+  0x3F0: 0x1D718,
+  0x3D5: 0x1D719,
+  0x3F1: 0x1D71A,
+  0x3D6: 0x1D71B,
+}
diff --git a/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-001-ref.html b/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-001-ref.html
new file mode 100644
index 0000000000..d6418a346c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-001-ref.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>text-transform math-auto (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><span class="testfont">&#x1D434;</span>=<span>1D434</span></span>
+  <span><span class="testfont">&#x1D435;</span>=<span>1D435</span></span>
+  <span><span class="testfont">&#x1D436;</span>=<span>1D436</span></span>
+  <span><span class="testfont">&#x1D437;</span>=<span>1D437</span></span>
+  <span><span class="testfont">&#x1D438;</span>=<span>1D438</span></span>
+  <span><span class="testfont">&#x1D439;</span>=<span>1D439</span></span>
+  <span><span class="testfont">&#x1D43A;</span>=<span>1D43A</span></span>
+  <span><span class="testfont">&#x1D43B;</span>=<span>1D43B</span></span>
+  <span><span class="testfont">&#x1D43C;</span>=<span>1D43C</span></span>
+  <span><span class="testfont">&#x1D43D;</span>=<span>1D43D</span></span><br/>
+  <span><span class="testfont">&#x1D43E;</span>=<span>1D43E</span></span>
+  <span><span class="testfont">&#x1D43F;</span>=<span>1D43F</span></span>
+  <span><span class="testfont">&#x1D440;</span>=<span>1D440</span></span>
+  <span><span class="testfont">&#x1D441;</span>=<span>1D441</span></span>
+  <span><span class="testfont">&#x1D442;</span>=<span>1D442</span></span>
+  <span><span class="testfont">&#x1D443;</span>=<span>1D443</span></span>
+  <span><span class="testfont">&#x1D444;</span>=<span>1D444</span></span>
+  <span><span class="testfont">&#x1D445;</span>=<span>1D445</span></span>
+  <span><span class="testfont">&#x1D446;</span>=<span>1D446</span></span>
+  <span><span class="testfont">&#x1D447;</span>=<span>1D447</span></span><br/>
+  <span><span class="testfont">&#x1D448;</span>=<span>1D448</span></span>
+  <span><span class="testfont">&#x1D449;</span>=<span>1D449</span></span>
+  <span><span class="testfont">&#x1D44A;</span>=<span>1D44A</span></span>
+  <span><span class="testfont">&#x1D44B;</span>=<span>1D44B</span></span>
+  <span><span class="testfont">&#x1D44C;</span>=<span>1D44C</span></span>
+  <span><span class="testfont">&#x1D44D;</span>=<span>1D44D</span></span>
+  <span><span class="testfont">&#x1D44E;</span>=<span>1D44E</span></span>
+  <span><span class="testfont">&#x1D44F;</span>=<span>1D44F</span></span>
+  <span><span class="testfont">&#x1D450;</span>=<span>1D450</span></span>
+  <span><span class="testfont">&#x1D451;</span>=<span>1D451</span></span><br/>
+  <span><span class="testfont">&#x1D452;</span>=<span>1D452</span></span>
+  <span><span class="testfont">&#x1D453;</span>=<span>1D453</span></span>
+  <span><span class="testfont">&#x1D454;</span>=<span>1D454</span></span>
+  <span><span class="testfont">&#x210E;</span>=<span>0210E</span></span>
+  <span><span class="testfont">&#x1D456;</span>=<span>1D456</span></span>
+  <span><span class="testfont">&#x1D457;</span>=<span>1D457</span></span>
+  <span><span class="testfont">&#x1D458;</span>=<span>1D458</span></span>
+  <span><span class="testfont">&#x1D459;</span>=<span>1D459</span></span>
+  <span><span class="testfont">&#x1D45A;</span>=<span>1D45A</span></span>
+  <span><span class="testfont">&#x1D45B;</span>=<span>1D45B</span></span><br/>
+  <span><span class="testfont">&#x1D45C;</span>=<span>1D45C</span></span>
+  <span><span class="testfont">&#x1D45D;</span>=<span>1D45D</span></span>
+  <span><span class="testfont">&#x1D45E;</span>=<span>1D45E</span></span>
+  <span><span class="testfont">&#x1D45F;</span>=<span>1D45F</span></span>
+  <span><span class="testfont">&#x1D460;</span>=<span>1D460</span></span>
+  <span><span class="testfont">&#x1D461;</span>=<span>1D461</span></span>
+  <span><span class="testfont">&#x1D462;</span>=<span>1D462</span></span>
+  <span><span class="testfont">&#x1D463;</span>=<span>1D463</span></span>
+  <span><span class="testfont">&#x1D464;</span>=<span>1D464</span></span>
+  <span><span class="testfont">&#x1D465;</span>=<span>1D465</span></span><br/>
+  <span><span class="testfont">&#x1D466;</span>=<span>1D466</span></span>
+  <span><span class="testfont">&#x1D467;</span>=<span>1D467</span></span>
+  <span><span class="testfont">&#x1D6A4;</span>=<span>1D6A4</span></span>
+  <span><span class="testfont">&#x1D6A5;</span>=<span>1D6A5</span></span>
+  <span><span class="testfont">&#x1D6E2;</span>=<span>1D6E2</span></span>
+  <span><span class="testfont">&#x1D6E3;</span>=<span>1D6E3</span></span>
+  <span><span class="testfont">&#x1D6E4;</span>=<span>1D6E4</span></span>
+  <span><span class="testfont">&#x1D6E5;</span>=<span>1D6E5</span></span>
+  <span><span class="testfont">&#x1D6E6;</span>=<span>1D6E6</span></span>
+  <span><span class="testfont">&#x1D6E7;</span>=<span>1D6E7</span></span><br/>
+  <span><span class="testfont">&#x1D6E8;</span>=<span>1D6E8</span></span>
+  <span><span class="testfont">&#x1D6E9;</span>=<span>1D6E9</span></span>
+  <span><span class="testfont">&#x1D6EA;</span>=<span>1D6EA</span></span>
+  <span><span class="testfont">&#x1D6EB;</span>=<span>1D6EB</span></span>
+  <span><span class="testfont">&#x1D6EC;</span>=<span>1D6EC</span></span>
+  <span><span class="testfont">&#x1D6ED;</span>=<span>1D6ED</span></span>
+  <span><span class="testfont">&#x1D6EE;</span>=<span>1D6EE</span></span>
+  <span><span class="testfont">&#x1D6EF;</span>=<span>1D6EF</span></span>
+  <span><span class="testfont">&#x1D6F0;</span>=<span>1D6F0</span></span>
+  <span><span class="testfont">&#x1D6F1;</span>=<span>1D6F1</span></span><br/>
+  <span><span class="testfont">&#x1D6F2;</span>=<span>1D6F2</span></span>
+  <span><span class="testfont">&#x1D6F3;</span>=<span>1D6F3</span></span>
+  <span><span class="testfont">&#x1D6F4;</span>=<span>1D6F4</span></span>
+  <span><span class="testfont">&#x1D6F5;</span>=<span>1D6F5</span></span>
+  <span><span class="testfont">&#x1D6F6;</span>=<span>1D6F6</span></span>
+  <span><span class="testfont">&#x1D6F7;</span>=<span>1D6F7</span></span>
+  <span><span class="testfont">&#x1D6F8;</span>=<span>1D6F8</span></span>
+  <span><span class="testfont">&#x1D6F9;</span>=<span>1D6F9</span></span>
+  <span><span class="testfont">&#x1D6FA;</span>=<span>1D6FA</span></span>
+  <span><span class="testfont">&#x1D6FB;</span>=<span>1D6FB</span></span><br/>
+  <span><span class="testfont">&#x1D6FC;</span>=<span>1D6FC</span></span>
+  <span><span class="testfont">&#x1D6FD;</span>=<span>1D6FD</span></span>
+  <span><span class="testfont">&#x1D6FE;</span>=<span>1D6FE</span></span>
+  <span><span class="testfont">&#x1D6FF;</span>=<span>1D6FF</span></span>
+  <span><span class="testfont">&#x1D700;</span>=<span>1D700</span></span>
+  <span><span class="testfont">&#x1D701;</span>=<span>1D701</span></span>
+  <span><span class="testfont">&#x1D702;</span>=<span>1D702</span></span>
+  <span><span class="testfont">&#x1D703;</span>=<span>1D703</span></span>
+  <span><span class="testfont">&#x1D704;</span>=<span>1D704</span></span>
+  <span><span class="testfont">&#x1D705;</span>=<span>1D705</span></span><br/>
+  <span><span class="testfont">&#x1D706;</span>=<span>1D706</span></span>
+  <span><span class="testfont">&#x1D707;</span>=<span>1D707</span></span>
+  <span><span class="testfont">&#x1D708;</span>=<span>1D708</span></span>
+  <span><span class="testfont">&#x1D709;</span>=<span>1D709</span></span>
+  <span><span class="testfont">&#x1D70A;</span>=<span>1D70A</span></span>
+  <span><span class="testfont">&#x1D70B;</span>=<span>1D70B</span></span>
+  <span><span class="testfont">&#x1D70C;</span>=<span>1D70C</span></span>
+  <span><span class="testfont">&#x1D70D;</span>=<span>1D70D</span></span>
+  <span><span class="testfont">&#x1D70E;</span>=<span>1D70E</span></span>
+  <span><span class="testfont">&#x1D70F;</span>=<span>1D70F</span></span><br/>
+  <span><span class="testfont">&#x1D710;</span>=<span>1D710</span></span>
+  <span><span class="testfont">&#x1D711;</span>=<span>1D711</span></span>
+  <span><span class="testfont">&#x1D712;</span>=<span>1D712</span></span>
+  <span><span class="testfont">&#x1D713;</span>=<span>1D713</span></span>
+  <span><span class="testfont">&#x1D714;</span>=<span>1D714</span></span>
+  <span><span class="testfont">&#x1D715;</span>=<span>1D715</span></span>
+  <span><span class="testfont">&#x1D716;</span>=<span>1D716</span></span>
+  <span><span class="testfont">&#x1D717;</span>=<span>1D717</span></span>
+  <span><span class="testfont">&#x1D718;</span>=<span>1D718</span></span>
+  <span><span class="testfont">&#x1D719;</span>=<span>1D719</span></span><br/>
+  <span><span class="testfont">&#x1D71A;</span>=<span>1D71A</span></span>
+  <span><span class="testfont">&#x1D71B;</span>=<span>1D71B</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-001.html b/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-001.html
new file mode 100644
index 0000000000..db5e5b86f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-001.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>text-transform math-auto</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
+<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+<link rel="help" href="https://w3c.github.io/mathml-core/#italic-mappings">
+<link rel="match" href="text-transform-math-auto-001-ref.html"/>
+<meta name="assert" content="Verify that a character with 'text-transform: math-auto' renders the same as the transformed unicode character.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  body > span {
+    padding: 10px;
+  }
+  span > span {
+    font-family: monospace;
+    font-size: 10px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 10px;
+  }
+</style>
+<body>
+  <!-- Generated by mathml/tools/mathvariant.py; DO NOT EDIT. -->
+  <p>Test passes if all the equalities below are true.</p>
+  <span><span class="testfont" style="text-transform: math-auto">&#x41;</span>=<span>1D434</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x42;</span>=<span>1D435</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x43;</span>=<span>1D436</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x44;</span>=<span>1D437</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x45;</span>=<span>1D438</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x46;</span>=<span>1D439</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x47;</span>=<span>1D43A</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x48;</span>=<span>1D43B</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x49;</span>=<span>1D43C</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x4A;</span>=<span>1D43D</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x4B;</span>=<span>1D43E</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x4C;</span>=<span>1D43F</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x4D;</span>=<span>1D440</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x4E;</span>=<span>1D441</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x4F;</span>=<span>1D442</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x50;</span>=<span>1D443</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x51;</span>=<span>1D444</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x52;</span>=<span>1D445</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x53;</span>=<span>1D446</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x54;</span>=<span>1D447</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x55;</span>=<span>1D448</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x56;</span>=<span>1D449</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x57;</span>=<span>1D44A</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x58;</span>=<span>1D44B</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x59;</span>=<span>1D44C</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x5A;</span>=<span>1D44D</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x61;</span>=<span>1D44E</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x62;</span>=<span>1D44F</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x63;</span>=<span>1D450</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x64;</span>=<span>1D451</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x65;</span>=<span>1D452</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x66;</span>=<span>1D453</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x67;</span>=<span>1D454</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x68;</span>=<span>0210E</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x69;</span>=<span>1D456</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x6A;</span>=<span>1D457</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x6B;</span>=<span>1D458</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x6C;</span>=<span>1D459</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x6D;</span>=<span>1D45A</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x6E;</span>=<span>1D45B</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x6F;</span>=<span>1D45C</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x70;</span>=<span>1D45D</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x71;</span>=<span>1D45E</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x72;</span>=<span>1D45F</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x73;</span>=<span>1D460</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x74;</span>=<span>1D461</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x75;</span>=<span>1D462</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x76;</span>=<span>1D463</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x77;</span>=<span>1D464</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x78;</span>=<span>1D465</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x79;</span>=<span>1D466</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x7A;</span>=<span>1D467</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x131;</span>=<span>1D6A4</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x237;</span>=<span>1D6A5</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x391;</span>=<span>1D6E2</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x392;</span>=<span>1D6E3</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x393;</span>=<span>1D6E4</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x394;</span>=<span>1D6E5</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x395;</span>=<span>1D6E6</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x396;</span>=<span>1D6E7</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x397;</span>=<span>1D6E8</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x398;</span>=<span>1D6E9</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x399;</span>=<span>1D6EA</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x39A;</span>=<span>1D6EB</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x39B;</span>=<span>1D6EC</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x39C;</span>=<span>1D6ED</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x39D;</span>=<span>1D6EE</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x39E;</span>=<span>1D6EF</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x39F;</span>=<span>1D6F0</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3A0;</span>=<span>1D6F1</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3A1;</span>=<span>1D6F2</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3F4;</span>=<span>1D6F3</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3A3;</span>=<span>1D6F4</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3A4;</span>=<span>1D6F5</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3A5;</span>=<span>1D6F6</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3A6;</span>=<span>1D6F7</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3A7;</span>=<span>1D6F8</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3A8;</span>=<span>1D6F9</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3A9;</span>=<span>1D6FA</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x2207;</span>=<span>1D6FB</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3B1;</span>=<span>1D6FC</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3B2;</span>=<span>1D6FD</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3B3;</span>=<span>1D6FE</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3B4;</span>=<span>1D6FF</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3B5;</span>=<span>1D700</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3B6;</span>=<span>1D701</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3B7;</span>=<span>1D702</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3B8;</span>=<span>1D703</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3B9;</span>=<span>1D704</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3BA;</span>=<span>1D705</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3BB;</span>=<span>1D706</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3BC;</span>=<span>1D707</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3BD;</span>=<span>1D708</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3BE;</span>=<span>1D709</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3BF;</span>=<span>1D70A</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3C0;</span>=<span>1D70B</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3C1;</span>=<span>1D70C</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3C2;</span>=<span>1D70D</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3C3;</span>=<span>1D70E</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3C4;</span>=<span>1D70F</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3C5;</span>=<span>1D710</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3C6;</span>=<span>1D711</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3C7;</span>=<span>1D712</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3C8;</span>=<span>1D713</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3C9;</span>=<span>1D714</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x2202;</span>=<span>1D715</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3F5;</span>=<span>1D716</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3D1;</span>=<span>1D717</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3F0;</span>=<span>1D718</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3D5;</span>=<span>1D719</span></span><br/>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3F1;</span>=<span>1D71A</span></span>
+  <span><span class="testfont" style="text-transform: math-auto">&#x3D6;</span>=<span>1D71B</span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-002-ref.html b/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-002-ref.html
new file mode 100644
index 0000000000..1c1d6e2770
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-002-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>text-transform math-auto (reference)</title>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  body > div {
+    padding: 10px;
+  }
+  div > span {
+    font-family: monospace;
+    font-size: 16px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 16px;
+  }
+</style>
+<body>
+  <p>Test passes if all the equalities below are true.</p>
+  <div>Single character: <span class="testfont">&#x1D715;</span>=<span>1D715</span></div>
+  <div>Two characters: <span class="testfont">&#x2202;&#x2207;</span>=<span>0220202207</span></div>
+  <div>Three characters: <span class="testfont">&#x2202;&#x2207;&#x237;</span>=<span>022020220700237</span></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-002.html b/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-002.html
new file mode 100644
index 0000000000..34e43e718e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-002.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>text-transform math-auto</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3745"/>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#new-text-transform-values">
+<link rel="match" href="text-transform-math-auto-002-ref.html"/>
+<meta name="assert" content="Test 'text-transform: math-auto' for text nodes of different lengths">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/mathvariant-italic.woff");
+  }
+  body > div {
+    padding: 10px;
+  }
+  div > span {
+    font-family: monospace;
+    font-size: 16px;
+  }
+  .testfont {
+    font-family: TestFont;
+    font-size: 16px;
+  }
+</style>
+<body>
+  <p>Test passes if all the equalities below are true.</p>
+  <div>Single character: <span class="testfont" style="text-transform: math-auto">&#x2202;</span>=<span>1D715</span></div>
+  <div>Two characters: <span class="testfont" style="text-transform: math-auto">&#x2202;&#x2207;</span>=<span>0220202207</span></div>
+  <div>Three characters: <span class="testfont" style="text-transform: math-auto">&#x2202;&#x2207;&#x237;</span>=<span>022020220700237</span></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-003.html b/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-003.html
new file mode 100644
index 0000000000..eff01b0890
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/math/text-transform-math-auto-003.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>text-transform math-auto</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#italic-mappings">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="italic-mapping.js"></script>
+    <meta name="assert" content="Verify Selection.toString() on a character with 'text-transform: math-auto' returns the transformed unicode character.">
+    <style>
+      #container {
+        text-transform: math-auto;
+      }
+    </style>
+  </head>
+  <body>
+    <span id="container"></span>
+    <script>
+      add_completion_callback(() => {
+        container.remove();
+      });
+      for (let code_point in italic_mapping) {
+        test(() => {
+          container.textContent = String.fromCodePoint(code_point);
+          window
+            .getSelection()
+            .setBaseAndExtent(container.firstChild, 0, container.firstChild, 1);
+          assert_equals(
+            window.getSelection().toString(),
+            String.fromCodePoint(italic_mapping[code_point])
+          );
+        }, `Selection.toString() for math-auto '${String.fromCodePoint(code_point)}' returns the transformed character.`);
+      }
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-001-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-001-ref.html
new file mode 100644
index 0000000000..4e78815599
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-001-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Latin Basic and Latin-1</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>Aaa Aaa</span> <span>Bbb Bbb</span> <span>Ccc Ccc</span> <span>Ddd Ddd</span> <span>Eee Eee</span> <span>Fff Fff</span> <span>Ggg Ggg</span> <span>Hhh Hhh</span> <span>Iii Iii</span> <span>Jjj Jjj</span> <span>Kkk Kkk</span> <span>Lll Lll</span> <span>Mmm Mmm</span> <span>Nnn Nnn</span> <span>Ooo Ooo</span> <span>Ppp Ppp</span> <span>Qqq Qqq</span> <span>Rrr Rrr</span> <span>Sss Sss</span> <span>Ttt Ttt</span> <span>Uuu Uuu</span> <span>Vvv Vvv</span> <span>Www Www</span> <span>Xxx Xxx</span> <span>Yyy Yyy</span> <span>Zzz Zzz</span> <span title="U+00B5">&#x039C;&#x00B5;&#x00B5; &#x039C;&#x00B5;&#x00B5;</span>  <span title="U+00E0">&#x00C0;&#x00E0;&#x00E0; &#x00C0;&#x00E0;&#x00E0;</span>  <span title="U+00E1">&#x00C1;&#x00E1;&#x00E1; &#x00C1;&#x00E1;&#x00E1;</span>  <span title="U+00E2">&#x00C2;&#x00E2;&#x00E2; &#x00C2;&#x00E2;&#x00E2;</span>  <span title="U+00E3">&#x00C3;&#x00E3;&#x00E3; &#x00C3;&#x00E3;&#x00E3;</span>  <span title="U+00E4">&#x00C4;&#x00E4;&#x00E4; &#x00C4;&#x00E4;&#x00E4;</span>  <span title="U+00E5">&#x00C5;&#x00E5;&#x00E5; &#x00C5;&#x00E5;&#x00E5;</span>  <span title="U+00E6">&#x00C6;&#x00E6;&#x00E6; &#x00C6;&#x00E6;&#x00E6;</span>  <span title="U+00E7">&#x00C7;&#x00E7;&#x00E7; &#x00C7;&#x00E7;&#x00E7;</span>  <span title="U+00E8">&#x00C8;&#x00E8;&#x00E8; &#x00C8;&#x00E8;&#x00E8;</span>  <span title="U+00E9">&#x00C9;&#x00E9;&#x00E9; &#x00C9;&#x00E9;&#x00E9;</span>  <span title="U+00EA">&#x00CA;&#x00EA;&#x00EA; &#x00CA;&#x00EA;&#x00EA;</span>  <span title="U+00EB">&#x00CB;&#x00EB;&#x00EB; &#x00CB;&#x00EB;&#x00EB;</span>  <span title="U+00EC">&#x00CC;&#x00EC;&#x00EC; &#x00CC;&#x00EC;&#x00EC;</span>  <span title="U+00ED">&#x00CD;&#x00ED;&#x00ED; &#x00CD;&#x00ED;&#x00ED;</span>  <span title="U+00EE">&#x00CE;&#x00EE;&#x00EE; &#x00CE;&#x00EE;&#x00EE;</span>  <span title="U+00EF">&#x00CF;&#x00EF;&#x00EF; &#x00CF;&#x00EF;&#x00EF;</span>  <span title="U+00F0">&#x00D0;&#x00F0;&#x00F0; &#x00D0;&#x00F0;&#x00F0;</span>  <span title="U+00F1">&#x00D1;&#x00F1;&#x00F1; &#x00D1;&#x00F1;&#x00F1;</span>  <span title="U+00F2">&#x00D2;&#x00F2;&#x00F2; &#x00D2;&#x00F2;&#x00F2;</span>  <span title="U+00F3">&#x00D3;&#x00F3;&#x00F3; &#x00D3;&#x00F3;&#x00F3;</span>  <span title="U+00F4">&#x00D4;&#x00F4;&#x00F4; &#x00D4;&#x00F4;&#x00F4;</span>  <span title="U+00F5">&#x00D5;&#x00F5;&#x00F5; &#x00D5;&#x00F5;&#x00F5;</span>  <span title="U+00F6">&#x00D6;&#x00F6;&#x00F6; &#x00D6;&#x00F6;&#x00F6;</span>  <span title="U+00F8">&#x00D8;&#x00F8;&#x00F8; &#x00D8;&#x00F8;&#x00F8;</span>  <span title="U+00F9">&#x00D9;&#x00F9;&#x00F9; &#x00D9;&#x00F9;&#x00F9;</span>  <span title="U+00FA">&#x00DA;&#x00FA;&#x00FA; &#x00DA;&#x00FA;&#x00FA;</span>  <span title="U+00FB">&#x00DB;&#x00FB;&#x00FB; &#x00DB;&#x00FB;&#x00FB;</span>  <span title="U+00FC">&#x00DC;&#x00FC;&#x00FC; &#x00DC;&#x00FC;&#x00FC;</span>  <span title="U+00FD">&#x00DD;&#x00FD;&#x00FD; &#x00DD;&#x00FD;&#x00FD;</span>  <span title="U+00FE">&#x00DE;&#x00FE;&#x00FE; &#x00DE;&#x00FE;&#x00FE;</span>  <span title="U+00FF">&#x0178;&#x00FF;&#x00FF; &#x0178;&#x00FF;&#x00FF;</span>  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-003-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-003-ref.html
new file mode 100644
index 0000000000..61e612461d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-003-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform:  capitalize, Latin Extended Additional</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 100%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1E01">&#x1E00;&#x1E01;&#x1E01; &#x1E00;&#x1E01;&#x1E01;</span>  <span title="U+1E03">&#x1E02;&#x1E03;&#x1E03; &#x1E02;&#x1E03;&#x1E03;</span>  <span title="U+1E05">&#x1E04;&#x1E05;&#x1E05; &#x1E04;&#x1E05;&#x1E05;</span>  <span title="U+1E07">&#x1E06;&#x1E07;&#x1E07; &#x1E06;&#x1E07;&#x1E07;</span>  <span title="U+1E09">&#x1E08;&#x1E09;&#x1E09; &#x1E08;&#x1E09;&#x1E09;</span>  <span title="U+1E0B">&#x1E0A;&#x1E0B;&#x1E0B; &#x1E0A;&#x1E0B;&#x1E0B;</span>  <span title="U+1E0D">&#x1E0C;&#x1E0D;&#x1E0D; &#x1E0C;&#x1E0D;&#x1E0D;</span>  <span title="U+1E0F">&#x1E0E;&#x1E0F;&#x1E0F; &#x1E0E;&#x1E0F;&#x1E0F;</span>  <span title="U+1E11">&#x1E10;&#x1E11;&#x1E11; &#x1E10;&#x1E11;&#x1E11;</span>  <span title="U+1E13">&#x1E12;&#x1E13;&#x1E13; &#x1E12;&#x1E13;&#x1E13;</span>  <span title="U+1E15">&#x1E14;&#x1E15;&#x1E15; &#x1E14;&#x1E15;&#x1E15;</span>  <span title="U+1E17">&#x1E16;&#x1E17;&#x1E17; &#x1E16;&#x1E17;&#x1E17;</span>  <span title="U+1E19">&#x1E18;&#x1E19;&#x1E19; &#x1E18;&#x1E19;&#x1E19;</span>  <span title="U+1E1B">&#x1E1A;&#x1E1B;&#x1E1B; &#x1E1A;&#x1E1B;&#x1E1B;</span>  <span title="U+1E1D">&#x1E1C;&#x1E1D;&#x1E1D; &#x1E1C;&#x1E1D;&#x1E1D;</span>  <span title="U+1E1F">&#x1E1E;&#x1E1F;&#x1E1F; &#x1E1E;&#x1E1F;&#x1E1F;</span>  <span title="U+1E21">&#x1E20;&#x1E21;&#x1E21; &#x1E20;&#x1E21;&#x1E21;</span>  <span title="U+1E23">&#x1E22;&#x1E23;&#x1E23; &#x1E22;&#x1E23;&#x1E23;</span>  <span title="U+1E25">&#x1E24;&#x1E25;&#x1E25; &#x1E24;&#x1E25;&#x1E25;</span>  <span title="U+1E27">&#x1E26;&#x1E27;&#x1E27; &#x1E26;&#x1E27;&#x1E27;</span>  <span title="U+1E29">&#x1E28;&#x1E29;&#x1E29; &#x1E28;&#x1E29;&#x1E29;</span>  <span title="U+1E2B">&#x1E2A;&#x1E2B;&#x1E2B; &#x1E2A;&#x1E2B;&#x1E2B;</span>  <span title="U+1E2D">&#x1E2C;&#x1E2D;&#x1E2D; &#x1E2C;&#x1E2D;&#x1E2D;</span>  <span title="U+1E2F">&#x1E2E;&#x1E2F;&#x1E2F; &#x1E2E;&#x1E2F;&#x1E2F;</span>  <span title="U+1E31">&#x1E30;&#x1E31;&#x1E31; &#x1E30;&#x1E31;&#x1E31;</span>  <span title="U+1E33">&#x1E32;&#x1E33;&#x1E33; &#x1E32;&#x1E33;&#x1E33;</span>  <span title="U+1E35">&#x1E34;&#x1E35;&#x1E35; &#x1E34;&#x1E35;&#x1E35;</span>  <span title="U+1E37">&#x1E36;&#x1E37;&#x1E37; &#x1E36;&#x1E37;&#x1E37;</span>  <span title="U+1E39">&#x1E38;&#x1E39;&#x1E39; &#x1E38;&#x1E39;&#x1E39;</span>  <span title="U+1E3B">&#x1E3A;&#x1E3B;&#x1E3B; &#x1E3A;&#x1E3B;&#x1E3B;</span>  <span title="U+1E3D">&#x1E3C;&#x1E3D;&#x1E3D; &#x1E3C;&#x1E3D;&#x1E3D;</span>  <span title="U+1E3F">&#x1E3E;&#x1E3F;&#x1E3F; &#x1E3E;&#x1E3F;&#x1E3F;</span>  <span title="U+1E41">&#x1E40;&#x1E41;&#x1E41; &#x1E40;&#x1E41;&#x1E41;</span>  <span title="U+1E43">&#x1E42;&#x1E43;&#x1E43; &#x1E42;&#x1E43;&#x1E43;</span>  <span title="U+1E45">&#x1E44;&#x1E45;&#x1E45; &#x1E44;&#x1E45;&#x1E45;</span>  <span title="U+1E47">&#x1E46;&#x1E47;&#x1E47; &#x1E46;&#x1E47;&#x1E47;</span>  <span title="U+1E49">&#x1E48;&#x1E49;&#x1E49; &#x1E48;&#x1E49;&#x1E49;</span>  <span title="U+1E4B">&#x1E4A;&#x1E4B;&#x1E4B; &#x1E4A;&#x1E4B;&#x1E4B;</span>  <span title="U+1E4D">&#x1E4C;&#x1E4D;&#x1E4D; &#x1E4C;&#x1E4D;&#x1E4D;</span>  <span title="U+1E4F">&#x1E4E;&#x1E4F;&#x1E4F; &#x1E4E;&#x1E4F;&#x1E4F;</span>  <span title="U+1E51">&#x1E50;&#x1E51;&#x1E51; &#x1E50;&#x1E51;&#x1E51;</span>  <span title="U+1E53">&#x1E52;&#x1E53;&#x1E53; &#x1E52;&#x1E53;&#x1E53;</span>  <span title="U+1E55">&#x1E54;&#x1E55;&#x1E55; &#x1E54;&#x1E55;&#x1E55;</span>  <span title="U+1E57">&#x1E56;&#x1E57;&#x1E57; &#x1E56;&#x1E57;&#x1E57;</span>  <span title="U+1E59">&#x1E58;&#x1E59;&#x1E59; &#x1E58;&#x1E59;&#x1E59;</span>  <span title="U+1E5B">&#x1E5A;&#x1E5B;&#x1E5B; &#x1E5A;&#x1E5B;&#x1E5B;</span>  <span title="U+1E5D">&#x1E5C;&#x1E5D;&#x1E5D; &#x1E5C;&#x1E5D;&#x1E5D;</span>  <span title="U+1E5F">&#x1E5E;&#x1E5F;&#x1E5F; &#x1E5E;&#x1E5F;&#x1E5F;</span>  <span title="U+1E61">&#x1E60;&#x1E61;&#x1E61; &#x1E60;&#x1E61;&#x1E61;</span>  <span title="U+1E63">&#x1E62;&#x1E63;&#x1E63; &#x1E62;&#x1E63;&#x1E63;</span>  <span title="U+1E65">&#x1E64;&#x1E65;&#x1E65; &#x1E64;&#x1E65;&#x1E65;</span>  <span title="U+1E67">&#x1E66;&#x1E67;&#x1E67; &#x1E66;&#x1E67;&#x1E67;</span>  <span title="U+1E69">&#x1E68;&#x1E69;&#x1E69; &#x1E68;&#x1E69;&#x1E69;</span>  <span title="U+1E6B">&#x1E6A;&#x1E6B;&#x1E6B; &#x1E6A;&#x1E6B;&#x1E6B;</span>  <span title="U+1E6D">&#x1E6C;&#x1E6D;&#x1E6D; &#x1E6C;&#x1E6D;&#x1E6D;</span>  <span title="U+1E6F">&#x1E6E;&#x1E6F;&#x1E6F; &#x1E6E;&#x1E6F;&#x1E6F;</span>  <span title="U+1E71">&#x1E70;&#x1E71;&#x1E71; &#x1E70;&#x1E71;&#x1E71;</span>  <span title="U+1E73">&#x1E72;&#x1E73;&#x1E73; &#x1E72;&#x1E73;&#x1E73;</span>  <span title="U+1E75">&#x1E74;&#x1E75;&#x1E75; &#x1E74;&#x1E75;&#x1E75;</span>  <span title="U+1E77">&#x1E76;&#x1E77;&#x1E77; &#x1E76;&#x1E77;&#x1E77;</span>  <span title="U+1E79">&#x1E78;&#x1E79;&#x1E79; &#x1E78;&#x1E79;&#x1E79;</span>  <span title="U+1E7B">&#x1E7A;&#x1E7B;&#x1E7B; &#x1E7A;&#x1E7B;&#x1E7B;</span>  <span title="U+1E7D">&#x1E7C;&#x1E7D;&#x1E7D; &#x1E7C;&#x1E7D;&#x1E7D;</span>  <span title="U+1E7F">&#x1E7E;&#x1E7F;&#x1E7F; &#x1E7E;&#x1E7F;&#x1E7F;</span>  <span title="U+1E81">&#x1E80;&#x1E81;&#x1E81; &#x1E80;&#x1E81;&#x1E81;</span>  <span title="U+1E83">&#x1E82;&#x1E83;&#x1E83; &#x1E82;&#x1E83;&#x1E83;</span>  <span title="U+1E85">&#x1E84;&#x1E85;&#x1E85; &#x1E84;&#x1E85;&#x1E85;</span>  <span title="U+1E87">&#x1E86;&#x1E87;&#x1E87; &#x1E86;&#x1E87;&#x1E87;</span>  <span title="U+1E89">&#x1E88;&#x1E89;&#x1E89; &#x1E88;&#x1E89;&#x1E89;</span>  <span title="U+1E8B">&#x1E8A;&#x1E8B;&#x1E8B; &#x1E8A;&#x1E8B;&#x1E8B;</span>  <span title="U+1E8D">&#x1E8C;&#x1E8D;&#x1E8D; &#x1E8C;&#x1E8D;&#x1E8D;</span>  <span title="U+1E8F">&#x1E8E;&#x1E8F;&#x1E8F; &#x1E8E;&#x1E8F;&#x1E8F;</span>  <span title="U+1E91">&#x1E90;&#x1E91;&#x1E91; &#x1E90;&#x1E91;&#x1E91;</span>  <span title="U+1E93">&#x1E92;&#x1E93;&#x1E93; &#x1E92;&#x1E93;&#x1E93;</span>  <span title="U+1E95">&#x1E94;&#x1E95;&#x1E95; &#x1E94;&#x1E95;&#x1E95;</span>  <span title="U+1E9B">&#x1E60;&#x1E9B;&#x1E9B; &#x1E60;&#x1E9B;&#x1E9B;</span>  <span title="U+1EA1">&#x1EA0;&#x1EA1;&#x1EA1; &#x1EA0;&#x1EA1;&#x1EA1;</span>  <span title="U+1EA3">&#x1EA2;&#x1EA3;&#x1EA3; &#x1EA2;&#x1EA3;&#x1EA3;</span>  <span title="U+1EA5">&#x1EA4;&#x1EA5;&#x1EA5; &#x1EA4;&#x1EA5;&#x1EA5;</span>  <span title="U+1EA7">&#x1EA6;&#x1EA7;&#x1EA7; &#x1EA6;&#x1EA7;&#x1EA7;</span>  <span title="U+1EA9">&#x1EA8;&#x1EA9;&#x1EA9; &#x1EA8;&#x1EA9;&#x1EA9;</span>  <span title="U+1EAB">&#x1EAA;&#x1EAB;&#x1EAB; &#x1EAA;&#x1EAB;&#x1EAB;</span>  <span title="U+1EAD">&#x1EAC;&#x1EAD;&#x1EAD; &#x1EAC;&#x1EAD;&#x1EAD;</span>  <span title="U+1EAF">&#x1EAE;&#x1EAF;&#x1EAF; &#x1EAE;&#x1EAF;&#x1EAF;</span>  <span title="U+1EB1">&#x1EB0;&#x1EB1;&#x1EB1; &#x1EB0;&#x1EB1;&#x1EB1;</span>  <span title="U+1EB3">&#x1EB2;&#x1EB3;&#x1EB3; &#x1EB2;&#x1EB3;&#x1EB3;</span>  <span title="U+1EB5">&#x1EB4;&#x1EB5;&#x1EB5; &#x1EB4;&#x1EB5;&#x1EB5;</span>  <span title="U+1EB7">&#x1EB6;&#x1EB7;&#x1EB7; &#x1EB6;&#x1EB7;&#x1EB7;</span>  <span title="U+1EB9">&#x1EB8;&#x1EB9;&#x1EB9; &#x1EB8;&#x1EB9;&#x1EB9;</span>  <span title="U+1EBB">&#x1EBA;&#x1EBB;&#x1EBB; &#x1EBA;&#x1EBB;&#x1EBB;</span>  <span title="U+1EBD">&#x1EBC;&#x1EBD;&#x1EBD; &#x1EBC;&#x1EBD;&#x1EBD;</span>  <span title="U+1EBF">&#x1EBE;&#x1EBF;&#x1EBF; &#x1EBE;&#x1EBF;&#x1EBF;</span>  <span title="U+1EC1">&#x1EC0;&#x1EC1;&#x1EC1; &#x1EC0;&#x1EC1;&#x1EC1;</span>  <span title="U+1EC3">&#x1EC2;&#x1EC3;&#x1EC3; &#x1EC2;&#x1EC3;&#x1EC3;</span>  <span title="U+1EC5">&#x1EC4;&#x1EC5;&#x1EC5; &#x1EC4;&#x1EC5;&#x1EC5;</span>  <span title="U+1EC7">&#x1EC6;&#x1EC7;&#x1EC7; &#x1EC6;&#x1EC7;&#x1EC7;</span>  <span title="U+1EC9">&#x1EC8;&#x1EC9;&#x1EC9; &#x1EC8;&#x1EC9;&#x1EC9;</span>  <span title="U+1ECB">&#x1ECA;&#x1ECB;&#x1ECB; &#x1ECA;&#x1ECB;&#x1ECB;</span>  <span title="U+1ECD">&#x1ECC;&#x1ECD;&#x1ECD; &#x1ECC;&#x1ECD;&#x1ECD;</span>  <span title="U+1ECF">&#x1ECE;&#x1ECF;&#x1ECF; &#x1ECE;&#x1ECF;&#x1ECF;</span>  <span title="U+1ED1">&#x1ED0;&#x1ED1;&#x1ED1; &#x1ED0;&#x1ED1;&#x1ED1;</span>  <span title="U+1ED3">&#x1ED2;&#x1ED3;&#x1ED3; &#x1ED2;&#x1ED3;&#x1ED3;</span>  <span title="U+1ED5">&#x1ED4;&#x1ED5;&#x1ED5; &#x1ED4;&#x1ED5;&#x1ED5;</span>  <span title="U+1ED7">&#x1ED6;&#x1ED7;&#x1ED7; &#x1ED6;&#x1ED7;&#x1ED7;</span>  <span title="U+1ED9">&#x1ED8;&#x1ED9;&#x1ED9; &#x1ED8;&#x1ED9;&#x1ED9;</span>  <span title="U+1EDB">&#x1EDA;&#x1EDB;&#x1EDB; &#x1EDA;&#x1EDB;&#x1EDB;</span>  <span title="U+1EDD">&#x1EDC;&#x1EDD;&#x1EDD; &#x1EDC;&#x1EDD;&#x1EDD;</span>  <span title="U+1EDF">&#x1EDE;&#x1EDF;&#x1EDF; &#x1EDE;&#x1EDF;&#x1EDF;</span>  <span title="U+1EE1">&#x1EE0;&#x1EE1;&#x1EE1; &#x1EE0;&#x1EE1;&#x1EE1;</span>  <span title="U+1EE3">&#x1EE2;&#x1EE3;&#x1EE3; &#x1EE2;&#x1EE3;&#x1EE3;</span>  <span title="U+1EE5">&#x1EE4;&#x1EE5;&#x1EE5; &#x1EE4;&#x1EE5;&#x1EE5;</span>  <span title="U+1EE7">&#x1EE6;&#x1EE7;&#x1EE7; &#x1EE6;&#x1EE7;&#x1EE7;</span>  <span title="U+1EE9">&#x1EE8;&#x1EE9;&#x1EE9; &#x1EE8;&#x1EE9;&#x1EE9;</span>  <span title="U+1EEB">&#x1EEA;&#x1EEB;&#x1EEB; &#x1EEA;&#x1EEB;&#x1EEB;</span>  <span title="U+1EED">&#x1EEC;&#x1EED;&#x1EED; &#x1EEC;&#x1EED;&#x1EED;</span>  <span title="U+1EEF">&#x1EEE;&#x1EEF;&#x1EEF; &#x1EEE;&#x1EEF;&#x1EEF;</span>  <span title="U+1EF1">&#x1EF0;&#x1EF1;&#x1EF1; &#x1EF0;&#x1EF1;&#x1EF1;</span>  <span title="U+1EF3">&#x1EF2;&#x1EF3;&#x1EF3; &#x1EF2;&#x1EF3;&#x1EF3;</span>  <span title="U+1EF5">&#x1EF4;&#x1EF5;&#x1EF5; &#x1EF4;&#x1EF5;&#x1EF5;</span>  <span title="U+1EF7">&#x1EF6;&#x1EF7;&#x1EF7; &#x1EF6;&#x1EF7;&#x1EF7;</span>  <span title="U+1EF9">&#x1EF8;&#x1EF9;&#x1EF9; &#x1EF8;&#x1EF9;&#x1EF9;</span>  <span title="U+1EFB">&#x1EFA;&#x1EFB;&#x1EFB; &#x1EFA;&#x1EFB;&#x1EFB;</span>  <span title="U+1EFD">&#x1EFC;&#x1EFD;&#x1EFD; &#x1EFC;&#x1EFD;&#x1EFD;</span>  <span title="U+1EFF">&#x1EFE;&#x1EFF;&#x1EFF; &#x1EFE;&#x1EFF;&#x1EFF;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-005-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-005-ref.html
new file mode 100644
index 0000000000..cb49f01a98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-005-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Latin Extended-A</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0101">&#x0100;&#x0101;&#x0101; &#x0100;&#x0101;&#x0101;</span> <span title="U+0103">&#x0102;&#x0103;&#x0103; &#x0102;&#x0103;&#x0103;</span> <span title="U+0105">&#x0104;&#x0105;&#x0105; &#x0104;&#x0105;&#x0105;</span> <span title="U+0107">&#x0106;&#x0107;&#x0107; &#x0106;&#x0107;&#x0107;</span> <span title="U+0109">&#x0108;&#x0109;&#x0109; &#x0108;&#x0109;&#x0109;</span> <span title="U+010B">&#x010A;&#x010B;&#x010B; &#x010A;&#x010B;&#x010B;</span> <span title="U+010D">&#x010C;&#x010D;&#x010D; &#x010C;&#x010D;&#x010D;</span> <span title="U+010F">&#x010E;&#x010F;&#x010F; &#x010E;&#x010F;&#x010F;</span> <span title="U+0111">&#x0110;&#x0111;&#x0111; &#x0110;&#x0111;&#x0111;</span> <span title="U+0113">&#x0112;&#x0113;&#x0113; &#x0112;&#x0113;&#x0113;</span> <span title="U+0115">&#x0114;&#x0115;&#x0115; &#x0114;&#x0115;&#x0115;</span> <span title="U+0117">&#x0116;&#x0117;&#x0117; &#x0116;&#x0117;&#x0117;</span> <span title="U+0119">&#x0118;&#x0119;&#x0119; &#x0118;&#x0119;&#x0119;</span> <span title="U+011B">&#x011A;&#x011B;&#x011B; &#x011A;&#x011B;&#x011B;</span> <span title="U+011D">&#x011C;&#x011D;&#x011D; &#x011C;&#x011D;&#x011D;</span> <span title="U+011F">&#x011E;&#x011F;&#x011F; &#x011E;&#x011F;&#x011F;</span> <span title="U+0121">&#x0120;&#x0121;&#x0121; &#x0120;&#x0121;&#x0121;</span> <span title="U+0123">&#x0122;&#x0123;&#x0123; &#x0122;&#x0123;&#x0123;</span> <span title="U+0125">&#x0124;&#x0125;&#x0125; &#x0124;&#x0125;&#x0125;</span> <span title="U+0127">&#x0126;&#x0127;&#x0127; &#x0126;&#x0127;&#x0127;</span> <span title="U+0129">&#x0128;&#x0129;&#x0129; &#x0128;&#x0129;&#x0129;</span> <span title="U+012B">&#x012A;&#x012B;&#x012B; &#x012A;&#x012B;&#x012B;</span> <span title="U+012D">&#x012C;&#x012D;&#x012D; &#x012C;&#x012D;&#x012D;</span> <span title="U+012F">&#x012E;&#x012F;&#x012F; &#x012E;&#x012F;&#x012F;</span> <span title="U+0131">&#x0049;&#x0131;&#x0131; &#x0049;&#x0131;&#x0131;</span> <span title="U+0133">&#x0132;&#x0133;&#x0133; &#x0132;&#x0133;&#x0133;</span> <span title="U+0135">&#x0134;&#x0135;&#x0135; &#x0134;&#x0135;&#x0135;</span> <span title="U+0137">&#x0136;&#x0137;&#x0137; &#x0136;&#x0137;&#x0137;</span> <span title="U+013A">&#x0139;&#x013A;&#x013A; &#x0139;&#x013A;&#x013A;</span> <span title="U+013C">&#x013B;&#x013C;&#x013C; &#x013B;&#x013C;&#x013C;</span> <span title="U+013E">&#x013D;&#x013E;&#x013E; &#x013D;&#x013E;&#x013E;</span> <span title="U+0140">&#x013F;&#x0140;&#x0140; &#x013F;&#x0140;&#x0140;</span> <span title="U+0142">&#x0141;&#x0142;&#x0142; &#x0141;&#x0142;&#x0142;</span> <span title="U+0144">&#x0143;&#x0144;&#x0144; &#x0143;&#x0144;&#x0144;</span> <span title="U+0146">&#x0145;&#x0146;&#x0146; &#x0145;&#x0146;&#x0146;</span> <span title="U+0148">&#x0147;&#x0148;&#x0148; &#x0147;&#x0148;&#x0148;</span> <span title="U+014B">&#x014A;&#x014B;&#x014B; &#x014A;&#x014B;&#x014B;</span> <span title="U+014D">&#x014C;&#x014D;&#x014D; &#x014C;&#x014D;&#x014D;</span> <span title="U+014F">&#x014E;&#x014F;&#x014F; &#x014E;&#x014F;&#x014F;</span> <span title="U+0151">&#x0150;&#x0151;&#x0151; &#x0150;&#x0151;&#x0151;</span> <span title="U+0153">&#x0152;&#x0153;&#x0153; &#x0152;&#x0153;&#x0153;</span> <span title="U+0155">&#x0154;&#x0155;&#x0155; &#x0154;&#x0155;&#x0155;</span> <span title="U+0157">&#x0156;&#x0157;&#x0157; &#x0156;&#x0157;&#x0157;</span> <span title="U+0159">&#x0158;&#x0159;&#x0159; &#x0158;&#x0159;&#x0159;</span> <span title="U+015B">&#x015A;&#x015B;&#x015B; &#x015A;&#x015B;&#x015B;</span> <span title="U+015D">&#x015C;&#x015D;&#x015D; &#x015C;&#x015D;&#x015D;</span> <span title="U+015F">&#x015E;&#x015F;&#x015F; &#x015E;&#x015F;&#x015F;</span> <span title="U+0161">&#x0160;&#x0161;&#x0161; &#x0160;&#x0161;&#x0161;</span> <span title="U+0163">&#x0162;&#x0163;&#x0163; &#x0162;&#x0163;&#x0163;</span> <span title="U+0165">&#x0164;&#x0165;&#x0165; &#x0164;&#x0165;&#x0165;</span> <span title="U+0167">&#x0166;&#x0167;&#x0167; &#x0166;&#x0167;&#x0167;</span> <span title="U+0169">&#x0168;&#x0169;&#x0169; &#x0168;&#x0169;&#x0169;</span> <span title="U+016B">&#x016A;&#x016B;&#x016B; &#x016A;&#x016B;&#x016B;</span> <span title="U+016D">&#x016C;&#x016D;&#x016D; &#x016C;&#x016D;&#x016D;</span> <span title="U+016F">&#x016E;&#x016F;&#x016F; &#x016E;&#x016F;&#x016F;</span> <span title="U+0171">&#x0170;&#x0171;&#x0171; &#x0170;&#x0171;&#x0171;</span> <span title="U+0173">&#x0172;&#x0173;&#x0173; &#x0172;&#x0173;&#x0173;</span> <span title="U+0175">&#x0174;&#x0175;&#x0175; &#x0174;&#x0175;&#x0175;</span> <span title="U+0177">&#x0176;&#x0177;&#x0177; &#x0176;&#x0177;&#x0177;</span> <span title="U+017A">&#x0179;&#x017A;&#x017A; &#x0179;&#x017A;&#x017A;</span> <span title="U+017C">&#x017B;&#x017C;&#x017C; &#x017B;&#x017C;&#x017C;</span> <span title="U+017E">&#x017D;&#x017E;&#x017E; &#x017D;&#x017E;&#x017E;</span> <span title="U+017F">&#x0053;&#x017F;&#x017F; &#x0053;&#x017F;&#x017F;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-007-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-007-ref.html
new file mode 100644
index 0000000000..97fc573628
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-007-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Latin Extended-B</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 100%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0180">&#x0243;&#x0180;&#x0180; &#x0243;&#x0180;&#x0180;</span> <span title="U+0183">&#x0182;&#x0183;&#x0183; &#x0182;&#x0183;&#x0183;</span> <span title="U+0185">&#x0184;&#x0185;&#x0185; &#x0184;&#x0185;&#x0185;</span> <span title="U+0188">&#x0187;&#x0188;&#x0188; &#x0187;&#x0188;&#x0188;</span> <span title="U+018C">&#x018B;&#x018C;&#x018C; &#x018B;&#x018C;&#x018C;</span> <span title="U+0192">&#x0191;&#x0192;&#x0192; &#x0191;&#x0192;&#x0192;</span> <span title="U+0195">&#x01F6;&#x0195;&#x0195; &#x01F6;&#x0195;&#x0195;</span> <span title="U+0199">&#x0198;&#x0199;&#x0199; &#x0198;&#x0199;&#x0199;</span> <span title="U+019A">&#x023D;&#x019A;&#x019A; &#x023D;&#x019A;&#x019A;</span> <span title="U+019E">&#x0220;&#x019E;&#x019E; &#x0220;&#x019E;&#x019E;</span> <span title="U+01A1">&#x01A0;&#x01A1;&#x01A1; &#x01A0;&#x01A1;&#x01A1;</span> <span title="U+01A3">&#x01A2;&#x01A3;&#x01A3; &#x01A2;&#x01A3;&#x01A3;</span> <span title="U+01A5">&#x01A4;&#x01A5;&#x01A5; &#x01A4;&#x01A5;&#x01A5;</span> <span title="U+01A8">&#x01A7;&#x01A8;&#x01A8; &#x01A7;&#x01A8;&#x01A8;</span> <span title="U+01AD">&#x01AC;&#x01AD;&#x01AD; &#x01AC;&#x01AD;&#x01AD;</span> <span title="U+01B0">&#x01AF;&#x01B0;&#x01B0; &#x01AF;&#x01B0;&#x01B0;</span> <span title="U+01B4">&#x01B3;&#x01B4;&#x01B4; &#x01B3;&#x01B4;&#x01B4;</span> <span title="U+01B6">&#x01B5;&#x01B6;&#x01B6; &#x01B5;&#x01B6;&#x01B6;</span> <span title="U+01B9">&#x01B8;&#x01B9;&#x01B9; &#x01B8;&#x01B9;&#x01B9;</span> <span title="U+01BD">&#x01BC;&#x01BD;&#x01BD; &#x01BC;&#x01BD;&#x01BD;</span> <span title="U+01BF">&#x01F7;&#x01BF;&#x01BF; &#x01F7;&#x01BF;&#x01BF;</span> <span title="U+01C4">&#x01C5;&#x01C6;&#x01C6; &#x01C5;&#x01C6;&#x01C6;</span> <span title="U+01C6">&#x01C5;&#x01C6;&#x01C6; &#x01C5;&#x01C6;&#x01C6;</span> <span title="U+01C7">&#x01C8;&#x01C9;&#x01C9; &#x01C8;&#x01C9;&#x01C9;</span> <span title="U+01C9">&#x01C8;&#x01C9;&#x01C9; &#x01C8;&#x01C9;&#x01C9;</span> <span title="U+01CA">&#x01CB;&#x01CC;&#x01CC; &#x01CB;&#x01CC;&#x01CC;</span> <span title="U+01CC">&#x01CB;&#x01CC;&#x01CC; &#x01CB;&#x01CC;&#x01CC;</span> <span title="U+01CE">&#x01CD;&#x01CE;&#x01CE; &#x01CD;&#x01CE;&#x01CE;</span> <span title="U+01D0">&#x01CF;&#x01D0;&#x01D0; &#x01CF;&#x01D0;&#x01D0;</span> <span title="U+01D2">&#x01D1;&#x01D2;&#x01D2; &#x01D1;&#x01D2;&#x01D2;</span> <span title="U+01D4">&#x01D3;&#x01D4;&#x01D4; &#x01D3;&#x01D4;&#x01D4;</span> <span title="U+01D6">&#x01D5;&#x01D6;&#x01D6; &#x01D5;&#x01D6;&#x01D6;</span> <span title="U+01D8">&#x01D7;&#x01D8;&#x01D8; &#x01D7;&#x01D8;&#x01D8;</span> <span title="U+01DA">&#x01D9;&#x01DA;&#x01DA; &#x01D9;&#x01DA;&#x01DA;</span> <span title="U+01DC">&#x01DB;&#x01DC;&#x01DC; &#x01DB;&#x01DC;&#x01DC;</span> <span title="U+01DD">&#x018E;&#x01DD;&#x01DD; &#x018E;&#x01DD;&#x01DD;</span> <span title="U+01DF">&#x01DE;&#x01DF;&#x01DF; &#x01DE;&#x01DF;&#x01DF;</span> <span title="U+01E1">&#x01E0;&#x01E1;&#x01E1; &#x01E0;&#x01E1;&#x01E1;</span> <span title="U+01E3">&#x01E2;&#x01E3;&#x01E3; &#x01E2;&#x01E3;&#x01E3;</span> <span title="U+01E5">&#x01E4;&#x01E5;&#x01E5; &#x01E4;&#x01E5;&#x01E5;</span> <span title="U+01E7">&#x01E6;&#x01E7;&#x01E7; &#x01E6;&#x01E7;&#x01E7;</span> <span title="U+01E9">&#x01E8;&#x01E9;&#x01E9; &#x01E8;&#x01E9;&#x01E9;</span> <span title="U+01EB">&#x01EA;&#x01EB;&#x01EB; &#x01EA;&#x01EB;&#x01EB;</span> <span title="U+01ED">&#x01EC;&#x01ED;&#x01ED; &#x01EC;&#x01ED;&#x01ED;</span> <span title="U+01EF">&#x01EE;&#x01EF;&#x01EF; &#x01EE;&#x01EF;&#x01EF;</span> <span title="U+01F1">&#x01F2;&#x01F3;&#x01F3; &#x01F2;&#x01F3;&#x01F3;</span> <span title="U+01F3">&#x01F2;&#x01F3;&#x01F3; &#x01F2;&#x01F3;&#x01F3;</span> <span title="U+01F5">&#x01F4;&#x01F5;&#x01F5; &#x01F4;&#x01F5;&#x01F5;</span> <span title="U+01F9">&#x01F8;&#x01F9;&#x01F9; &#x01F8;&#x01F9;&#x01F9;</span> <span title="U+01FB">&#x01FA;&#x01FB;&#x01FB; &#x01FA;&#x01FB;&#x01FB;</span> <span title="U+01FD">&#x01FC;&#x01FD;&#x01FD; &#x01FC;&#x01FD;&#x01FD;</span> <span title="U+01FF">&#x01FE;&#x01FF;&#x01FF; &#x01FE;&#x01FF;&#x01FF;</span> <span title="U+0201">&#x0200;&#x0201;&#x0201; &#x0200;&#x0201;&#x0201;</span> <span title="U+0203">&#x0202;&#x0203;&#x0203; &#x0202;&#x0203;&#x0203;</span> <span title="U+0205">&#x0204;&#x0205;&#x0205; &#x0204;&#x0205;&#x0205;</span> <span title="U+0207">&#x0206;&#x0207;&#x0207; &#x0206;&#x0207;&#x0207;</span> <span title="U+0209">&#x0208;&#x0209;&#x0209; &#x0208;&#x0209;&#x0209;</span> <span title="U+020B">&#x020A;&#x020B;&#x020B; &#x020A;&#x020B;&#x020B;</span> <span title="U+020D">&#x020C;&#x020D;&#x020D; &#x020C;&#x020D;&#x020D;</span> <span title="U+020F">&#x020E;&#x020F;&#x020F; &#x020E;&#x020F;&#x020F;</span> <span title="U+0211">&#x0210;&#x0211;&#x0211; &#x0210;&#x0211;&#x0211;</span> <span title="U+0213">&#x0212;&#x0213;&#x0213; &#x0212;&#x0213;&#x0213;</span> <span title="U+0215">&#x0214;&#x0215;&#x0215; &#x0214;&#x0215;&#x0215;</span> <span title="U+0217">&#x0216;&#x0217;&#x0217; &#x0216;&#x0217;&#x0217;</span> <span title="U+0219">&#x0218;&#x0219;&#x0219; &#x0218;&#x0219;&#x0219;</span> <span title="U+021B">&#x021A;&#x021B;&#x021B; &#x021A;&#x021B;&#x021B;</span> <span title="U+021D">&#x021C;&#x021D;&#x021D; &#x021C;&#x021D;&#x021D;</span> <span title="U+021F">&#x021E;&#x021F;&#x021F; &#x021E;&#x021F;&#x021F;</span> <span title="U+0223">&#x0222;&#x0223;&#x0223; &#x0222;&#x0223;&#x0223;</span> <span title="U+0225">&#x0224;&#x0225;&#x0225; &#x0224;&#x0225;&#x0225;</span> <span title="U+0227">&#x0226;&#x0227;&#x0227; &#x0226;&#x0227;&#x0227;</span> <span title="U+0229">&#x0228;&#x0229;&#x0229; &#x0228;&#x0229;&#x0229;</span> <span title="U+022B">&#x022A;&#x022B;&#x022B; &#x022A;&#x022B;&#x022B;</span> <span title="U+022D">&#x022C;&#x022D;&#x022D; &#x022C;&#x022D;&#x022D;</span> <span title="U+022F">&#x022E;&#x022F;&#x022F; &#x022E;&#x022F;&#x022F;</span> <span title="U+0231">&#x0230;&#x0231;&#x0231; &#x0230;&#x0231;&#x0231;</span> <span title="U+0233">&#x0232;&#x0233;&#x0233; &#x0232;&#x0233;&#x0233;</span> <span title="U+023C">&#x023B;&#x023C;&#x023C; &#x023B;&#x023C;&#x023C;</span> <span title="U+023F">&#x2C7E;&#x023F;&#x023F; &#x2C7E;&#x023F;&#x023F;</span> <span title="U+0240">&#x2C7F;&#x0240;&#x0240; &#x2C7F;&#x0240;&#x0240;</span> <span title="U+0242">&#x0241;&#x0242;&#x0242; &#x0241;&#x0242;&#x0242;</span> <span title="U+0247">&#x0246;&#x0247;&#x0247; &#x0246;&#x0247;&#x0247;</span> <span title="U+0249">&#x0248;&#x0249;&#x0249; &#x0248;&#x0249;&#x0249;</span> <span title="U+024B">&#x024A;&#x024B;&#x024B; &#x024A;&#x024B;&#x024B;</span> <span title="U+024D">&#x024C;&#x024D;&#x024D; &#x024C;&#x024D;&#x024D;</span> <span title="U+024F">&#x024E;&#x024F;&#x024F; &#x024E;&#x024F;&#x024F;</span> </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-009-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-009-ref.html
new file mode 100644
index 0000000000..4629db93b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-009-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Latin Extended-C</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2C61">&#x2C60;&#x2C61;&#x2C61; &#x2C60;&#x2C61;&#x2C61;</span> <span title="U+2C65">&#x023A;&#x2C65;&#x2C65; &#x023A;&#x2C65;&#x2C65;</span> <span title="U+2C66">&#x023E;&#x2C66;&#x2C66; &#x023E;&#x2C66;&#x2C66;</span> <span title="U+2C68">&#x2C67;&#x2C68;&#x2C68; &#x2C67;&#x2C68;&#x2C68;</span> <span title="U+2C6A">&#x2C69;&#x2C6A;&#x2C6A; &#x2C69;&#x2C6A;&#x2C6A;</span> <span title="U+2C6C">&#x2C6B;&#x2C6C;&#x2C6C; &#x2C6B;&#x2C6C;&#x2C6C;</span> <span title="U+2C73">&#x2C72;&#x2C73;&#x2C73; &#x2C72;&#x2C73;&#x2C73;</span> <span title="U+2C76">&#x2C75;&#x2C76;&#x2C76; &#x2C75;&#x2C76;&#x2C76;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-010-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-010-ref.html
new file mode 100644
index 0000000000..001269158d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-010-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Latin Extended-D</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+A723">&#xA722;&#xA723;&#xA723; &#xA722;&#xA723;&#xA723;</span> <span title="U+A725">&#xA724;&#xA725;&#xA725; &#xA724;&#xA725;&#xA725;</span> <span title="U+A727">&#xA726;&#xA727;&#xA727; &#xA726;&#xA727;&#xA727;</span> <span title="U+A729">&#xA728;&#xA729;&#xA729; &#xA728;&#xA729;&#xA729;</span> <span title="U+A72B">&#xA72A;&#xA72B;&#xA72B; &#xA72A;&#xA72B;&#xA72B;</span> <span title="U+A72D">&#xA72C;&#xA72D;&#xA72D; &#xA72C;&#xA72D;&#xA72D;</span> <span title="U+A72F">&#xA72E;&#xA72F;&#xA72F; &#xA72E;&#xA72F;&#xA72F;</span> <span title="U+A733">&#xA732;&#xA733;&#xA733; &#xA732;&#xA733;&#xA733;</span> <span title="U+A735">&#xA734;&#xA735;&#xA735; &#xA734;&#xA735;&#xA735;</span> <span title="U+A737">&#xA736;&#xA737;&#xA737; &#xA736;&#xA737;&#xA737;</span> <span title="U+A739">&#xA738;&#xA739;&#xA739; &#xA738;&#xA739;&#xA739;</span> <span title="U+A73B">&#xA73A;&#xA73B;&#xA73B; &#xA73A;&#xA73B;&#xA73B;</span> <span title="U+A73D">&#xA73C;&#xA73D;&#xA73D; &#xA73C;&#xA73D;&#xA73D;</span> <span title="U+A73F">&#xA73E;&#xA73F;&#xA73F; &#xA73E;&#xA73F;&#xA73F;</span> <span title="U+A741">&#xA740;&#xA741;&#xA741; &#xA740;&#xA741;&#xA741;</span> <span title="U+A743">&#xA742;&#xA743;&#xA743; &#xA742;&#xA743;&#xA743;</span> <span title="U+A745">&#xA744;&#xA745;&#xA745; &#xA744;&#xA745;&#xA745;</span> <span title="U+A747">&#xA746;&#xA747;&#xA747; &#xA746;&#xA747;&#xA747;</span> <span title="U+A749">&#xA748;&#xA749;&#xA749; &#xA748;&#xA749;&#xA749;</span> <span title="U+A74B">&#xA74A;&#xA74B;&#xA74B; &#xA74A;&#xA74B;&#xA74B;</span> <span title="U+A74D">&#xA74C;&#xA74D;&#xA74D; &#xA74C;&#xA74D;&#xA74D;</span> <span title="U+A74F">&#xA74E;&#xA74F;&#xA74F; &#xA74E;&#xA74F;&#xA74F;</span> <span title="U+A751">&#xA750;&#xA751;&#xA751; &#xA750;&#xA751;&#xA751;</span> <span title="U+A753">&#xA752;&#xA753;&#xA753; &#xA752;&#xA753;&#xA753;</span> <span title="U+A755">&#xA754;&#xA755;&#xA755; &#xA754;&#xA755;&#xA755;</span> <span title="U+A757">&#xA756;&#xA757;&#xA757; &#xA756;&#xA757;&#xA757;</span> <span title="U+A759">&#xA758;&#xA759;&#xA759; &#xA758;&#xA759;&#xA759;</span> <span title="U+A75B">&#xA75A;&#xA75B;&#xA75B; &#xA75A;&#xA75B;&#xA75B;</span> <span title="U+A75D">&#xA75C;&#xA75D;&#xA75D; &#xA75C;&#xA75D;&#xA75D;</span> <span title="U+A75F">&#xA75E;&#xA75F;&#xA75F; &#xA75E;&#xA75F;&#xA75F;</span> <span title="U+A761">&#xA760;&#xA761;&#xA761; &#xA760;&#xA761;&#xA761;</span> <span title="U+A763">&#xA762;&#xA763;&#xA763; &#xA762;&#xA763;&#xA763;</span> <span title="U+A765">&#xA764;&#xA765;&#xA765; &#xA764;&#xA765;&#xA765;</span> <span title="U+A767">&#xA766;&#xA767;&#xA767; &#xA766;&#xA767;&#xA767;</span> <span title="U+A769">&#xA768;&#xA769;&#xA769; &#xA768;&#xA769;&#xA769;</span> <span title="U+A76B">&#xA76A;&#xA76B;&#xA76B; &#xA76A;&#xA76B;&#xA76B;</span> <span title="U+A76D">&#xA76C;&#xA76D;&#xA76D; &#xA76C;&#xA76D;&#xA76D;</span> <span title="U+A76F">&#xA76E;&#xA76F;&#xA76F; &#xA76E;&#xA76F;&#xA76F;</span> <span title="U+A77A">&#xA779;&#xA77A;&#xA77A; &#xA779;&#xA77A;&#xA77A;</span> <span title="U+A77C">&#xA77B;&#xA77C;&#xA77C; &#xA77B;&#xA77C;&#xA77C;</span> <span title="U+A77F">&#xA77E;&#xA77F;&#xA77F; &#xA77E;&#xA77F;&#xA77F;</span> <span title="U+A781">&#xA780;&#xA781;&#xA781; &#xA780;&#xA781;&#xA781;</span> <span title="U+A783">&#xA782;&#xA783;&#xA783; &#xA782;&#xA783;&#xA783;</span> <span title="U+A785">&#xA784;&#xA785;&#xA785; &#xA784;&#xA785;&#xA785;</span> <span title="U+A787">&#xA786;&#xA787;&#xA787; &#xA786;&#xA787;&#xA787;</span> <span title="U+A78C">&#xA78B;&#xA78C;&#xA78C; &#xA78B;&#xA78C;&#xA78C;</span> <span title="U+A791">&#xA790;&#xA791;&#xA791; &#xA790;&#xA791;&#xA791;</span> <span title="U+A793">&#xA792;&#xA793;&#xA793; &#xA792;&#xA793;&#xA793;</span> <span title="U+A797">&#xA796;&#xA797;&#xA797; &#xA796;&#xA797;&#xA797;</span> <span title="U+A799">&#xA798;&#xA799;&#xA799; &#xA798;&#xA799;&#xA799;</span> <span title="U+A79B">&#xA79A;&#xA79B;&#xA79B; &#xA79A;&#xA79B;&#xA79B;</span> <span title="U+A79D">&#xA79C;&#xA79D;&#xA79D; &#xA79C;&#xA79D;&#xA79D;</span> <span title="U+A79F">&#xA79E;&#xA79F;&#xA79F; &#xA79E;&#xA79F;&#xA79F;</span> <span title="U+A7A1">&#xA7A0;&#xA7A1;&#xA7A1; &#xA7A0;&#xA7A1;&#xA7A1;</span> <span title="U+A7A3">&#xA7A2;&#xA7A3;&#xA7A3; &#xA7A2;&#xA7A3;&#xA7A3;</span> <span title="U+A7A5">&#xA7A4;&#xA7A5;&#xA7A5; &#xA7A4;&#xA7A5;&#xA7A5;</span> <span title="U+A7A7">&#xA7A6;&#xA7A7;&#xA7A7; &#xA7A6;&#xA7A7;&#xA7A7;</span> <span title="U+A7A9">&#xA7A8;&#xA7A9;&#xA7A9; &#xA7A8;&#xA7A9;&#xA7A9;</span> </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-011-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-011-ref.html
new file mode 100644
index 0000000000..0a899e240c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-011-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Full-width Latin</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+FF41">&#xFF21;&#xFF41;&#xFF41; &#xFF21;&#xFF41;&#xFF41;</span> <span title="U+FF42">&#xFF22;&#xFF42;&#xFF42; &#xFF22;&#xFF42;&#xFF42;</span> <span title="U+FF43">&#xFF23;&#xFF43;&#xFF43; &#xFF23;&#xFF43;&#xFF43;</span> <span title="U+FF44">&#xFF24;&#xFF44;&#xFF44; &#xFF24;&#xFF44;&#xFF44;</span> <span title="U+FF45">&#xFF25;&#xFF45;&#xFF45; &#xFF25;&#xFF45;&#xFF45;</span> <span title="U+FF46">&#xFF26;&#xFF46;&#xFF46; &#xFF26;&#xFF46;&#xFF46;</span> <span title="U+FF47">&#xFF27;&#xFF47;&#xFF47; &#xFF27;&#xFF47;&#xFF47;</span> <span title="U+FF48">&#xFF28;&#xFF48;&#xFF48; &#xFF28;&#xFF48;&#xFF48;</span> <span title="U+FF49">&#xFF29;&#xFF49;&#xFF49; &#xFF29;&#xFF49;&#xFF49;</span> <span title="U+FF4A">&#xFF2A;&#xFF4A;&#xFF4A; &#xFF2A;&#xFF4A;&#xFF4A;</span> <span title="U+FF4B">&#xFF2B;&#xFF4B;&#xFF4B; &#xFF2B;&#xFF4B;&#xFF4B;</span> <span title="U+FF4C">&#xFF2C;&#xFF4C;&#xFF4C; &#xFF2C;&#xFF4C;&#xFF4C;</span> <span title="U+FF4D">&#xFF2D;&#xFF4D;&#xFF4D; &#xFF2D;&#xFF4D;&#xFF4D;</span> <span title="U+FF4E">&#xFF2E;&#xFF4E;&#xFF4E; &#xFF2E;&#xFF4E;&#xFF4E;</span> <span title="U+FF4F">&#xFF2F;&#xFF4F;&#xFF4F; &#xFF2F;&#xFF4F;&#xFF4F;</span> <span title="U+FF50">&#xFF30;&#xFF50;&#xFF50; &#xFF30;&#xFF50;&#xFF50;</span> <span title="U+FF51">&#xFF31;&#xFF51;&#xFF51; &#xFF31;&#xFF51;&#xFF51;</span> <span title="U+FF52">&#xFF32;&#xFF52;&#xFF52; &#xFF32;&#xFF52;&#xFF52;</span> <span title="U+FF53">&#xFF33;&#xFF53;&#xFF53; &#xFF33;&#xFF53;&#xFF53;</span> <span title="U+FF54">&#xFF34;&#xFF54;&#xFF54; &#xFF34;&#xFF54;&#xFF54;</span> <span title="U+FF55">&#xFF35;&#xFF55;&#xFF55; &#xFF35;&#xFF55;&#xFF55;</span> <span title="U+FF56">&#xFF36;&#xFF56;&#xFF56; &#xFF36;&#xFF56;&#xFF56;</span> <span title="U+FF57">&#xFF37;&#xFF57;&#xFF57; &#xFF37;&#xFF57;&#xFF57;</span> <span title="U+FF58">&#xFF38;&#xFF58;&#xFF58; &#xFF38;&#xFF58;&#xFF58;</span> <span title="U+FF59">&#xFF39;&#xFF59;&#xFF59; &#xFF39;&#xFF59;&#xFF59;</span> <span title="U+FF5A">&#xFF3A;&#xFF5A;&#xFF5A; &#xFF3A;&#xFF5A;&#xFF5A;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-014-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-014-ref.html
new file mode 100644
index 0000000000..a49ce9cdcf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-014-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Greek and Coptic</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0371">&#x0370;&#x0371;&#x0371; &#x0370;&#x0371;&#x0371;</span> <span title="U+0373">&#x0372;&#x0373;&#x0373; &#x0372;&#x0373;&#x0373;</span> <span title="U+0377">&#x0376;&#x0377;&#x0377; &#x0376;&#x0377;&#x0377;</span> <span title="U+037B">&#x03FD;&#x037B;&#x037B; &#x03FD;&#x037B;&#x037B;</span> <span title="U+037C">&#x03FE;&#x037C;&#x037C; &#x03FE;&#x037C;&#x037C;</span> <span title="U+037D">&#x03FF;&#x037D;&#x037D; &#x03FF;&#x037D;&#x037D;</span> <span title="U+03AC">&#x0386;&#x03AC;&#x03AC; &#x0386;&#x03AC;&#x03AC;</span> <span title="U+03AD">&#x0388;&#x03AD;&#x03AD; &#x0388;&#x03AD;&#x03AD;</span> <span title="U+03AE">&#x0389;&#x03AE;&#x03AE; &#x0389;&#x03AE;&#x03AE;</span> <span title="U+03AF">&#x038A;&#x03AF;&#x03AF; &#x038A;&#x03AF;&#x03AF;</span> <span title="U+03B1">&#x0391;&#x03B1;&#x03B1; &#x0391;&#x03B1;&#x03B1;</span> <span title="U+03B2">&#x0392;&#x03B2;&#x03B2; &#x0392;&#x03B2;&#x03B2;</span> <span title="U+03B3">&#x0393;&#x03B3;&#x03B3; &#x0393;&#x03B3;&#x03B3;</span> <span title="U+03B4">&#x0394;&#x03B4;&#x03B4; &#x0394;&#x03B4;&#x03B4;</span> <span title="U+03B5">&#x0395;&#x03B5;&#x03B5; &#x0395;&#x03B5;&#x03B5;</span> <span title="U+03B6">&#x0396;&#x03B6;&#x03B6; &#x0396;&#x03B6;&#x03B6;</span> <span title="U+03B7">&#x0397;&#x03B7;&#x03B7; &#x0397;&#x03B7;&#x03B7;</span> <span title="U+03B8">&#x0398;&#x03B8;&#x03B8; &#x0398;&#x03B8;&#x03B8;</span> <span title="U+03B9">&#x0399;&#x03B9;&#x03B9; &#x0399;&#x03B9;&#x03B9;</span> <span title="U+03BA">&#x039A;&#x03BA;&#x03BA; &#x039A;&#x03BA;&#x03BA;</span> <span title="U+03BB">&#x039B;&#x03BB;&#x03BB; &#x039B;&#x03BB;&#x03BB;</span> <span title="U+03BC">&#x039C;&#x03BC;&#x03BC; &#x039C;&#x03BC;&#x03BC;</span> <span title="U+03BD">&#x039D;&#x03BD;&#x03BD; &#x039D;&#x03BD;&#x03BD;</span> <span title="U+03BE">&#x039E;&#x03BE;&#x03BE; &#x039E;&#x03BE;&#x03BE;</span> <span title="U+03BF">&#x039F;&#x03BF;&#x03BF; &#x039F;&#x03BF;&#x03BF;</span> <span title="U+03C0">&#x03A0;&#x03C0;&#x03C0; &#x03A0;&#x03C0;&#x03C0;</span> <span title="U+03C1">&#x03A1;&#x03C1;&#x03C1; &#x03A1;&#x03C1;&#x03C1;</span> <span title="U+03C2">&#x03A3;&#x03C2;&#x03C2; &#x03A3;&#x03C2;&#x03C2;</span> <span title="U+03C3">&#x03A3;&#x03C3;&#x03C3; &#x03A3;&#x03C3;&#x03C3;</span> <span title="U+03C4">&#x03A4;&#x03C4;&#x03C4; &#x03A4;&#x03C4;&#x03C4;</span> <span title="U+03C5">&#x03A5;&#x03C5;&#x03C5; &#x03A5;&#x03C5;&#x03C5;</span> <span title="U+03C6">&#x03A6;&#x03C6;&#x03C6; &#x03A6;&#x03C6;&#x03C6;</span> <span title="U+03C7">&#x03A7;&#x03C7;&#x03C7; &#x03A7;&#x03C7;&#x03C7;</span> <span title="U+03C8">&#x03A8;&#x03C8;&#x03C8; &#x03A8;&#x03C8;&#x03C8;</span> <span title="U+03C9">&#x03A9;&#x03C9;&#x03C9; &#x03A9;&#x03C9;&#x03C9;</span> <span title="U+03CA">&#x03AA;&#x03CA;&#x03CA; &#x03AA;&#x03CA;&#x03CA;</span> <span title="U+03CB">&#x03AB;&#x03CB;&#x03CB; &#x03AB;&#x03CB;&#x03CB;</span> <span title="U+03CC">&#x038C;&#x03CC;&#x03CC; &#x038C;&#x03CC;&#x03CC;</span> <span title="U+03CD">&#x038E;&#x03CD;&#x03CD; &#x038E;&#x03CD;&#x03CD;</span> <span title="U+03CE">&#x038F;&#x03CE;&#x03CE; &#x038F;&#x03CE;&#x03CE;</span> <span title="U+03D0">&#x0392;&#x03D0;&#x03D0; &#x0392;&#x03D0;&#x03D0;</span> <span title="U+03D1">&#x0398;&#x03D1;&#x03D1; &#x0398;&#x03D1;&#x03D1;</span> <span title="U+03D5">&#x03A6;&#x03D5;&#x03D5; &#x03A6;&#x03D5;&#x03D5;</span> <span title="U+03D6">&#x03A0;&#x03D6;&#x03D6; &#x03A0;&#x03D6;&#x03D6;</span> <span title="U+03D7">&#x03CF;&#x03D7;&#x03D7; &#x03CF;&#x03D7;&#x03D7;</span> <span title="U+03D9">&#x03D8;&#x03D9;&#x03D9; &#x03D8;&#x03D9;&#x03D9;</span> <span title="U+03DB">&#x03DA;&#x03DB;&#x03DB; &#x03DA;&#x03DB;&#x03DB;</span> <span title="U+03DD">&#x03DC;&#x03DD;&#x03DD; &#x03DC;&#x03DD;&#x03DD;</span> <span title="U+03DF">&#x03DE;&#x03DF;&#x03DF; &#x03DE;&#x03DF;&#x03DF;</span> <span title="U+03E1">&#x03E0;&#x03E1;&#x03E1; &#x03E0;&#x03E1;&#x03E1;</span> <span title="U+03E3">&#x03E2;&#x03E3;&#x03E3; &#x03E2;&#x03E3;&#x03E3;</span> <span title="U+03E5">&#x03E4;&#x03E5;&#x03E5; &#x03E4;&#x03E5;&#x03E5;</span> <span title="U+03E7">&#x03E6;&#x03E7;&#x03E7; &#x03E6;&#x03E7;&#x03E7;</span> <span title="U+03E9">&#x03E8;&#x03E9;&#x03E9; &#x03E8;&#x03E9;&#x03E9;</span> <span title="U+03EB">&#x03EA;&#x03EB;&#x03EB; &#x03EA;&#x03EB;&#x03EB;</span> <span title="U+03ED">&#x03EC;&#x03ED;&#x03ED; &#x03EC;&#x03ED;&#x03ED;</span> <span title="U+03EF">&#x03EE;&#x03EF;&#x03EF; &#x03EE;&#x03EF;&#x03EF;</span> <span title="U+03F0">&#x039A;&#x03F0;&#x03F0; &#x039A;&#x03F0;&#x03F0;</span> <span title="U+03F1">&#x03A1;&#x03F1;&#x03F1; &#x03A1;&#x03F1;&#x03F1;</span> <span title="U+03F2">&#x03F9;&#x03F2;&#x03F2; &#x03F9;&#x03F2;&#x03F2;</span> <span title="U+03F3">&#x037F;&#x03F3;&#x03F3; &#x037F;&#x03F3;&#x03F3;</span> <span title="U+03F5">&#x0395;&#x03F5;&#x03F5; &#x0395;&#x03F5;&#x03F5;</span> <span title="U+03F8">&#x03F7;&#x03F8;&#x03F8; &#x03F7;&#x03F8;&#x03F8;</span> <span title="U+03FB">&#x03FA;&#x03FB;&#x03FB; &#x03FA;&#x03FB;&#x03FB;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-016-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-016-ref.html
new file mode 100644
index 0000000000..df0cb58c19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-016-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Greek Extended</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 100%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1F00">&#x1F08;&#x1F00;&#x1F00; &#x1F08;&#x1F00;&#x1F00;</span> <span title="U+1F01">&#x1F09;&#x1F01;&#x1F01; &#x1F09;&#x1F01;&#x1F01;</span> <span title="U+1F02">&#x1F0A;&#x1F02;&#x1F02; &#x1F0A;&#x1F02;&#x1F02;</span> <span title="U+1F03">&#x1F0B;&#x1F03;&#x1F03; &#x1F0B;&#x1F03;&#x1F03;</span> <span title="U+1F04">&#x1F0C;&#x1F04;&#x1F04; &#x1F0C;&#x1F04;&#x1F04;</span> <span title="U+1F05">&#x1F0D;&#x1F05;&#x1F05; &#x1F0D;&#x1F05;&#x1F05;</span> <span title="U+1F06">&#x1F0E;&#x1F06;&#x1F06; &#x1F0E;&#x1F06;&#x1F06;</span> <span title="U+1F07">&#x1F0F;&#x1F07;&#x1F07; &#x1F0F;&#x1F07;&#x1F07;</span> <span title="U+1F10">&#x1F18;&#x1F10;&#x1F10; &#x1F18;&#x1F10;&#x1F10;</span> <span title="U+1F11">&#x1F19;&#x1F11;&#x1F11; &#x1F19;&#x1F11;&#x1F11;</span> <span title="U+1F12">&#x1F1A;&#x1F12;&#x1F12; &#x1F1A;&#x1F12;&#x1F12;</span> <span title="U+1F13">&#x1F1B;&#x1F13;&#x1F13; &#x1F1B;&#x1F13;&#x1F13;</span> <span title="U+1F14">&#x1F1C;&#x1F14;&#x1F14; &#x1F1C;&#x1F14;&#x1F14;</span> <span title="U+1F15">&#x1F1D;&#x1F15;&#x1F15; &#x1F1D;&#x1F15;&#x1F15;</span> <span title="U+1F20">&#x1F28;&#x1F20;&#x1F20; &#x1F28;&#x1F20;&#x1F20;</span> <span title="U+1F21">&#x1F29;&#x1F21;&#x1F21; &#x1F29;&#x1F21;&#x1F21;</span> <span title="U+1F22">&#x1F2A;&#x1F22;&#x1F22; &#x1F2A;&#x1F22;&#x1F22;</span> <span title="U+1F23">&#x1F2B;&#x1F23;&#x1F23; &#x1F2B;&#x1F23;&#x1F23;</span> <span title="U+1F24">&#x1F2C;&#x1F24;&#x1F24; &#x1F2C;&#x1F24;&#x1F24;</span> <span title="U+1F25">&#x1F2D;&#x1F25;&#x1F25; &#x1F2D;&#x1F25;&#x1F25;</span> <span title="U+1F26">&#x1F2E;&#x1F26;&#x1F26; &#x1F2E;&#x1F26;&#x1F26;</span> <span title="U+1F27">&#x1F2F;&#x1F27;&#x1F27; &#x1F2F;&#x1F27;&#x1F27;</span> <span title="U+1F30">&#x1F38;&#x1F30;&#x1F30; &#x1F38;&#x1F30;&#x1F30;</span> <span title="U+1F31">&#x1F39;&#x1F31;&#x1F31; &#x1F39;&#x1F31;&#x1F31;</span> <span title="U+1F32">&#x1F3A;&#x1F32;&#x1F32; &#x1F3A;&#x1F32;&#x1F32;</span> <span title="U+1F33">&#x1F3B;&#x1F33;&#x1F33; &#x1F3B;&#x1F33;&#x1F33;</span> <span title="U+1F34">&#x1F3C;&#x1F34;&#x1F34; &#x1F3C;&#x1F34;&#x1F34;</span> <span title="U+1F35">&#x1F3D;&#x1F35;&#x1F35; &#x1F3D;&#x1F35;&#x1F35;</span> <span title="U+1F36">&#x1F3E;&#x1F36;&#x1F36; &#x1F3E;&#x1F36;&#x1F36;</span> <span title="U+1F37">&#x1F3F;&#x1F37;&#x1F37; &#x1F3F;&#x1F37;&#x1F37;</span> <span title="U+1F40">&#x1F48;&#x1F40;&#x1F40; &#x1F48;&#x1F40;&#x1F40;</span> <span title="U+1F41">&#x1F49;&#x1F41;&#x1F41; &#x1F49;&#x1F41;&#x1F41;</span> <span title="U+1F42">&#x1F4A;&#x1F42;&#x1F42; &#x1F4A;&#x1F42;&#x1F42;</span> <span title="U+1F43">&#x1F4B;&#x1F43;&#x1F43; &#x1F4B;&#x1F43;&#x1F43;</span> <span title="U+1F44">&#x1F4C;&#x1F44;&#x1F44; &#x1F4C;&#x1F44;&#x1F44;</span> <span title="U+1F45">&#x1F4D;&#x1F45;&#x1F45; &#x1F4D;&#x1F45;&#x1F45;</span> <span title="U+1F51">&#x1F59;&#x1F51;&#x1F51; &#x1F59;&#x1F51;&#x1F51;</span> <span title="U+1F53">&#x1F5B;&#x1F53;&#x1F53; &#x1F5B;&#x1F53;&#x1F53;</span> <span title="U+1F55">&#x1F5D;&#x1F55;&#x1F55; &#x1F5D;&#x1F55;&#x1F55;</span> <span title="U+1F57">&#x1F5F;&#x1F57;&#x1F57; &#x1F5F;&#x1F57;&#x1F57;</span> <span title="U+1F60">&#x1F68;&#x1F60;&#x1F60; &#x1F68;&#x1F60;&#x1F60;</span> <span title="U+1F61">&#x1F69;&#x1F61;&#x1F61; &#x1F69;&#x1F61;&#x1F61;</span> <span title="U+1F62">&#x1F6A;&#x1F62;&#x1F62; &#x1F6A;&#x1F62;&#x1F62;</span> <span title="U+1F63">&#x1F6B;&#x1F63;&#x1F63; &#x1F6B;&#x1F63;&#x1F63;</span> <span title="U+1F64">&#x1F6C;&#x1F64;&#x1F64; &#x1F6C;&#x1F64;&#x1F64;</span> <span title="U+1F65">&#x1F6D;&#x1F65;&#x1F65; &#x1F6D;&#x1F65;&#x1F65;</span> <span title="U+1F66">&#x1F6E;&#x1F66;&#x1F66; &#x1F6E;&#x1F66;&#x1F66;</span> <span title="U+1F67">&#x1F6F;&#x1F67;&#x1F67; &#x1F6F;&#x1F67;&#x1F67;</span> <span title="U+1F70">&#x1FBA;&#x1F70;&#x1F70; &#x1FBA;&#x1F70;&#x1F70;</span> <span title="U+1F71">&#x1FBB;&#x1F71;&#x1F71; &#x1FBB;&#x1F71;&#x1F71;</span> <span title="U+1F72">&#x1FC8;&#x1F72;&#x1F72; &#x1FC8;&#x1F72;&#x1F72;</span> <span title="U+1F73">&#x1FC9;&#x1F73;&#x1F73; &#x1FC9;&#x1F73;&#x1F73;</span> <span title="U+1F74">&#x1FCA;&#x1F74;&#x1F74; &#x1FCA;&#x1F74;&#x1F74;</span> <span title="U+1F75">&#x1FCB;&#x1F75;&#x1F75; &#x1FCB;&#x1F75;&#x1F75;</span> <span title="U+1F76">&#x1FDA;&#x1F76;&#x1F76; &#x1FDA;&#x1F76;&#x1F76;</span> <span title="U+1F77">&#x1FDB;&#x1F77;&#x1F77; &#x1FDB;&#x1F77;&#x1F77;</span> <span title="U+1F78">&#x1FF8;&#x1F78;&#x1F78; &#x1FF8;&#x1F78;&#x1F78;</span> <span title="U+1F79">&#x1FF9;&#x1F79;&#x1F79; &#x1FF9;&#x1F79;&#x1F79;</span> <span title="U+1F7A">&#x1FEA;&#x1F7A;&#x1F7A; &#x1FEA;&#x1F7A;&#x1F7A;</span> <span title="U+1F7B">&#x1FEB;&#x1F7B;&#x1F7B; &#x1FEB;&#x1F7B;&#x1F7B;</span> <span title="U+1F7C">&#x1FFA;&#x1F7C;&#x1F7C; &#x1FFA;&#x1F7C;&#x1F7C;</span> <span title="U+1F7D">&#x1FFB;&#x1F7D;&#x1F7D; &#x1FFB;&#x1F7D;&#x1F7D;</span> <span title="U+1F80">&#x1F88;&#x1F80;&#x1F80; &#x1F88;&#x1F80;&#x1F80;</span> <span title="U+1F81">&#x1F89;&#x1F81;&#x1F81; &#x1F89;&#x1F81;&#x1F81;</span> <span title="U+1F82">&#x1F8A;&#x1F82;&#x1F82; &#x1F8A;&#x1F82;&#x1F82;</span> <span title="U+1F83">&#x1F8B;&#x1F83;&#x1F83; &#x1F8B;&#x1F83;&#x1F83;</span> <span title="U+1F84">&#x1F8C;&#x1F84;&#x1F84; &#x1F8C;&#x1F84;&#x1F84;</span> <span title="U+1F85">&#x1F8D;&#x1F85;&#x1F85; &#x1F8D;&#x1F85;&#x1F85;</span> <span title="U+1F86">&#x1F8E;&#x1F86;&#x1F86; &#x1F8E;&#x1F86;&#x1F86;</span> <span title="U+1F87">&#x1F8F;&#x1F87;&#x1F87; &#x1F8F;&#x1F87;&#x1F87;</span> <span title="U+1F90">&#x1F98;&#x1F90;&#x1F90; &#x1F98;&#x1F90;&#x1F90;</span> <span title="U+1F91">&#x1F99;&#x1F91;&#x1F91; &#x1F99;&#x1F91;&#x1F91;</span> <span title="U+1F92">&#x1F9A;&#x1F92;&#x1F92; &#x1F9A;&#x1F92;&#x1F92;</span> <span title="U+1F93">&#x1F9B;&#x1F93;&#x1F93; &#x1F9B;&#x1F93;&#x1F93;</span> <span title="U+1F94">&#x1F9C;&#x1F94;&#x1F94; &#x1F9C;&#x1F94;&#x1F94;</span> <span title="U+1F95">&#x1F9D;&#x1F95;&#x1F95; &#x1F9D;&#x1F95;&#x1F95;</span> <span title="U+1F96">&#x1F9E;&#x1F96;&#x1F96; &#x1F9E;&#x1F96;&#x1F96;</span> <span title="U+1F97">&#x1F9F;&#x1F97;&#x1F97; &#x1F9F;&#x1F97;&#x1F97;</span> <span title="U+1FA0">&#x1FA8;&#x1FA0;&#x1FA0; &#x1FA8;&#x1FA0;&#x1FA0;</span> <span title="U+1FA1">&#x1FA9;&#x1FA1;&#x1FA1; &#x1FA9;&#x1FA1;&#x1FA1;</span> <span title="U+1FA2">&#x1FAA;&#x1FA2;&#x1FA2; &#x1FAA;&#x1FA2;&#x1FA2;</span> <span title="U+1FA3">&#x1FAB;&#x1FA3;&#x1FA3; &#x1FAB;&#x1FA3;&#x1FA3;</span> <span title="U+1FA4">&#x1FAC;&#x1FA4;&#x1FA4; &#x1FAC;&#x1FA4;&#x1FA4;</span> <span title="U+1FA5">&#x1FAD;&#x1FA5;&#x1FA5; &#x1FAD;&#x1FA5;&#x1FA5;</span> <span title="U+1FA6">&#x1FAE;&#x1FA6;&#x1FA6; &#x1FAE;&#x1FA6;&#x1FA6;</span> <span title="U+1FA7">&#x1FAF;&#x1FA7;&#x1FA7; &#x1FAF;&#x1FA7;&#x1FA7;</span> <span title="U+1FB0">&#x1FB8;&#x1FB0;&#x1FB0; &#x1FB8;&#x1FB0;&#x1FB0;</span> <span title="U+1FB1">&#x1FB9;&#x1FB1;&#x1FB1; &#x1FB9;&#x1FB1;&#x1FB1;</span> <span title="U+1FB3">&#x1FBC;&#x1FB3;&#x1FB3; &#x1FBC;&#x1FB3;&#x1FB3;</span> <span title="U+1FBE">&#x0399;&#x1FBE;&#x1FBE; &#x0399;&#x1FBE;&#x1FBE;</span> <span title="U+1FC3">&#x1FCC;&#x1FC3;&#x1FC3; &#x1FCC;&#x1FC3;&#x1FC3;</span> <span title="U+1FD0">&#x1FD8;&#x1FD0;&#x1FD0; &#x1FD8;&#x1FD0;&#x1FD0;</span> <span title="U+1FD1">&#x1FD9;&#x1FD1;&#x1FD1; &#x1FD9;&#x1FD1;&#x1FD1;</span> <span title="U+1FE0">&#x1FE8;&#x1FE0;&#x1FE0; &#x1FE8;&#x1FE0;&#x1FE0;</span> <span title="U+1FE1">&#x1FE9;&#x1FE1;&#x1FE1; &#x1FE9;&#x1FE1;&#x1FE1;</span> <span title="U+1FE5">&#x1FEC;&#x1FE5;&#x1FE5; &#x1FEC;&#x1FE5;&#x1FE5;</span> <span title="U+1FF3">&#x1FFC;&#x1FF3;&#x1FF3; &#x1FFC;&#x1FF3;&#x1FF3;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-018-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-018-ref.html
new file mode 100644
index 0000000000..df1727457d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-018-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Cyrillic</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 100%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0430">&#x0410;&#x0430;&#x0430; &#x0410;&#x0430;&#x0430;</span> <span title="U+0431">&#x0411;&#x0431;&#x0431; &#x0411;&#x0431;&#x0431;</span> <span title="U+0432">&#x0412;&#x0432;&#x0432; &#x0412;&#x0432;&#x0432;</span> <span title="U+0433">&#x0413;&#x0433;&#x0433; &#x0413;&#x0433;&#x0433;</span> <span title="U+0434">&#x0414;&#x0434;&#x0434; &#x0414;&#x0434;&#x0434;</span> <span title="U+0435">&#x0415;&#x0435;&#x0435; &#x0415;&#x0435;&#x0435;</span> <span title="U+0436">&#x0416;&#x0436;&#x0436; &#x0416;&#x0436;&#x0436;</span> <span title="U+0437">&#x0417;&#x0437;&#x0437; &#x0417;&#x0437;&#x0437;</span> <span title="U+0438">&#x0418;&#x0438;&#x0438; &#x0418;&#x0438;&#x0438;</span> <span title="U+0439">&#x0419;&#x0439;&#x0439; &#x0419;&#x0439;&#x0439;</span> <span title="U+043A">&#x041A;&#x043A;&#x043A; &#x041A;&#x043A;&#x043A;</span> <span title="U+043B">&#x041B;&#x043B;&#x043B; &#x041B;&#x043B;&#x043B;</span> <span title="U+043C">&#x041C;&#x043C;&#x043C; &#x041C;&#x043C;&#x043C;</span> <span title="U+043D">&#x041D;&#x043D;&#x043D; &#x041D;&#x043D;&#x043D;</span> <span title="U+043E">&#x041E;&#x043E;&#x043E; &#x041E;&#x043E;&#x043E;</span> <span title="U+043F">&#x041F;&#x043F;&#x043F; &#x041F;&#x043F;&#x043F;</span> <span title="U+0440">&#x0420;&#x0440;&#x0440; &#x0420;&#x0440;&#x0440;</span> <span title="U+0441">&#x0421;&#x0441;&#x0441; &#x0421;&#x0441;&#x0441;</span> <span title="U+0442">&#x0422;&#x0442;&#x0442; &#x0422;&#x0442;&#x0442;</span> <span title="U+0443">&#x0423;&#x0443;&#x0443; &#x0423;&#x0443;&#x0443;</span> <span title="U+0444">&#x0424;&#x0444;&#x0444; &#x0424;&#x0444;&#x0444;</span> <span title="U+0445">&#x0425;&#x0445;&#x0445; &#x0425;&#x0445;&#x0445;</span> <span title="U+0446">&#x0426;&#x0446;&#x0446; &#x0426;&#x0446;&#x0446;</span> <span title="U+0447">&#x0427;&#x0447;&#x0447; &#x0427;&#x0447;&#x0447;</span> <span title="U+0448">&#x0428;&#x0448;&#x0448; &#x0428;&#x0448;&#x0448;</span> <span title="U+0449">&#x0429;&#x0449;&#x0449; &#x0429;&#x0449;&#x0449;</span> <span title="U+044A">&#x042A;&#x044A;&#x044A; &#x042A;&#x044A;&#x044A;</span> <span title="U+044B">&#x042B;&#x044B;&#x044B; &#x042B;&#x044B;&#x044B;</span> <span title="U+044C">&#x042C;&#x044C;&#x044C; &#x042C;&#x044C;&#x044C;</span> <span title="U+044D">&#x042D;&#x044D;&#x044D; &#x042D;&#x044D;&#x044D;</span> <span title="U+044E">&#x042E;&#x044E;&#x044E; &#x042E;&#x044E;&#x044E;</span> <span title="U+044F">&#x042F;&#x044F;&#x044F; &#x042F;&#x044F;&#x044F;</span> <span title="U+0450">&#x0400;&#x0450;&#x0450; &#x0400;&#x0450;&#x0450;</span> <span title="U+0451">&#x0401;&#x0451;&#x0451; &#x0401;&#x0451;&#x0451;</span> <span title="U+0452">&#x0402;&#x0452;&#x0452; &#x0402;&#x0452;&#x0452;</span> <span title="U+0453">&#x0403;&#x0453;&#x0453; &#x0403;&#x0453;&#x0453;</span> <span title="U+0454">&#x0404;&#x0454;&#x0454; &#x0404;&#x0454;&#x0454;</span> <span title="U+0455">&#x0405;&#x0455;&#x0455; &#x0405;&#x0455;&#x0455;</span> <span title="U+0456">&#x0406;&#x0456;&#x0456; &#x0406;&#x0456;&#x0456;</span> <span title="U+0457">&#x0407;&#x0457;&#x0457; &#x0407;&#x0457;&#x0457;</span> <span title="U+0458">&#x0408;&#x0458;&#x0458; &#x0408;&#x0458;&#x0458;</span> <span title="U+0459">&#x0409;&#x0459;&#x0459; &#x0409;&#x0459;&#x0459;</span> <span title="U+045A">&#x040A;&#x045A;&#x045A; &#x040A;&#x045A;&#x045A;</span> <span title="U+045B">&#x040B;&#x045B;&#x045B; &#x040B;&#x045B;&#x045B;</span> <span title="U+045C">&#x040C;&#x045C;&#x045C; &#x040C;&#x045C;&#x045C;</span> <span title="U+045D">&#x040D;&#x045D;&#x045D; &#x040D;&#x045D;&#x045D;</span> <span title="U+045E">&#x040E;&#x045E;&#x045E; &#x040E;&#x045E;&#x045E;</span> <span title="U+045F">&#x040F;&#x045F;&#x045F; &#x040F;&#x045F;&#x045F;</span> <span title="U+0461">&#x0460;&#x0461;&#x0461; &#x0460;&#x0461;&#x0461;</span> <span title="U+0463">&#x0462;&#x0463;&#x0463; &#x0462;&#x0463;&#x0463;</span> <span title="U+0465">&#x0464;&#x0465;&#x0465; &#x0464;&#x0465;&#x0465;</span> <span title="U+0467">&#x0466;&#x0467;&#x0467; &#x0466;&#x0467;&#x0467;</span> <span title="U+0469">&#x0468;&#x0469;&#x0469; &#x0468;&#x0469;&#x0469;</span> <span title="U+046B">&#x046A;&#x046B;&#x046B; &#x046A;&#x046B;&#x046B;</span> <span title="U+046D">&#x046C;&#x046D;&#x046D; &#x046C;&#x046D;&#x046D;</span> <span title="U+046F">&#x046E;&#x046F;&#x046F; &#x046E;&#x046F;&#x046F;</span> <span title="U+0471">&#x0470;&#x0471;&#x0471; &#x0470;&#x0471;&#x0471;</span> <span title="U+0473">&#x0472;&#x0473;&#x0473; &#x0472;&#x0473;&#x0473;</span> <span title="U+0475">&#x0474;&#x0475;&#x0475; &#x0474;&#x0475;&#x0475;</span> <span title="U+0477">&#x0476;&#x0477;&#x0477; &#x0476;&#x0477;&#x0477;</span> <span title="U+0479">&#x0478;&#x0479;&#x0479; &#x0478;&#x0479;&#x0479;</span> <span title="U+047B">&#x047A;&#x047B;&#x047B; &#x047A;&#x047B;&#x047B;</span> <span title="U+047D">&#x047C;&#x047D;&#x047D; &#x047C;&#x047D;&#x047D;</span> <span title="U+047F">&#x047E;&#x047F;&#x047F; &#x047E;&#x047F;&#x047F;</span> <span title="U+0481">&#x0480;&#x0481;&#x0481; &#x0480;&#x0481;&#x0481;</span> <span title="U+048B">&#x048A;&#x048B;&#x048B; &#x048A;&#x048B;&#x048B;</span> <span title="U+048D">&#x048C;&#x048D;&#x048D; &#x048C;&#x048D;&#x048D;</span> <span title="U+048F">&#x048E;&#x048F;&#x048F; &#x048E;&#x048F;&#x048F;</span> <span title="U+0491">&#x0490;&#x0491;&#x0491; &#x0490;&#x0491;&#x0491;</span> <span title="U+0493">&#x0492;&#x0493;&#x0493; &#x0492;&#x0493;&#x0493;</span> <span title="U+0495">&#x0494;&#x0495;&#x0495; &#x0494;&#x0495;&#x0495;</span> <span title="U+0497">&#x0496;&#x0497;&#x0497; &#x0496;&#x0497;&#x0497;</span> <span title="U+0499">&#x0498;&#x0499;&#x0499; &#x0498;&#x0499;&#x0499;</span> <span title="U+049B">&#x049A;&#x049B;&#x049B; &#x049A;&#x049B;&#x049B;</span> <span title="U+049D">&#x049C;&#x049D;&#x049D; &#x049C;&#x049D;&#x049D;</span> <span title="U+049F">&#x049E;&#x049F;&#x049F; &#x049E;&#x049F;&#x049F;</span> <span title="U+04A1">&#x04A0;&#x04A1;&#x04A1; &#x04A0;&#x04A1;&#x04A1;</span> <span title="U+04A3">&#x04A2;&#x04A3;&#x04A3; &#x04A2;&#x04A3;&#x04A3;</span> <span title="U+04A5">&#x04A4;&#x04A5;&#x04A5; &#x04A4;&#x04A5;&#x04A5;</span> <span title="U+04A7">&#x04A6;&#x04A7;&#x04A7; &#x04A6;&#x04A7;&#x04A7;</span> <span title="U+04A9">&#x04A8;&#x04A9;&#x04A9; &#x04A8;&#x04A9;&#x04A9;</span> <span title="U+04AB">&#x04AA;&#x04AB;&#x04AB; &#x04AA;&#x04AB;&#x04AB;</span> <span title="U+04AD">&#x04AC;&#x04AD;&#x04AD; &#x04AC;&#x04AD;&#x04AD;</span> <span title="U+04AF">&#x04AE;&#x04AF;&#x04AF; &#x04AE;&#x04AF;&#x04AF;</span> <span title="U+04B1">&#x04B0;&#x04B1;&#x04B1; &#x04B0;&#x04B1;&#x04B1;</span> <span title="U+04B3">&#x04B2;&#x04B3;&#x04B3; &#x04B2;&#x04B3;&#x04B3;</span> <span title="U+04B5">&#x04B4;&#x04B5;&#x04B5; &#x04B4;&#x04B5;&#x04B5;</span> <span title="U+04B7">&#x04B6;&#x04B7;&#x04B7; &#x04B6;&#x04B7;&#x04B7;</span> <span title="U+04B9">&#x04B8;&#x04B9;&#x04B9; &#x04B8;&#x04B9;&#x04B9;</span> <span title="U+04BB">&#x04BA;&#x04BB;&#x04BB; &#x04BA;&#x04BB;&#x04BB;</span> <span title="U+04BD">&#x04BC;&#x04BD;&#x04BD; &#x04BC;&#x04BD;&#x04BD;</span> <span title="U+04BF">&#x04BE;&#x04BF;&#x04BF; &#x04BE;&#x04BF;&#x04BF;</span> <span title="U+04C2">&#x04C1;&#x04C2;&#x04C2; &#x04C1;&#x04C2;&#x04C2;</span> <span title="U+04C4">&#x04C3;&#x04C4;&#x04C4; &#x04C3;&#x04C4;&#x04C4;</span> <span title="U+04C6">&#x04C5;&#x04C6;&#x04C6; &#x04C5;&#x04C6;&#x04C6;</span> <span title="U+04C8">&#x04C7;&#x04C8;&#x04C8; &#x04C7;&#x04C8;&#x04C8;</span> <span title="U+04CA">&#x04C9;&#x04CA;&#x04CA; &#x04C9;&#x04CA;&#x04CA;</span> <span title="U+04CC">&#x04CB;&#x04CC;&#x04CC; &#x04CB;&#x04CC;&#x04CC;</span> <span title="U+04CE">&#x04CD;&#x04CE;&#x04CE; &#x04CD;&#x04CE;&#x04CE;</span> <span title="U+04CF">&#x04C0;&#x04CF;&#x04CF; &#x04C0;&#x04CF;&#x04CF;</span> <span title="U+04D1">&#x04D0;&#x04D1;&#x04D1; &#x04D0;&#x04D1;&#x04D1;</span> <span title="U+04D3">&#x04D2;&#x04D3;&#x04D3; &#x04D2;&#x04D3;&#x04D3;</span> <span title="U+04D5">&#x04D4;&#x04D5;&#x04D5; &#x04D4;&#x04D5;&#x04D5;</span> <span title="U+04D7">&#x04D6;&#x04D7;&#x04D7; &#x04D6;&#x04D7;&#x04D7;</span> <span title="U+04D9">&#x04D8;&#x04D9;&#x04D9; &#x04D8;&#x04D9;&#x04D9;</span> <span title="U+04DB">&#x04DA;&#x04DB;&#x04DB; &#x04DA;&#x04DB;&#x04DB;</span> <span title="U+04DD">&#x04DC;&#x04DD;&#x04DD; &#x04DC;&#x04DD;&#x04DD;</span> <span title="U+04DF">&#x04DE;&#x04DF;&#x04DF; &#x04DE;&#x04DF;&#x04DF;</span> <span title="U+04E1">&#x04E0;&#x04E1;&#x04E1; &#x04E0;&#x04E1;&#x04E1;</span> <span title="U+04E3">&#x04E2;&#x04E3;&#x04E3; &#x04E2;&#x04E3;&#x04E3;</span> <span title="U+04E5">&#x04E4;&#x04E5;&#x04E5; &#x04E4;&#x04E5;&#x04E5;</span> <span title="U+04E7">&#x04E6;&#x04E7;&#x04E7; &#x04E6;&#x04E7;&#x04E7;</span> <span title="U+04E9">&#x04E8;&#x04E9;&#x04E9; &#x04E8;&#x04E9;&#x04E9;</span> <span title="U+04EB">&#x04EA;&#x04EB;&#x04EB; &#x04EA;&#x04EB;&#x04EB;</span> <span title="U+04ED">&#x04EC;&#x04ED;&#x04ED; &#x04EC;&#x04ED;&#x04ED;</span> <span title="U+04EF">&#x04EE;&#x04EF;&#x04EF; &#x04EE;&#x04EF;&#x04EF;</span> <span title="U+04F1">&#x04F0;&#x04F1;&#x04F1; &#x04F0;&#x04F1;&#x04F1;</span> <span title="U+04F3">&#x04F2;&#x04F3;&#x04F3; &#x04F2;&#x04F3;&#x04F3;</span> <span title="U+04F5">&#x04F4;&#x04F5;&#x04F5; &#x04F4;&#x04F5;&#x04F5;</span> <span title="U+04F7">&#x04F6;&#x04F7;&#x04F7; &#x04F6;&#x04F7;&#x04F7;</span> <span title="U+04F9">&#x04F8;&#x04F9;&#x04F9; &#x04F8;&#x04F9;&#x04F9;</span> <span title="U+04FB">&#x04FA;&#x04FB;&#x04FB; &#x04FA;&#x04FB;&#x04FB;</span> <span title="U+04FD">&#x04FC;&#x04FD;&#x04FD; &#x04FC;&#x04FD;&#x04FD;</span> <span title="U+04FF">&#x04FE;&#x04FF;&#x04FF; &#x04FE;&#x04FF;&#x04FF;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-020-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-020-ref.html
new file mode 100644
index 0000000000..9eb1d18124
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-020-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Cyrillic Supplement</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0501">&#x0500;&#x0501;&#x0501; &#x0500;&#x0501;&#x0501;</span> <span title="U+0503">&#x0502;&#x0503;&#x0503; &#x0502;&#x0503;&#x0503;</span> <span title="U+0505">&#x0504;&#x0505;&#x0505; &#x0504;&#x0505;&#x0505;</span> <span title="U+0507">&#x0506;&#x0507;&#x0507; &#x0506;&#x0507;&#x0507;</span> <span title="U+0509">&#x0508;&#x0509;&#x0509; &#x0508;&#x0509;&#x0509;</span> <span title="U+050B">&#x050A;&#x050B;&#x050B; &#x050A;&#x050B;&#x050B;</span> <span title="U+050D">&#x050C;&#x050D;&#x050D; &#x050C;&#x050D;&#x050D;</span> <span title="U+050F">&#x050E;&#x050F;&#x050F; &#x050E;&#x050F;&#x050F;</span> <span title="U+0511">&#x0510;&#x0511;&#x0511; &#x0510;&#x0511;&#x0511;</span> <span title="U+0513">&#x0512;&#x0513;&#x0513; &#x0512;&#x0513;&#x0513;</span> <span title="U+0515">&#x0514;&#x0515;&#x0515; &#x0514;&#x0515;&#x0515;</span> <span title="U+0517">&#x0516;&#x0517;&#x0517; &#x0516;&#x0517;&#x0517;</span> <span title="U+0519">&#x0518;&#x0519;&#x0519; &#x0518;&#x0519;&#x0519;</span> <span title="U+051B">&#x051A;&#x051B;&#x051B; &#x051A;&#x051B;&#x051B;</span> <span title="U+051D">&#x051C;&#x051D;&#x051D; &#x051C;&#x051D;&#x051D;</span> <span title="U+051F">&#x051E;&#x051F;&#x051F; &#x051E;&#x051F;&#x051F;</span> <span title="U+0521">&#x0520;&#x0521;&#x0521; &#x0520;&#x0521;&#x0521;</span> <span title="U+0523">&#x0522;&#x0523;&#x0523; &#x0522;&#x0523;&#x0523;</span> <span title="U+0525">&#x0524;&#x0525;&#x0525; &#x0524;&#x0525;&#x0525;</span> <span title="U+0527">&#x0526;&#x0527;&#x0527; &#x0526;&#x0527;&#x0527;</span> <span title="U+0529">&#x0528;&#x0529;&#x0529; &#x0528;&#x0529;&#x0529;</span> <span title="U+052B">&#x052A;&#x052B;&#x052B; &#x052A;&#x052B;&#x052B;</span> <span title="U+052D">&#x052C;&#x052D;&#x052D; &#x052C;&#x052D;&#x052D;</span> <span title="U+052F">&#x052E;&#x052F;&#x052F; &#x052E;&#x052F;&#x052F;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-022-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-022-ref.html
new file mode 100644
index 0000000000..a07c35b10e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-022-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Armenian</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansArmenian-Regular') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Noto Sans Armenian', webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0561">&#x0531;&#x0561;&#x0561; &#x0531;&#x0561;&#x0561;</span> <span title="U+0562">&#x0532;&#x0562;&#x0562; &#x0532;&#x0562;&#x0562;</span> <span title="U+0563">&#x0533;&#x0563;&#x0563; &#x0533;&#x0563;&#x0563;</span> <span title="U+0564">&#x0534;&#x0564;&#x0564; &#x0534;&#x0564;&#x0564;</span> <span title="U+0565">&#x0535;&#x0565;&#x0565; &#x0535;&#x0565;&#x0565;</span> <span title="U+0566">&#x0536;&#x0566;&#x0566; &#x0536;&#x0566;&#x0566;</span> <span title="U+0567">&#x0537;&#x0567;&#x0567; &#x0537;&#x0567;&#x0567;</span> <span title="U+0568">&#x0538;&#x0568;&#x0568; &#x0538;&#x0568;&#x0568;</span> <span title="U+0569">&#x0539;&#x0569;&#x0569; &#x0539;&#x0569;&#x0569;</span> <span title="U+056A">&#x053A;&#x056A;&#x056A; &#x053A;&#x056A;&#x056A;</span> <span title="U+056B">&#x053B;&#x056B;&#x056B; &#x053B;&#x056B;&#x056B;</span> <span title="U+056C">&#x053C;&#x056C;&#x056C; &#x053C;&#x056C;&#x056C;</span> <span title="U+056D">&#x053D;&#x056D;&#x056D; &#x053D;&#x056D;&#x056D;</span> <span title="U+056E">&#x053E;&#x056E;&#x056E; &#x053E;&#x056E;&#x056E;</span> <span title="U+056F">&#x053F;&#x056F;&#x056F; &#x053F;&#x056F;&#x056F;</span> <span title="U+0570">&#x0540;&#x0570;&#x0570; &#x0540;&#x0570;&#x0570;</span> <span title="U+0571">&#x0541;&#x0571;&#x0571; &#x0541;&#x0571;&#x0571;</span> <span title="U+0572">&#x0542;&#x0572;&#x0572; &#x0542;&#x0572;&#x0572;</span> <span title="U+0573">&#x0543;&#x0573;&#x0573; &#x0543;&#x0573;&#x0573;</span> <span title="U+0574">&#x0544;&#x0574;&#x0574; &#x0544;&#x0574;&#x0574;</span> <span title="U+0575">&#x0545;&#x0575;&#x0575; &#x0545;&#x0575;&#x0575;</span> <span title="U+0576">&#x0546;&#x0576;&#x0576; &#x0546;&#x0576;&#x0576;</span> <span title="U+0577">&#x0547;&#x0577;&#x0577; &#x0547;&#x0577;&#x0577;</span> <span title="U+0578">&#x0548;&#x0578;&#x0578; &#x0548;&#x0578;&#x0578;</span> <span title="U+0579">&#x0549;&#x0579;&#x0579; &#x0549;&#x0579;&#x0579;</span> <span title="U+057A">&#x054A;&#x057A;&#x057A; &#x054A;&#x057A;&#x057A;</span> <span title="U+057B">&#x054B;&#x057B;&#x057B; &#x054B;&#x057B;&#x057B;</span> <span title="U+057C">&#x054C;&#x057C;&#x057C; &#x054C;&#x057C;&#x057C;</span> <span title="U+057D">&#x054D;&#x057D;&#x057D; &#x054D;&#x057D;&#x057D;</span> <span title="U+057E">&#x054E;&#x057E;&#x057E; &#x054E;&#x057E;&#x057E;</span> <span title="U+057F">&#x054F;&#x057F;&#x057F; &#x054F;&#x057F;&#x057F;</span> <span title="U+0580">&#x0550;&#x0580;&#x0580; &#x0550;&#x0580;&#x0580;</span> <span title="U+0581">&#x0551;&#x0581;&#x0581; &#x0551;&#x0581;&#x0581;</span> <span title="U+0582">&#x0552;&#x0582;&#x0582; &#x0552;&#x0582;&#x0582;</span> <span title="U+0583">&#x0553;&#x0583;&#x0583; &#x0553;&#x0583;&#x0583;</span> <span title="U+0584">&#x0554;&#x0584;&#x0584; &#x0554;&#x0584;&#x0584;</span> <span title="U+0585">&#x0555;&#x0585;&#x0585; &#x0555;&#x0585;&#x0585;</span> <span title="U+0586">&#x0556;&#x0586;&#x0586; &#x0556;&#x0586;&#x0586;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-024-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-024-ref.html
new file mode 100644
index 0000000000..d115bf09b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-024-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Number Forms</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2170">&#x2160;&#x2170;&#x2170; &#x2160;&#x2170;&#x2170;</span> <span title="U+2171">&#x2161;&#x2171;&#x2171; &#x2161;&#x2171;&#x2171;</span> <span title="U+2172">&#x2162;&#x2172;&#x2172; &#x2162;&#x2172;&#x2172;</span> <span title="U+2173">&#x2163;&#x2173;&#x2173; &#x2163;&#x2173;&#x2173;</span> <span title="U+2174">&#x2164;&#x2174;&#x2174; &#x2164;&#x2174;&#x2174;</span> <span title="U+2175">&#x2165;&#x2175;&#x2175; &#x2165;&#x2175;&#x2175;</span> <span title="U+2176">&#x2166;&#x2176;&#x2176; &#x2166;&#x2176;&#x2176;</span> <span title="U+2177">&#x2167;&#x2177;&#x2177; &#x2167;&#x2177;&#x2177;</span> <span title="U+2178">&#x2168;&#x2178;&#x2178; &#x2168;&#x2178;&#x2178;</span> <span title="U+2179">&#x2169;&#x2179;&#x2179; &#x2169;&#x2179;&#x2179;</span> <span title="U+217A">&#x216A;&#x217A;&#x217A; &#x216A;&#x217A;&#x217A;</span> <span title="U+217B">&#x216B;&#x217B;&#x217B; &#x216B;&#x217B;&#x217B;</span> <span title="U+217C">&#x216C;&#x217C;&#x217C; &#x216C;&#x217C;&#x217C;</span> <span title="U+217D">&#x216D;&#x217D;&#x217D; &#x216D;&#x217D;&#x217D;</span> <span title="U+217E">&#x216E;&#x217E;&#x217E; &#x216E;&#x217E;&#x217E;</span> <span title="U+217F">&#x216F;&#x217F;&#x217F; &#x216F;&#x217F;&#x217F;</span> <span title="U+2184">&#x2183;&#x2184;&#x2184; &#x2183;&#x2184;&#x2184;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-026-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-026-ref.html
new file mode 100644
index 0000000000..157c19cf1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-026-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Enclosed Alphanumerics</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if there are NO uppercase letters.<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+24D0">&#x24D0;&#x24D0;&#x24D0;</span> <span title="U+24D1">&#x24D1;&#x24D1;&#x24D1;</span> <span title="U+24D2">&#x24D2;&#x24D2;&#x24D2;</span> <span title="U+24D3">&#x24D3;&#x24D3;&#x24D3;</span> <span title="U+24D4">&#x24D4;&#x24D4;&#x24D4;</span> <span title="U+24D5">&#x24D5;&#x24D5;&#x24D5;</span> <span title="U+24D6">&#x24D6;&#x24D6;&#x24D6;</span> <span title="U+24D7">&#x24D7;&#x24D7;&#x24D7;</span> <span title="U+24D8">&#x24D8;&#x24D8;&#x24D8;</span> <span title="U+24D9">&#x24D9;&#x24D9;&#x24D9;</span> <span title="U+24DA">&#x24DA;&#x24DA;&#x24DA;</span> <span title="U+24DB">&#x24DB;&#x24DB;&#x24DB;</span> <span title="U+24DC">&#x24DC;&#x24DC;&#x24DC;</span> <span title="U+24DD">&#x24DD;&#x24DD;&#x24DD;</span> <span title="U+24DE">&#x24DE;&#x24DE;&#x24DE;</span> <span title="U+24DF">&#x24DF;&#x24DF;&#x24DF;</span> <span title="U+24E0">&#x24E0;&#x24E0;&#x24E0;</span> <span title="U+24E1">&#x24E1;&#x24E1;&#x24E1;</span> <span title="U+24E2">&#x24E2;&#x24E2;&#x24E2;</span> <span title="U+24E3">&#x24E3;&#x24E3;&#x24E3;</span> <span title="U+24E4">&#x24E4;&#x24E4;&#x24E4;</span> <span title="U+24E5">&#x24E5;&#x24E5;&#x24E5;</span> <span title="U+24E6">&#x24E6;&#x24E6;&#x24E6;</span> <span title="U+24E7">&#x24E7;&#x24E7;&#x24E7;</span> <span title="U+24E8">&#x24E8;&#x24E8;&#x24E8;</span> <span title="U+24E9">&#x24E9;&#x24E9;&#x24E9;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-028-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-028-ref.html
new file mode 100644
index 0000000000..21e19d1715
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-028-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Deseret</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/noto/NotoSansDeseret-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+10428">&#x10400;&#x10428;&#x10428; &#x10400;&#x10428;&#x10428;</span> <span title="U+10429">&#x10401;&#x10429;&#x10429; &#x10401;&#x10429;&#x10429;</span> <span title="U+1042A">&#x10402;&#x1042A;&#x1042A; &#x10402;&#x1042A;&#x1042A;</span> <span title="U+1042B">&#x10403;&#x1042B;&#x1042B; &#x10403;&#x1042B;&#x1042B;</span> <span title="U+1042C">&#x10404;&#x1042C;&#x1042C; &#x10404;&#x1042C;&#x1042C;</span> <span title="U+1042D">&#x10405;&#x1042D;&#x1042D; &#x10405;&#x1042D;&#x1042D;</span> <span title="U+1042E">&#x10406;&#x1042E;&#x1042E; &#x10406;&#x1042E;&#x1042E;</span> <span title="U+1042F">&#x10407;&#x1042F;&#x1042F; &#x10407;&#x1042F;&#x1042F;</span> <span title="U+10430">&#x10408;&#x10430;&#x10430; &#x10408;&#x10430;&#x10430;</span> <span title="U+10431">&#x10409;&#x10431;&#x10431; &#x10409;&#x10431;&#x10431;</span> <span title="U+10432">&#x1040A;&#x10432;&#x10432; &#x1040A;&#x10432;&#x10432;</span> <span title="U+10433">&#x1040B;&#x10433;&#x10433; &#x1040B;&#x10433;&#x10433;</span> <span title="U+10434">&#x1040C;&#x10434;&#x10434; &#x1040C;&#x10434;&#x10434;</span> <span title="U+10435">&#x1040D;&#x10435;&#x10435; &#x1040D;&#x10435;&#x10435;</span> <span title="U+10436">&#x1040E;&#x10436;&#x10436; &#x1040E;&#x10436;&#x10436;</span> <span title="U+10437">&#x1040F;&#x10437;&#x10437; &#x1040F;&#x10437;&#x10437;</span> <span title="U+10438">&#x10410;&#x10438;&#x10438; &#x10410;&#x10438;&#x10438;</span> <span title="U+10439">&#x10411;&#x10439;&#x10439; &#x10411;&#x10439;&#x10439;</span> <span title="U+1043A">&#x10412;&#x1043A;&#x1043A; &#x10412;&#x1043A;&#x1043A;</span> <span title="U+1043B">&#x10413;&#x1043B;&#x1043B; &#x10413;&#x1043B;&#x1043B;</span> <span title="U+1043C">&#x10414;&#x1043C;&#x1043C; &#x10414;&#x1043C;&#x1043C;</span> <span title="U+1043D">&#x10415;&#x1043D;&#x1043D; &#x10415;&#x1043D;&#x1043D;</span> <span title="U+1043E">&#x10416;&#x1043E;&#x1043E; &#x10416;&#x1043E;&#x1043E;</span> <span title="U+1043F">&#x10417;&#x1043F;&#x1043F; &#x10417;&#x1043F;&#x1043F;</span> <span title="U+10440">&#x10418;&#x10440;&#x10440; &#x10418;&#x10440;&#x10440;</span> <span title="U+10441">&#x10419;&#x10441;&#x10441; &#x10419;&#x10441;&#x10441;</span> <span title="U+10442">&#x1041A;&#x10442;&#x10442; &#x1041A;&#x10442;&#x10442;</span> <span title="U+10443">&#x1041B;&#x10443;&#x10443; &#x1041B;&#x10443;&#x10443;</span> <span title="U+10444">&#x1041C;&#x10444;&#x10444; &#x1041C;&#x10444;&#x10444;</span> <span title="U+10445">&#x1041D;&#x10445;&#x10445; &#x1041D;&#x10445;&#x10445;</span> <span title="U+10446">&#x1041E;&#x10446;&#x10446; &#x1041E;&#x10446;&#x10446;</span> <span title="U+10447">&#x1041F;&#x10447;&#x10447; &#x1041F;&#x10447;&#x10447;</span> <span title="U+10448">&#x10420;&#x10448;&#x10448; &#x10420;&#x10448;&#x10448;</span> <span title="U+10449">&#x10421;&#x10449;&#x10449; &#x10421;&#x10449;&#x10449;</span> <span title="U+1044A">&#x10422;&#x1044A;&#x1044A; &#x10422;&#x1044A;&#x1044A;</span> <span title="U+1044B">&#x10423;&#x1044B;&#x1044B; &#x10423;&#x1044B;&#x1044B;</span> <span title="U+1044C">&#x10424;&#x1044C;&#x1044C; &#x10424;&#x1044C;&#x1044C;</span> <span title="U+1044D">&#x10425;&#x1044D;&#x1044D; &#x10425;&#x1044D;&#x1044D;</span> <span title="U+1044E">&#x10426;&#x1044E;&#x1044E; &#x10426;&#x1044E;&#x1044E;</span> <span title="U+1044F">&#x10427;&#x1044F;&#x1044F; &#x10427;&#x1044F;&#x1044F;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-030-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-030-ref.html
new file mode 100644
index 0000000000..96240cae72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-030-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Georgian Supplement</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansGeorgian-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2D00">&#x10A0;&#x2D00;&#x2D00; &#x10A0;&#x2D00;&#x2D00;</span> <span title="U+2D01">&#x10A1;&#x2D01;&#x2D01; &#x10A1;&#x2D01;&#x2D01;</span> <span title="U+2D02">&#x10A2;&#x2D02;&#x2D02; &#x10A2;&#x2D02;&#x2D02;</span> <span title="U+2D03">&#x10A3;&#x2D03;&#x2D03; &#x10A3;&#x2D03;&#x2D03;</span> <span title="U+2D04">&#x10A4;&#x2D04;&#x2D04; &#x10A4;&#x2D04;&#x2D04;</span> <span title="U+2D05">&#x10A5;&#x2D05;&#x2D05; &#x10A5;&#x2D05;&#x2D05;</span> <span title="U+2D06">&#x10A6;&#x2D06;&#x2D06; &#x10A6;&#x2D06;&#x2D06;</span> <span title="U+2D07">&#x10A7;&#x2D07;&#x2D07; &#x10A7;&#x2D07;&#x2D07;</span> <span title="U+2D08">&#x10A8;&#x2D08;&#x2D08; &#x10A8;&#x2D08;&#x2D08;</span> <span title="U+2D09">&#x10A9;&#x2D09;&#x2D09; &#x10A9;&#x2D09;&#x2D09;</span> <span title="U+2D0A">&#x10AA;&#x2D0A;&#x2D0A; &#x10AA;&#x2D0A;&#x2D0A;</span> <span title="U+2D0B">&#x10AB;&#x2D0B;&#x2D0B; &#x10AB;&#x2D0B;&#x2D0B;</span> <span title="U+2D0C">&#x10AC;&#x2D0C;&#x2D0C; &#x10AC;&#x2D0C;&#x2D0C;</span> <span title="U+2D0D">&#x10AD;&#x2D0D;&#x2D0D; &#x10AD;&#x2D0D;&#x2D0D;</span> <span title="U+2D0E">&#x10AE;&#x2D0E;&#x2D0E; &#x10AE;&#x2D0E;&#x2D0E;</span> <span title="U+2D0F">&#x10AF;&#x2D0F;&#x2D0F; &#x10AF;&#x2D0F;&#x2D0F;</span> <span title="U+2D10">&#x10B0;&#x2D10;&#x2D10; &#x10B0;&#x2D10;&#x2D10;</span> <span title="U+2D11">&#x10B1;&#x2D11;&#x2D11; &#x10B1;&#x2D11;&#x2D11;</span> <span title="U+2D12">&#x10B2;&#x2D12;&#x2D12; &#x10B2;&#x2D12;&#x2D12;</span> <span title="U+2D13">&#x10B3;&#x2D13;&#x2D13; &#x10B3;&#x2D13;&#x2D13;</span> <span title="U+2D14">&#x10B4;&#x2D14;&#x2D14; &#x10B4;&#x2D14;&#x2D14;</span> <span title="U+2D15">&#x10B5;&#x2D15;&#x2D15; &#x10B5;&#x2D15;&#x2D15;</span> <span title="U+2D16">&#x10B6;&#x2D16;&#x2D16; &#x10B6;&#x2D16;&#x2D16;</span> <span title="U+2D17">&#x10B7;&#x2D17;&#x2D17; &#x10B7;&#x2D17;&#x2D17;</span> <span title="U+2D18">&#x10B8;&#x2D18;&#x2D18; &#x10B8;&#x2D18;&#x2D18;</span> <span title="U+2D19">&#x10B9;&#x2D19;&#x2D19; &#x10B9;&#x2D19;&#x2D19;</span> <span title="U+2D1A">&#x10BA;&#x2D1A;&#x2D1A; &#x10BA;&#x2D1A;&#x2D1A;</span> <span title="U+2D1B">&#x10BB;&#x2D1B;&#x2D1B; &#x10BB;&#x2D1B;&#x2D1B;</span> <span title="U+2D1C">&#x10BC;&#x2D1C;&#x2D1C; &#x10BC;&#x2D1C;&#x2D1C;</span> <span title="U+2D1D">&#x10BD;&#x2D1D;&#x2D1D; &#x10BD;&#x2D1D;&#x2D1D;</span> <span title="U+2D1E">&#x10BE;&#x2D1E;&#x2D1E; &#x10BE;&#x2D1E;&#x2D1E;</span> <span title="U+2D1F">&#x10BF;&#x2D1F;&#x2D1F; &#x10BF;&#x2D1F;&#x2D1F;</span> <span title="U+2D20">&#x10C0;&#x2D20;&#x2D20; &#x10C0;&#x2D20;&#x2D20;</span> <span title="U+2D21">&#x10C1;&#x2D21;&#x2D21; &#x10C1;&#x2D21;&#x2D21;</span> <span title="U+2D22">&#x10C2;&#x2D22;&#x2D22; &#x10C2;&#x2D22;&#x2D22;</span> <span title="U+2D23">&#x10C3;&#x2D23;&#x2D23; &#x10C3;&#x2D23;&#x2D23;</span> <span title="U+2D24">&#x10C4;&#x2D24;&#x2D24; &#x10C4;&#x2D24;&#x2D24;</span> <span title="U+2D25">&#x10C5;&#x2D25;&#x2D25; &#x10C5;&#x2D25;&#x2D25;</span> <span title="U+2D27">&#x10C7;&#x2D27;&#x2D27; &#x10C7;&#x2D27;&#x2D27;</span> <span title="U+2D2D">&#x10CD;&#x2D2D;&#x2D2D; &#x10CD;&#x2D2D;&#x2D2D;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-031-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-031-ref.html
new file mode 100644
index 0000000000..2d0d9324bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-031-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, initial punctuation</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', sans-serif; border: 1px solid orange; margin: 10px;  padding: 5px; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test">({[-–"«'.&lt;?!Transform</div>
+<div class="ref">({[-–"«'.&lt;?!Transform</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-032-ref.xht b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-032-ref.xht
new file mode 100644
index 0000000000..22687d2111
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-capitalize-032-ref.xht
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-transform - capitalize - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first sentence matches the second one.
+		</p>
+		<div>
+			<span>All Words Should Be Put In Titlecase.</span>
+		</div>
+		<div>
+			<span>All Words Should Be Put In Titlecase.</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-001-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-001-ref.html
new file mode 100644
index 0000000000..10fe7800b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+
+<p>Test passes if the characters in the second column are
+the same shape and size as those in the rightmost column,
+not small as those in the leftmost column.<br>
+Any missing glyph should be ignored as long as it is missing in both the second and the rightmost column.
+
+<table>
+  <tr><td>ぁ<td>あ<td>あ
+  <tr><td>ぃ<td>い<td>い
+  <tr><td>ぅ<td>う<td>う
+  <tr><td>ぇ<td>え<td>え
+  <tr><td>ぉ<td>お<td>お
+  <tr><td>ゕ<td>か<td>か
+  <tr><td>ゖ<td>け<td>け
+  <tr><td>っ<td>つ<td>つ
+  <tr><td>ゃ<td>や<td>や
+  <tr><td>ゅ<td>ゆ<td>ゆ
+  <tr><td>ょ<td>よ<td>よ
+  <tr><td>ゎ<td>わ<td>わ
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-002-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-002-ref.html
new file mode 100644
index 0000000000..69591280b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-002-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+
+<p>Test passes if the characters in the second column are
+the same shape and size as those in the rightmost column,
+not small as those in the leftmost column.<br>
+Any missing glyph should be ignored as long as it is missing in both the second and the rightmost column.
+
+<table>
+  <tr><td>ァ<td>ア<td>ア
+  <tr><td>ィ<td>イ<td>イ
+  <tr><td>ゥ<td>ウ<td>ウ
+  <tr><td>ェ<td>エ<td>エ
+  <tr><td>ォ<td>オ<td>オ
+  <tr><td>ヵ<td>カ<td>カ
+  <tr><td>ㇰ<td>ク<td>ク
+  <tr><td>ヶ<td>ケ<td>ケ
+  <tr><td>ㇱ<td>シ<td>シ
+  <tr><td>ㇲ<td>ス<td>ス
+  <tr><td>ッ<td>ツ<td>ツ
+  <tr><td>ㇳ<td>ト<td>ト
+  <tr><td>ㇴ<td>ヌ<td>ヌ
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-003-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-003-ref.html
new file mode 100644
index 0000000000..c2a8a1e76b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-003-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+
+<p>Test passes if the characters in the second column are
+the same shape and size as those in the rightmost column,
+not small as those in the leftmost column.<br>
+Any missing glyph should be ignored as long as it is missing in both the second and the rightmost column.
+
+<table>
+  <tr><td>ㇵ<td>ハ<td>ハ
+  <tr><td>ㇶ<td>ヒ<td>ヒ
+  <tr><td>ㇷ<td>フ<td>フ
+  <tr><td>ㇸ<td>ヘ<td>ヘ
+  <tr><td>ㇹ<td>ホ<td>ホ
+  <tr><td>ㇺ<td>ム<td>ム
+  <tr><td>ャ<td>ヤ<td>ヤ
+  <tr><td>ュ<td>ユ<td>ユ
+  <tr><td>ョ<td>ヨ<td>ヨ
+  <tr><td>ㇻ<td>ラ<td>ラ
+  <tr><td>ㇼ<td>リ<td>リ
+  <tr><td>ㇽ<td>ル<td>ル
+  <tr><td>ㇾ<td>レ<td>レ
+  <tr><td>ㇿ<td>ロ<td>ロ
+  <tr><td>ヮ<td>ワ<td>ワ
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-004-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-004-ref.html
new file mode 100644
index 0000000000..4f23628af6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-004-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+
+<p>Test passes if the characters in the second column are
+the same shape and size as those in the rightmost column,
+not small as those in the leftmost column.<br>
+Any missing glyph should be ignored as long as it is missing in both the second and the rightmost column.
+
+<table>
+  <tr><td>ｧ<td>ｱ<td>ｱ
+  <tr><td>ｨ<td>ｲ<td>ｲ
+  <tr><td>ｩ<td>ｳ<td>ｳ
+  <tr><td>ｪ<td>ｴ<td>ｴ
+  <tr><td>ｫ<td>ｵ<td>ｵ
+  <tr><td>ｯ<td>ﾂ<td>ﾂ
+  <tr><td>ｬ<td>ﾔ<td>ﾔ
+  <tr><td>ｭ<td>ﾕ<td>ﾕ
+  <tr><td>ｮ<td>ﾖ<td>ﾖ
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-005-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-005-ref.html
new file mode 100644
index 0000000000..adedc8dc7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-005-ref.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS3 test reference</title>
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div { font-size: 150%;}
+div > span { margin-right: 1em; white-space: nowrap; }
+</style>
+
+<p>Test passes if both characters in each pair are the same shape <strong>and size</strong>.<br>
+Any missing glyph should be ignored
+as long as it is missing for both the first and second characters in a pair.
+
+<div>
+  <span>&#x30FC; &#x30FC;</span>
+  <span>&#x3042; &#x3042;</span>
+  <span>&#x3044; &#x3044;</span>
+  <span>&#x3046; &#x3046;</span>
+  <span>&#x3048; &#x3048;</span>
+  <span>&#x304A; &#x304A;</span>
+  <span>&#x304B; &#x304B;</span>
+  <span>&#x304C; &#x304C;</span>
+  <span>&#x304D; &#x304D;</span>
+  <span>&#x304E; &#x304E;</span>
+  <span>&#x304F; &#x304F;</span>
+  <span>&#x3050; &#x3050;</span>
+  <span>&#x3051; &#x3051;</span>
+  <span>&#x3052; &#x3052;</span>
+  <span>&#x3053; &#x3053;</span>
+  <span>&#x3054; &#x3054;</span>
+  <span>&#x3055; &#x3055;</span>
+  <span>&#x3056; &#x3056;</span>
+  <span>&#x3057; &#x3057;</span>
+  <span>&#x3058; &#x3058;</span>
+  <span>&#x3059; &#x3059;</span>
+  <span>&#x305A; &#x305A;</span>
+  <span>&#x305B; &#x305B;</span>
+  <span>&#x305C; &#x305C;</span>
+  <span>&#x305D; &#x305D;</span>
+  <span>&#x305E; &#x305E;</span>
+  <span>&#x305F; &#x305F;</span>
+  <span>&#x3060; &#x3060;</span>
+  <span>&#x3061; &#x3061;</span>
+  <span>&#x3062; &#x3062;</span>
+  <span>&#x3064; &#x3064;</span>
+  <span>&#x3065; &#x3065;</span>
+  <span>&#x3066; &#x3066;</span>
+  <span>&#x3067; &#x3067;</span>
+  <span>&#x3068; &#x3068;</span>
+  <span>&#x3069; &#x3069;</span>
+  <span>&#x306A; &#x306A;</span>
+  <span>&#x306B; &#x306B;</span>
+  <span>&#x306C; &#x306C;</span>
+  <span>&#x306D; &#x306D;</span>
+  <span>&#x306E; &#x306E;</span>
+  <span>&#x306F; &#x306F;</span>
+  <span>&#x3070; &#x3070;</span>
+  <span>&#x3071; &#x3071;</span>
+  <span>&#x3072; &#x3072;</span>
+  <span>&#x3073; &#x3073;</span>
+  <span>&#x3074; &#x3074;</span>
+  <span>&#x3075; &#x3075;</span>
+  <span>&#x3076; &#x3076;</span>
+  <span>&#x3077; &#x3077;</span>
+  <span>&#x3078; &#x3078;</span>
+  <span>&#x3079; &#x3079;</span>
+  <span>&#x307A; &#x307A;</span>
+  <span>&#x307B; &#x307B;</span>
+  <span>&#x307C; &#x307C;</span>
+  <span>&#x307D; &#x307D;</span>
+  <span>&#x307E; &#x307E;</span>
+  <span>&#x307F; &#x307F;</span>
+  <span>&#x3080; &#x3080;</span>
+  <span>&#x3081; &#x3081;</span>
+  <span>&#x3082; &#x3082;</span>
+  <span>&#x3084; &#x3084;</span>
+  <span>&#x3086; &#x3086;</span>
+  <span>&#x3088; &#x3088;</span>
+  <span>&#x3089; &#x3089;</span>
+  <span>&#x308A; &#x308A;</span>
+  <span>&#x308B; &#x308B;</span>
+  <span>&#x308C; &#x308C;</span>
+  <span>&#x308D; &#x308D;</span>
+  <span>&#x308F; &#x308F;</span>
+  <span>&#x3090; &#x3090;</span>
+  <span>&#x3091; &#x3091;</span>
+  <span>&#x3092; &#x3092;</span>
+  <span>&#x3093; &#x3093;</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-006-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-006-ref.html
new file mode 100644
index 0000000000..f806093ab9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-006-ref.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS3 test reference</title>
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div { font-size: 150%;}
+div > span { margin-right: 1em; white-space: nowrap; }
+</style>
+
+<p>Test passes if both characters in each pair are the same shape <strong>and size</strong>.<br>
+Any missing glyph should be ignored
+as long as it is missing for both the first and second characters in a pair.
+
+<div>
+  <span>&#x30A2; &#x30A2;</span>
+  <span>&#x30A4; &#x30A4;</span>
+  <span>&#x30A6; &#x30A6;</span>
+  <span>&#x30A8; &#x30A8;</span>
+  <span>&#x30AA; &#x30AA;</span>
+  <span>&#x30AB; &#x30AB;</span>
+  <span>&#x30AC; &#x30AC;</span>
+  <span>&#x30AD; &#x30AD;</span>
+  <span>&#x30AE; &#x30AE;</span>
+  <span>&#x30AF; &#x30AF;</span>
+  <span>&#x30B0; &#x30B0;</span>
+  <span>&#x30B1; &#x30B1;</span>
+  <span>&#x30B2; &#x30B2;</span>
+  <span>&#x30B3; &#x30B3;</span>
+  <span>&#x30B4; &#x30B4;</span>
+  <span>&#x30B5; &#x30B5;</span>
+  <span>&#x30B6; &#x30B6;</span>
+  <span>&#x30B7; &#x30B7;</span>
+  <span>&#x30B8; &#x30B8;</span>
+  <span>&#x30B9; &#x30B9;</span>
+  <span>&#x30BA; &#x30BA;</span>
+  <span>&#x30BB; &#x30BB;</span>
+  <span>&#x30BC; &#x30BC;</span>
+  <span>&#x30BD; &#x30BD;</span>
+  <span>&#x30BE; &#x30BE;</span>
+  <span>&#x30BF; &#x30BF;</span>
+  <span>&#x30C0; &#x30C0;</span>
+  <span>&#x30C1; &#x30C1;</span>
+  <span>&#x30C2; &#x30C2;</span>
+  <span>&#x30C4; &#x30C4;</span>
+  <span>&#x30C5; &#x30C5;</span>
+  <span>&#x30C6; &#x30C6;</span>
+  <span>&#x30C7; &#x30C7;</span>
+  <span>&#x30C8; &#x30C8;</span>
+  <span>&#x30C9; &#x30C9;</span>
+  <span>&#x30CA; &#x30CA;</span>
+  <span>&#x30CB; &#x30CB;</span>
+  <span>&#x30CC; &#x30CC;</span>
+  <span>&#x30CD; &#x30CD;</span>
+  <span>&#x30CE; &#x30CE;</span>
+  <span>&#x30CF; &#x30CF;</span>
+  <span>&#x30D0; &#x30D0;</span>
+  <span>&#x30D1; &#x30D1;</span>
+  <span>&#x30D2; &#x30D2;</span>
+  <span>&#x30D3; &#x30D3;</span>
+  <span>&#x30D4; &#x30D4;</span>
+  <span>&#x30D5; &#x30D5;</span>
+  <span>&#x30D6; &#x30D6;</span>
+  <span>&#x30D7; &#x30D7;</span>
+  <span>&#x30D8; &#x30D8;</span>
+  <span>&#x30D9; &#x30D9;</span>
+  <span>&#x30DA; &#x30DA;</span>
+  <span>&#x30DB; &#x30DB;</span>
+  <span>&#x30DC; &#x30DC;</span>
+  <span>&#x30DD; &#x30DD;</span>
+  <span>&#x30DE; &#x30DE;</span>
+  <span>&#x30DF; &#x30DF;</span>
+  <span>&#x30E0; &#x30E0;</span>
+  <span>&#x30E1; &#x30E1;</span>
+  <span>&#x30E2; &#x30E2;</span>
+  <span>&#x30E4; &#x30E4;</span>
+  <span>&#x30E6; &#x30E6;</span>
+  <span>&#x30E8; &#x30E8;</span>
+  <span>&#x30E9; &#x30E9;</span>
+  <span>&#x30EA; &#x30EA;</span>
+  <span>&#x30EB; &#x30EB;</span>
+  <span>&#x30EC; &#x30EC;</span>
+  <span>&#x30ED; &#x30ED;</span>
+  <span>&#x30EF; &#x30EF;</span>
+  <span>&#x30F0; &#x30F0;</span>
+  <span>&#x30F1; &#x30F1;</span>
+  <span>&#x30F2; &#x30F2;</span>
+  <span>&#x30F3; &#x30F3;</span>
+  <span>&#x30F4; &#x30F4;</span>
+  <span>&#x309B; &#x309B;</span>
+  <span>&#x309C; &#x309C;</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-007-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-007-ref.html
new file mode 100644
index 0000000000..b07e9197fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-007-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS3 test reference</title>
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div { font-size: 150%;}
+div > span { margin-right: 1em; white-space: nowrap; }
+</style>
+
+<p>Test passes if both characters in each pair are the same shape <strong>and size</strong>.<br>
+Any missing glyph should be ignored
+as long as it is missing for both the first and second characters in a pair.
+
+<div>
+  <span>&#xFF65; &#xFF65;</span>
+  <span>&#xFF66; &#xFF66;</span>
+  <span>&#xFF70; &#xFF70;</span>
+  <span>&#xFF71; &#xFF71;</span>
+  <span>&#xFF72; &#xFF72;</span>
+  <span>&#xFF73; &#xFF73;</span>
+  <span>&#xFF74; &#xFF74;</span>
+  <span>&#xFF75; &#xFF75;</span>
+  <span>&#xFF76; &#xFF76;</span>
+  <span>&#xFF77; &#xFF77;</span>
+  <span>&#xFF78; &#xFF78;</span>
+  <span>&#xFF79; &#xFF79;</span>
+  <span>&#xFF7A; &#xFF7A;</span>
+  <span>&#xFF7B; &#xFF7B;</span>
+  <span>&#xFF7C; &#xFF7C;</span>
+  <span>&#xFF7D; &#xFF7D;</span>
+  <span>&#xFF7E; &#xFF7E;</span>
+  <span>&#xFF7F; &#xFF7F;</span>
+  <span>&#xFF80; &#xFF80;</span>
+  <span>&#xFF81; &#xFF81;</span>
+  <span>&#xFF82; &#xFF82;</span>
+  <span>&#xFF83; &#xFF83;</span>
+  <span>&#xFF84; &#xFF84;</span>
+  <span>&#xFF85; &#xFF85;</span>
+  <span>&#xFF86; &#xFF86;</span>
+  <span>&#xFF87; &#xFF87;</span>
+  <span>&#xFF88; &#xFF88;</span>
+  <span>&#xFF89; &#xFF89;</span>
+  <span>&#xFF8A; &#xFF8A;</span>
+  <span>&#xFF8B; &#xFF8B;</span>
+  <span>&#xFF8C; &#xFF8C;</span>
+  <span>&#xFF8D; &#xFF8D;</span>
+  <span>&#xFF8E; &#xFF8E;</span>
+  <span>&#xFF8F; &#xFF8F;</span>
+  <span>&#xFF90; &#xFF90;</span>
+  <span>&#xFF91; &#xFF91;</span>
+  <span>&#xFF92; &#xFF92;</span>
+  <span>&#xFF93; &#xFF93;</span>
+  <span>&#xFF94; &#xFF94;</span>
+  <span>&#xFF95; &#xFF95;</span>
+  <span>&#xFF96; &#xFF96;</span>
+  <span>&#xFF97; &#xFF97;</span>
+  <span>&#xFF98; &#xFF98;</span>
+  <span>&#xFF99; &#xFF99;</span>
+  <span>&#xFF9A; &#xFF9A;</span>
+  <span>&#xFF9B; &#xFF9B;</span>
+  <span>&#xFF9C; &#xFF9C;</span>
+  <span>&#xFF9D; &#xFF9D;</span>
+  <span>&#xFF9E; &#xFF9E;</span>
+  <span>&#xFF9F; &#xFF9F;</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-008-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-008-ref.html
new file mode 100644
index 0000000000..42fc5104ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-full-size-kana-008-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Reference: Unicode 15 kana and text-transform: full-size-kana</title>
+<link rel="author" title="Elika Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-text-transform-full-size-kana">
+<style>
+td:nth-of-type(2) {
+  text-transform: full-size-kana
+}
+</style>
+
+<p>Test passes if the characters in the second column are
+the same shape and size as those in the rightmost column,
+not small as those in the leftmost column.<br>
+Any missing glyph should be ignored as long as it is missing in both the second and the rightmost column.
+
+<table>
+  <tr><td>&#x1B132;<td>&#x3053;<td>&#x3053;
+  <tr><td>&#x1B150;<td>&#x3090;<td>&#x3090;
+  <tr><td>&#x1B151;<td>&#x3091;<td>&#x3091;
+  <tr><td>&#x1B152;<td>&#x3092;<td>&#x3092;
+  <tr><td>&#x1B155;<td>&#x30B3;<td>&#x30B3;
+  <tr><td>&#x1B164;<td>&#x30F0;<td>&#x30F0;
+  <tr><td>&#x1B165;<td>&#x30F1;<td>&#x30F1;
+  <tr><td>&#x1B166;<td>&#x30F2;<td>&#x30F2;
+  <tr><td>&#x1B167;<td>&#x30F3;<td>&#x30F3;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-001-ref.xht b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-001-ref.xht
new file mode 100644
index 0000000000..e8a5f1acc3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-001-ref.xht
@@ -0,0 +1,308 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-transform - fullwidth - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+			        @font-face {
+					font-family: 'mplus-1p-regular';
+					src: url('/fonts/mplus-1p-regular.woff') format('woff');
+			        }
+				span {
+					font-family: 'mplus-1p-regular';
+					background-color: cyan;
+				}
+				.test {
+					color: Blue;
+					line-height: 1.1em;
+				}
+				.test div {
+					display: inline-block;
+					margin-bottom: .5em;
+					text-align: center;
+					white-space: nowrap;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the upper character in each pair matches the lower one in both shape <strong>and size</strong>.
+		</p>
+		<div class="test">
+
+		<!-- FULLWIDTH LATIN -->
+			<div>[<span>　</span>]<br />[<span>　</span>]</div>
+			<div><span>！</span><br /><span>！</span></div>
+			<div><span>＂</span><br /><span>＂</span></div>
+			<div><span>＃</span><br /><span>＃</span></div>
+			<div><span>＄</span><br /><span>＄</span></div>
+			<div><span>％</span><br /><span>％</span></div>
+			<div><span>＆</span><br /><span>＆</span></div>
+			<div><span>＇</span><br /><span>＇</span></div>
+			<div><span>（</span><br /><span>（</span></div>
+			<div><span>）</span><br /><span>）</span></div>
+			<div><span>＊</span><br /><span>＊</span></div>
+			<div><span>＋</span><br /><span>＋</span></div>
+			<div><span>，</span><br /><span>，</span></div>
+			<div><span>－</span><br /><span>－</span></div>
+			<div><span>．</span><br /><span>．</span></div>
+			<div><span>／</span><br /><span>／</span></div>
+
+			<div><span>０</span><br /><span>０</span></div>
+			<div><span>１</span><br /><span>１</span></div>
+			<div><span>２</span><br /><span>２</span></div>
+			<div><span>３</span><br /><span>３</span></div>
+			<div><span>４</span><br /><span>４</span></div>
+			<div><span>５</span><br /><span>５</span></div>
+			<div><span>６</span><br /><span>６</span></div>
+			<div><span>７</span><br /><span>７</span></div>
+			<div><span>８</span><br /><span>８</span></div>
+			<div><span>９</span><br /><span>９</span></div>
+
+			<div><span>：</span><br /><span>：</span></div>
+			<div><span>；</span><br /><span>；</span></div>
+			<div><span>＜</span><br /><span>＜</span></div>
+			<div><span>＝</span><br /><span>＝</span></div>
+			<div><span>＞</span><br /><span>＞</span></div>
+			<div><span>？</span><br /><span>？</span></div>
+			<div><span>＠</span><br /><span>＠</span></div>
+
+			<div><span>Ａ</span><br /><span>Ａ</span></div>
+			<div><span>Ｂ</span><br /><span>Ｂ</span></div>
+			<div><span>Ｃ</span><br /><span>Ｃ</span></div>
+			<div><span>Ｄ</span><br /><span>Ｄ</span></div>
+			<div><span>Ｅ</span><br /><span>Ｅ</span></div>
+			<div><span>Ｆ</span><br /><span>Ｆ</span></div>
+			<div><span>Ｇ</span><br /><span>Ｇ</span></div>
+			<div><span>Ｈ</span><br /><span>Ｈ</span></div>
+			<div><span>Ｉ</span><br /><span>Ｉ</span></div>
+			<div><span>Ｊ</span><br /><span>Ｊ</span></div>
+			<div><span>Ｋ</span><br /><span>Ｋ</span></div>
+			<div><span>Ｌ</span><br /><span>Ｌ</span></div>
+			<div><span>Ｍ</span><br /><span>Ｍ</span></div>
+			<div><span>Ｎ</span><br /><span>Ｎ</span></div>
+			<div><span>Ｏ</span><br /><span>Ｏ</span></div>
+			<div><span>Ｐ</span><br /><span>Ｐ</span></div>
+			<div><span>Ｑ</span><br /><span>Ｑ</span></div>
+			<div><span>Ｒ</span><br /><span>Ｒ</span></div>
+			<div><span>Ｓ</span><br /><span>Ｓ</span></div>
+			<div><span>Ｔ</span><br /><span>Ｔ</span></div>
+			<div><span>Ｕ</span><br /><span>Ｕ</span></div>
+			<div><span>Ｖ</span><br /><span>Ｖ</span></div>
+			<div><span>Ｗ</span><br /><span>Ｗ</span></div>
+			<div><span>Ｘ</span><br /><span>Ｘ</span></div>
+			<div><span>Ｙ</span><br /><span>Ｙ</span></div>
+			<div><span>Ｚ</span><br /><span>Ｚ</span></div>
+
+			<div><span>［</span><br /><span>［</span></div>
+			<div><span>＼</span><br /><span>＼</span></div>
+			<div><span>］</span><br /><span>］</span></div>
+			<div><span>＾</span><br /><span>＾</span></div>
+			<div><span>＿</span><br /><span>＿</span></div>
+			<div><span>｀</span><br /><span>｀</span></div>
+
+			<div><span>ａ</span><br /><span>ａ</span></div>
+			<div><span>ｂ</span><br /><span>ｂ</span></div>
+			<div><span>ｃ</span><br /><span>ｃ</span></div>
+			<div><span>ｄ</span><br /><span>ｄ</span></div>
+			<div><span>ｅ</span><br /><span>ｅ</span></div>
+			<div><span>ｆ</span><br /><span>ｆ</span></div>
+			<div><span>ｇ</span><br /><span>ｇ</span></div>
+			<div><span>ｈ</span><br /><span>ｈ</span></div>
+			<div><span>ｉ</span><br /><span>ｉ</span></div>
+			<div><span>ｊ</span><br /><span>ｊ</span></div>
+			<div><span>ｋ</span><br /><span>ｋ</span></div>
+			<div><span>ｌ</span><br /><span>ｌ</span></div>
+			<div><span>ｍ</span><br /><span>ｍ</span></div>
+			<div><span>ｎ</span><br /><span>ｎ</span></div>
+			<div><span>ｏ</span><br /><span>ｏ</span></div>
+			<div><span>ｐ</span><br /><span>ｐ</span></div>
+			<div><span>ｑ</span><br /><span>ｑ</span></div>
+			<div><span>ｒ</span><br /><span>ｒ</span></div>
+			<div><span>ｓ</span><br /><span>ｓ</span></div>
+			<div><span>ｔ</span><br /><span>ｔ</span></div>
+			<div><span>ｕ</span><br /><span>ｕ</span></div>
+			<div><span>ｖ</span><br /><span>ｖ</span></div>
+			<div><span>ｗ</span><br /><span>ｗ</span></div>
+			<div><span>ｘ</span><br /><span>ｘ</span></div>
+			<div><span>ｙ</span><br /><span>ｙ</span></div>
+			<div><span>ｚ</span><br /><span>ｚ</span></div>
+
+			<div><span>｛</span><br /><span>｛</span></div>
+			<div><span>｜</span><br /><span>｜</span></div>
+			<div><span>｝</span><br /><span>｝</span></div>
+			<div><span>～</span><br /><span>～</span></div>
+
+			<div><span>｟</span><br /><span>｟</span></div>				<!-- LEFT WHITE PARENTHESIS -->
+			<div><span>｠</span><br /><span>｠</span></div>				<!-- RIGHT WHITE PARENTHESIS -->
+
+		<!-- HALFWIDTH KATAKANA -->
+			<div><span>。</span><br /><span>。</span></div>
+			<div><span>「</span><br /><span>「</span></div>
+			<div><span>」</span><br /><span>」</span></div>
+			<div><span>、</span><br /><span>、</span></div>
+			<div><span>・</span><br /><span>・</span></div>
+
+			<div><span>ヲ</span><br /><span>ヲ</span></div>
+			<div><span>ァ</span><br /><span>ァ</span></div>
+			<div><span>ィ</span><br /><span>ィ</span></div>
+			<div><span>ゥ</span><br /><span>ゥ</span></div>
+			<div><span>ェ</span><br /><span>ェ</span></div>
+			<div><span>ォ</span><br /><span>ォ</span></div>
+			<div><span>ャ</span><br /><span>ャ</span></div>
+			<div><span>ュ</span><br /><span>ュ</span></div>
+			<div><span>ョ</span><br /><span>ョ</span></div>
+			<div><span>ッ</span><br /><span>ッ</span></div>
+			<div><span>ー</span><br /><span>ー</span></div>
+
+			<div><span>ア</span><br /><span>ア</span></div>
+			<div><span>イ</span><br /><span>イ</span></div>
+			<div><span>ウ</span><br /><span>ウ</span></div>
+			<div><span>エ</span><br /><span>エ</span></div>
+			<div><span>オ</span><br /><span>オ</span></div>
+			<div><span>カ</span><br /><span>カ</span></div>
+			<div><span>キ</span><br /><span>キ</span></div>
+			<div><span>ク</span><br /><span>ク</span></div>
+			<div><span>ケ</span><br /><span>ケ</span></div>
+			<div><span>コ</span><br /><span>コ</span></div>
+			<div><span>サ</span><br /><span>サ</span></div>
+			<div><span>シ</span><br /><span>シ</span></div>
+			<div><span>ス</span><br /><span>ス</span></div>
+			<div><span>セ</span><br /><span>セ</span></div>
+			<div><span>ソ</span><br /><span>ソ</span></div>
+			<div><span>タ</span><br /><span>タ</span></div>
+			<div><span>チ</span><br /><span>チ</span></div>
+			<div><span>ツ</span><br /><span>ツ</span></div>
+			<div><span>テ</span><br /><span>テ</span></div>
+			<div><span>ト</span><br /><span>ト</span></div>
+			<div><span>ナ</span><br /><span>ナ</span></div>
+			<div><span>ニ</span><br /><span>ニ</span></div>
+			<div><span>ヌ</span><br /><span>ヌ</span></div>
+			<div><span>ネ</span><br /><span>ネ</span></div>
+			<div><span>ノ</span><br /><span>ノ</span></div>
+			<div><span>ハ</span><br /><span>ハ</span></div>
+			<div><span>ヒ</span><br /><span>ヒ</span></div>
+			<div><span>フ</span><br /><span>フ</span></div>
+			<div><span>ヘ</span><br /><span>ヘ</span></div>
+			<div><span>ホ</span><br /><span>ホ</span></div>
+			<div><span>マ</span><br /><span>マ</span></div>
+			<div><span>ミ</span><br /><span>ミ</span></div>
+			<div><span>ム</span><br /><span>ム</span></div>
+			<div><span>メ</span><br /><span>メ</span></div>
+			<div><span>モ</span><br /><span>モ</span></div>
+			<div><span>ヤ</span><br /><span>ヤ</span></div>
+			<div><span>ユ</span><br /><span>ユ</span></div>
+			<div><span>ヨ</span><br /><span>ヨ</span></div>
+			<div><span>ラ</span><br /><span>ラ</span></div>
+			<div><span>リ</span><br /><span>リ</span></div>
+			<div><span>ル</span><br /><span>ル</span></div>
+			<div><span>レ</span><br /><span>レ</span></div>
+			<div><span>ロ</span><br /><span>ロ</span></div>
+			<div><span>ワ</span><br /><span>ワ</span></div>
+			<div><span>ン</span><br /><span>ン</span></div>
+
+			<div><span>&nbsp;&#x3099;</span><br /><span>&nbsp;&#x3099;</span></div>
+			<div><span>&nbsp;&#x309A;</span><br /><span>&nbsp;&#x309A;</span></div>
+
+		<!-- HALFWIDTH HANGUL -->
+			<div>[<span>&#x115F;</span>]<br />[<span>&#x115F;</span>]</div>	<!-- HANGUL FILLER -->
+			<div><span>ᆨ</span><br /><span>ᆨ</span></div>				<!-- HANGUL LETTER KIYEOK -->
+			<div><span>ㄲ</span><br /><span>ㄲ</span></div>				<!-- HANGUL LETTER SSANGKIYEOK -->
+			<div><span>ᆪ</span><br /><span>ᆪ</span></div>				<!-- HANGUL LETTER KIYEOK-SIOS -->
+			<div><span>ᆫ</span><br /><span>ᆫ</span></div>				<!-- HANGUL LETTER NIEUN -->
+			<div><span>ᆬ</span><br /><span>ᆬ</span></div>				<!-- HANGUL LETTER NIEUN-CIEUC -->
+			<div><span>ᆭ</span><br /><span>ᆭ</span></div>				<!-- HANGUL LETTER NIEUN-HIEUH -->
+			<div><span>ᆮ</span><br /><span>ᆮ</span></div>				<!-- HANGUL LETTER TIKEUT -->
+			<div><span>ᄄ</span><br /><span>ᄄ</span></div>				<!-- HANGUL LETTER SSANGTIKEUT -->
+			<div><span>ᆯ</span><br /><span>ᆯ</span></div>				<!-- HANGUL LETTER RIEUL -->
+			<div><span>ᆰ</span><br /><span>ᆰ</span></div>				<!-- HANGUL LETTER RIEUL-KIYEOK -->
+			<div><span>ᆱ</span><br /><span>ᆱ</span></div>				<!-- HANGUL LETTER RIEUL-MIEUM -->
+			<div><span>ᆲ</span><br /><span>ᆲ</span></div>				<!-- HANGUL LETTER RIEUL-PIEUP -->
+			<div><span>ᆳ</span><br /><span>ᆳ</span></div>				<!-- HANGUL LETTER RIEUL-SIOS -->
+			<div><span>ᆴ</span><br /><span>ᆴ</span></div>				<!-- HANGUL LETTER RIEUL-THIEUTH -->
+			<div><span>ᆵ</span><br /><span>ᆵ</span></div>				<!-- HANGUL LETTER RIEUL-PHIEUPH -->
+			<div><span>ㅀ</span><br /><span>ㅀ</span></div>				<!-- HANGUL LETTER RIEUL-HIEUH -->
+			<div><span>ᄆ</span><br /><span>ᄆ</span></div>				<!-- HANGUL LETTER MIEUM -->
+			<div><span>ᄇ</span><br /><span>ᄇ</span></div>				<!-- HANGUL LETTER PIEUP -->
+			<div><span>ᄈ</span><br /><span>ᄈ</span></div>				<!-- HANGUL LETTER SSANGPIEUP -->
+			<div><span>ᆹ</span><br /><span>ᆹ</span></div>				<!-- HANGUL LETTER PIEUP-SIOS -->
+			<div><span>ᄉ</span><br /><span>ᄉ</span></div>				<!-- HANGUL LETTER SIOS -->
+			<div><span>ᆻ</span><br /><span>ᆻ</span></div>				<!-- HANGUL LETTER SSANGSIOS -->
+			<div><span>ᄋ</span><br /><span>ᄋ</span></div>				<!-- HANGUL LETTER IEUNG -->
+			<div><span>ᆽ</span><br /><span>ᆽ</span></div>				<!-- HANGUL LETTER CIEUC -->
+			<div><span>ᄍ</span><br /><span>ᄍ</span></div>				<!-- HANGUL LETTER SSANGCIEUC -->
+			<div><span>ᆾ</span><br /><span>ᆾ</span></div>				<!-- HANGUL LETTER CHIEUCH -->
+			<div><span>ᄏ</span><br /><span>ᄏ</span></div>				<!-- HANGUL LETTER KHIEUKH -->
+			<div><span>ᇀ</span><br /><span>ᇀ</span></div>				<!-- HANGUL LETTER THIEUTH -->
+			<div><span>ᄑ</span><br /><span>ᄑ</span></div>				<!-- HANGUL LETTER PHIEUPH -->
+			<div><span>ᇂ</span><br /><span>ᇂ</span></div>				<!-- HANGUL LETTER HIEUH -->
+			<div><span>ᅡ</span><br /><span>ᅡ</span></div>				<!-- HANGUL LETTER A -->
+			<div><span>ᅢ</span><br /><span>ᅢ</span></div>				<!-- HANGUL LETTER AE -->
+			<div><span>ᅣ</span><br /><span>ᅣ</span></div>				<!-- HANGUL LETTER YA -->
+			<div><span>ᅤ</span><br /><span>ᅤ</span></div>				<!-- HANGUL LETTER YAE -->
+			<div><span>ᅥ</span><br /><span>ᅥ</span></div>				<!-- HANGUL LETTER EO -->
+			<div><span>ᅦ</span><br /><span>ᅦ</span></div>				<!-- HANGUL LETTER E -->
+
+			<div><span>ᅧ</span><br /><span>ᅧ</span></div>				<!-- HANGUL LETTER YEO -->
+			<div><span>ᅨ</span><br /><span>ᅨ</span></div>				<!-- HANGUL LETTER YE -->
+			<div><span>ᅩ</span><br /><span>ᅩ</span></div>				<!-- HANGUL LETTER O -->
+			<div><span>ᅪ</span><br /><span>ᅪ</span></div>				<!-- HANGUL LETTER WA -->
+			<div><span>ᅫ</span><br /><span>ᅫ</span></div>				<!-- HANGUL LETTER WAE -->
+			<div><span>ᅬ</span><br /><span>ᅬ</span></div>				<!-- HANGUL LETTER OE -->
+
+			<div><span>ᅭ</span><br /><span>ᅭ</span></div>				<!-- HANGUL LETTER YO -->
+			<div><span>ᅮ</span><br /><span>ᅮ</span></div>				<!-- HANGUL LETTER U -->
+			<div><span>ᅯ</span><br /><span>ᅯ</span></div>				<!-- HANGUL LETTER WEO -->
+			<div><span>ᅰ</span><br /><span>ᅰ</span></div>				<!-- HANGUL LETTER WE -->
+			<div><span>ᅱ</span><br /><span>ᅱ</span></div>				<!-- HANGUL LETTER WI -->
+			<div><span>ᅲ</span><br /><span>ᅲ</span></div>				<!-- HANGUL LETTER YU -->
+
+			<div><span>ᅳ</span><br /><span>ᅳ</span></div>				<!-- HANGUL LETTER EU -->
+			<div><span>ᅴ</span><br /><span>ᅴ</span></div>				<!-- HANGUL LETTER YI -->
+			<div><span>ᅵ</span><br /><span>ᅵ</span></div>				<!-- HANGUL LETTER I -->
+
+		<!-- FULLWIDTH SIGN -->
+			<div><span>￠</span><br /><span>￠</span></div>				<!-- CENT SIGN -->
+			<div><span>￡</span><br /><span>￡</span></div>				<!-- POUND SIGN -->
+			<div><span>￢</span><br /><span>￢</span></div>				<!-- NOT SIGN -->
+			<div><span>￣</span><br /><span>￣</span></div>				<!-- MACRON -->
+			<div><span>￤</span><br /><span>￤</span></div>				<!-- BROKEN BAR -->
+			<div><span>￥</span><br /><span>￥</span></div>				<!-- YEN SIGN -->
+			<div><span>￦</span><br /><span>￦</span></div>				<!-- WON SIGN -->
+
+		<!-- HALFWIDTH SIGN -->
+			<div><span>│</span><br /><span>│</span></div>				<!-- FORMS LIGHT VERTICAL -->
+			<div><span>←</span><br /><span>←</span></div>				<!-- LEFTWARDS ARROW -->
+			<div><span>↑</span><br /><span>↑</span></div>				<!-- UPWARDS ARROW -->
+			<div><span>→</span><br /><span>→</span></div>				<!-- RIGHTWARDS ARROW -->
+			<div><span>↓</span><br /><span>↓</span></div>				<!-- DOWNWARDS ARROW -->
+			<div><span>■</span><br /><span>■</span></div>					<!-- BLACK SQUARE -->
+			<div><span>○</span><br /><span>○</span></div>				<!-- WHITE CIRCLE -->
+
+		<!-- HALFWIDTH LATIN -->
+			<div><span>Ａ</span><br /><span>Ａ</span></div>
+			<div><span>Ｂ</span><br /><span>Ｂ</span></div>
+			<div><span>Ｃ</span><br /><span>Ｃ</span></div>
+
+			<div><span>ａ</span><br /><span>ａ</span></div>
+			<div><span>ｂ</span><br /><span>ｂ</span></div>
+			<div><span>ｃ</span><br /><span>ｃ</span></div>
+
+		<!-- FULLWIDTH KANA -->
+			<div><span>あ</span><br /><span>あ</span></div>
+			<div><span>い</span><br /><span>い</span></div>
+			<div><span>う</span><br /><span>う</span></div>
+			<div><span>え</span><br /><span>え</span></div>
+			<div><span>お</span><br /><span>お</span></div>
+
+			<div><span>ア</span><br /><span>ア</span></div>
+			<div><span>イ</span><br /><span>イ</span></div>
+			<div><span>ウ</span><br /><span>ウ</span></div>
+			<div><span>エ</span><br /><span>エ</span></div>
+			<div><span>オ</span><br /><span>オ</span></div>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-006-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-006-ref.html
new file mode 100644
index 0000000000..3d2f9c7be2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-006-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE 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 are two green squares and no red.
+<div>x&#x3000;x</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-007-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-007-ref.html
new file mode 100644
index 0000000000..b8fc5662bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-007-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE 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 are two green squares and no red.
+<div>x&#x3000;&#x3000;&#x3000;x</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-008-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-008-ref.html
new file mode 100644
index 0000000000..efe6508e2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-008-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE 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: 20px/1 Ahem;
+  margin: 1em 0;
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if all black boxes below have the same width and height and are aligned vertically.
+<div> x<br> x</div>
+<div> x<br> x</div>
+<div> x<br> x</div>
+<div> x<br> x</div>
+<div> x<br> x</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-009-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-009-ref.html
new file mode 100644
index 0000000000..915e8444f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-fullwidth-009-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE 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: 10px/1 Ahem;
+  margin: 1em 0;
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if all black boxes below have the same width and height and are aligned vertically.
+<div> x<br> x</div>
+<div> x<br> x</div>
+<div> x<br> x</div>
+<div> x<br> x</div>
+<div> x<br> x</div>
+<div> x<br> x</div>
+<div> x<br> x</div>
+<div> x<br> x</div>
+<div> x<br> x</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-lowercase-101-ref.xht b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-lowercase-101-ref.xht
new file mode 100644
index 0000000000..3d6eb4af8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-lowercase-101-ref.xht
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-transform - lowercase - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first sentence matches the second one.
+		</p>
+		<div>
+			<span>all characters should be put in lowercase.</span>
+		</div>
+		<div>
+			<span>all characters should be put in lowercase.</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-multiple-001-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-multiple-001-ref.html
new file mode 100644
index 0000000000..694ae87877
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-multiple-001-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="ja">
+<meta charset=utf-8>
+<title>text-transform with multiple values</title>
+<body style="font-family:serif">
+<h4>Each pair of lines should look identical:</h4>
+<hr>
+<div>ＨＥＬＬＯ　ＴＲＡＮＳＦＯＲＭＥＤ　ＷＯＲＬＤ</div>
+<div>ＨＥＬＬＯ　ＴＲＡＮＳＦＯＲＭＥＤ　ＷＯＲＬＤ</div>
+<hr>
+<div>ｈｅｌｌｏ　ｔｒａｎｓｆｏｒｍｅｄ　ｗｏｒｌｄ</div>
+<div>ｈｅｌｌｏ　ｔｒａｎｓｆｏｒｍｅｄ　ｗｏｒｌｄ</div>
+<hr>
+<div>ＨＥＬＬＯ　Ｔｒａｎｓｆｏｒｍｅｄ　Ｗｏｒｌｄ</div>
+<div>ＨＥＬＬＯ　Ｔｒａｎｓｆｏｒｍｅｄ　Ｗｏｒｌｄ</div>
+<hr>
+<div>KATAKANA: アイウエオカクケシスツトヌ</div>
+<div>KATAKANA: アイウエオカクケシスツトヌ</div>
+<hr>
+<div>ｈｉｒａｇａｎａ：　あいうえおかけつやゆよわ</div>
+<div>ｈｉｒａｇａｎａ：　あいうえおかけつやゆよわ</div>
+<hr>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-none-001-ref.xht b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-none-001-ref.xht
new file mode 100644
index 0000000000..8f822c62df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-none-001-ref.xht
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-transform - none - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first sentence matches the second one.
+		</p>
+		<div>
+			<span>All words should have no effects.</span>
+		</div>
+		<div>
+			<span>All words should have no effects.</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-shaping-001-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-shaping-001-ref.html
new file mode 100644
index 0000000000..693007e896
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-shaping-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+  div { font-size: 4em; }
+  body {
+    max-width: 600px;
+    max-width: max-content;
+  }
+</style>
+
+<p>Test passes if there are two identical strings below. Pay attention to the right-most character.
+<div dir=rtl lang=ar>عائلة</div>
+<div dir=rtl lang=ar>عائلة</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-001-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-001-ref.html
new file mode 100644
index 0000000000..6fe91c7828
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Dutch IJ</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="nl">IJsland</div>
+<div class="ref">IJsland</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-002-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-002-ref.html
new file mode 100644
index 0000000000..5259caa770
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-002-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: uppercase, Greek tonos</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="el">ΚΑΛΗΜΕΡΑ ΑΥΡΙΟ</div>
+<div class="ref">ΚΑΛΗΜΕΡΑ ΑΥΡΙΟ</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-002a-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-002a-ref.html
new file mode 100644
index 0000000000..2108495c94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-002a-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: uppercase, Greek dialytika</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="el">ΘΕΪΚΟ</div>
+<div class="ref">ΘΕΪΚΟ</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-003-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-003-ref.html
new file mode 100644
index 0000000000..818d5006f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-003-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: uppercase, more Greek accents</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="el">ΕΥΦΥΪΑ ΝΕΡΑΪΔΑ</div>
+<div class="ref">ΕΥΦΥΪΑ ΝΕΡΑΪΔΑ</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-004-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-004-ref.html
new file mode 100644
index 0000000000..3047f66b13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-004-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Greek initial stress</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="el">Όμηρος</div>
+<div class="ref">Όμηρος</div>
+<!-- Notes:
+The result of this test should be ignored if text-transform-tailoring-002 fails.
+-->
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-005-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-005-ref.html
new file mode 100644
index 0000000000..66ce847e30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-tailoring-005-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: uppercase, Greek disjunctive eta</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 400px;  padding: 5px; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="el">ΗΣΟΥΝ Ή ΕΓΩ Ή ΕΣΥ</div>
+<div class="ref">ΗΣΟΥΝ Ή ΕΓΩ Ή ΕΣΥ</div>
+<!-- Notes:
+The result of this test should be ignored if text-transform-tailoring-002 fails.
+-->
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-uppercase-101-ref.xht b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-uppercase-101-ref.xht
new file mode 100644
index 0000000000..e80ca4ed7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-uppercase-101-ref.xht
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-transform - uppercase - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first sentence matches the second one.
+		</p>
+		<div>
+			<span>ALL CHARACTERS SHOULD BE PUT IN UPPERCASE.</span>
+		</div>
+		<div>
+			<span>ALL CHARACTERS SHOULD BE PUT IN UPPERCASE.</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-uppercase-dynamic-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-uppercase-dynamic-ref.html
new file mode 100644
index 0000000000..1fede4447d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-uppercase-dynamic-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+.test { text-transform: uppercase; }
+</style>
+<div class="test" lang="my">
+  <span id="sp">i̇̃ Ĩ</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-001-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-001-ref.html
new file mode 100644
index 0000000000..1c5fa0a981
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Basic and Latin-1 uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>A A</span> <span>B B</span> <span>C C</span> <span>D D</span> <span>E E</span> <span>F F</span> <span>G G</span> <span>H H</span> <span>I I</span> <span>J J</span> <span>K K</span> <span>L L</span> <span>M M</span> <span>N N</span> <span>O O</span> <span>P P</span> <span>Q Q</span> <span>R R</span> <span>S S</span> <span>T T</span> <span>U U</span> <span>V V</span> <span>W W</span> <span>X X</span> <span>Y Y</span> <span>Z Z</span> <span title="U+00B5">&#x039C; &#x039C;</span> <span title="U+00E0">&#x00C0; &#x00C0;</span> <span title="U+00E1">&#x00C1; &#x00C1;</span> <span title="U+00E2">&#x00C2; &#x00C2;</span> <span title="U+00E3">&#x00C3; &#x00C3;</span> <span title="U+00E4">&#x00C4; &#x00C4;</span> <span title="U+00E5">&#x00C5; &#x00C5;</span> <span title="U+00E6">&#x00C6; &#x00C6;</span> <span title="U+00E7">&#x00C7; &#x00C7;</span> <span title="U+00E8">&#x00C8; &#x00C8;</span> <span title="U+00E9">&#x00C9; &#x00C9;</span> <span title="U+00EA">&#x00CA; &#x00CA;</span> <span title="U+00EB">&#x00CB; &#x00CB;</span> <span title="U+00EC">&#x00CC; &#x00CC;</span> <span title="U+00ED">&#x00CD; &#x00CD;</span> <span title="U+00EE">&#x00CE; &#x00CE;</span> <span title="U+00EF">&#x00CF; &#x00CF;</span> <span title="U+00F0">&#x00D0; &#x00D0;</span> <span title="U+00F1">&#x00D1; &#x00D1;</span> <span title="U+00F2">&#x00D2; &#x00D2;</span> <span title="U+00F3">&#x00D3; &#x00D3;</span> <span title="U+00F4">&#x00D4; &#x00D4;</span> <span title="U+00F5">&#x00D5; &#x00D5;</span> <span title="U+00F6">&#x00D6; &#x00D6;</span> <span title="U+00F8">&#x00D8; &#x00D8;</span> <span title="U+00F9">&#x00D9; &#x00D9;</span> <span title="U+00FA">&#x00DA; &#x00DA;</span> <span title="U+00FB">&#x00DB; &#x00DB;</span> <span title="U+00FC">&#x00DC; &#x00DC;</span> <span title="U+00FD">&#x00DD; &#x00DD;</span> <span title="U+00FE">&#x00DE; &#x00DE;</span> <span title="U+00FF">&#x0178; &#x0178;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-002-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-002-ref.html
new file mode 100644
index 0000000000..8418d39731
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-002-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Basic and Latin-1 lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>a a</span> <span>b b</span> <span>c c</span> <span>d d</span> <span>e e</span> <span>f f</span> <span>g g</span> <span>h h</span> <span>i i</span> <span>j j</span> <span>k k</span> <span>l l</span> <span>m m</span> <span>n n</span> <span>o o</span> <span>p p</span> <span>q q</span> <span>r r</span> <span>s s</span> <span>t t</span> <span>u u</span> <span>v v</span> <span>w w</span> <span>x x</span> <span>y y</span> <span>z z</span> <span title="U+00C0">&#x00E0; &#x00E0;</span> <span title="U+00C1">&#x00E1; &#x00E1;</span> <span title="U+00C2">&#x00E2; &#x00E2;</span> <span title="U+00C3">&#x00E3; &#x00E3;</span> <span title="U+00C4">&#x00E4; &#x00E4;</span> <span title="U+00C5">&#x00E5; &#x00E5;</span> <span title="U+00C6">&#x00E6; &#x00E6;</span> <span title="U+00C7">&#x00E7; &#x00E7;</span> <span title="U+00C8">&#x00E8; &#x00E8;</span> <span title="U+00C9">&#x00E9; &#x00E9;</span> <span title="U+00CA">&#x00EA; &#x00EA;</span> <span title="U+00CB">&#x00EB; &#x00EB;</span> <span title="U+00CC">&#x00EC; &#x00EC;</span> <span title="U+00CD">&#x00ED; &#x00ED;</span> <span title="U+00CE">&#x00EE; &#x00EE;</span> <span title="U+00CF">&#x00EF; &#x00EF;</span> <span title="U+00D0">&#x00F0; &#x00F0;</span> <span title="U+00D1">&#x00F1; &#x00F1;</span> <span title="U+00D2">&#x00F2; &#x00F2;</span> <span title="U+00D3">&#x00F3; &#x00F3;</span> <span title="U+00D4">&#x00F4; &#x00F4;</span> <span title="U+00D5">&#x00F5; &#x00F5;</span> <span title="U+00D6">&#x00F6; &#x00F6;</span> <span title="U+00D8">&#x00F8; &#x00F8;</span> <span title="U+00D9">&#x00F9; &#x00F9;</span> <span title="U+00DA">&#x00FA; &#x00FA;</span> <span title="U+00DB">&#x00FB; &#x00FB;</span> <span title="U+00DC">&#x00FC; &#x00FC;</span> <span title="U+00DD">&#x00FD; &#x00FD;</span> <span title="U+00DE">&#x00FE; &#x00FE;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-003-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-003-ref.html
new file mode 100644
index 0000000000..9793a95dd3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-003-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended Additional, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1E01">&#x1E00; &#x1E00;</span> <span title="U+1E03">&#x1E02; &#x1E02;</span> <span title="U+1E05">&#x1E04; &#x1E04;</span> <span title="U+1E07">&#x1E06; &#x1E06;</span> <span title="U+1E09">&#x1E08; &#x1E08;</span> <span title="U+1E0B">&#x1E0A; &#x1E0A;</span> <span title="U+1E0D">&#x1E0C; &#x1E0C;</span> <span title="U+1E0F">&#x1E0E; &#x1E0E;</span> <span title="U+1E11">&#x1E10; &#x1E10;</span> <span title="U+1E13">&#x1E12; &#x1E12;</span> <span title="U+1E15">&#x1E14; &#x1E14;</span> <span title="U+1E17">&#x1E16; &#x1E16;</span> <span title="U+1E19">&#x1E18; &#x1E18;</span> <span title="U+1E1B">&#x1E1A; &#x1E1A;</span> <span title="U+1E1D">&#x1E1C; &#x1E1C;</span> <span title="U+1E1F">&#x1E1E; &#x1E1E;</span> <span title="U+1E21">&#x1E20; &#x1E20;</span> <span title="U+1E23">&#x1E22; &#x1E22;</span> <span title="U+1E25">&#x1E24; &#x1E24;</span> <span title="U+1E27">&#x1E26; &#x1E26;</span> <span title="U+1E29">&#x1E28; &#x1E28;</span> <span title="U+1E2B">&#x1E2A; &#x1E2A;</span> <span title="U+1E2D">&#x1E2C; &#x1E2C;</span> <span title="U+1E2F">&#x1E2E; &#x1E2E;</span> <span title="U+1E31">&#x1E30; &#x1E30;</span> <span title="U+1E33">&#x1E32; &#x1E32;</span> <span title="U+1E35">&#x1E34; &#x1E34;</span> <span title="U+1E37">&#x1E36; &#x1E36;</span> <span title="U+1E39">&#x1E38; &#x1E38;</span> <span title="U+1E3B">&#x1E3A; &#x1E3A;</span> <span title="U+1E3D">&#x1E3C; &#x1E3C;</span> <span title="U+1E3F">&#x1E3E; &#x1E3E;</span> <span title="U+1E41">&#x1E40; &#x1E40;</span> <span title="U+1E43">&#x1E42; &#x1E42;</span> <span title="U+1E45">&#x1E44; &#x1E44;</span> <span title="U+1E47">&#x1E46; &#x1E46;</span> <span title="U+1E49">&#x1E48; &#x1E48;</span> <span title="U+1E4B">&#x1E4A; &#x1E4A;</span> <span title="U+1E4D">&#x1E4C; &#x1E4C;</span> <span title="U+1E4F">&#x1E4E; &#x1E4E;</span> <span title="U+1E51">&#x1E50; &#x1E50;</span> <span title="U+1E53">&#x1E52; &#x1E52;</span> <span title="U+1E55">&#x1E54; &#x1E54;</span> <span title="U+1E57">&#x1E56; &#x1E56;</span> <span title="U+1E59">&#x1E58; &#x1E58;</span> <span title="U+1E5B">&#x1E5A; &#x1E5A;</span> <span title="U+1E5D">&#x1E5C; &#x1E5C;</span> <span title="U+1E5F">&#x1E5E; &#x1E5E;</span> <span title="U+1E61">&#x1E60; &#x1E60;</span> <span title="U+1E63">&#x1E62; &#x1E62;</span> <span title="U+1E65">&#x1E64; &#x1E64;</span> <span title="U+1E67">&#x1E66; &#x1E66;</span> <span title="U+1E69">&#x1E68; &#x1E68;</span> <span title="U+1E6B">&#x1E6A; &#x1E6A;</span> <span title="U+1E6D">&#x1E6C; &#x1E6C;</span> <span title="U+1E6F">&#x1E6E; &#x1E6E;</span> <span title="U+1E71">&#x1E70; &#x1E70;</span> <span title="U+1E73">&#x1E72; &#x1E72;</span> <span title="U+1E75">&#x1E74; &#x1E74;</span> <span title="U+1E77">&#x1E76; &#x1E76;</span> <span title="U+1E79">&#x1E78; &#x1E78;</span> <span title="U+1E7B">&#x1E7A; &#x1E7A;</span> <span title="U+1E7D">&#x1E7C; &#x1E7C;</span> <span title="U+1E7F">&#x1E7E; &#x1E7E;</span> <span title="U+1E81">&#x1E80; &#x1E80;</span> <span title="U+1E83">&#x1E82; &#x1E82;</span> <span title="U+1E85">&#x1E84; &#x1E84;</span> <span title="U+1E87">&#x1E86; &#x1E86;</span> <span title="U+1E89">&#x1E88; &#x1E88;</span> <span title="U+1E8B">&#x1E8A; &#x1E8A;</span> <span title="U+1E8D">&#x1E8C; &#x1E8C;</span> <span title="U+1E8F">&#x1E8E; &#x1E8E;</span> <span title="U+1E91">&#x1E90; &#x1E90;</span> <span title="U+1E93">&#x1E92; &#x1E92;</span> <span title="U+1E95">&#x1E94; &#x1E94;</span> <span title="U+1E9B">&#x1E60; &#x1E60;</span> <span title="U+1EA1">&#x1EA0; &#x1EA0;</span> <span title="U+1EA3">&#x1EA2; &#x1EA2;</span> <span title="U+1EA5">&#x1EA4; &#x1EA4;</span> <span title="U+1EA7">&#x1EA6; &#x1EA6;</span> <span title="U+1EA9">&#x1EA8; &#x1EA8;</span> <span title="U+1EAB">&#x1EAA; &#x1EAA;</span> <span title="U+1EAD">&#x1EAC; &#x1EAC;</span> <span title="U+1EAF">&#x1EAE; &#x1EAE;</span> <span title="U+1EB1">&#x1EB0; &#x1EB0;</span> <span title="U+1EB3">&#x1EB2; &#x1EB2;</span> <span title="U+1EB5">&#x1EB4; &#x1EB4;</span> <span title="U+1EB7">&#x1EB6; &#x1EB6;</span> <span title="U+1EB9">&#x1EB8; &#x1EB8;</span> <span title="U+1EBB">&#x1EBA; &#x1EBA;</span> <span title="U+1EBD">&#x1EBC; &#x1EBC;</span> <span title="U+1EBF">&#x1EBE; &#x1EBE;</span> <span title="U+1EC1">&#x1EC0; &#x1EC0;</span> <span title="U+1EC3">&#x1EC2; &#x1EC2;</span> <span title="U+1EC5">&#x1EC4; &#x1EC4;</span> <span title="U+1EC7">&#x1EC6; &#x1EC6;</span> <span title="U+1EC9">&#x1EC8; &#x1EC8;</span> <span title="U+1ECB">&#x1ECA; &#x1ECA;</span> <span title="U+1ECD">&#x1ECC; &#x1ECC;</span> <span title="U+1ECF">&#x1ECE; &#x1ECE;</span> <span title="U+1ED1">&#x1ED0; &#x1ED0;</span> <span title="U+1ED3">&#x1ED2; &#x1ED2;</span> <span title="U+1ED5">&#x1ED4; &#x1ED4;</span> <span title="U+1ED7">&#x1ED6; &#x1ED6;</span> <span title="U+1ED9">&#x1ED8; &#x1ED8;</span> <span title="U+1EDB">&#x1EDA; &#x1EDA;</span> <span title="U+1EDD">&#x1EDC; &#x1EDC;</span> <span title="U+1EDF">&#x1EDE; &#x1EDE;</span> <span title="U+1EE1">&#x1EE0; &#x1EE0;</span> <span title="U+1EE3">&#x1EE2; &#x1EE2;</span> <span title="U+1EE5">&#x1EE4; &#x1EE4;</span> <span title="U+1EE7">&#x1EE6; &#x1EE6;</span> <span title="U+1EE9">&#x1EE8; &#x1EE8;</span> <span title="U+1EEB">&#x1EEA; &#x1EEA;</span> <span title="U+1EED">&#x1EEC; &#x1EEC;</span> <span title="U+1EEF">&#x1EEE; &#x1EEE;</span> <span title="U+1EF1">&#x1EF0; &#x1EF0;</span> <span title="U+1EF3">&#x1EF2; &#x1EF2;</span> <span title="U+1EF5">&#x1EF4; &#x1EF4;</span> <span title="U+1EF7">&#x1EF6; &#x1EF6;</span> <span title="U+1EF9">&#x1EF8; &#x1EF8;</span> <span title="U+1EFB">&#x1EFA; &#x1EFA;</span> <span title="U+1EFD">&#x1EFC; &#x1EFC;</span> <span title="U+1EFF">&#x1EFE; &#x1EFE;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x1E96; &#x1E97; &#x1E98; &#x1E99; &#x1E9A; &#x1E9C; &#x1E9D; &#x1E9F;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-004-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-004-ref.html
new file mode 100644
index 0000000000..dae2e050ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-004-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended Additional, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1E00">&#x1E01; &#x1E01;</span> <span title="U+1E02">&#x1E03; &#x1E03;</span> <span title="U+1E04">&#x1E05; &#x1E05;</span> <span title="U+1E06">&#x1E07; &#x1E07;</span> <span title="U+1E08">&#x1E09; &#x1E09;</span> <span title="U+1E0A">&#x1E0B; &#x1E0B;</span> <span title="U+1E0C">&#x1E0D; &#x1E0D;</span> <span title="U+1E0E">&#x1E0F; &#x1E0F;</span> <span title="U+1E10">&#x1E11; &#x1E11;</span> <span title="U+1E12">&#x1E13; &#x1E13;</span> <span title="U+1E14">&#x1E15; &#x1E15;</span> <span title="U+1E16">&#x1E17; &#x1E17;</span> <span title="U+1E18">&#x1E19; &#x1E19;</span> <span title="U+1E1A">&#x1E1B; &#x1E1B;</span> <span title="U+1E1C">&#x1E1D; &#x1E1D;</span> <span title="U+1E1E">&#x1E1F; &#x1E1F;</span> <span title="U+1E20">&#x1E21; &#x1E21;</span> <span title="U+1E22">&#x1E23; &#x1E23;</span> <span title="U+1E24">&#x1E25; &#x1E25;</span> <span title="U+1E26">&#x1E27; &#x1E27;</span> <span title="U+1E28">&#x1E29; &#x1E29;</span> <span title="U+1E2A">&#x1E2B; &#x1E2B;</span> <span title="U+1E2C">&#x1E2D; &#x1E2D;</span> <span title="U+1E2E">&#x1E2F; &#x1E2F;</span> <span title="U+1E30">&#x1E31; &#x1E31;</span> <span title="U+1E32">&#x1E33; &#x1E33;</span> <span title="U+1E34">&#x1E35; &#x1E35;</span> <span title="U+1E36">&#x1E37; &#x1E37;</span> <span title="U+1E38">&#x1E39; &#x1E39;</span> <span title="U+1E3A">&#x1E3B; &#x1E3B;</span> <span title="U+1E3C">&#x1E3D; &#x1E3D;</span> <span title="U+1E3E">&#x1E3F; &#x1E3F;</span> <span title="U+1E40">&#x1E41; &#x1E41;</span> <span title="U+1E42">&#x1E43; &#x1E43;</span> <span title="U+1E44">&#x1E45; &#x1E45;</span> <span title="U+1E46">&#x1E47; &#x1E47;</span> <span title="U+1E48">&#x1E49; &#x1E49;</span> <span title="U+1E4A">&#x1E4B; &#x1E4B;</span> <span title="U+1E4C">&#x1E4D; &#x1E4D;</span> <span title="U+1E4E">&#x1E4F; &#x1E4F;</span> <span title="U+1E50">&#x1E51; &#x1E51;</span> <span title="U+1E52">&#x1E53; &#x1E53;</span> <span title="U+1E54">&#x1E55; &#x1E55;</span> <span title="U+1E56">&#x1E57; &#x1E57;</span> <span title="U+1E58">&#x1E59; &#x1E59;</span> <span title="U+1E5A">&#x1E5B; &#x1E5B;</span> <span title="U+1E5C">&#x1E5D; &#x1E5D;</span> <span title="U+1E5E">&#x1E5F; &#x1E5F;</span> <span title="U+1E60">&#x1E61; &#x1E61;</span> <span title="U+1E62">&#x1E63; &#x1E63;</span> <span title="U+1E64">&#x1E65; &#x1E65;</span> <span title="U+1E66">&#x1E67; &#x1E67;</span> <span title="U+1E68">&#x1E69; &#x1E69;</span> <span title="U+1E6A">&#x1E6B; &#x1E6B;</span> <span title="U+1E6C">&#x1E6D; &#x1E6D;</span> <span title="U+1E6E">&#x1E6F; &#x1E6F;</span> <span title="U+1E70">&#x1E71; &#x1E71;</span> <span title="U+1E72">&#x1E73; &#x1E73;</span> <span title="U+1E74">&#x1E75; &#x1E75;</span> <span title="U+1E76">&#x1E77; &#x1E77;</span> <span title="U+1E78">&#x1E79; &#x1E79;</span> <span title="U+1E7A">&#x1E7B; &#x1E7B;</span> <span title="U+1E7C">&#x1E7D; &#x1E7D;</span> <span title="U+1E7E">&#x1E7F; &#x1E7F;</span> <span title="U+1E80">&#x1E81; &#x1E81;</span> <span title="U+1E82">&#x1E83; &#x1E83;</span> <span title="U+1E84">&#x1E85; &#x1E85;</span> <span title="U+1E86">&#x1E87; &#x1E87;</span> <span title="U+1E88">&#x1E89; &#x1E89;</span> <span title="U+1E8A">&#x1E8B; &#x1E8B;</span> <span title="U+1E8C">&#x1E8D; &#x1E8D;</span> <span title="U+1E8E">&#x1E8F; &#x1E8F;</span> <span title="U+1E90">&#x1E91; &#x1E91;</span> <span title="U+1E92">&#x1E93; &#x1E93;</span> <span title="U+1E94">&#x1E95; &#x1E95;</span> <span title="U+1E9E">&#x00DF; &#x00DF;</span> <span title="U+1EA0">&#x1EA1; &#x1EA1;</span> <span title="U+1EA2">&#x1EA3; &#x1EA3;</span> <span title="U+1EA4">&#x1EA5; &#x1EA5;</span> <span title="U+1EA6">&#x1EA7; &#x1EA7;</span> <span title="U+1EA8">&#x1EA9; &#x1EA9;</span> <span title="U+1EAA">&#x1EAB; &#x1EAB;</span> <span title="U+1EAC">&#x1EAD; &#x1EAD;</span> <span title="U+1EAE">&#x1EAF; &#x1EAF;</span> <span title="U+1EB0">&#x1EB1; &#x1EB1;</span> <span title="U+1EB2">&#x1EB3; &#x1EB3;</span> <span title="U+1EB4">&#x1EB5; &#x1EB5;</span> <span title="U+1EB6">&#x1EB7; &#x1EB7;</span> <span title="U+1EB8">&#x1EB9; &#x1EB9;</span> <span title="U+1EBA">&#x1EBB; &#x1EBB;</span> <span title="U+1EBC">&#x1EBD; &#x1EBD;</span> <span title="U+1EBE">&#x1EBF; &#x1EBF;</span> <span title="U+1EC0">&#x1EC1; &#x1EC1;</span> <span title="U+1EC2">&#x1EC3; &#x1EC3;</span> <span title="U+1EC4">&#x1EC5; &#x1EC5;</span> <span title="U+1EC6">&#x1EC7; &#x1EC7;</span> <span title="U+1EC8">&#x1EC9; &#x1EC9;</span> <span title="U+1ECA">&#x1ECB; &#x1ECB;</span> <span title="U+1ECC">&#x1ECD; &#x1ECD;</span> <span title="U+1ECE">&#x1ECF; &#x1ECF;</span> <span title="U+1ED0">&#x1ED1; &#x1ED1;</span> <span title="U+1ED2">&#x1ED3; &#x1ED3;</span> <span title="U+1ED4">&#x1ED5; &#x1ED5;</span> <span title="U+1ED6">&#x1ED7; &#x1ED7;</span> <span title="U+1ED8">&#x1ED9; &#x1ED9;</span> <span title="U+1EDA">&#x1EDB; &#x1EDB;</span> <span title="U+1EDC">&#x1EDD; &#x1EDD;</span> <span title="U+1EDE">&#x1EDF; &#x1EDF;</span> <span title="U+1EE0">&#x1EE1; &#x1EE1;</span> <span title="U+1EE2">&#x1EE3; &#x1EE3;</span> <span title="U+1EE4">&#x1EE5; &#x1EE5;</span> <span title="U+1EE6">&#x1EE7; &#x1EE7;</span> <span title="U+1EE8">&#x1EE9; &#x1EE9;</span> <span title="U+1EEA">&#x1EEB; &#x1EEB;</span> <span title="U+1EEC">&#x1EED; &#x1EED;</span> <span title="U+1EEE">&#x1EEF; &#x1EEF;</span> <span title="U+1EF0">&#x1EF1; &#x1EF1;</span> <span title="U+1EF2">&#x1EF3; &#x1EF3;</span> <span title="U+1EF4">&#x1EF5; &#x1EF5;</span> <span title="U+1EF6">&#x1EF7; &#x1EF7;</span> <span title="U+1EF8">&#x1EF9; &#x1EF9;</span> <span title="U+1EFA">&#x1EFB; &#x1EFB;</span> <span title="U+1EFC">&#x1EFD; &#x1EFD;</span> <span title="U+1EFE">&#x1EFF; &#x1EFF;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x1E96; &#x1E97; &#x1E98; &#x1E99; &#x1E9A; &#x1E9C; &#x1E9D; &#x1E9F;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-005-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-005-ref.html
new file mode 100644
index 0000000000..9ce44d1e55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-005-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-A, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0101">&#x0100; &#x0100;</span> <span title="U+0103">&#x0102; &#x0102;</span> <span title="U+0105">&#x0104; &#x0104;</span> <span title="U+0107">&#x0106; &#x0106;</span> <span title="U+0109">&#x0108; &#x0108;</span> <span title="U+010B">&#x010A; &#x010A;</span> <span title="U+010D">&#x010C; &#x010C;</span> <span title="U+010F">&#x010E; &#x010E;</span> <span title="U+0111">&#x0110; &#x0110;</span> <span title="U+0113">&#x0112; &#x0112;</span> <span title="U+0115">&#x0114; &#x0114;</span> <span title="U+0117">&#x0116; &#x0116;</span> <span title="U+0119">&#x0118; &#x0118;</span> <span title="U+011B">&#x011A; &#x011A;</span> <span title="U+011D">&#x011C; &#x011C;</span> <span title="U+011F">&#x011E; &#x011E;</span> <span title="U+0121">&#x0120; &#x0120;</span> <span title="U+0123">&#x0122; &#x0122;</span> <span title="U+0125">&#x0124; &#x0124;</span> <span title="U+0127">&#x0126; &#x0126;</span> <span title="U+0129">&#x0128; &#x0128;</span> <span title="U+012B">&#x012A; &#x012A;</span> <span title="U+012D">&#x012C; &#x012C;</span> <span title="U+012F">&#x012E; &#x012E;</span> <span title="U+0131">&#x0049; &#x0049;</span> <span title="U+0133">&#x0132; &#x0132;</span> <span title="U+0135">&#x0134; &#x0134;</span> <span title="U+0137">&#x0136; &#x0136;</span> <span title="U+013A">&#x0139; &#x0139;</span> <span title="U+013C">&#x013B; &#x013B;</span> <span title="U+013E">&#x013D; &#x013D;</span> <span title="U+0140">&#x013F; &#x013F;</span> <span title="U+0142">&#x0141; &#x0141;</span> <span title="U+0144">&#x0143; &#x0143;</span> <span title="U+0146">&#x0145; &#x0145;</span> <span title="U+0148">&#x0147; &#x0147;</span> <span title="U+014B">&#x014A; &#x014A;</span> <span title="U+014D">&#x014C; &#x014C;</span> <span title="U+014F">&#x014E; &#x014E;</span> <span title="U+0151">&#x0150; &#x0150;</span> <span title="U+0153">&#x0152; &#x0152;</span> <span title="U+0155">&#x0154; &#x0154;</span> <span title="U+0157">&#x0156; &#x0156;</span> <span title="U+0159">&#x0158; &#x0158;</span> <span title="U+015B">&#x015A; &#x015A;</span> <span title="U+015D">&#x015C; &#x015C;</span> <span title="U+015F">&#x015E; &#x015E;</span> <span title="U+0161">&#x0160; &#x0160;</span> <span title="U+0163">&#x0162; &#x0162;</span> <span title="U+0165">&#x0164; &#x0164;</span> <span title="U+0167">&#x0166; &#x0166;</span> <span title="U+0169">&#x0168; &#x0168;</span> <span title="U+016B">&#x016A; &#x016A;</span> <span title="U+016D">&#x016C; &#x016C;</span> <span title="U+016F">&#x016E; &#x016E;</span> <span title="U+0171">&#x0170; &#x0170;</span> <span title="U+0173">&#x0172; &#x0172;</span> <span title="U+0175">&#x0174; &#x0174;</span> <span title="U+0177">&#x0176; &#x0176;</span> <span title="U+017A">&#x0179; &#x0179;</span> <span title="U+017C">&#x017B; &#x017B;</span> <span title="U+017E">&#x017D; &#x017D;</span> <span title="U+017F">&#x0053; &#x0053;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0130;, &#x0138;, &#x0149;, &#x0178;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-006-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-006-ref.html
new file mode 100644
index 0000000000..61c4d240cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-006-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-A, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0100">&#x0101; &#x0101;</span> <span title="U+0102">&#x0103; &#x0103;</span> <span title="U+0104">&#x0105; &#x0105;</span> <span title="U+0106">&#x0107; &#x0107;</span> <span title="U+0108">&#x0109; &#x0109;</span> <span title="U+010A">&#x010B; &#x010B;</span> <span title="U+010C">&#x010D; &#x010D;</span> <span title="U+010E">&#x010F; &#x010F;</span> <span title="U+0110">&#x0111; &#x0111;</span> <span title="U+0112">&#x0113; &#x0113;</span> <span title="U+0114">&#x0115; &#x0115;</span> <span title="U+0116">&#x0117; &#x0117;</span> <span title="U+0118">&#x0119; &#x0119;</span> <span title="U+011A">&#x011B; &#x011B;</span> <span title="U+011C">&#x011D; &#x011D;</span> <span title="U+011E">&#x011F; &#x011F;</span> <span title="U+0120">&#x0121; &#x0121;</span> <span title="U+0122">&#x0123; &#x0123;</span> <span title="U+0124">&#x0125; &#x0125;</span> <span title="U+0126">&#x0127; &#x0127;</span> <span title="U+0128">&#x0129; &#x0129;</span> <span title="U+012A">&#x012B; &#x012B;</span> <span title="U+012C">&#x012D; &#x012D;</span> <span title="U+012E">&#x012F; &#x012F;</span> <span title="U+0130">&#x0069; &#x0069;</span> <span title="U+0132">&#x0133; &#x0133;</span> <span title="U+0134">&#x0135; &#x0135;</span> <span title="U+0136">&#x0137; &#x0137;</span> <span title="U+0139">&#x013A; &#x013A;</span> <span title="U+013B">&#x013C; &#x013C;</span> <span title="U+013D">&#x013E; &#x013E;</span> <span title="U+013F">&#x0140; &#x0140;</span> <span title="U+0141">&#x0142; &#x0142;</span> <span title="U+0143">&#x0144; &#x0144;</span> <span title="U+0145">&#x0146; &#x0146;</span> <span title="U+0147">&#x0148; &#x0148;</span> <span title="U+014A">&#x014B; &#x014B;</span> <span title="U+014C">&#x014D; &#x014D;</span> <span title="U+014E">&#x014F; &#x014F;</span> <span title="U+0150">&#x0151; &#x0151;</span> <span title="U+0152">&#x0153; &#x0153;</span> <span title="U+0154">&#x0155; &#x0155;</span> <span title="U+0156">&#x0157; &#x0157;</span> <span title="U+0158">&#x0159; &#x0159;</span> <span title="U+015A">&#x015B; &#x015B;</span> <span title="U+015C">&#x015D; &#x015D;</span> <span title="U+015E">&#x015F; &#x015F;</span> <span title="U+0160">&#x0161; &#x0161;</span> <span title="U+0162">&#x0163; &#x0163;</span> <span title="U+0164">&#x0165; &#x0165;</span> <span title="U+0166">&#x0167; &#x0167;</span> <span title="U+0168">&#x0169; &#x0169;</span> <span title="U+016A">&#x016B; &#x016B;</span> <span title="U+016C">&#x016D; &#x016D;</span> <span title="U+016E">&#x016F; &#x016F;</span> <span title="U+0170">&#x0171; &#x0171;</span> <span title="U+0172">&#x0173; &#x0173;</span> <span title="U+0174">&#x0175; &#x0175;</span> <span title="U+0176">&#x0177; &#x0177;</span> <span title="U+0178">&#x00FF; &#x00FF;</span> <span title="U+0179">&#x017A; &#x017A;</span> <span title="U+017B">&#x017C; &#x017C;</span> <span title="U+017D">&#x017E; &#x017E;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0131;, &#x0138;, &#x0149;, &#x017F;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-007-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-007-ref.html
new file mode 100644
index 0000000000..6f98a12cbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-007-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-B, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0180">&#x0243; &#x0243;</span> <span title="U+0183">&#x0182; &#x0182;</span> <span title="U+0185">&#x0184; &#x0184;</span> <span title="U+0188">&#x0187; &#x0187;</span> <span title="U+018C">&#x018B; &#x018B;</span> <span title="U+0192">&#x0191; &#x0191;</span> <span title="U+0195">&#x01F6; &#x01F6;</span> <span title="U+0199">&#x0198; &#x0198;</span> <span title="U+019A">&#x023D; &#x023D;</span> <span title="U+019E">&#x0220; &#x0220;</span> <span title="U+01A1">&#x01A0; &#x01A0;</span> <span title="U+01A3">&#x01A2; &#x01A2;</span> <span title="U+01A5">&#x01A4; &#x01A4;</span> <span title="U+01A8">&#x01A7; &#x01A7;</span> <span title="U+01AD">&#x01AC; &#x01AC;</span> <span title="U+01B0">&#x01AF; &#x01AF;</span> <span title="U+01B4">&#x01B3; &#x01B3;</span> <span title="U+01B6">&#x01B5; &#x01B5;</span> <span title="U+01B9">&#x01B8; &#x01B8;</span> <span title="U+01BD">&#x01BC; &#x01BC;</span> <span title="U+01BF">&#x01F7; &#x01F7;</span> <span title="U+01C5">&#x01C4; &#x01C4;</span> <span title="U+01C6">&#x01C4; &#x01C4;</span> <span title="U+01C8">&#x01C7; &#x01C7;</span> <span title="U+01C9">&#x01C7; &#x01C7;</span> <span title="U+01CB">&#x01CA; &#x01CA;</span> <span title="U+01CC">&#x01CA; &#x01CA;</span> <span title="U+01CE">&#x01CD; &#x01CD;</span> <span title="U+01D0">&#x01CF; &#x01CF;</span> <span title="U+01D2">&#x01D1; &#x01D1;</span> <span title="U+01D4">&#x01D3; &#x01D3;</span> <span title="U+01D6">&#x01D5; &#x01D5;</span> <span title="U+01D8">&#x01D7; &#x01D7;</span> <span title="U+01DA">&#x01D9; &#x01D9;</span> <span title="U+01DC">&#x01DB; &#x01DB;</span> <span title="U+01DD">&#x018E; &#x018E;</span> <span title="U+01DF">&#x01DE; &#x01DE;</span> <span title="U+01E1">&#x01E0; &#x01E0;</span> <span title="U+01E3">&#x01E2; &#x01E2;</span> <span title="U+01E5">&#x01E4; &#x01E4;</span> <span title="U+01E7">&#x01E6; &#x01E6;</span> <span title="U+01E9">&#x01E8; &#x01E8;</span> <span title="U+01EB">&#x01EA; &#x01EA;</span> <span title="U+01ED">&#x01EC; &#x01EC;</span> <span title="U+01EF">&#x01EE; &#x01EE;</span> <span title="U+01F2">&#x01F1; &#x01F1;</span> <span title="U+01F3">&#x01F1; &#x01F1;</span> <span title="U+01F5">&#x01F4; &#x01F4;</span> <span title="U+01F9">&#x01F8; &#x01F8;</span> <span title="U+01FB">&#x01FA; &#x01FA;</span> <span title="U+01FD">&#x01FC; &#x01FC;</span> <span title="U+01FF">&#x01FE; &#x01FE;</span> <span title="U+0201">&#x0200; &#x0200;</span> <span title="U+0203">&#x0202; &#x0202;</span> <span title="U+0205">&#x0204; &#x0204;</span> <span title="U+0207">&#x0206; &#x0206;</span> <span title="U+0209">&#x0208; &#x0208;</span> <span title="U+020B">&#x020A; &#x020A;</span> <span title="U+020D">&#x020C; &#x020C;</span> <span title="U+020F">&#x020E; &#x020E;</span> <span title="U+0211">&#x0210; &#x0210;</span> <span title="U+0213">&#x0212; &#x0212;</span> <span title="U+0215">&#x0214; &#x0214;</span> <span title="U+0217">&#x0216; &#x0216;</span> <span title="U+0219">&#x0218; &#x0218;</span> <span title="U+021B">&#x021A; &#x021A;</span> <span title="U+021D">&#x021C; &#x021C;</span> <span title="U+021F">&#x021E; &#x021E;</span> <span title="U+0223">&#x0222; &#x0222;</span> <span title="U+0225">&#x0224; &#x0224;</span> <span title="U+0227">&#x0226; &#x0226;</span> <span title="U+0229">&#x0228; &#x0228;</span> <span title="U+022B">&#x022A; &#x022A;</span> <span title="U+022D">&#x022C; &#x022C;</span> <span title="U+022F">&#x022E; &#x022E;</span> <span title="U+0231">&#x0230; &#x0230;</span> <span title="U+0233">&#x0232; &#x0232;</span> <span title="U+023C">&#x023B; &#x023B;</span> <span title="U+023F">&#x2C7E; &#x2C7E;</span> <span title="U+0240">&#x2C7F; &#x2C7F;</span> <span title="U+0242">&#x0241; &#x0241;</span> <span title="U+0247">&#x0246; &#x0246;</span> <span title="U+0249">&#x0248; &#x0248;</span> <span title="U+024B">&#x024A; &#x024A;</span> <span title="U+024D">&#x024C; &#x024C;</span> <span title="U+024F">&#x024E; &#x024E;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x018D; &#x019B; &#x01AA; &#x01AB; &#x01BA; &#x01BB; &#x01BE; &#x01C0; &#x01C1; &#x01C2; &#x01C3; &#x01F0; &#x0221; &#x0234; &#x0235; &#x0236; &#x0237; &#x0238; &#x0239;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-008-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-008-ref.html
new file mode 100644
index 0000000000..1ea4aa60c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-008-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-B, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0181">&#x0253; &#x0253;</span> <span title="U+0182">&#x0183; &#x0183;</span> <span title="U+0184">&#x0185; &#x0185;</span> <span title="U+0186">&#x0254; &#x0254;</span> <span title="U+0187">&#x0188; &#x0188;</span> <span title="U+0189">&#x0256; &#x0256;</span> <span title="U+018A">&#x0257; &#x0257;</span> <span title="U+018B">&#x018C; &#x018C;</span> <span title="U+018E">&#x01DD; &#x01DD;</span> <span title="U+018F">&#x0259; &#x0259;</span> <span title="U+0190">&#x025B; &#x025B;</span> <span title="U+0191">&#x0192; &#x0192;</span> <span title="U+0193">&#x0260; &#x0260;</span> <span title="U+0194">&#x0263; &#x0263;</span> <span title="U+0196">&#x0269; &#x0269;</span> <span title="U+0197">&#x0268; &#x0268;</span> <span title="U+0198">&#x0199; &#x0199;</span> <span title="U+019C">&#x026F; &#x026F;</span> <span title="U+019D">&#x0272; &#x0272;</span> <span title="U+019F">&#x0275; &#x0275;</span> <span title="U+01A0">&#x01A1; &#x01A1;</span> <span title="U+01A2">&#x01A3; &#x01A3;</span> <span title="U+01A4">&#x01A5; &#x01A5;</span> <span title="U+01A6">&#x0280; &#x0280;</span> <span title="U+01A7">&#x01A8; &#x01A8;</span> <span title="U+01A9">&#x0283; &#x0283;</span> <span title="U+01AC">&#x01AD; &#x01AD;</span> <span title="U+01AE">&#x0288; &#x0288;</span> <span title="U+01AF">&#x01B0; &#x01B0;</span> <span title="U+01B1">&#x028A; &#x028A;</span> <span title="U+01B2">&#x028B; &#x028B;</span> <span title="U+01B3">&#x01B4; &#x01B4;</span> <span title="U+01B5">&#x01B6; &#x01B6;</span> <span title="U+01B7">&#x0292; &#x0292;</span> <span title="U+01B8">&#x01B9; &#x01B9;</span> <span title="U+01BC">&#x01BD; &#x01BD;</span> <span title="U+01C4">&#x01C6; &#x01C6;</span> <span title="U+01C5">&#x01C6; &#x01C6;</span> <span title="U+01C7">&#x01C9; &#x01C9;</span> <span title="U+01C8">&#x01C9; &#x01C9;</span> <span title="U+01CA">&#x01CC; &#x01CC;</span> <span title="U+01CB">&#x01CC; &#x01CC;</span> <span title="U+01CD">&#x01CE; &#x01CE;</span> <span title="U+01CF">&#x01D0; &#x01D0;</span> <span title="U+01D1">&#x01D2; &#x01D2;</span> <span title="U+01D3">&#x01D4; &#x01D4;</span> <span title="U+01D5">&#x01D6; &#x01D6;</span> <span title="U+01D7">&#x01D8; &#x01D8;</span> <span title="U+01D9">&#x01DA; &#x01DA;</span> <span title="U+01DB">&#x01DC; &#x01DC;</span> <span title="U+01DE">&#x01DF; &#x01DF;</span> <span title="U+01E0">&#x01E1; &#x01E1;</span> <span title="U+01E2">&#x01E3; &#x01E3;</span> <span title="U+01E4">&#x01E5; &#x01E5;</span> <span title="U+01E6">&#x01E7; &#x01E7;</span> <span title="U+01E8">&#x01E9; &#x01E9;</span> <span title="U+01EA">&#x01EB; &#x01EB;</span> <span title="U+01EC">&#x01ED; &#x01ED;</span> <span title="U+01EE">&#x01EF; &#x01EF;</span> <span title="U+01F1">&#x01F3; &#x01F3;</span> <span title="U+01F2">&#x01F3; &#x01F3;</span> <span title="U+01F4">&#x01F5; &#x01F5;</span> <span title="U+01F6">&#x0195; &#x0195;</span> <span title="U+01F7">&#x01BF; &#x01BF;</span> <span title="U+01F8">&#x01F9; &#x01F9;</span> <span title="U+01FA">&#x01FB; &#x01FB;</span> <span title="U+01FC">&#x01FD; &#x01FD;</span> <span title="U+01FE">&#x01FF; &#x01FF;</span> <span title="U+0200">&#x0201; &#x0201;</span> <span title="U+0202">&#x0203; &#x0203;</span> <span title="U+0204">&#x0205; &#x0205;</span> <span title="U+0206">&#x0207; &#x0207;</span> <span title="U+0208">&#x0209; &#x0209;</span> <span title="U+020A">&#x020B; &#x020B;</span> <span title="U+020C">&#x020D; &#x020D;</span> <span title="U+020E">&#x020F; &#x020F;</span> <span title="U+0210">&#x0211; &#x0211;</span> <span title="U+0212">&#x0213; &#x0213;</span> <span title="U+0214">&#x0215; &#x0215;</span> <span title="U+0216">&#x0217; &#x0217;</span> <span title="U+0218">&#x0219; &#x0219;</span> <span title="U+021A">&#x021B; &#x021B;</span> <span title="U+021C">&#x021D; &#x021D;</span> <span title="U+021E">&#x021F; &#x021F;</span> <span title="U+0220">&#x019E; &#x019E;</span> <span title="U+0222">&#x0223; &#x0223;</span> <span title="U+0224">&#x0225; &#x0225;</span> <span title="U+0226">&#x0227; &#x0227;</span> <span title="U+0228">&#x0229; &#x0229;</span> <span title="U+022A">&#x022B; &#x022B;</span> <span title="U+022C">&#x022D; &#x022D;</span> <span title="U+022E">&#x022F; &#x022F;</span> <span title="U+0230">&#x0231; &#x0231;</span> <span title="U+0232">&#x0233; &#x0233;</span> <span title="U+023A">&#x2C65; &#x2C65;</span> <span title="U+023B">&#x023C; &#x023C;</span> <span title="U+023D">&#x019A; &#x019A;</span> <span title="U+023E">&#x2C66; &#x2C66;</span> <span title="U+0241">&#x0242; &#x0242;</span> <span title="U+0243">&#x0180; &#x0180;</span> <span title="U+0244">&#x0289; &#x0289;</span> <span title="U+0245">&#x028C; &#x028C;</span> <span title="U+0246">&#x0247; &#x0247;</span> <span title="U+0248">&#x0249; &#x0249;</span> <span title="U+024A">&#x024B; &#x024B;</span> <span title="U+024C">&#x024D; &#x024D;</span> <span title="U+024E">&#x024F; &#x024F;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x018D; &#x019B; &#x01AA; &#x01AB; &#x01BA; &#x01BB; &#x01BE; &#x01C0; &#x01C1; &#x01C2; &#x01C3; &#x01F0; &#x0221; &#x0234; &#x0235; &#x0236; &#x0237; &#x0238; &#x0239;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-009-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-009-ref.html
new file mode 100644
index 0000000000..e3a6808176
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-009-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-C, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2C61">&#x2C60; &#x2C60;</span> <span title="U+2C65">&#x023A; &#x023A;</span> <span title="U+2C66">&#x023E; &#x023E;</span> <span title="U+2C68">&#x2C67; &#x2C67;</span> <span title="U+2C6A">&#x2C69; &#x2C69;</span> <span title="U+2C6C">&#x2C6B; &#x2C6B;</span> <span title="U+2C73">&#x2C72; &#x2C72;</span> <span title="U+2C76">&#x2C75; &#x2C75;</span> </div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x2C71; &#x2C74; &#x2C77; &#x2C78; &#x2C79; &#x2C7A; &#x2C7B; &#x2C7C; &#x2C7D;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-010-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-010-ref.html
new file mode 100644
index 0000000000..4554c2834e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-010-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-C, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2C60">&#x2C61; &#x2C61;</span> <span title="U+2C62">&#x026B; &#x026B;</span> <span title="U+2C63">&#x1D7D; &#x1D7D;</span> <span title="U+2C64">&#x027D; &#x027D;</span> <span title="U+2C67">&#x2C68; &#x2C68;</span> <span title="U+2C69">&#x2C6A; &#x2C6A;</span> <span title="U+2C6B">&#x2C6C; &#x2C6C;</span> <span title="U+2C6D">&#x0251; &#x0251;</span> <span title="U+2C6E">&#x0271; &#x0271;</span> <span title="U+2C6F">&#x0250; &#x0250;</span> <span title="U+2C70">&#x0252; &#x0252;</span> <span title="U+2C72">&#x2C73; &#x2C73;</span> <span title="U+2C75">&#x2C76; &#x2C76;</span> <span title="U+2C7E">&#x023F; &#x023F;</span> <span title="U+2C7F">&#x0240; &#x0240;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x2C71; &#x2C74; &#x2C77; &#x2C78; &#x2C79; &#x2C7A; &#x2C7B; &#x2C7C; &#x2C7D;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-011-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-011-ref.html
new file mode 100644
index 0000000000..e5dad75eb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-011-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Full-width Latin, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+FF41">&#xFF21; &#xFF21;</span> <span title="U+FF42">&#xFF22; &#xFF22;</span> <span title="U+FF43">&#xFF23; &#xFF23;</span> <span title="U+FF44">&#xFF24; &#xFF24;</span> <span title="U+FF45">&#xFF25; &#xFF25;</span> <span title="U+FF46">&#xFF26; &#xFF26;</span> <span title="U+FF47">&#xFF27; &#xFF27;</span> <span title="U+FF48">&#xFF28; &#xFF28;</span> <span title="U+FF49">&#xFF29; &#xFF29;</span> <span title="U+FF4A">&#xFF2A; &#xFF2A;</span> <span title="U+FF4B">&#xFF2B; &#xFF2B;</span> <span title="U+FF4C">&#xFF2C; &#xFF2C;</span> <span title="U+FF4D">&#xFF2D; &#xFF2D;</span> <span title="U+FF4E">&#xFF2E; &#xFF2E;</span> <span title="U+FF4F">&#xFF2F; &#xFF2F;</span> <span title="U+FF50">&#xFF30; &#xFF30;</span> <span title="U+FF51">&#xFF31; &#xFF31;</span> <span title="U+FF52">&#xFF32; &#xFF32;</span> <span title="U+FF53">&#xFF33; &#xFF33;</span> <span title="U+FF54">&#xFF34; &#xFF34;</span> <span title="U+FF55">&#xFF35; &#xFF35;</span> <span title="U+FF56">&#xFF36; &#xFF36;</span> <span title="U+FF57">&#xFF37; &#xFF37;</span> <span title="U+FF58">&#xFF38; &#xFF38;</span> <span title="U+FF59">&#xFF39; &#xFF39;</span> <span title="U+FF5A">&#xFF3A; &#xFF3A;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0138; &#x0149;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-012-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-012-ref.html
new file mode 100644
index 0000000000..e7a56f7c90
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-012-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Full-width Latin, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+FF21">&#xFF41; &#xFF41;</span> <span title="U+FF22">&#xFF42; &#xFF42;</span> <span title="U+FF23">&#xFF43; &#xFF43;</span> <span title="U+FF24">&#xFF44; &#xFF44;</span> <span title="U+FF25">&#xFF45; &#xFF45;</span> <span title="U+FF26">&#xFF46; &#xFF46;</span> <span title="U+FF27">&#xFF47; &#xFF47;</span> <span title="U+FF28">&#xFF48; &#xFF48;</span> <span title="U+FF29">&#xFF49; &#xFF49;</span> <span title="U+FF2A">&#xFF4A; &#xFF4A;</span> <span title="U+FF2B">&#xFF4B; &#xFF4B;</span> <span title="U+FF2C">&#xFF4C; &#xFF4C;</span> <span title="U+FF2D">&#xFF4D; &#xFF4D;</span> <span title="U+FF2E">&#xFF4E; &#xFF4E;</span> <span title="U+FF2F">&#xFF4F; &#xFF4F;</span> <span title="U+FF30">&#xFF50; &#xFF50;</span> <span title="U+FF31">&#xFF51; &#xFF51;</span> <span title="U+FF32">&#xFF52; &#xFF52;</span> <span title="U+FF33">&#xFF53; &#xFF53;</span> <span title="U+FF34">&#xFF54; &#xFF54;</span> <span title="U+FF35">&#xFF55; &#xFF55;</span> <span title="U+FF36">&#xFF56; &#xFF56;</span> <span title="U+FF37">&#xFF57; &#xFF57;</span> <span title="U+FF38">&#xFF58; &#xFF58;</span> <span title="U+FF39">&#xFF59; &#xFF59;</span> <span title="U+FF3A">&#xFF5A; &#xFF5A;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0138; &#x0149;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-014-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-014-ref.html
new file mode 100644
index 0000000000..cd42f018b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-014-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek and Coptic, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0371">&#x0370; &#x0370;</span> <span title="U+0373">&#x0372; &#x0372;</span> <span title="U+0377">&#x0376; &#x0376;</span> <span title="U+037B">&#x03FD; &#x03FD;</span> <span title="U+037C">&#x03FE; &#x03FE;</span> <span title="U+037D">&#x03FF; &#x03FF;</span> <span title="U+03AC">&#x0386; &#x0386;</span> <span title="U+03AD">&#x0388; &#x0388;</span> <span title="U+03AE">&#x0389; &#x0389;</span> <span title="U+03AF">&#x038A; &#x038A;</span> <span title="U+03B1">&#x0391; &#x0391;</span> <span title="U+03B2">&#x0392; &#x0392;</span> <span title="U+03B3">&#x0393; &#x0393;</span> <span title="U+03B4">&#x0394; &#x0394;</span> <span title="U+03B5">&#x0395; &#x0395;</span> <span title="U+03B6">&#x0396; &#x0396;</span> <span title="U+03B7">&#x0397; &#x0397;</span> <span title="U+03B8">&#x0398; &#x0398;</span> <span title="U+03B9">&#x0399; &#x0399;</span> <span title="U+03BA">&#x039A; &#x039A;</span> <span title="U+03BB">&#x039B; &#x039B;</span> <span title="U+03BC">&#x039C; &#x039C;</span> <span title="U+03BD">&#x039D; &#x039D;</span> <span title="U+03BE">&#x039E; &#x039E;</span> <span title="U+03BF">&#x039F; &#x039F;</span> <span title="U+03C0">&#x03A0; &#x03A0;</span> <span title="U+03C1">&#x03A1; &#x03A1;</span> <span title="U+03C2">&#x03A3; &#x03A3;</span> <span title="U+03C3">&#x03A3; &#x03A3;</span> <span title="U+03C4">&#x03A4; &#x03A4;</span> <span title="U+03C5">&#x03A5; &#x03A5;</span> <span title="U+03C6">&#x03A6; &#x03A6;</span> <span title="U+03C7">&#x03A7; &#x03A7;</span> <span title="U+03C8">&#x03A8; &#x03A8;</span> <span title="U+03C9">&#x03A9; &#x03A9;</span> <span title="U+03CA">&#x03AA; &#x03AA;</span> <span title="U+03CB">&#x03AB; &#x03AB;</span> <span title="U+03CC">&#x038C; &#x038C;</span> <span title="U+03CD">&#x038E; &#x038E;</span> <span title="U+03CE">&#x038F; &#x038F;</span> <span title="U+03D0">&#x0392; &#x0392;</span> <span title="U+03D1">&#x0398; &#x0398;</span> <span title="U+03D5">&#x03A6; &#x03A6;</span> <span title="U+03D6">&#x03A0; &#x03A0;</span> <span title="U+03D7">&#x03CF; &#x03CF;</span> <span title="U+03D9">&#x03D8; &#x03D8;</span> <span title="U+03DB">&#x03DA; &#x03DA;</span> <span title="U+03DD">&#x03DC; &#x03DC;</span> <span title="U+03DF">&#x03DE; &#x03DE;</span> <span title="U+03E1">&#x03E0; &#x03E0;</span> <span title="U+03E3">&#x03E2; &#x03E2;</span> <span title="U+03E5">&#x03E4; &#x03E4;</span> <span title="U+03E7">&#x03E6; &#x03E6;</span> <span title="U+03E9">&#x03E8; &#x03E8;</span> <span title="U+03EB">&#x03EA; &#x03EA;</span> <span title="U+03ED">&#x03EC; &#x03EC;</span> <span title="U+03EF">&#x03EE; &#x03EE;</span> <span title="U+03F0">&#x039A; &#x039A;</span> <span title="U+03F1">&#x03A1; &#x03A1;</span> <span title="U+03F2">&#x03F9; &#x03F9;</span> <span title="U+03F3">&#x037F; &#x037F;</span> <span title="U+03F5">&#x0395; &#x0395;</span> <span title="U+03F8">&#x03F7; &#x03F7;</span> <span title="U+03FB">&#x03FA; &#x03FA;</span> </div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0374; &#x0375; &#x037A; &#x037E; &#x0384; &#x0385; &#x0387; &#x0390; &#x03B0; &#x03D2; &#x03D3; &#x03D4; &#x03F6; &#x03FC;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-015-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-015-ref.html
new file mode 100644
index 0000000000..4c33e53cf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-015-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek and Coptic, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0370">&#x0371; &#x0371;</span> <span title="U+0372">&#x0373; &#x0373;</span> <span title="U+0376">&#x0377; &#x0377;</span> <span title="U+037F">&#x03F3; &#x03F3;</span> <span title="U+0386">&#x03AC; &#x03AC;</span> <span title="U+0388">&#x03AD; &#x03AD;</span> <span title="U+0389">&#x03AE; &#x03AE;</span> <span title="U+038A">&#x03AF; &#x03AF;</span> <span title="U+038C">&#x03CC; &#x03CC;</span> <span title="U+038E">&#x03CD; &#x03CD;</span> <span title="U+038F">&#x03CE; &#x03CE;</span> <span title="U+0391">&#x03B1; &#x03B1;</span> <span title="U+0392">&#x03B2; &#x03B2;</span> <span title="U+0393">&#x03B3; &#x03B3;</span> <span title="U+0394">&#x03B4; &#x03B4;</span> <span title="U+0395">&#x03B5; &#x03B5;</span> <span title="U+0396">&#x03B6; &#x03B6;</span> <span title="U+0397">&#x03B7; &#x03B7;</span> <span title="U+0398">&#x03B8; &#x03B8;</span> <span title="U+0399">&#x03B9; &#x03B9;</span> <span title="U+039A">&#x03BA; &#x03BA;</span> <span title="U+039B">&#x03BB; &#x03BB;</span> <span title="U+039C">&#x03BC; &#x03BC;</span> <span title="U+039D">&#x03BD; &#x03BD;</span> <span title="U+039E">&#x03BE; &#x03BE;</span> <span title="U+039F">&#x03BF; &#x03BF;</span> <span title="U+03A0">&#x03C0; &#x03C0;</span> <span title="U+03A1">&#x03C1; &#x03C1;</span> <span title="U+03A3">&#x03C3; &#x03C3;</span> <span title="U+03A4">&#x03C4; &#x03C4;</span> <span title="U+03A5">&#x03C5; &#x03C5;</span> <span title="U+03A6">&#x03C6; &#x03C6;</span> <span title="U+03A7">&#x03C7; &#x03C7;</span> <span title="U+03A8">&#x03C8; &#x03C8;</span> <span title="U+03A9">&#x03C9; &#x03C9;</span> <span title="U+03AA">&#x03CA; &#x03CA;</span> <span title="U+03AB">&#x03CB; &#x03CB;</span> <span title="U+03CF">&#x03D7; &#x03D7;</span> <span title="U+03D8">&#x03D9; &#x03D9;</span> <span title="U+03DA">&#x03DB; &#x03DB;</span> <span title="U+03DC">&#x03DD; &#x03DD;</span> <span title="U+03DE">&#x03DF; &#x03DF;</span> <span title="U+03E0">&#x03E1; &#x03E1;</span> <span title="U+03E2">&#x03E3; &#x03E3;</span> <span title="U+03E4">&#x03E5; &#x03E5;</span> <span title="U+03E6">&#x03E7; &#x03E7;</span> <span title="U+03E8">&#x03E9; &#x03E9;</span> <span title="U+03EA">&#x03EB; &#x03EB;</span> <span title="U+03EC">&#x03ED; &#x03ED;</span> <span title="U+03EE">&#x03EF; &#x03EF;</span> <span title="U+03F4">&#x03B8; &#x03B8;</span> <span title="U+03F7">&#x03F8; &#x03F8;</span> <span title="U+03F9">&#x03F2; &#x03F2;</span> <span title="U+03FA">&#x03FB; &#x03FB;</span> <span title="U+03FD">&#x037B; &#x037B;</span> <span title="U+03FE">&#x037C; &#x037C;</span> <span title="U+03FF">&#x037D; &#x037D;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0374; &#x0375; &#x037A; &#x037E; &#x0384; &#x0385; &#x0387; &#x0390; &#x03B0; &#x03D2; &#x03D3; &#x03D4; &#x03F6; &#x03FC;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-016-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-016-ref.html
new file mode 100644
index 0000000000..b7c434ffb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-016-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek Extended, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1F00">&#x1F08; &#x1F08;</span> <span title="U+1F01">&#x1F09; &#x1F09;</span> <span title="U+1F02">&#x1F0A; &#x1F0A;</span> <span title="U+1F03">&#x1F0B; &#x1F0B;</span> <span title="U+1F04">&#x1F0C; &#x1F0C;</span> <span title="U+1F05">&#x1F0D; &#x1F0D;</span> <span title="U+1F06">&#x1F0E; &#x1F0E;</span> <span title="U+1F07">&#x1F0F; &#x1F0F;</span> <span title="U+1F10">&#x1F18; &#x1F18;</span> <span title="U+1F11">&#x1F19; &#x1F19;</span> <span title="U+1F12">&#x1F1A; &#x1F1A;</span> <span title="U+1F13">&#x1F1B; &#x1F1B;</span> <span title="U+1F14">&#x1F1C; &#x1F1C;</span> <span title="U+1F15">&#x1F1D; &#x1F1D;</span> <span title="U+1F20">&#x1F28; &#x1F28;</span> <span title="U+1F21">&#x1F29; &#x1F29;</span> <span title="U+1F22">&#x1F2A; &#x1F2A;</span> <span title="U+1F23">&#x1F2B; &#x1F2B;</span> <span title="U+1F24">&#x1F2C; &#x1F2C;</span> <span title="U+1F25">&#x1F2D; &#x1F2D;</span> <span title="U+1F26">&#x1F2E; &#x1F2E;</span> <span title="U+1F27">&#x1F2F; &#x1F2F;</span> <span title="U+1F30">&#x1F38; &#x1F38;</span> <span title="U+1F31">&#x1F39; &#x1F39;</span> <span title="U+1F32">&#x1F3A; &#x1F3A;</span> <span title="U+1F33">&#x1F3B; &#x1F3B;</span> <span title="U+1F34">&#x1F3C; &#x1F3C;</span> <span title="U+1F35">&#x1F3D; &#x1F3D;</span> <span title="U+1F36">&#x1F3E; &#x1F3E;</span> <span title="U+1F37">&#x1F3F; &#x1F3F;</span> <span title="U+1F40">&#x1F48; &#x1F48;</span> <span title="U+1F41">&#x1F49; &#x1F49;</span> <span title="U+1F42">&#x1F4A; &#x1F4A;</span> <span title="U+1F43">&#x1F4B; &#x1F4B;</span> <span title="U+1F44">&#x1F4C; &#x1F4C;</span> <span title="U+1F45">&#x1F4D; &#x1F4D;</span> <span title="U+1F51">&#x1F59; &#x1F59;</span> <span title="U+1F53">&#x1F5B; &#x1F5B;</span> <span title="U+1F55">&#x1F5D; &#x1F5D;</span> <span title="U+1F57">&#x1F5F; &#x1F5F;</span> <span title="U+1F60">&#x1F68; &#x1F68;</span> <span title="U+1F61">&#x1F69; &#x1F69;</span> <span title="U+1F62">&#x1F6A; &#x1F6A;</span> <span title="U+1F63">&#x1F6B; &#x1F6B;</span> <span title="U+1F64">&#x1F6C; &#x1F6C;</span> <span title="U+1F65">&#x1F6D; &#x1F6D;</span> <span title="U+1F66">&#x1F6E; &#x1F6E;</span> <span title="U+1F67">&#x1F6F; &#x1F6F;</span> <span title="U+1F70">&#x1FBA; &#x1FBA;</span> <span title="U+1F71">&#x1FBB; &#x1FBB;</span> <span title="U+1F72">&#x1FC8; &#x1FC8;</span> <span title="U+1F73">&#x1FC9; &#x1FC9;</span> <span title="U+1F74">&#x1FCA; &#x1FCA;</span> <span title="U+1F75">&#x1FCB; &#x1FCB;</span> <span title="U+1F76">&#x1FDA; &#x1FDA;</span> <span title="U+1F77">&#x1FDB; &#x1FDB;</span> <span title="U+1F78">&#x1FF8; &#x1FF8;</span> <span title="U+1F79">&#x1FF9; &#x1FF9;</span> <span title="U+1F7A">&#x1FEA; &#x1FEA;</span> <span title="U+1F7B">&#x1FEB; &#x1FEB;</span> <span title="U+1F7C">&#x1FFA; &#x1FFA;</span> <span title="U+1F7D">&#x1FFB; &#x1FFB;</span> <span title="U+1F80">&#x1F88; &#x1F88;</span> <span title="U+1F81">&#x1F89; &#x1F89;</span> <span title="U+1F82">&#x1F8A; &#x1F8A;</span> <span title="U+1F83">&#x1F8B; &#x1F8B;</span> <span title="U+1F84">&#x1F8C; &#x1F8C;</span> <span title="U+1F85">&#x1F8D; &#x1F8D;</span> <span title="U+1F86">&#x1F8E; &#x1F8E;</span> <span title="U+1F87">&#x1F8F; &#x1F8F;</span> <span title="U+1F90">&#x1F98; &#x1F98;</span> <span title="U+1F91">&#x1F99; &#x1F99;</span> <span title="U+1F92">&#x1F9A; &#x1F9A;</span> <span title="U+1F93">&#x1F9B; &#x1F9B;</span> <span title="U+1F94">&#x1F9C; &#x1F9C;</span> <span title="U+1F95">&#x1F9D; &#x1F9D;</span> <span title="U+1F96">&#x1F9E; &#x1F9E;</span> <span title="U+1F97">&#x1F9F; &#x1F9F;</span> <span title="U+1FA0">&#x1FA8; &#x1FA8;</span> <span title="U+1FA1">&#x1FA9; &#x1FA9;</span> <span title="U+1FA2">&#x1FAA; &#x1FAA;</span> <span title="U+1FA3">&#x1FAB; &#x1FAB;</span> <span title="U+1FA4">&#x1FAC; &#x1FAC;</span> <span title="U+1FA5">&#x1FAD; &#x1FAD;</span> <span title="U+1FA6">&#x1FAE; &#x1FAE;</span> <span title="U+1FA7">&#x1FAF; &#x1FAF;</span> <span title="U+1FB0">&#x1FB8; &#x1FB8;</span> <span title="U+1FB1">&#x1FB9; &#x1FB9;</span> <span title="U+1FB3">&#x1FBC; &#x1FBC;</span> <span title="U+1FBE">&#x0399; &#x0399;</span> <span title="U+1FC3">&#x1FCC; &#x1FCC;</span> <span title="U+1FD0">&#x1FD8; &#x1FD8;</span> <span title="U+1FD1">&#x1FD9; &#x1FD9;</span> <span title="U+1FE0">&#x1FE8; &#x1FE8;</span> <span title="U+1FE1">&#x1FE9; &#x1FE9;</span> <span title="U+1FE5">&#x1FEC; &#x1FEC;</span> <span title="U+1FF3">&#x1FFC; &#x1FFC;</span></div>
+<!--Notes:
+Glyphs for the following characters are not available in the Doulos Sil font, so will need to be tested at a later date: &#xA79B; &#xA79D; &#xA79F; &#xA79A; &#xA79C; &#xA79E;
+Characters from this block that do not have case equivalents: &#x1F50; &#x1F52; &#x1F54; &#x1F56; &#x1FB2; &#x1FB4; &#x1FB6; &#x1FB7; &#x1FBD; &#x1FBF; &#x1FC0; &#x1FC1; &#x1FC2; &#x1FC4; &#x1FC6; &#x1FC7; &#x1FCD; &#x1FCE; &#x1FCF; &#x1FD2; &#x1FD3; &#x1FD6; &#x1FD7; &#x1FDD; &#x1FDE; &#x1FDF; &#x1FE2; &#x1FE3; &#x1FE4; &#x1FE6; &#x1FE7; &#x1FED; &#x1FEE; &#x1FEF; &#x1FF2; &#x1FF4; &#x1FF6; &#x1FF7; &#x1FFD; &#x1FFE;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-017-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-017-ref.html
new file mode 100644
index 0000000000..97cdadf8bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-017-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek Extended, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1F08">&#x1F00; &#x1F00;</span> <span title="U+1F09">&#x1F01; &#x1F01;</span> <span title="U+1F0A">&#x1F02; &#x1F02;</span> <span title="U+1F0B">&#x1F03; &#x1F03;</span> <span title="U+1F0C">&#x1F04; &#x1F04;</span> <span title="U+1F0D">&#x1F05; &#x1F05;</span> <span title="U+1F0E">&#x1F06; &#x1F06;</span> <span title="U+1F0F">&#x1F07; &#x1F07;</span> <span title="U+1F18">&#x1F10; &#x1F10;</span> <span title="U+1F19">&#x1F11; &#x1F11;</span> <span title="U+1F1A">&#x1F12; &#x1F12;</span> <span title="U+1F1B">&#x1F13; &#x1F13;</span> <span title="U+1F1C">&#x1F14; &#x1F14;</span> <span title="U+1F1D">&#x1F15; &#x1F15;</span> <span title="U+1F28">&#x1F20; &#x1F20;</span> <span title="U+1F29">&#x1F21; &#x1F21;</span> <span title="U+1F2A">&#x1F22; &#x1F22;</span> <span title="U+1F2B">&#x1F23; &#x1F23;</span> <span title="U+1F2C">&#x1F24; &#x1F24;</span> <span title="U+1F2D">&#x1F25; &#x1F25;</span> <span title="U+1F2E">&#x1F26; &#x1F26;</span> <span title="U+1F2F">&#x1F27; &#x1F27;</span> <span title="U+1F38">&#x1F30; &#x1F30;</span> <span title="U+1F39">&#x1F31; &#x1F31;</span> <span title="U+1F3A">&#x1F32; &#x1F32;</span> <span title="U+1F3B">&#x1F33; &#x1F33;</span> <span title="U+1F3C">&#x1F34; &#x1F34;</span> <span title="U+1F3D">&#x1F35; &#x1F35;</span> <span title="U+1F3E">&#x1F36; &#x1F36;</span> <span title="U+1F3F">&#x1F37; &#x1F37;</span> <span title="U+1F48">&#x1F40; &#x1F40;</span> <span title="U+1F49">&#x1F41; &#x1F41;</span> <span title="U+1F4A">&#x1F42; &#x1F42;</span> <span title="U+1F4B">&#x1F43; &#x1F43;</span> <span title="U+1F4C">&#x1F44; &#x1F44;</span> <span title="U+1F4D">&#x1F45; &#x1F45;</span> <span title="U+1F59">&#x1F51; &#x1F51;</span> <span title="U+1F5B">&#x1F53; &#x1F53;</span> <span title="U+1F5D">&#x1F55; &#x1F55;</span> <span title="U+1F5F">&#x1F57; &#x1F57;</span> <span title="U+1F68">&#x1F60; &#x1F60;</span> <span title="U+1F69">&#x1F61; &#x1F61;</span> <span title="U+1F6A">&#x1F62; &#x1F62;</span> <span title="U+1F6B">&#x1F63; &#x1F63;</span> <span title="U+1F6C">&#x1F64; &#x1F64;</span> <span title="U+1F6D">&#x1F65; &#x1F65;</span> <span title="U+1F6E">&#x1F66; &#x1F66;</span> <span title="U+1F6F">&#x1F67; &#x1F67;</span> <span title="U+1F88">&#x1F80; &#x1F80;</span> <span title="U+1F89">&#x1F81; &#x1F81;</span> <span title="U+1F8A">&#x1F82; &#x1F82;</span> <span title="U+1F8B">&#x1F83; &#x1F83;</span> <span title="U+1F8C">&#x1F84; &#x1F84;</span> <span title="U+1F8D">&#x1F85; &#x1F85;</span> <span title="U+1F8E">&#x1F86; &#x1F86;</span> <span title="U+1F8F">&#x1F87; &#x1F87;</span> <span title="U+1F98">&#x1F90; &#x1F90;</span> <span title="U+1F99">&#x1F91; &#x1F91;</span> <span title="U+1F9A">&#x1F92; &#x1F92;</span> <span title="U+1F9B">&#x1F93; &#x1F93;</span> <span title="U+1F9C">&#x1F94; &#x1F94;</span> <span title="U+1F9D">&#x1F95; &#x1F95;</span> <span title="U+1F9E">&#x1F96; &#x1F96;</span> <span title="U+1F9F">&#x1F97; &#x1F97;</span> <span title="U+1FA8">&#x1FA0; &#x1FA0;</span> <span title="U+1FA9">&#x1FA1; &#x1FA1;</span> <span title="U+1FAA">&#x1FA2; &#x1FA2;</span> <span title="U+1FAB">&#x1FA3; &#x1FA3;</span> <span title="U+1FAC">&#x1FA4; &#x1FA4;</span> <span title="U+1FAD">&#x1FA5; &#x1FA5;</span> <span title="U+1FAE">&#x1FA6; &#x1FA6;</span> <span title="U+1FAF">&#x1FA7; &#x1FA7;</span> <span title="U+1FB8">&#x1FB0; &#x1FB0;</span> <span title="U+1FB9">&#x1FB1; &#x1FB1;</span> <span title="U+1FBA">&#x1F70; &#x1F70;</span> <span title="U+1FBB">&#x1F71; &#x1F71;</span> <span title="U+1FBC">&#x1FB3; &#x1FB3;</span> <span title="U+1FC8">&#x1F72; &#x1F72;</span> <span title="U+1FC9">&#x1F73; &#x1F73;</span> <span title="U+1FCA">&#x1F74; &#x1F74;</span> <span title="U+1FCB">&#x1F75; &#x1F75;</span> <span title="U+1FCC">&#x1FC3; &#x1FC3;</span> <span title="U+1FD8">&#x1FD0; &#x1FD0;</span> <span title="U+1FD9">&#x1FD1; &#x1FD1;</span> <span title="U+1FDA">&#x1F76; &#x1F76;</span> <span title="U+1FDB">&#x1F77; &#x1F77;</span> <span title="U+1FE8">&#x1FE0; &#x1FE0;</span> <span title="U+1FE9">&#x1FE1; &#x1FE1;</span> <span title="U+1FEA">&#x1F7A; &#x1F7A;</span> <span title="U+1FEB">&#x1F7B; &#x1F7B;</span> <span title="U+1FEC">&#x1FE5; &#x1FE5;</span> <span title="U+1FF8">&#x1F78; &#x1F78;</span> <span title="U+1FF9">&#x1F79; &#x1F79;</span> <span title="U+1FFA">&#x1F7C; &#x1F7C;</span> <span title="U+1FFB">&#x1F7D; &#x1F7D;</span> <span title="U+1FFC">&#x1FF3; &#x1FF3;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x1F50; &#x1F52; &#x1F54; &#x1F56; &#x1FB2; &#x1FB4; &#x1FB6; &#x1FB7; &#x1FBD; &#x1FBF; &#x1FC0; &#x1FC1; &#x1FC2; &#x1FC4; &#x1FC6; &#x1FC7; &#x1FCD; &#x1FCE; &#x1FCF; &#x1FD2; &#x1FD3; &#x1FD6; &#x1FD7; &#x1FDD; &#x1FDE; &#x1FDF; &#x1FE2; &#x1FE3; &#x1FE4; &#x1FE6; &#x1FE7; &#x1FED; &#x1FEE; &#x1FEF; &#x1FF2; &#x1FF4; &#x1FF6; &#x1FF7; &#x1FFD; &#x1FFE;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-018-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-018-ref.html
new file mode 100644
index 0000000000..362022d7ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-018-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0430">&#x0410; &#x0410;</span> <span title="U+0431">&#x0411; &#x0411;</span> <span title="U+0432">&#x0412; &#x0412;</span> <span title="U+0433">&#x0413; &#x0413;</span> <span title="U+0434">&#x0414; &#x0414;</span> <span title="U+0435">&#x0415; &#x0415;</span> <span title="U+0436">&#x0416; &#x0416;</span> <span title="U+0437">&#x0417; &#x0417;</span> <span title="U+0438">&#x0418; &#x0418;</span> <span title="U+0439">&#x0419; &#x0419;</span> <span title="U+043A">&#x041A; &#x041A;</span> <span title="U+043B">&#x041B; &#x041B;</span> <span title="U+043C">&#x041C; &#x041C;</span> <span title="U+043D">&#x041D; &#x041D;</span> <span title="U+043E">&#x041E; &#x041E;</span> <span title="U+043F">&#x041F; &#x041F;</span> <span title="U+0440">&#x0420; &#x0420;</span> <span title="U+0441">&#x0421; &#x0421;</span> <span title="U+0442">&#x0422; &#x0422;</span> <span title="U+0443">&#x0423; &#x0423;</span> <span title="U+0444">&#x0424; &#x0424;</span> <span title="U+0445">&#x0425; &#x0425;</span> <span title="U+0446">&#x0426; &#x0426;</span> <span title="U+0447">&#x0427; &#x0427;</span> <span title="U+0448">&#x0428; &#x0428;</span> <span title="U+0449">&#x0429; &#x0429;</span> <span title="U+044A">&#x042A; &#x042A;</span> <span title="U+044B">&#x042B; &#x042B;</span> <span title="U+044C">&#x042C; &#x042C;</span> <span title="U+044D">&#x042D; &#x042D;</span> <span title="U+044E">&#x042E; &#x042E;</span> <span title="U+044F">&#x042F; &#x042F;</span> <span title="U+0450">&#x0400; &#x0400;</span> <span title="U+0451">&#x0401; &#x0401;</span> <span title="U+0452">&#x0402; &#x0402;</span> <span title="U+0453">&#x0403; &#x0403;</span> <span title="U+0454">&#x0404; &#x0404;</span> <span title="U+0455">&#x0405; &#x0405;</span> <span title="U+0456">&#x0406; &#x0406;</span> <span title="U+0457">&#x0407; &#x0407;</span> <span title="U+0458">&#x0408; &#x0408;</span> <span title="U+0459">&#x0409; &#x0409;</span> <span title="U+045A">&#x040A; &#x040A;</span> <span title="U+045B">&#x040B; &#x040B;</span> <span title="U+045C">&#x040C; &#x040C;</span> <span title="U+045D">&#x040D; &#x040D;</span> <span title="U+045E">&#x040E; &#x040E;</span> <span title="U+045F">&#x040F; &#x040F;</span> <span title="U+0461">&#x0460; &#x0460;</span> <span title="U+0463">&#x0462; &#x0462;</span> <span title="U+0465">&#x0464; &#x0464;</span> <span title="U+0467">&#x0466; &#x0466;</span> <span title="U+0469">&#x0468; &#x0468;</span> <span title="U+046B">&#x046A; &#x046A;</span> <span title="U+046D">&#x046C; &#x046C;</span> <span title="U+046F">&#x046E; &#x046E;</span> <span title="U+0471">&#x0470; &#x0470;</span> <span title="U+0473">&#x0472; &#x0472;</span> <span title="U+0475">&#x0474; &#x0474;</span> <span title="U+0477">&#x0476; &#x0476;</span> <span title="U+0479">&#x0478; &#x0478;</span> <span title="U+047B">&#x047A; &#x047A;</span> <span title="U+047D">&#x047C; &#x047C;</span> <span title="U+047F">&#x047E; &#x047E;</span> <span title="U+0481">&#x0480; &#x0480;</span> <span title="U+048B">&#x048A; &#x048A;</span> <span title="U+048D">&#x048C; &#x048C;</span> <span title="U+048F">&#x048E; &#x048E;</span> <span title="U+0491">&#x0490; &#x0490;</span> <span title="U+0493">&#x0492; &#x0492;</span> <span title="U+0495">&#x0494; &#x0494;</span> <span title="U+0497">&#x0496; &#x0496;</span> <span title="U+0499">&#x0498; &#x0498;</span> <span title="U+049B">&#x049A; &#x049A;</span> <span title="U+049D">&#x049C; &#x049C;</span> <span title="U+049F">&#x049E; &#x049E;</span> <span title="U+04A1">&#x04A0; &#x04A0;</span> <span title="U+04A3">&#x04A2; &#x04A2;</span> <span title="U+04A5">&#x04A4; &#x04A4;</span> <span title="U+04A7">&#x04A6; &#x04A6;</span> <span title="U+04A9">&#x04A8; &#x04A8;</span> <span title="U+04AB">&#x04AA; &#x04AA;</span> <span title="U+04AD">&#x04AC; &#x04AC;</span> <span title="U+04AF">&#x04AE; &#x04AE;</span> <span title="U+04B1">&#x04B0; &#x04B0;</span> <span title="U+04B3">&#x04B2; &#x04B2;</span> <span title="U+04B5">&#x04B4; &#x04B4;</span> <span title="U+04B7">&#x04B6; &#x04B6;</span> <span title="U+04B9">&#x04B8; &#x04B8;</span> <span title="U+04BB">&#x04BA; &#x04BA;</span> <span title="U+04BD">&#x04BC; &#x04BC;</span> <span title="U+04BF">&#x04BE; &#x04BE;</span> <span title="U+04C2">&#x04C1; &#x04C1;</span> <span title="U+04C4">&#x04C3; &#x04C3;</span> <span title="U+04C6">&#x04C5; &#x04C5;</span> <span title="U+04C8">&#x04C7; &#x04C7;</span> <span title="U+04CA">&#x04C9; &#x04C9;</span> <span title="U+04CC">&#x04CB; &#x04CB;</span> <span title="U+04CE">&#x04CD; &#x04CD;</span> <span title="U+04CF">&#x04C0; &#x04C0;</span> <span title="U+04D1">&#x04D0; &#x04D0;</span> <span title="U+04D3">&#x04D2; &#x04D2;</span> <span title="U+04D5">&#x04D4; &#x04D4;</span> <span title="U+04D7">&#x04D6; &#x04D6;</span> <span title="U+04D9">&#x04D8; &#x04D8;</span> <span title="U+04DB">&#x04DA; &#x04DA;</span> <span title="U+04DD">&#x04DC; &#x04DC;</span> <span title="U+04DF">&#x04DE; &#x04DE;</span> <span title="U+04E1">&#x04E0; &#x04E0;</span> <span title="U+04E3">&#x04E2; &#x04E2;</span> <span title="U+04E5">&#x04E4; &#x04E4;</span> <span title="U+04E7">&#x04E6; &#x04E6;</span> <span title="U+04E9">&#x04E8; &#x04E8;</span> <span title="U+04EB">&#x04EA; &#x04EA;</span> <span title="U+04ED">&#x04EC; &#x04EC;</span> <span title="U+04EF">&#x04EE; &#x04EE;</span> <span title="U+04F1">&#x04F0; &#x04F0;</span> <span title="U+04F3">&#x04F2; &#x04F2;</span> <span title="U+04F5">&#x04F4; &#x04F4;</span> <span title="U+04F7">&#x04F6; &#x04F6;</span> <span title="U+04F9">&#x04F8; &#x04F8;</span> <span title="U+04FB">&#x04FA; &#x04FA;</span> <span title="U+04FD">&#x04FC; &#x04FC;</span> <span title="U+04FF">&#x04FE; &#x04FE;</span> </div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x0482; &#x0483; &#x0484; &#x0485; &#x0486; &#x0487; &#x0488; &#x0489;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-019-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-019-ref.html
new file mode 100644
index 0000000000..03616d7d7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-019-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0400">&#x0450; &#x0450;</span> <span title="U+0401">&#x0451; &#x0451;</span> <span title="U+0402">&#x0452; &#x0452;</span> <span title="U+0403">&#x0453; &#x0453;</span> <span title="U+0404">&#x0454; &#x0454;</span> <span title="U+0405">&#x0455; &#x0455;</span> <span title="U+0406">&#x0456; &#x0456;</span> <span title="U+0407">&#x0457; &#x0457;</span> <span title="U+0408">&#x0458; &#x0458;</span> <span title="U+0409">&#x0459; &#x0459;</span> <span title="U+040A">&#x045A; &#x045A;</span> <span title="U+040B">&#x045B; &#x045B;</span> <span title="U+040C">&#x045C; &#x045C;</span> <span title="U+040D">&#x045D; &#x045D;</span> <span title="U+040E">&#x045E; &#x045E;</span> <span title="U+040F">&#x045F; &#x045F;</span> <span title="U+0410">&#x0430; &#x0430;</span> <span title="U+0411">&#x0431; &#x0431;</span> <span title="U+0412">&#x0432; &#x0432;</span> <span title="U+0413">&#x0433; &#x0433;</span> <span title="U+0414">&#x0434; &#x0434;</span> <span title="U+0415">&#x0435; &#x0435;</span> <span title="U+0416">&#x0436; &#x0436;</span> <span title="U+0417">&#x0437; &#x0437;</span> <span title="U+0418">&#x0438; &#x0438;</span> <span title="U+0419">&#x0439; &#x0439;</span> <span title="U+041A">&#x043A; &#x043A;</span> <span title="U+041B">&#x043B; &#x043B;</span> <span title="U+041C">&#x043C; &#x043C;</span> <span title="U+041D">&#x043D; &#x043D;</span> <span title="U+041E">&#x043E; &#x043E;</span> <span title="U+041F">&#x043F; &#x043F;</span> <span title="U+0420">&#x0440; &#x0440;</span> <span title="U+0421">&#x0441; &#x0441;</span> <span title="U+0422">&#x0442; &#x0442;</span> <span title="U+0423">&#x0443; &#x0443;</span> <span title="U+0424">&#x0444; &#x0444;</span> <span title="U+0425">&#x0445; &#x0445;</span> <span title="U+0426">&#x0446; &#x0446;</span> <span title="U+0427">&#x0447; &#x0447;</span> <span title="U+0428">&#x0448; &#x0448;</span> <span title="U+0429">&#x0449; &#x0449;</span> <span title="U+042A">&#x044A; &#x044A;</span> <span title="U+042B">&#x044B; &#x044B;</span> <span title="U+042C">&#x044C; &#x044C;</span> <span title="U+042D">&#x044D; &#x044D;</span> <span title="U+042E">&#x044E; &#x044E;</span> <span title="U+042F">&#x044F; &#x044F;</span> <span title="U+0460">&#x0461; &#x0461;</span> <span title="U+0462">&#x0463; &#x0463;</span> <span title="U+0464">&#x0465; &#x0465;</span> <span title="U+0466">&#x0467; &#x0467;</span> <span title="U+0468">&#x0469; &#x0469;</span> <span title="U+046A">&#x046B; &#x046B;</span> <span title="U+046C">&#x046D; &#x046D;</span> <span title="U+046E">&#x046F; &#x046F;</span> <span title="U+0470">&#x0471; &#x0471;</span> <span title="U+0472">&#x0473; &#x0473;</span> <span title="U+0474">&#x0475; &#x0475;</span> <span title="U+0476">&#x0477; &#x0477;</span> <span title="U+0478">&#x0479; &#x0479;</span> <span title="U+047A">&#x047B; &#x047B;</span> <span title="U+047C">&#x047D; &#x047D;</span> <span title="U+047E">&#x047F; &#x047F;</span> <span title="U+0480">&#x0481; &#x0481;</span> <span title="U+048A">&#x048B; &#x048B;</span> <span title="U+048C">&#x048D; &#x048D;</span> <span title="U+048E">&#x048F; &#x048F;</span> <span title="U+0490">&#x0491; &#x0491;</span> <span title="U+0492">&#x0493; &#x0493;</span> <span title="U+0494">&#x0495; &#x0495;</span> <span title="U+0496">&#x0497; &#x0497;</span> <span title="U+0498">&#x0499; &#x0499;</span> <span title="U+049A">&#x049B; &#x049B;</span> <span title="U+049C">&#x049D; &#x049D;</span> <span title="U+049E">&#x049F; &#x049F;</span> <span title="U+04A0">&#x04A1; &#x04A1;</span> <span title="U+04A2">&#x04A3; &#x04A3;</span> <span title="U+04A4">&#x04A5; &#x04A5;</span> <span title="U+04A6">&#x04A7; &#x04A7;</span> <span title="U+04A8">&#x04A9; &#x04A9;</span> <span title="U+04AA">&#x04AB; &#x04AB;</span> <span title="U+04AC">&#x04AD; &#x04AD;</span> <span title="U+04AE">&#x04AF; &#x04AF;</span> <span title="U+04B0">&#x04B1; &#x04B1;</span> <span title="U+04B2">&#x04B3; &#x04B3;</span> <span title="U+04B4">&#x04B5; &#x04B5;</span> <span title="U+04B6">&#x04B7; &#x04B7;</span> <span title="U+04B8">&#x04B9; &#x04B9;</span> <span title="U+04BA">&#x04BB; &#x04BB;</span> <span title="U+04BC">&#x04BD; &#x04BD;</span> <span title="U+04BE">&#x04BF; &#x04BF;</span> <span title="U+04C0">&#x04CF; &#x04CF;</span> <span title="U+04C1">&#x04C2; &#x04C2;</span> <span title="U+04C3">&#x04C4; &#x04C4;</span> <span title="U+04C5">&#x04C6; &#x04C6;</span> <span title="U+04C7">&#x04C8; &#x04C8;</span> <span title="U+04C9">&#x04CA; &#x04CA;</span> <span title="U+04CB">&#x04CC; &#x04CC;</span> <span title="U+04CD">&#x04CE; &#x04CE;</span> <span title="U+04D0">&#x04D1; &#x04D1;</span> <span title="U+04D2">&#x04D3; &#x04D3;</span> <span title="U+04D4">&#x04D5; &#x04D5;</span> <span title="U+04D6">&#x04D7; &#x04D7;</span> <span title="U+04D8">&#x04D9; &#x04D9;</span> <span title="U+04DA">&#x04DB; &#x04DB;</span> <span title="U+04DC">&#x04DD; &#x04DD;</span> <span title="U+04DE">&#x04DF; &#x04DF;</span> <span title="U+04E0">&#x04E1; &#x04E1;</span> <span title="U+04E2">&#x04E3; &#x04E3;</span> <span title="U+04E4">&#x04E5; &#x04E5;</span> <span title="U+04E6">&#x04E7; &#x04E7;</span> <span title="U+04E8">&#x04E9; &#x04E9;</span> <span title="U+04EA">&#x04EB; &#x04EB;</span> <span title="U+04EC">&#x04ED; &#x04ED;</span> <span title="U+04EE">&#x04EF; &#x04EF;</span> <span title="U+04F0">&#x04F1; &#x04F1;</span> <span title="U+04F2">&#x04F3; &#x04F3;</span> <span title="U+04F4">&#x04F5; &#x04F5;</span> <span title="U+04F6">&#x04F7; &#x04F7;</span> <span title="U+04F8">&#x04F9; &#x04F9;</span> <span title="U+04FA">&#x04FB; &#x04FB;</span> <span title="U+04FC">&#x04FD; &#x04FD;</span> <span title="U+04FE">&#x04FF; &#x04FF;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x0482; &#x0483; &#x0484; &#x0485; &#x0486; &#x0487; &#x0488; &#x0489;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-020-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-020-ref.html
new file mode 100644
index 0000000000..1dbad5ed81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-020-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic Supplement, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0501">&#x0500; &#x0500;</span> <span title="U+0503">&#x0502; &#x0502;</span> <span title="U+0505">&#x0504; &#x0504;</span> <span title="U+0507">&#x0506; &#x0506;</span> <span title="U+0509">&#x0508; &#x0508;</span> <span title="U+050B">&#x050A; &#x050A;</span> <span title="U+050D">&#x050C; &#x050C;</span> <span title="U+050F">&#x050E; &#x050E;</span> <span title="U+0511">&#x0510; &#x0510;</span> <span title="U+0513">&#x0512; &#x0512;</span> <span title="U+0515">&#x0514; &#x0514;</span> <span title="U+0517">&#x0516; &#x0516;</span> <span title="U+0519">&#x0518; &#x0518;</span> <span title="U+051B">&#x051A; &#x051A;</span> <span title="U+051D">&#x051C; &#x051C;</span> <span title="U+051F">&#x051E; &#x051E;</span> <span title="U+0521">&#x0520; &#x0520;</span> <span title="U+0523">&#x0522; &#x0522;</span> <span title="U+0525">&#x0524; &#x0524;</span> <span title="U+0527">&#x0526; &#x0526;</span> <span title="U+0529">&#x0528; &#x0528;</span> <span title="U+052B">&#x052A; &#x052A;</span> <span title="U+052D">&#x052C; &#x052C;</span> <span title="U+052F">&#x052E; &#x052E;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-021-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-021-ref.html
new file mode 100644
index 0000000000..17fd94a6fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-021-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic Extended, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0500">&#x0501; &#x0501;</span> <span title="U+0502">&#x0503; &#x0503;</span> <span title="U+0504">&#x0505; &#x0505;</span> <span title="U+0506">&#x0507; &#x0507;</span> <span title="U+0508">&#x0509; &#x0509;</span> <span title="U+050A">&#x050B; &#x050B;</span> <span title="U+050C">&#x050D; &#x050D;</span> <span title="U+050E">&#x050F; &#x050F;</span> <span title="U+0510">&#x0511; &#x0511;</span> <span title="U+0512">&#x0513; &#x0513;</span> <span title="U+0514">&#x0515; &#x0515;</span> <span title="U+0516">&#x0517; &#x0517;</span> <span title="U+0518">&#x0519; &#x0519;</span> <span title="U+051A">&#x051B; &#x051B;</span> <span title="U+051C">&#x051D; &#x051D;</span> <span title="U+051E">&#x051F; &#x051F;</span> <span title="U+0520">&#x0521; &#x0521;</span> <span title="U+0522">&#x0523; &#x0523;</span> <span title="U+0524">&#x0525; &#x0525;</span> <span title="U+0526">&#x0527; &#x0527;</span> <span title="U+0528">&#x0529; &#x0529;</span> <span title="U+052A">&#x052B; &#x052B;</span> <span title="U+052C">&#x052D; &#x052D;</span> <span title="U+052E">&#x052F; &#x052F;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-022-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-022-ref.html
new file mode 100644
index 0000000000..7a025ca223
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-022-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Armenian, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansArmenian-Regular') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Noto Sans Armenian', webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0561">&#x0531; &#x0531;</span> <span title="U+0562">&#x0532; &#x0532;</span> <span title="U+0563">&#x0533; &#x0533;</span> <span title="U+0564">&#x0534; &#x0534;</span> <span title="U+0565">&#x0535; &#x0535;</span> <span title="U+0566">&#x0536; &#x0536;</span> <span title="U+0567">&#x0537; &#x0537;</span> <span title="U+0568">&#x0538; &#x0538;</span> <span title="U+0569">&#x0539; &#x0539;</span> <span title="U+056A">&#x053A; &#x053A;</span> <span title="U+056B">&#x053B; &#x053B;</span> <span title="U+056C">&#x053C; &#x053C;</span> <span title="U+056D">&#x053D; &#x053D;</span> <span title="U+056E">&#x053E; &#x053E;</span> <span title="U+056F">&#x053F; &#x053F;</span> <span title="U+0570">&#x0540; &#x0540;</span> <span title="U+0571">&#x0541; &#x0541;</span> <span title="U+0572">&#x0542; &#x0542;</span> <span title="U+0573">&#x0543; &#x0543;</span> <span title="U+0574">&#x0544; &#x0544;</span> <span title="U+0575">&#x0545; &#x0545;</span> <span title="U+0576">&#x0546; &#x0546;</span> <span title="U+0577">&#x0547; &#x0547;</span> <span title="U+0578">&#x0548; &#x0548;</span> <span title="U+0579">&#x0549; &#x0549;</span> <span title="U+057A">&#x054A; &#x054A;</span> <span title="U+057B">&#x054B; &#x054B;</span> <span title="U+057C">&#x054C; &#x054C;</span> <span title="U+057D">&#x054D; &#x054D;</span> <span title="U+057E">&#x054E; &#x054E;</span> <span title="U+057F">&#x054F; &#x054F;</span> <span title="U+0580">&#x0550; &#x0550;</span> <span title="U+0581">&#x0551; &#x0551;</span> <span title="U+0582">&#x0552; &#x0552;</span> <span title="U+0583">&#x0553; &#x0553;</span> <span title="U+0584">&#x0554; &#x0554;</span> <span title="U+0585">&#x0555; &#x0555;</span> <span title="U+0586">&#x0556; &#x0556;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0559; &#x055A; &#x055B; &#x055C; &#x055D; &#x055E; &#x055F; &#x0587; &#x0589; &#x058A; &#x058D; &#x058E; &#x058F;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-023-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-023-ref.html
new file mode 100644
index 0000000000..4108fc090c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-023-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-D, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansArmenian-Regular') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Noto Sans Armenian', webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0531">&#x0561; &#x0561;</span> <span title="U+0532">&#x0562; &#x0562;</span> <span title="U+0533">&#x0563; &#x0563;</span> <span title="U+0534">&#x0564; &#x0564;</span> <span title="U+0535">&#x0565; &#x0565;</span> <span title="U+0536">&#x0566; &#x0566;</span> <span title="U+0537">&#x0567; &#x0567;</span> <span title="U+0538">&#x0568; &#x0568;</span> <span title="U+0539">&#x0569; &#x0569;</span> <span title="U+053A">&#x056A; &#x056A;</span> <span title="U+053B">&#x056B; &#x056B;</span> <span title="U+053C">&#x056C; &#x056C;</span> <span title="U+053D">&#x056D; &#x056D;</span> <span title="U+053E">&#x056E; &#x056E;</span> <span title="U+053F">&#x056F; &#x056F;</span> <span title="U+0540">&#x0570; &#x0570;</span> <span title="U+0541">&#x0571; &#x0571;</span> <span title="U+0542">&#x0572; &#x0572;</span> <span title="U+0543">&#x0573; &#x0573;</span> <span title="U+0544">&#x0574; &#x0574;</span> <span title="U+0545">&#x0575; &#x0575;</span> <span title="U+0546">&#x0576; &#x0576;</span> <span title="U+0547">&#x0577; &#x0577;</span> <span title="U+0548">&#x0578; &#x0578;</span> <span title="U+0549">&#x0579; &#x0579;</span> <span title="U+054A">&#x057A; &#x057A;</span> <span title="U+054B">&#x057B; &#x057B;</span> <span title="U+054C">&#x057C; &#x057C;</span> <span title="U+054D">&#x057D; &#x057D;</span> <span title="U+054E">&#x057E; &#x057E;</span> <span title="U+054F">&#x057F; &#x057F;</span> <span title="U+0550">&#x0580; &#x0580;</span> <span title="U+0551">&#x0581; &#x0581;</span> <span title="U+0552">&#x0582; &#x0582;</span> <span title="U+0553">&#x0583; &#x0583;</span> <span title="U+0554">&#x0584; &#x0584;</span> <span title="U+0555">&#x0585; &#x0585;</span> <span title="U+0556">&#x0586; &#x0586;</span> </div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0559; &#x055A; &#x055B; &#x055C; &#x055D; &#x055E; &#x055F; &#x0587; &#x0589; &#x058A; &#x058D; &#x058E; &#x058F;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-024-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-024-ref.html
new file mode 100644
index 0000000000..f5a403f670
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-024-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Number Forms, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2170">&#x2160; &#x2160;</span> <span title="U+2171">&#x2161; &#x2161;</span> <span title="U+2172">&#x2162; &#x2162;</span> <span title="U+2173">&#x2163; &#x2163;</span> <span title="U+2174">&#x2164; &#x2164;</span> <span title="U+2175">&#x2165; &#x2165;</span> <span title="U+2176">&#x2166; &#x2166;</span> <span title="U+2177">&#x2167; &#x2167;</span> <span title="U+2178">&#x2168; &#x2168;</span> <span title="U+2179">&#x2169; &#x2169;</span> <span title="U+217A">&#x216A; &#x216A;</span> <span title="U+217B">&#x216B; &#x216B;</span> <span title="U+217C">&#x216C; &#x216C;</span> <span title="U+217D">&#x216D; &#x216D;</span> <span title="U+217E">&#x216E; &#x216E;</span> <span title="U+217F">&#x216F; &#x216F;</span> <span title="U+2184">&#x2183; &#x2183;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x2150; &#x2151; &#x2152; &#x2153; &#x2154; &#x2155; &#x2156; &#x2157; &#x2158; &#x2159; &#x215A; &#x215B; &#x215C; &#x215D; &#x215E; &#x215F; &#x2180; &#x2181; &#x2182; &#x2185; &#x2186; &#x2187; &#x2188; &#x2189; &#x2150; &#x2151; &#x2152; &#x2153; &#x2154; &#x2155; &#x2156; &#x2157; &#x2158; &#x2159; &#x215A; &#x215B; &#x215C; &#x215D; &#x215E; &#x215F; &#x2180; &#x2181; &#x2182; &#x2185; &#x2186; &#x2187; &#x2188; &#x2189;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-025-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-025-ref.html
new file mode 100644
index 0000000000..a4bb76e845
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-025-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Number Forms, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2160">&#x2170; &#x2170;</span> <span title="U+2161">&#x2171; &#x2171;</span> <span title="U+2162">&#x2172; &#x2172;</span> <span title="U+2163">&#x2173; &#x2173;</span> <span title="U+2164">&#x2174; &#x2174;</span> <span title="U+2165">&#x2175; &#x2175;</span> <span title="U+2166">&#x2176; &#x2176;</span> <span title="U+2167">&#x2177; &#x2177;</span> <span title="U+2168">&#x2178; &#x2178;</span> <span title="U+2169">&#x2179; &#x2179;</span> <span title="U+216A">&#x217A; &#x217A;</span> <span title="U+216B">&#x217B; &#x217B;</span> <span title="U+216C">&#x217C; &#x217C;</span> <span title="U+216D">&#x217D; &#x217D;</span> <span title="U+216E">&#x217E; &#x217E;</span> <span title="U+216F">&#x217F; &#x217F;</span> <span title="U+2183">&#x2184; &#x2184;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x2150; &#x2151; &#x2152; &#x2153; &#x2154; &#x2155; &#x2156; &#x2157; &#x2158; &#x2159; &#x215A; &#x215B; &#x215C; &#x215D; &#x215E; &#x215F; &#x2180; &#x2181; &#x2182; &#x2185; &#x2186; &#x2187; &#x2188; &#x2189; &#x2150; &#x2151; &#x2152; &#x2153; &#x2154; &#x2155; &#x2156; &#x2157; &#x2158; &#x2159; &#x215A; &#x215B; &#x215C; &#x215D; &#x215E; &#x215F; &#x2180; &#x2181; &#x2182; &#x2185; &#x2186; &#x2187; &#x2188; &#x2189;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-026-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-026-ref.html
new file mode 100644
index 0000000000..d5afb862a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-026-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Enclosed Alphanumerics, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+24D0">&#x24B6; &#x24B6;</span> <span title="U+24D1">&#x24B7; &#x24B7;</span> <span title="U+24D2">&#x24B8; &#x24B8;</span> <span title="U+24D3">&#x24B9; &#x24B9;</span> <span title="U+24D4">&#x24BA; &#x24BA;</span> <span title="U+24D5">&#x24BB; &#x24BB;</span> <span title="U+24D6">&#x24BC; &#x24BC;</span> <span title="U+24D7">&#x24BD; &#x24BD;</span> <span title="U+24D8">&#x24BE; &#x24BE;</span> <span title="U+24D9">&#x24BF; &#x24BF;</span> <span title="U+24DA">&#x24C0; &#x24C0;</span> <span title="U+24DB">&#x24C1; &#x24C1;</span> <span title="U+24DC">&#x24C2; &#x24C2;</span> <span title="U+24DD">&#x24C3; &#x24C3;</span> <span title="U+24DE">&#x24C4; &#x24C4;</span> <span title="U+24DF">&#x24C5; &#x24C5;</span> <span title="U+24E0">&#x24C6; &#x24C6;</span> <span title="U+24E1">&#x24C7; &#x24C7;</span> <span title="U+24E2">&#x24C8; &#x24C8;</span> <span title="U+24E3">&#x24C9; &#x24C9;</span> <span title="U+24E4">&#x24CA; &#x24CA;</span> <span title="U+24E5">&#x24CB; &#x24CB;</span> <span title="U+24E6">&#x24CC; &#x24CC;</span> <span title="U+24E7">&#x24CD; &#x24CD;</span> <span title="U+24E8">&#x24CE; &#x24CE;</span> <span title="U+24E9">&#x24CF; &#x24CF;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x2460; &#x2461; &#x2462; &#x2463; &#x2464; &#x2465; &#x2466; &#x2467; &#x2468; &#x2469; &#x246A; &#x246B; &#x246C; &#x246D; &#x246E; &#x246F; &#x2470; &#x2471; &#x2472; &#x2473; &#x2474; &#x2475; &#x2476; &#x2477; &#x2478; &#x2479; &#x247A; &#x247B; &#x247C; &#x247D; &#x247E; &#x247F; &#x2480; &#x2481; &#x2482; &#x2483; &#x2484; &#x2485; &#x2486; &#x2487; &#x2488; &#x2489; &#x248A; &#x248B; &#x248C; &#x248D; &#x248E; &#x248F; &#x2490; &#x2491; &#x2492; &#x2493; &#x2494; &#x2495; &#x2496; &#x2497; &#x2498; &#x2499; &#x249A; &#x249B; &#x249C; &#x249D; &#x249E; &#x249F; &#x24A0; &#x24A1; &#x24A2; &#x24A3; &#x24A4; &#x24A5; &#x24A6; &#x24A7; &#x24A8; &#x24A9; &#x24AA; &#x24AB; &#x24AC; &#x24AD; &#x24AE; &#x24AF; &#x24B0; &#x24B1; &#x24B2; &#x24B3; &#x24B4; &#x24B5; &#x24EA; &#x24EB; &#x24EC; &#x24ED; &#x24EE; &#x24EF; &#x24F0; &#x24F1; &#x24F2; &#x24F3; &#x24F4; &#x24F5; &#x24F6; &#x24F7; &#x24F8; &#x24F9; &#x24FA; &#x24FB; &#x24FC; &#x24FD; &#x24FE; &#x24FF;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-027-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-027-ref.html
new file mode 100644
index 0000000000..b1f5f17bf5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-027-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Enclosed Alphanumerics, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+24B6">&#x24D0; &#x24D0;</span> <span title="U+24B7">&#x24D1; &#x24D1;</span> <span title="U+24B8">&#x24D2; &#x24D2;</span> <span title="U+24B9">&#x24D3; &#x24D3;</span> <span title="U+24BA">&#x24D4; &#x24D4;</span> <span title="U+24BB">&#x24D5; &#x24D5;</span> <span title="U+24BC">&#x24D6; &#x24D6;</span> <span title="U+24BD">&#x24D7; &#x24D7;</span> <span title="U+24BE">&#x24D8; &#x24D8;</span> <span title="U+24BF">&#x24D9; &#x24D9;</span> <span title="U+24C0">&#x24DA; &#x24DA;</span> <span title="U+24C1">&#x24DB; &#x24DB;</span> <span title="U+24C2">&#x24DC; &#x24DC;</span> <span title="U+24C3">&#x24DD; &#x24DD;</span> <span title="U+24C4">&#x24DE; &#x24DE;</span> <span title="U+24C5">&#x24DF; &#x24DF;</span> <span title="U+24C6">&#x24E0; &#x24E0;</span> <span title="U+24C7">&#x24E1; &#x24E1;</span> <span title="U+24C8">&#x24E2; &#x24E2;</span> <span title="U+24C9">&#x24E3; &#x24E3;</span> <span title="U+24CA">&#x24E4; &#x24E4;</span> <span title="U+24CB">&#x24E5; &#x24E5;</span> <span title="U+24CC">&#x24E6; &#x24E6;</span> <span title="U+24CD">&#x24E7; &#x24E7;</span> <span title="U+24CE">&#x24E8; &#x24E8;</span> <span title="U+24CF">&#x24E9; &#x24E9;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x2460; &#x2461; &#x2462; &#x2463; &#x2464; &#x2465; &#x2466; &#x2467; &#x2468; &#x2469; &#x246A; &#x246B; &#x246C; &#x246D; &#x246E; &#x246F; &#x2470; &#x2471; &#x2472; &#x2473; &#x2474; &#x2475; &#x2476; &#x2477; &#x2478; &#x2479; &#x247A; &#x247B; &#x247C; &#x247D; &#x247E; &#x247F; &#x2480; &#x2481; &#x2482; &#x2483; &#x2484; &#x2485; &#x2486; &#x2487; &#x2488; &#x2489; &#x248A; &#x248B; &#x248C; &#x248D; &#x248E; &#x248F; &#x2490; &#x2491; &#x2492; &#x2493; &#x2494; &#x2495; &#x2496; &#x2497; &#x2498; &#x2499; &#x249A; &#x249B; &#x249C; &#x249D; &#x249E; &#x249F; &#x24A0; &#x24A1; &#x24A2; &#x24A3; &#x24A4; &#x24A5; &#x24A6; &#x24A7; &#x24A8; &#x24A9; &#x24AA; &#x24AB; &#x24AC; &#x24AD; &#x24AE; &#x24AF; &#x24B0; &#x24B1; &#x24B2; &#x24B3; &#x24B4; &#x24B5; &#x24EA; &#x24EB; &#x24EC; &#x24ED; &#x24EE; &#x24EF; &#x24F0; &#x24F1; &#x24F2; &#x24F3; &#x24F4; &#x24F5; &#x24F6; &#x24F7; &#x24F8; &#x24F9; &#x24FA; &#x24FB; &#x24FC; &#x24FD; &#x24FE; &#x24FF;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-028-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-028-ref.html
new file mode 100644
index 0000000000..93d1103ce0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-028-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Deseret, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/noto/NotoSansDeseret-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+10428">&#x10400; &#x10400;</span> <span title="U+10429">&#x10401; &#x10401;</span> <span title="U+1042A">&#x10402; &#x10402;</span> <span title="U+1042B">&#x10403; &#x10403;</span> <span title="U+1042C">&#x10404; &#x10404;</span> <span title="U+1042D">&#x10405; &#x10405;</span> <span title="U+1042E">&#x10406; &#x10406;</span> <span title="U+1042F">&#x10407; &#x10407;</span> <span title="U+10430">&#x10408; &#x10408;</span> <span title="U+10431">&#x10409; &#x10409;</span> <span title="U+10432">&#x1040A; &#x1040A;</span> <span title="U+10433">&#x1040B; &#x1040B;</span> <span title="U+10434">&#x1040C; &#x1040C;</span> <span title="U+10435">&#x1040D; &#x1040D;</span> <span title="U+10436">&#x1040E; &#x1040E;</span> <span title="U+10437">&#x1040F; &#x1040F;</span> <span title="U+10438">&#x10410; &#x10410;</span> <span title="U+10439">&#x10411; &#x10411;</span> <span title="U+1043A">&#x10412; &#x10412;</span> <span title="U+1043B">&#x10413; &#x10413;</span> <span title="U+1043C">&#x10414; &#x10414;</span> <span title="U+1043D">&#x10415; &#x10415;</span> <span title="U+1043E">&#x10416; &#x10416;</span> <span title="U+1043F">&#x10417; &#x10417;</span> <span title="U+10440">&#x10418; &#x10418;</span> <span title="U+10441">&#x10419; &#x10419;</span> <span title="U+10442">&#x1041A; &#x1041A;</span> <span title="U+10443">&#x1041B; &#x1041B;</span> <span title="U+10444">&#x1041C; &#x1041C;</span> <span title="U+10445">&#x1041D; &#x1041D;</span> <span title="U+10446">&#x1041E; &#x1041E;</span> <span title="U+10447">&#x1041F; &#x1041F;</span> <span title="U+10448">&#x10420; &#x10420;</span> <span title="U+10449">&#x10421; &#x10421;</span> <span title="U+1044A">&#x10422; &#x10422;</span> <span title="U+1044B">&#x10423; &#x10423;</span> <span title="U+1044C">&#x10424; &#x10424;</span> <span title="U+1044D">&#x10425; &#x10425;</span> <span title="U+1044E">&#x10426; &#x10426;</span> <span title="U+1044F">&#x10427; &#x10427;</span> </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-029-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-029-ref.html
new file mode 100644
index 0000000000..565f2682f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-029-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Deseret, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/noto/NotoSansDeseret-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+10400">&#x10428; &#x10428;</span> <span title="U+10401">&#x10429; &#x10429;</span> <span title="U+10402">&#x1042A; &#x1042A;</span> <span title="U+10403">&#x1042B; &#x1042B;</span> <span title="U+10404">&#x1042C; &#x1042C;</span> <span title="U+10405">&#x1042D; &#x1042D;</span> <span title="U+10406">&#x1042E; &#x1042E;</span> <span title="U+10407">&#x1042F; &#x1042F;</span> <span title="U+10408">&#x10430; &#x10430;</span> <span title="U+10409">&#x10431; &#x10431;</span> <span title="U+1040A">&#x10432; &#x10432;</span> <span title="U+1040B">&#x10433; &#x10433;</span> <span title="U+1040C">&#x10434; &#x10434;</span> <span title="U+1040D">&#x10435; &#x10435;</span> <span title="U+1040E">&#x10436; &#x10436;</span> <span title="U+1040F">&#x10437; &#x10437;</span> <span title="U+10410">&#x10438; &#x10438;</span> <span title="U+10411">&#x10439; &#x10439;</span> <span title="U+10412">&#x1043A; &#x1043A;</span> <span title="U+10413">&#x1043B; &#x1043B;</span> <span title="U+10414">&#x1043C; &#x1043C;</span> <span title="U+10415">&#x1043D; &#x1043D;</span> <span title="U+10416">&#x1043E; &#x1043E;</span> <span title="U+10417">&#x1043F; &#x1043F;</span> <span title="U+10418">&#x10440; &#x10440;</span> <span title="U+10419">&#x10441; &#x10441;</span> <span title="U+1041A">&#x10442; &#x10442;</span> <span title="U+1041B">&#x10443; &#x10443;</span> <span title="U+1041C">&#x10444; &#x10444;</span> <span title="U+1041D">&#x10445; &#x10445;</span> <span title="U+1041E">&#x10446; &#x10446;</span> <span title="U+1041F">&#x10447; &#x10447;</span> <span title="U+10420">&#x10448; &#x10448;</span> <span title="U+10421">&#x10449; &#x10449;</span> <span title="U+10422">&#x1044A; &#x1044A;</span> <span title="U+10423">&#x1044B; &#x1044B;</span> <span title="U+10424">&#x1044C; &#x1044C;</span> <span title="U+10425">&#x1044D; &#x1044D;</span> <span title="U+10426">&#x1044E; &#x1044E;</span> <span title="U+10427">&#x1044F; &#x1044F;</span> </div>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-030-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-030-ref.html
new file mode 100644
index 0000000000..b935ce02cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-030-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Georgian Supplement, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansGeorgian-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2D00">&#x10A0; &#x10A0;</span> <span title="U+2D01">&#x10A1; &#x10A1;</span> <span title="U+2D02">&#x10A2; &#x10A2;</span> <span title="U+2D03">&#x10A3; &#x10A3;</span> <span title="U+2D04">&#x10A4; &#x10A4;</span> <span title="U+2D05">&#x10A5; &#x10A5;</span> <span title="U+2D06">&#x10A6; &#x10A6;</span> <span title="U+2D07">&#x10A7; &#x10A7;</span> <span title="U+2D08">&#x10A8; &#x10A8;</span> <span title="U+2D09">&#x10A9; &#x10A9;</span> <span title="U+2D0A">&#x10AA; &#x10AA;</span> <span title="U+2D0B">&#x10AB; &#x10AB;</span> <span title="U+2D0C">&#x10AC; &#x10AC;</span> <span title="U+2D0D">&#x10AD; &#x10AD;</span> <span title="U+2D0E">&#x10AE; &#x10AE;</span> <span title="U+2D0F">&#x10AF; &#x10AF;</span> <span title="U+2D10">&#x10B0; &#x10B0;</span> <span title="U+2D11">&#x10B1; &#x10B1;</span> <span title="U+2D12">&#x10B2; &#x10B2;</span> <span title="U+2D13">&#x10B3; &#x10B3;</span> <span title="U+2D14">&#x10B4; &#x10B4;</span> <span title="U+2D15">&#x10B5; &#x10B5;</span> <span title="U+2D16">&#x10B6; &#x10B6;</span> <span title="U+2D17">&#x10B7; &#x10B7;</span> <span title="U+2D18">&#x10B8; &#x10B8;</span> <span title="U+2D19">&#x10B9; &#x10B9;</span> <span title="U+2D1A">&#x10BA; &#x10BA;</span> <span title="U+2D1B">&#x10BB; &#x10BB;</span> <span title="U+2D1C">&#x10BC; &#x10BC;</span> <span title="U+2D1D">&#x10BD; &#x10BD;</span> <span title="U+2D1E">&#x10BE; &#x10BE;</span> <span title="U+2D1F">&#x10BF; &#x10BF;</span> <span title="U+2D20">&#x10C0; &#x10C0;</span> <span title="U+2D21">&#x10C1; &#x10C1;</span> <span title="U+2D22">&#x10C2; &#x10C2;</span> <span title="U+2D23">&#x10C3; &#x10C3;</span> <span title="U+2D24">&#x10C4; &#x10C4;</span> <span title="U+2D25">&#x10C5; &#x10C5;</span> <span title="U+2D27">&#x10C7; &#x10C7;</span> <span title="U+2D2D">&#x10CD; &#x10CD;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-031-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-031-ref.html
new file mode 100644
index 0000000000..047dfe4053
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-031-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Georgian, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansGeorgian-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+10A0">&#x2D00; &#x2D00;</span> <span title="U+10A1">&#x2D01; &#x2D01;</span> <span title="U+10A2">&#x2D02; &#x2D02;</span> <span title="U+10A3">&#x2D03; &#x2D03;</span> <span title="U+10A4">&#x2D04; &#x2D04;</span> <span title="U+10A5">&#x2D05; &#x2D05;</span> <span title="U+10A6">&#x2D06; &#x2D06;</span> <span title="U+10A7">&#x2D07; &#x2D07;</span> <span title="U+10A8">&#x2D08; &#x2D08;</span> <span title="U+10A9">&#x2D09; &#x2D09;</span> <span title="U+10AA">&#x2D0A; &#x2D0A;</span> <span title="U+10AB">&#x2D0B; &#x2D0B;</span> <span title="U+10AC">&#x2D0C; &#x2D0C;</span> <span title="U+10AD">&#x2D0D; &#x2D0D;</span> <span title="U+10AE">&#x2D0E; &#x2D0E;</span> <span title="U+10AF">&#x2D0F; &#x2D0F;</span> <span title="U+10B0">&#x2D10; &#x2D10;</span> <span title="U+10B1">&#x2D11; &#x2D11;</span> <span title="U+10B2">&#x2D12; &#x2D12;</span> <span title="U+10B3">&#x2D13; &#x2D13;</span> <span title="U+10B4">&#x2D14; &#x2D14;</span> <span title="U+10B5">&#x2D15; &#x2D15;</span> <span title="U+10B6">&#x2D16; &#x2D16;</span> <span title="U+10B7">&#x2D17; &#x2D17;</span> <span title="U+10B8">&#x2D18; &#x2D18;</span> <span title="U+10B9">&#x2D19; &#x2D19;</span> <span title="U+10BA">&#x2D1A; &#x2D1A;</span> <span title="U+10BB">&#x2D1B; &#x2D1B;</span> <span title="U+10BC">&#x2D1C; &#x2D1C;</span> <span title="U+10BD">&#x2D1D; &#x2D1D;</span> <span title="U+10BE">&#x2D1E; &#x2D1E;</span> <span title="U+10BF">&#x2D1F; &#x2D1F;</span> <span title="U+10C0">&#x2D20; &#x2D20;</span> <span title="U+10C1">&#x2D21; &#x2D21;</span> <span title="U+10C2">&#x2D22; &#x2D22;</span> <span title="U+10C3">&#x2D23; &#x2D23;</span> <span title="U+10C4">&#x2D24; &#x2D24;</span> <span title="U+10C5">&#x2D25; &#x2D25;</span> <span title="U+10C7">&#x2D27; &#x2D27;</span> <span title="U+10CD">&#x2D2D; &#x2D2D;</span> </div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x10D0; &#x10D1; &#x10D2; &#x10D3; &#x10D4; &#x10D5; &#x10D6; &#x10D7; &#x10D8; &#x10D9; &#x10DA; &#x10DB; &#x10DC; &#x10DD; &#x10DE; &#x10DF; &#x10E0; &#x10E1; &#x10E2; &#x10E3; &#x10E4; &#x10E5; &#x10E6; &#x10E7; &#x10E8; &#x10E9; &#x10EA; &#x10EB; &#x10EC; &#x10ED; &#x10EE; &#x10EF; &#x10F0; &#x10F1; &#x10F2; &#x10F3; &#x10F4; &#x10F5; &#x10F6; &#x10F7; &#x10F8; &#x10F9; &#x10FA; &#x10FB; &#x10FC; &#x10FD; &#x10FE; &#x10FF;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-032-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-032-ref.html
new file mode 100644
index 0000000000..86fb97134a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-032-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: German sharp S, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test, .ref { font-size: 125%; line-height: 1.5em; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters below match.</p>
+<div class="test" lang="de"><span>SS SS</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-033-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-033-ref.html
new file mode 100644
index 0000000000..c68cc8fa1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-033-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin ligatures, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+/* the CSS below is not part of the test */
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>FF FF</span> <span>FI FI</span> <span>FL FL</span> <span>FFI FFI</span> <span>FFL FFL</span> <span>ST ST</span> <span>ST ST</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-034-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-034-ref.html
new file mode 100644
index 0000000000..b3157486c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-034-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Armenian ligatures, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansArmenian-Regular') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Noto Sans Armenian', webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>&#x0535;&#x0552; &#x0535;&#x0552;</span> <span>&#x0544;&#x0546; &#x0544;&#x0546;</span> <span>&#x0544;&#x0535; &#x0544;&#x0535;</span> <span>&#x0544;&#x053B; &#x0544;&#x053B;</span> <span>&#x054E;&#x0546; &#x054E;&#x0546;</span> <span>&#x0544;&#x053D; &#x0544;&#x053D;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-035-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-035-ref.html
new file mode 100644
index 0000000000..e050170986
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-035-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek specials, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>&#x02BC;N &#x02BC;N</span> <span>&#x03AA;&#x0301; &#x03AA;&#x0301;</span> <span>&#x03AB;&#x0301; &#x03AB;&#x0301;</span> <span>J&#x030C; J&#x030C;</span> <span>H&#x0331; H&#x0331;</span> <span>T&#x0308; T&#x0308;</span> <span>W&#x030A; W&#x030A;</span> <span>Y&#x030A;  Y&#x030A;</span> <span>A&#x02BE; A&#x02BE;</span> <span>&#x03A5;&#x0313; &#x03A5;&#x0313;</span> <span>&#x03A5;&#x0313;&#x0300; &#x03A5;&#x0313;&#x0300;</span> <span>&#x03A5;&#x0313;&#x0301; &#x03A5;&#x0313;&#x0301;</span> <span>&#x03A5;&#x0313;&#x0342; &#x03A5;&#x0313;&#x0342;</span> <span>&#x0391;&#x0342; &#x0391;&#x0342;</span> <span>&#x0397;&#x0342; &#x0397;&#x0342;</span> <span>&#x03AA;&#x0300; &#x03AA;&#x0300;</span> <span>&#x03AA;&#x0301; &#x03AA;&#x0301;</span> <span>&#x0399;&#x0342; &#x0399;&#x0342;</span> <span>&#x03AA;&#x0342; &#x03AA;&#x0342;</span> <span>&#x03AB;&#x0300; &#x03AB;&#x0300;</span> <span>&#x03AB;&#x0301; &#x03AB;&#x0301;</span> <span>&#x03A1;&#x0313; &#x03A1;&#x0313;</span> <span>&#x03A5;&#x0342; &#x03A5;&#x0342;</span> <span>&#x03AB;&#x0342; &#x03AB;&#x0342;</span> <span>&#x03A9;&#x0342; &#x03A9;&#x0342;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-038-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-038-ref.html
new file mode 100644
index 0000000000..19d09debf2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-038-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek final sigma, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test">οδυσσευς</div>
+<div class="ref">οδυσσευς</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-039-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-039-ref.html
new file mode 100644
index 0000000000..f97ce02b56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-039-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Lithuanian, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="lt">
+  <span>&#x69;&#x307;&#x300; &#x69;&#x307;&#x300;</span> <span>&#x69;&#x307;&#x301; &#x69;&#x307;&#x301;</span> <span>&#x69;&#x307;&#x303; &#x69;&#x307;&#x303;</span>
+  <span>&#x69;&#x307;&#x300; &#x69;&#x307;&#x300;</span> <span>&#x6A;&#x307;&#x301; &#x6A;&#x307;&#x301;</span> <span>&#x12F;&#x307;&#x303; &#x12F;&#x307;&#x303;</span>
+</div>
+<!--Notes:
+The language of the test box is set to Lithuanian (lt)
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-040-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-040-ref.html
new file mode 100644
index 0000000000..1d8941c9b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-040-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Turkish, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="tr"><span>&#x130; &#x130;</span> <span>&#x49; &#x49;</span></div>
+<!--Notes:
+The language of the test box is set to Turkish (tr).
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-041-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-041-ref.html
new file mode 100644
index 0000000000..2502097be2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-041-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Turkish, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="tr"><span>&#x69; &#x69;</span> <span>&#x69; &#x69;</span> <span>&#x131; &#x131;</span></div>
+<!--Notes:
+The language of the test box is set to Turkish (tr).
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-042-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-042-ref.html
new file mode 100644
index 0000000000..ea15bd474f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-042-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Azeri, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="az"><span>&#x130; &#x130;</span> <span>&#x49; &#x49;</span></div>
+<!--Notes:
+The language of the test box is set to Azeri (az).
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-043-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-043-ref.html
new file mode 100644
index 0000000000..ea8325b185
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-043-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Azeri, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="az"><span>&#x69; &#x69;</span> <span>&#x69; &#x69;</span> <span>&#x131; &#x131;</span></div>
+<!--Notes:
+The language of the test box is set to Azeri (az).
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-044-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-044-ref.html
new file mode 100644
index 0000000000..b4590eb88a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-044-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Lithuanian, uppercase</title>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="lt">
+  <span>&#x49;&#x300; &#x49;&#x300;</span>
+  <span>&#x49;&#x301; &#x49;&#x301;</span>
+  <span>&#x49;&#x303; &#x49;&#x303;</span>
+  <span>&#x49; &#x49;</span>
+  <span>&#x4A; &#x4A;</span>
+  <span>&#x12E; &#x12E;</span>
+  <span>X&#x307; X&#x307;</span>
+</div>
+<!--Notes:
+The language of the test box is set to Lithuanian (lt)
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-101-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-101-ref.html
new file mode 100644
index 0000000000..af2673405f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-101-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-D, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+A723">&#xA722; &#xA722;</span> <span title="U+A725">&#xA724; &#xA724;</span> <span title="U+A727">&#xA726; &#xA726;</span> <span title="U+A729">&#xA728; &#xA728;</span> <span title="U+A72B">&#xA72A; &#xA72A;</span> <span title="U+A72D">&#xA72C; &#xA72C;</span> <span title="U+A72F">&#xA72E; &#xA72E;</span> <span title="U+A733">&#xA732; &#xA732;</span> <span title="U+A735">&#xA734; &#xA734;</span> <span title="U+A737">&#xA736; &#xA736;</span> <span title="U+A739">&#xA738; &#xA738;</span> <span title="U+A73B">&#xA73A; &#xA73A;</span> <span title="U+A73D">&#xA73C; &#xA73C;</span> <span title="U+A73F">&#xA73E; &#xA73E;</span> <span title="U+A741">&#xA740; &#xA740;</span> <span title="U+A743">&#xA742; &#xA742;</span> <span title="U+A745">&#xA744; &#xA744;</span> <span title="U+A747">&#xA746; &#xA746;</span> <span title="U+A749">&#xA748; &#xA748;</span> <span title="U+A74B">&#xA74A; &#xA74A;</span> <span title="U+A74D">&#xA74C; &#xA74C;</span> <span title="U+A74F">&#xA74E; &#xA74E;</span> <span title="U+A751">&#xA750; &#xA750;</span> <span title="U+A753">&#xA752; &#xA752;</span> <span title="U+A755">&#xA754; &#xA754;</span> <span title="U+A757">&#xA756; &#xA756;</span> <span title="U+A759">&#xA758; &#xA758;</span> <span title="U+A75B">&#xA75A; &#xA75A;</span> <span title="U+A75D">&#xA75C; &#xA75C;</span> <span title="U+A75F">&#xA75E; &#xA75E;</span> <span title="U+A761">&#xA760; &#xA760;</span> <span title="U+A763">&#xA762; &#xA762;</span> <span title="U+A765">&#xA764; &#xA764;</span> <span title="U+A767">&#xA766; &#xA766;</span> <span title="U+A769">&#xA768; &#xA768;</span> <span title="U+A76B">&#xA76A; &#xA76A;</span> <span title="U+A76D">&#xA76C; &#xA76C;</span> <span title="U+A76F">&#xA76E; &#xA76E;</span> <span title="U+A77A">&#xA779; &#xA779;</span> <span title="U+A77C">&#xA77B; &#xA77B;</span> <span title="U+A77F">&#xA77E; &#xA77E;</span> <span title="U+A781">&#xA780; &#xA780;</span> <span title="U+A783">&#xA782; &#xA782;</span> <span title="U+A785">&#xA784; &#xA784;</span> <span title="U+A787">&#xA786; &#xA786;</span> <span title="U+A78C">&#xA78B; &#xA78B;</span> <span title="U+A791">&#xA790; &#xA790;</span> <span title="U+A793">&#xA792; &#xA792;</span> <span title="U+A797">&#xA796; &#xA796;</span> <span title="U+A799">&#xA798; &#xA798;</span> <span title="U+A79B">&#xA79A; &#xA79A;</span> <span title="U+A79D">&#xA79C; &#xA79C;</span> <span title="U+A79F">&#xA79E; &#xA79E;</span> <span title="U+A7A1">&#xA7A0; &#xA7A0;</span> <span title="U+A7A3">&#xA7A2; &#xA7A2;</span> <span title="U+A7A5">&#xA7A4; &#xA7A4;</span> <span title="U+A7A7">&#xA7A6; &#xA7A6;</span> <span title="U+A7A9">&#xA7A8; &#xA7A8;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#xA720; &#xA721; &#xA730; &#xA731; &#xA770; &#xA771; &#xA772; &#xA773; &#xA774; &#xA775; &#xA776; &#xA777; &#xA778; &#xA788; &#xA789; &#xA78A; &#xA78E; &#xA794; &#xA795; &#xA7F7; &#xA7F8; &#xA7F9; &#xA7FA; &#xA7FB; &#xA7FC; &#xA7FD; &#xA7FE; &#xA7FF;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-102-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-102-ref.html
new file mode 100644
index 0000000000..5f915e3019
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-102-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-D, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+A722">&#xA723; &#xA723;</span> <span title="U+A724">&#xA725; &#xA725;</span> <span title="U+A726">&#xA727; &#xA727;</span> <span title="U+A728">&#xA729; &#xA729;</span> <span title="U+A72A">&#xA72B; &#xA72B;</span> <span title="U+A72C">&#xA72D; &#xA72D;</span> <span title="U+A72E">&#xA72F; &#xA72F;</span> <span title="U+A732">&#xA733; &#xA733;</span> <span title="U+A734">&#xA735; &#xA735;</span> <span title="U+A736">&#xA737; &#xA737;</span> <span title="U+A738">&#xA739; &#xA739;</span> <span title="U+A73A">&#xA73B; &#xA73B;</span> <span title="U+A73C">&#xA73D; &#xA73D;</span> <span title="U+A73E">&#xA73F; &#xA73F;</span> <span title="U+A740">&#xA741; &#xA741;</span> <span title="U+A742">&#xA743; &#xA743;</span> <span title="U+A744">&#xA745; &#xA745;</span> <span title="U+A746">&#xA747; &#xA747;</span> <span title="U+A748">&#xA749; &#xA749;</span> <span title="U+A74A">&#xA74B; &#xA74B;</span> <span title="U+A74C">&#xA74D; &#xA74D;</span> <span title="U+A74E">&#xA74F; &#xA74F;</span> <span title="U+A750">&#xA751; &#xA751;</span> <span title="U+A752">&#xA753; &#xA753;</span> <span title="U+A754">&#xA755; &#xA755;</span> <span title="U+A756">&#xA757; &#xA757;</span> <span title="U+A758">&#xA759; &#xA759;</span> <span title="U+A75A">&#xA75B; &#xA75B;</span> <span title="U+A75C">&#xA75D; &#xA75D;</span> <span title="U+A75E">&#xA75F; &#xA75F;</span> <span title="U+A760">&#xA761; &#xA761;</span> <span title="U+A762">&#xA763; &#xA763;</span> <span title="U+A764">&#xA765; &#xA765;</span> <span title="U+A766">&#xA767; &#xA767;</span> <span title="U+A768">&#xA769; &#xA769;</span> <span title="U+A76A">&#xA76B; &#xA76B;</span> <span title="U+A76C">&#xA76D; &#xA76D;</span> <span title="U+A76E">&#xA76F; &#xA76F;</span> <span title="U+A779">&#xA77A; &#xA77A;</span> <span title="U+A77B">&#xA77C; &#xA77C;</span> <span title="U+A77D">&#x1D79; &#x1D79;</span> <span title="U+A77E">&#xA77F; &#xA77F;</span> <span title="U+A780">&#xA781; &#xA781;</span> <span title="U+A782">&#xA783; &#xA783;</span> <span title="U+A784">&#xA785; &#xA785;</span> <span title="U+A786">&#xA787; &#xA787;</span> <span title="U+A78B">&#xA78C; &#xA78C;</span> <span title="U+A78D">&#x0265; &#x0265;</span> <span title="U+A790">&#xA791; &#xA791;</span> <span title="U+A792">&#xA793; &#xA793;</span> <span title="U+A796">&#xA797; &#xA797;</span> <span title="U+A798">&#xA799; &#xA799;</span> <span title="U+A79A">&#xA79B; &#xA79B;</span> <span title="U+A79C">&#xA79D; &#xA79D;</span> <span title="U+A79E">&#xA79F; &#xA79F;</span> <span title="U+A7A0">&#xA7A1; &#xA7A1;</span> <span title="U+A7A2">&#xA7A3; &#xA7A3;</span> <span title="U+A7A4">&#xA7A5; &#xA7A5;</span> <span title="U+A7A6">&#xA7A7; &#xA7A7;</span> <span title="U+A7A8">&#xA7A9; &#xA7A9;</span> <span title="U+A7AA">&#x0266; &#x0266;</span> <span title="U+A7AB">&#x025C; &#x025C;</span> <span title="U+A7AC">&#x0261; &#x0261;</span> <span title="U+A7AD">&#x026C; &#x026C;</span> <span title="U+A7B0">&#x029E; &#x029E;</span> <span title="U+A7B1">&#x0287; &#x0287;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#xA720; &#xA721; &#xA730; &#xA731; &#xA770; &#xA771; &#xA772; &#xA773; &#xA774; &#xA775; &#xA776; &#xA777; &#xA778; &#xA788; &#xA789; &#xA78A; &#xA78E; &#xA794; &#xA795; &#xA7F7; &#xA7F8; &#xA7F9; &#xA7FA; &#xA7FB; &#xA7FC; &#xA7FD; &#xA7FE; &#xA7FF;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-103-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-103-ref.html
new file mode 100644
index 0000000000..5b6f7980ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-103-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic Extended-B, uppercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+A641">&#xA640; &#xA640;</span> <span title="U+A643">&#xA642; &#xA642;</span> <span title="U+A645">&#xA644; &#xA644;</span> <span title="U+A647">&#xA646; &#xA646;</span> <span title="U+A649">&#xA648; &#xA648;</span> <span title="U+A64B">&#xA64A; &#xA64A;</span> <span title="U+A64D">&#xA64C; &#xA64C;</span> <span title="U+A64F">&#xA64E; &#xA64E;</span> <span title="U+A651">&#xA650; &#xA650;</span> <span title="U+A653">&#xA652; &#xA652;</span> <span title="U+A655">&#xA654; &#xA654;</span> <span title="U+A657">&#xA656; &#xA656;</span> <span title="U+A659">&#xA658; &#xA658;</span> <span title="U+A65B">&#xA65A; &#xA65A;</span> <span title="U+A65D">&#xA65C; &#xA65C;</span> <span title="U+A65F">&#xA65E; &#xA65E;</span> <span title="U+A661">&#xA660; &#xA660;</span> <span title="U+A663">&#xA662; &#xA662;</span> <span title="U+A665">&#xA664; &#xA664;</span> <span title="U+A667">&#xA666; &#xA666;</span> <span title="U+A669">&#xA668; &#xA668;</span> <span title="U+A66B">&#xA66A; &#xA66A;</span> <span title="U+A66D">&#xA66C; &#xA66C;</span> <span title="U+A681">&#xA680; &#xA680;</span> <span title="U+A683">&#xA682; &#xA682;</span> <span title="U+A685">&#xA684; &#xA684;</span> <span title="U+A687">&#xA686; &#xA686;</span> <span title="U+A689">&#xA688; &#xA688;</span> <span title="U+A68B">&#xA68A; &#xA68A;</span> <span title="U+A68D">&#xA68C; &#xA68C;</span> <span title="U+A68F">&#xA68E; &#xA68E;</span> <span title="U+A691">&#xA690; &#xA690;</span> <span title="U+A693">&#xA692; &#xA692;</span> <span title="U+A695">&#xA694; &#xA694;</span> <span title="U+A697">&#xA696; &#xA696;</span> <span title="U+A699">&#xA698; &#xA698;</span> <span title="U+A69B">&#xA69A; &#xA69A;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#xA66E; &#xA66F; &#xA670; &#xA671; &#xA672; &#xA673; &#xA674; &#xA675; &#xA676; &#xA677; &#xA678; &#xA679; &#xA67A; &#xA67B; &#xA67C; &#xA67D; &#xA67E; &#xA67F; &#xA69C; &#xA69D; &#xA69F;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-104-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-104-ref.html
new file mode 100644
index 0000000000..6c8bb587e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-104-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic Extended-B, lowercase</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+A640">&#xA641; &#xA641;</span> <span title="U+A642">&#xA643; &#xA643;</span> <span title="U+A644">&#xA645; &#xA645;</span> <span title="U+A646">&#xA647; &#xA647;</span> <span title="U+A648">&#xA649; &#xA649;</span> <span title="U+A64A">&#xA64B; &#xA64B;</span> <span title="U+A64C">&#xA64D; &#xA64D;</span> <span title="U+A64E">&#xA64F; &#xA64F;</span> <span title="U+A650">&#xA651; &#xA651;</span> <span title="U+A652">&#xA653; &#xA653;</span> <span title="U+A654">&#xA655; &#xA655;</span> <span title="U+A656">&#xA657; &#xA657;</span> <span title="U+A658">&#xA659; &#xA659;</span> <span title="U+A65A">&#xA65B; &#xA65B;</span> <span title="U+A65C">&#xA65D; &#xA65D;</span> <span title="U+A65E">&#xA65F; &#xA65F;</span> <span title="U+A660">&#xA661; &#xA661;</span> <span title="U+A662">&#xA663; &#xA663;</span> <span title="U+A664">&#xA665; &#xA665;</span> <span title="U+A666">&#xA667; &#xA667;</span> <span title="U+A668">&#xA669; &#xA669;</span> <span title="U+A66A">&#xA66B; &#xA66B;</span> <span title="U+A66C">&#xA66D; &#xA66D;</span> <span title="U+A680">&#xA681; &#xA681;</span> <span title="U+A682">&#xA683; &#xA683;</span> <span title="U+A684">&#xA685; &#xA685;</span> <span title="U+A686">&#xA687; &#xA687;</span> <span title="U+A688">&#xA689; &#xA689;</span> <span title="U+A68A">&#xA68B; &#xA68B;</span> <span title="U+A68C">&#xA68D; &#xA68D;</span> <span title="U+A68E">&#xA68F; &#xA68F;</span> <span title="U+A690">&#xA691; &#xA691;</span> <span title="U+A692">&#xA693; &#xA693;</span> <span title="U+A694">&#xA695; &#xA695;</span> <span title="U+A696">&#xA697; &#xA697;</span> <span title="U+A698">&#xA699; &#xA699;</span> <span title="U+A69A">&#xA69B; &#xA69B;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#xA66E; &#xA66F; &#xA670; &#xA671; &#xA672; &#xA673; &#xA674; &#xA675; &#xA676; &#xA677; &#xA678; &#xA679; &#xA67A; &#xA67B; &#xA67C; &#xA67D; &#xA67E; &#xA67F; &#xA69C; &#xA69D; &#xA69F;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-105-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-105-ref.html
new file mode 100644
index 0000000000..bdd27bcc38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-105-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-transform uppercase German sharp S and selection reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#target {
+  color: white;
+  background: red;
+}
+#target::selection {
+  background: green;
+}
+</style>
+
+<p>The test passes if you see no red below (when you select the text below you can select the whole "SS" text).</p>
+
+<span id="target" lang="de">SS</span>
+
+<script>
+  window.getSelection().setBaseAndExtent(target, 0, target, 1);
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-106-ref.html b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-106-ref.html
new file mode 100644
index 0000000000..cc3dad35de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/reference/text-transform-upperlower-106-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-transform uppercase Greek acute diaeresis iota and selection</title>
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<style>
+#target {
+  color: white;
+  background: red;
+}
+#target::selection {
+  background: green;
+}
+</style>
+
+<p>The test passes if you see red below (by selecting the first letter only).</p>
+
+<span id="target" lang="el">&#x0399;&#x0308;&#x03A1;</span>
+
+<script>
+  window.getSelection().setBaseAndExtent(target.firstChild, 0, target.firstChild, 2);
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-001.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-001.html
new file mode 100644
index 0000000000..1f41ca4beb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Latin Basic and Latin-1</title>
+<meta name="assert" content="For the Latin Basic and Latin-1 blocks, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-001-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>aaa Aaa</span> <span>bbb Bbb</span> <span>ccc Ccc</span> <span>ddd Ddd</span> <span>eee Eee</span> <span>fff Fff</span> <span>ggg Ggg</span> <span>hhh Hhh</span> <span>iii Iii</span> <span>jjj Jjj</span> <span>kkk Kkk</span> <span>lll Lll</span> <span>mmm Mmm</span> <span>nnn Nnn</span> <span>ooo Ooo</span> <span>ppp Ppp</span> <span>qqq Qqq</span> <span>rrr Rrr</span> <span>sss Sss</span> <span>ttt Ttt</span> <span>uuu Uuu</span> <span>vvv Vvv</span> <span>www Www</span> <span>xxx Xxx</span> <span>yyy Yyy</span> <span>zzz Zzz</span> <span title="U+00B5">&#x00B5;&#x00B5;&#x00B5; &#x039C;&#x00B5;&#x00B5;</span>  <span title="U+00E0">&#x00E0;&#x00E0;&#x00E0; &#x00C0;&#x00E0;&#x00E0;</span>  <span title="U+00E1">&#x00E1;&#x00E1;&#x00E1; &#x00C1;&#x00E1;&#x00E1;</span>  <span title="U+00E2">&#x00E2;&#x00E2;&#x00E2; &#x00C2;&#x00E2;&#x00E2;</span>  <span title="U+00E3">&#x00E3;&#x00E3;&#x00E3; &#x00C3;&#x00E3;&#x00E3;</span>  <span title="U+00E4">&#x00E4;&#x00E4;&#x00E4; &#x00C4;&#x00E4;&#x00E4;</span>  <span title="U+00E5">&#x00E5;&#x00E5;&#x00E5; &#x00C5;&#x00E5;&#x00E5;</span>  <span title="U+00E6">&#x00E6;&#x00E6;&#x00E6; &#x00C6;&#x00E6;&#x00E6;</span>  <span title="U+00E7">&#x00E7;&#x00E7;&#x00E7; &#x00C7;&#x00E7;&#x00E7;</span>  <span title="U+00E8">&#x00E8;&#x00E8;&#x00E8; &#x00C8;&#x00E8;&#x00E8;</span>  <span title="U+00E9">&#x00E9;&#x00E9;&#x00E9; &#x00C9;&#x00E9;&#x00E9;</span>  <span title="U+00EA">&#x00EA;&#x00EA;&#x00EA; &#x00CA;&#x00EA;&#x00EA;</span>  <span title="U+00EB">&#x00EB;&#x00EB;&#x00EB; &#x00CB;&#x00EB;&#x00EB;</span>  <span title="U+00EC">&#x00EC;&#x00EC;&#x00EC; &#x00CC;&#x00EC;&#x00EC;</span>  <span title="U+00ED">&#x00ED;&#x00ED;&#x00ED; &#x00CD;&#x00ED;&#x00ED;</span>  <span title="U+00EE">&#x00EE;&#x00EE;&#x00EE; &#x00CE;&#x00EE;&#x00EE;</span>  <span title="U+00EF">&#x00EF;&#x00EF;&#x00EF; &#x00CF;&#x00EF;&#x00EF;</span>  <span title="U+00F0">&#x00F0;&#x00F0;&#x00F0; &#x00D0;&#x00F0;&#x00F0;</span>  <span title="U+00F1">&#x00F1;&#x00F1;&#x00F1; &#x00D1;&#x00F1;&#x00F1;</span>  <span title="U+00F2">&#x00F2;&#x00F2;&#x00F2; &#x00D2;&#x00F2;&#x00F2;</span>  <span title="U+00F3">&#x00F3;&#x00F3;&#x00F3; &#x00D3;&#x00F3;&#x00F3;</span>  <span title="U+00F4">&#x00F4;&#x00F4;&#x00F4; &#x00D4;&#x00F4;&#x00F4;</span>  <span title="U+00F5">&#x00F5;&#x00F5;&#x00F5; &#x00D5;&#x00F5;&#x00F5;</span>  <span title="U+00F6">&#x00F6;&#x00F6;&#x00F6; &#x00D6;&#x00F6;&#x00F6;</span>  <span title="U+00F8">&#x00F8;&#x00F8;&#x00F8; &#x00D8;&#x00F8;&#x00F8;</span>  <span title="U+00F9">&#x00F9;&#x00F9;&#x00F9; &#x00D9;&#x00F9;&#x00F9;</span>  <span title="U+00FA">&#x00FA;&#x00FA;&#x00FA; &#x00DA;&#x00FA;&#x00FA;</span>  <span title="U+00FB">&#x00FB;&#x00FB;&#x00FB; &#x00DB;&#x00FB;&#x00FB;</span>  <span title="U+00FC">&#x00FC;&#x00FC;&#x00FC; &#x00DC;&#x00FC;&#x00FC;</span>  <span title="U+00FD">&#x00FD;&#x00FD;&#x00FD; &#x00DD;&#x00FD;&#x00FD;</span>  <span title="U+00FE">&#x00FE;&#x00FE;&#x00FE; &#x00DE;&#x00FE;&#x00FE;</span>  <span title="U+00FF">&#x00FF;&#x00FF;&#x00FF; &#x0178;&#x00FF;&#x00FF;</span>  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-003.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-003.html
new file mode 100644
index 0000000000..2ba726bd13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-003.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform:  capitalize, Latin Extended Additional</title>
+<meta name="assert" content="For the Latin Extended Additional Unicode block, text-transform: text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-003-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 100%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1E01">&#x1E01;&#x1E01;&#x1E01; &#x1E00;&#x1E01;&#x1E01;</span>  <span title="U+1E03">&#x1E03;&#x1E03;&#x1E03; &#x1E02;&#x1E03;&#x1E03;</span>  <span title="U+1E05">&#x1E05;&#x1E05;&#x1E05; &#x1E04;&#x1E05;&#x1E05;</span>  <span title="U+1E07">&#x1E07;&#x1E07;&#x1E07; &#x1E06;&#x1E07;&#x1E07;</span>  <span title="U+1E09">&#x1E09;&#x1E09;&#x1E09; &#x1E08;&#x1E09;&#x1E09;</span>  <span title="U+1E0B">&#x1E0B;&#x1E0B;&#x1E0B; &#x1E0A;&#x1E0B;&#x1E0B;</span>  <span title="U+1E0D">&#x1E0D;&#x1E0D;&#x1E0D; &#x1E0C;&#x1E0D;&#x1E0D;</span>  <span title="U+1E0F">&#x1E0F;&#x1E0F;&#x1E0F; &#x1E0E;&#x1E0F;&#x1E0F;</span>  <span title="U+1E11">&#x1E11;&#x1E11;&#x1E11; &#x1E10;&#x1E11;&#x1E11;</span>  <span title="U+1E13">&#x1E13;&#x1E13;&#x1E13; &#x1E12;&#x1E13;&#x1E13;</span>  <span title="U+1E15">&#x1E15;&#x1E15;&#x1E15; &#x1E14;&#x1E15;&#x1E15;</span>  <span title="U+1E17">&#x1E17;&#x1E17;&#x1E17; &#x1E16;&#x1E17;&#x1E17;</span>  <span title="U+1E19">&#x1E19;&#x1E19;&#x1E19; &#x1E18;&#x1E19;&#x1E19;</span>  <span title="U+1E1B">&#x1E1B;&#x1E1B;&#x1E1B; &#x1E1A;&#x1E1B;&#x1E1B;</span>  <span title="U+1E1D">&#x1E1D;&#x1E1D;&#x1E1D; &#x1E1C;&#x1E1D;&#x1E1D;</span>  <span title="U+1E1F">&#x1E1F;&#x1E1F;&#x1E1F; &#x1E1E;&#x1E1F;&#x1E1F;</span>  <span title="U+1E21">&#x1E21;&#x1E21;&#x1E21; &#x1E20;&#x1E21;&#x1E21;</span>  <span title="U+1E23">&#x1E23;&#x1E23;&#x1E23; &#x1E22;&#x1E23;&#x1E23;</span>  <span title="U+1E25">&#x1E25;&#x1E25;&#x1E25; &#x1E24;&#x1E25;&#x1E25;</span>  <span title="U+1E27">&#x1E27;&#x1E27;&#x1E27; &#x1E26;&#x1E27;&#x1E27;</span>  <span title="U+1E29">&#x1E29;&#x1E29;&#x1E29; &#x1E28;&#x1E29;&#x1E29;</span>  <span title="U+1E2B">&#x1E2B;&#x1E2B;&#x1E2B; &#x1E2A;&#x1E2B;&#x1E2B;</span>  <span title="U+1E2D">&#x1E2D;&#x1E2D;&#x1E2D; &#x1E2C;&#x1E2D;&#x1E2D;</span>  <span title="U+1E2F">&#x1E2F;&#x1E2F;&#x1E2F; &#x1E2E;&#x1E2F;&#x1E2F;</span>  <span title="U+1E31">&#x1E31;&#x1E31;&#x1E31; &#x1E30;&#x1E31;&#x1E31;</span>  <span title="U+1E33">&#x1E33;&#x1E33;&#x1E33; &#x1E32;&#x1E33;&#x1E33;</span>  <span title="U+1E35">&#x1E35;&#x1E35;&#x1E35; &#x1E34;&#x1E35;&#x1E35;</span>  <span title="U+1E37">&#x1E37;&#x1E37;&#x1E37; &#x1E36;&#x1E37;&#x1E37;</span>  <span title="U+1E39">&#x1E39;&#x1E39;&#x1E39; &#x1E38;&#x1E39;&#x1E39;</span>  <span title="U+1E3B">&#x1E3B;&#x1E3B;&#x1E3B; &#x1E3A;&#x1E3B;&#x1E3B;</span>  <span title="U+1E3D">&#x1E3D;&#x1E3D;&#x1E3D; &#x1E3C;&#x1E3D;&#x1E3D;</span>  <span title="U+1E3F">&#x1E3F;&#x1E3F;&#x1E3F; &#x1E3E;&#x1E3F;&#x1E3F;</span>  <span title="U+1E41">&#x1E41;&#x1E41;&#x1E41; &#x1E40;&#x1E41;&#x1E41;</span>  <span title="U+1E43">&#x1E43;&#x1E43;&#x1E43; &#x1E42;&#x1E43;&#x1E43;</span>  <span title="U+1E45">&#x1E45;&#x1E45;&#x1E45; &#x1E44;&#x1E45;&#x1E45;</span>  <span title="U+1E47">&#x1E47;&#x1E47;&#x1E47; &#x1E46;&#x1E47;&#x1E47;</span>  <span title="U+1E49">&#x1E49;&#x1E49;&#x1E49; &#x1E48;&#x1E49;&#x1E49;</span>  <span title="U+1E4B">&#x1E4B;&#x1E4B;&#x1E4B; &#x1E4A;&#x1E4B;&#x1E4B;</span>  <span title="U+1E4D">&#x1E4D;&#x1E4D;&#x1E4D; &#x1E4C;&#x1E4D;&#x1E4D;</span>  <span title="U+1E4F">&#x1E4F;&#x1E4F;&#x1E4F; &#x1E4E;&#x1E4F;&#x1E4F;</span>  <span title="U+1E51">&#x1E51;&#x1E51;&#x1E51; &#x1E50;&#x1E51;&#x1E51;</span>  <span title="U+1E53">&#x1E53;&#x1E53;&#x1E53; &#x1E52;&#x1E53;&#x1E53;</span>  <span title="U+1E55">&#x1E55;&#x1E55;&#x1E55; &#x1E54;&#x1E55;&#x1E55;</span>  <span title="U+1E57">&#x1E57;&#x1E57;&#x1E57; &#x1E56;&#x1E57;&#x1E57;</span>  <span title="U+1E59">&#x1E59;&#x1E59;&#x1E59; &#x1E58;&#x1E59;&#x1E59;</span>  <span title="U+1E5B">&#x1E5B;&#x1E5B;&#x1E5B; &#x1E5A;&#x1E5B;&#x1E5B;</span>  <span title="U+1E5D">&#x1E5D;&#x1E5D;&#x1E5D; &#x1E5C;&#x1E5D;&#x1E5D;</span>  <span title="U+1E5F">&#x1E5F;&#x1E5F;&#x1E5F; &#x1E5E;&#x1E5F;&#x1E5F;</span>  <span title="U+1E61">&#x1E61;&#x1E61;&#x1E61; &#x1E60;&#x1E61;&#x1E61;</span>  <span title="U+1E63">&#x1E63;&#x1E63;&#x1E63; &#x1E62;&#x1E63;&#x1E63;</span>  <span title="U+1E65">&#x1E65;&#x1E65;&#x1E65; &#x1E64;&#x1E65;&#x1E65;</span>  <span title="U+1E67">&#x1E67;&#x1E67;&#x1E67; &#x1E66;&#x1E67;&#x1E67;</span>  <span title="U+1E69">&#x1E69;&#x1E69;&#x1E69; &#x1E68;&#x1E69;&#x1E69;</span>  <span title="U+1E6B">&#x1E6B;&#x1E6B;&#x1E6B; &#x1E6A;&#x1E6B;&#x1E6B;</span>  <span title="U+1E6D">&#x1E6D;&#x1E6D;&#x1E6D; &#x1E6C;&#x1E6D;&#x1E6D;</span>  <span title="U+1E6F">&#x1E6F;&#x1E6F;&#x1E6F; &#x1E6E;&#x1E6F;&#x1E6F;</span>  <span title="U+1E71">&#x1E71;&#x1E71;&#x1E71; &#x1E70;&#x1E71;&#x1E71;</span>  <span title="U+1E73">&#x1E73;&#x1E73;&#x1E73; &#x1E72;&#x1E73;&#x1E73;</span>  <span title="U+1E75">&#x1E75;&#x1E75;&#x1E75; &#x1E74;&#x1E75;&#x1E75;</span>  <span title="U+1E77">&#x1E77;&#x1E77;&#x1E77; &#x1E76;&#x1E77;&#x1E77;</span>  <span title="U+1E79">&#x1E79;&#x1E79;&#x1E79; &#x1E78;&#x1E79;&#x1E79;</span>  <span title="U+1E7B">&#x1E7B;&#x1E7B;&#x1E7B; &#x1E7A;&#x1E7B;&#x1E7B;</span>  <span title="U+1E7D">&#x1E7D;&#x1E7D;&#x1E7D; &#x1E7C;&#x1E7D;&#x1E7D;</span>  <span title="U+1E7F">&#x1E7F;&#x1E7F;&#x1E7F; &#x1E7E;&#x1E7F;&#x1E7F;</span>  <span title="U+1E81">&#x1E81;&#x1E81;&#x1E81; &#x1E80;&#x1E81;&#x1E81;</span>  <span title="U+1E83">&#x1E83;&#x1E83;&#x1E83; &#x1E82;&#x1E83;&#x1E83;</span>  <span title="U+1E85">&#x1E85;&#x1E85;&#x1E85; &#x1E84;&#x1E85;&#x1E85;</span>  <span title="U+1E87">&#x1E87;&#x1E87;&#x1E87; &#x1E86;&#x1E87;&#x1E87;</span>  <span title="U+1E89">&#x1E89;&#x1E89;&#x1E89; &#x1E88;&#x1E89;&#x1E89;</span>  <span title="U+1E8B">&#x1E8B;&#x1E8B;&#x1E8B; &#x1E8A;&#x1E8B;&#x1E8B;</span>  <span title="U+1E8D">&#x1E8D;&#x1E8D;&#x1E8D; &#x1E8C;&#x1E8D;&#x1E8D;</span>  <span title="U+1E8F">&#x1E8F;&#x1E8F;&#x1E8F; &#x1E8E;&#x1E8F;&#x1E8F;</span>  <span title="U+1E91">&#x1E91;&#x1E91;&#x1E91; &#x1E90;&#x1E91;&#x1E91;</span>  <span title="U+1E93">&#x1E93;&#x1E93;&#x1E93; &#x1E92;&#x1E93;&#x1E93;</span>  <span title="U+1E95">&#x1E95;&#x1E95;&#x1E95; &#x1E94;&#x1E95;&#x1E95;</span>  <span title="U+1E9B">&#x1E9B;&#x1E9B;&#x1E9B; &#x1E60;&#x1E9B;&#x1E9B;</span>  <span title="U+1EA1">&#x1EA1;&#x1EA1;&#x1EA1; &#x1EA0;&#x1EA1;&#x1EA1;</span>  <span title="U+1EA3">&#x1EA3;&#x1EA3;&#x1EA3; &#x1EA2;&#x1EA3;&#x1EA3;</span>  <span title="U+1EA5">&#x1EA5;&#x1EA5;&#x1EA5; &#x1EA4;&#x1EA5;&#x1EA5;</span>  <span title="U+1EA7">&#x1EA7;&#x1EA7;&#x1EA7; &#x1EA6;&#x1EA7;&#x1EA7;</span>  <span title="U+1EA9">&#x1EA9;&#x1EA9;&#x1EA9; &#x1EA8;&#x1EA9;&#x1EA9;</span>  <span title="U+1EAB">&#x1EAB;&#x1EAB;&#x1EAB; &#x1EAA;&#x1EAB;&#x1EAB;</span>  <span title="U+1EAD">&#x1EAD;&#x1EAD;&#x1EAD; &#x1EAC;&#x1EAD;&#x1EAD;</span>  <span title="U+1EAF">&#x1EAF;&#x1EAF;&#x1EAF; &#x1EAE;&#x1EAF;&#x1EAF;</span>  <span title="U+1EB1">&#x1EB1;&#x1EB1;&#x1EB1; &#x1EB0;&#x1EB1;&#x1EB1;</span>  <span title="U+1EB3">&#x1EB3;&#x1EB3;&#x1EB3; &#x1EB2;&#x1EB3;&#x1EB3;</span>  <span title="U+1EB5">&#x1EB5;&#x1EB5;&#x1EB5; &#x1EB4;&#x1EB5;&#x1EB5;</span>  <span title="U+1EB7">&#x1EB7;&#x1EB7;&#x1EB7; &#x1EB6;&#x1EB7;&#x1EB7;</span>  <span title="U+1EB9">&#x1EB9;&#x1EB9;&#x1EB9; &#x1EB8;&#x1EB9;&#x1EB9;</span>  <span title="U+1EBB">&#x1EBB;&#x1EBB;&#x1EBB; &#x1EBA;&#x1EBB;&#x1EBB;</span>  <span title="U+1EBD">&#x1EBD;&#x1EBD;&#x1EBD; &#x1EBC;&#x1EBD;&#x1EBD;</span>  <span title="U+1EBF">&#x1EBF;&#x1EBF;&#x1EBF; &#x1EBE;&#x1EBF;&#x1EBF;</span>  <span title="U+1EC1">&#x1EC1;&#x1EC1;&#x1EC1; &#x1EC0;&#x1EC1;&#x1EC1;</span>  <span title="U+1EC3">&#x1EC3;&#x1EC3;&#x1EC3; &#x1EC2;&#x1EC3;&#x1EC3;</span>  <span title="U+1EC5">&#x1EC5;&#x1EC5;&#x1EC5; &#x1EC4;&#x1EC5;&#x1EC5;</span>  <span title="U+1EC7">&#x1EC7;&#x1EC7;&#x1EC7; &#x1EC6;&#x1EC7;&#x1EC7;</span>  <span title="U+1EC9">&#x1EC9;&#x1EC9;&#x1EC9; &#x1EC8;&#x1EC9;&#x1EC9;</span>  <span title="U+1ECB">&#x1ECB;&#x1ECB;&#x1ECB; &#x1ECA;&#x1ECB;&#x1ECB;</span>  <span title="U+1ECD">&#x1ECD;&#x1ECD;&#x1ECD; &#x1ECC;&#x1ECD;&#x1ECD;</span>  <span title="U+1ECF">&#x1ECF;&#x1ECF;&#x1ECF; &#x1ECE;&#x1ECF;&#x1ECF;</span>  <span title="U+1ED1">&#x1ED1;&#x1ED1;&#x1ED1; &#x1ED0;&#x1ED1;&#x1ED1;</span>  <span title="U+1ED3">&#x1ED3;&#x1ED3;&#x1ED3; &#x1ED2;&#x1ED3;&#x1ED3;</span>  <span title="U+1ED5">&#x1ED5;&#x1ED5;&#x1ED5; &#x1ED4;&#x1ED5;&#x1ED5;</span>  <span title="U+1ED7">&#x1ED7;&#x1ED7;&#x1ED7; &#x1ED6;&#x1ED7;&#x1ED7;</span>  <span title="U+1ED9">&#x1ED9;&#x1ED9;&#x1ED9; &#x1ED8;&#x1ED9;&#x1ED9;</span>  <span title="U+1EDB">&#x1EDB;&#x1EDB;&#x1EDB; &#x1EDA;&#x1EDB;&#x1EDB;</span>  <span title="U+1EDD">&#x1EDD;&#x1EDD;&#x1EDD; &#x1EDC;&#x1EDD;&#x1EDD;</span>  <span title="U+1EDF">&#x1EDF;&#x1EDF;&#x1EDF; &#x1EDE;&#x1EDF;&#x1EDF;</span>  <span title="U+1EE1">&#x1EE1;&#x1EE1;&#x1EE1; &#x1EE0;&#x1EE1;&#x1EE1;</span>  <span title="U+1EE3">&#x1EE3;&#x1EE3;&#x1EE3; &#x1EE2;&#x1EE3;&#x1EE3;</span>  <span title="U+1EE5">&#x1EE5;&#x1EE5;&#x1EE5; &#x1EE4;&#x1EE5;&#x1EE5;</span>  <span title="U+1EE7">&#x1EE7;&#x1EE7;&#x1EE7; &#x1EE6;&#x1EE7;&#x1EE7;</span>  <span title="U+1EE9">&#x1EE9;&#x1EE9;&#x1EE9; &#x1EE8;&#x1EE9;&#x1EE9;</span>  <span title="U+1EEB">&#x1EEB;&#x1EEB;&#x1EEB; &#x1EEA;&#x1EEB;&#x1EEB;</span>  <span title="U+1EED">&#x1EED;&#x1EED;&#x1EED; &#x1EEC;&#x1EED;&#x1EED;</span>  <span title="U+1EEF">&#x1EEF;&#x1EEF;&#x1EEF; &#x1EEE;&#x1EEF;&#x1EEF;</span>  <span title="U+1EF1">&#x1EF1;&#x1EF1;&#x1EF1; &#x1EF0;&#x1EF1;&#x1EF1;</span>  <span title="U+1EF3">&#x1EF3;&#x1EF3;&#x1EF3; &#x1EF2;&#x1EF3;&#x1EF3;</span>  <span title="U+1EF5">&#x1EF5;&#x1EF5;&#x1EF5; &#x1EF4;&#x1EF5;&#x1EF5;</span>  <span title="U+1EF7">&#x1EF7;&#x1EF7;&#x1EF7; &#x1EF6;&#x1EF7;&#x1EF7;</span>  <span title="U+1EF9">&#x1EF9;&#x1EF9;&#x1EF9; &#x1EF8;&#x1EF9;&#x1EF9;</span>  <span title="U+1EFB">&#x1EFB;&#x1EFB;&#x1EFB; &#x1EFA;&#x1EFB;&#x1EFB;</span>  <span title="U+1EFD">&#x1EFD;&#x1EFD;&#x1EFD; &#x1EFC;&#x1EFD;&#x1EFD;</span>  <span title="U+1EFF">&#x1EFF;&#x1EFF;&#x1EFF; &#x1EFE;&#x1EFF;&#x1EFF;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-005.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-005.html
new file mode 100644
index 0000000000..4279ca6ce8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-005.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Latin Extended-A</title>
+<meta name="assert" content="For the Latin Extended-A Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-005-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0101">&#x0101;&#x0101;&#x0101; &#x0100;&#x0101;&#x0101;</span> <span title="U+0103">&#x0103;&#x0103;&#x0103; &#x0102;&#x0103;&#x0103;</span> <span title="U+0105">&#x0105;&#x0105;&#x0105; &#x0104;&#x0105;&#x0105;</span> <span title="U+0107">&#x0107;&#x0107;&#x0107; &#x0106;&#x0107;&#x0107;</span> <span title="U+0109">&#x0109;&#x0109;&#x0109; &#x0108;&#x0109;&#x0109;</span> <span title="U+010B">&#x010B;&#x010B;&#x010B; &#x010A;&#x010B;&#x010B;</span> <span title="U+010D">&#x010D;&#x010D;&#x010D; &#x010C;&#x010D;&#x010D;</span> <span title="U+010F">&#x010F;&#x010F;&#x010F; &#x010E;&#x010F;&#x010F;</span> <span title="U+0111">&#x0111;&#x0111;&#x0111; &#x0110;&#x0111;&#x0111;</span> <span title="U+0113">&#x0113;&#x0113;&#x0113; &#x0112;&#x0113;&#x0113;</span> <span title="U+0115">&#x0115;&#x0115;&#x0115; &#x0114;&#x0115;&#x0115;</span> <span title="U+0117">&#x0117;&#x0117;&#x0117; &#x0116;&#x0117;&#x0117;</span> <span title="U+0119">&#x0119;&#x0119;&#x0119; &#x0118;&#x0119;&#x0119;</span> <span title="U+011B">&#x011B;&#x011B;&#x011B; &#x011A;&#x011B;&#x011B;</span> <span title="U+011D">&#x011D;&#x011D;&#x011D; &#x011C;&#x011D;&#x011D;</span> <span title="U+011F">&#x011F;&#x011F;&#x011F; &#x011E;&#x011F;&#x011F;</span> <span title="U+0121">&#x0121;&#x0121;&#x0121; &#x0120;&#x0121;&#x0121;</span> <span title="U+0123">&#x0123;&#x0123;&#x0123; &#x0122;&#x0123;&#x0123;</span> <span title="U+0125">&#x0125;&#x0125;&#x0125; &#x0124;&#x0125;&#x0125;</span> <span title="U+0127">&#x0127;&#x0127;&#x0127; &#x0126;&#x0127;&#x0127;</span> <span title="U+0129">&#x0129;&#x0129;&#x0129; &#x0128;&#x0129;&#x0129;</span> <span title="U+012B">&#x012B;&#x012B;&#x012B; &#x012A;&#x012B;&#x012B;</span> <span title="U+012D">&#x012D;&#x012D;&#x012D; &#x012C;&#x012D;&#x012D;</span> <span title="U+012F">&#x012F;&#x012F;&#x012F; &#x012E;&#x012F;&#x012F;</span> <span title="U+0131">&#x0131;&#x0131;&#x0131; &#x0049;&#x0131;&#x0131;</span> <span title="U+0133">&#x0133;&#x0133;&#x0133; &#x0132;&#x0133;&#x0133;</span> <span title="U+0135">&#x0135;&#x0135;&#x0135; &#x0134;&#x0135;&#x0135;</span> <span title="U+0137">&#x0137;&#x0137;&#x0137; &#x0136;&#x0137;&#x0137;</span> <span title="U+013A">&#x013A;&#x013A;&#x013A; &#x0139;&#x013A;&#x013A;</span> <span title="U+013C">&#x013C;&#x013C;&#x013C; &#x013B;&#x013C;&#x013C;</span> <span title="U+013E">&#x013E;&#x013E;&#x013E; &#x013D;&#x013E;&#x013E;</span> <span title="U+0140">&#x0140;&#x0140;&#x0140; &#x013F;&#x0140;&#x0140;</span> <span title="U+0142">&#x0142;&#x0142;&#x0142; &#x0141;&#x0142;&#x0142;</span> <span title="U+0144">&#x0144;&#x0144;&#x0144; &#x0143;&#x0144;&#x0144;</span> <span title="U+0146">&#x0146;&#x0146;&#x0146; &#x0145;&#x0146;&#x0146;</span> <span title="U+0148">&#x0148;&#x0148;&#x0148; &#x0147;&#x0148;&#x0148;</span> <span title="U+014B">&#x014B;&#x014B;&#x014B; &#x014A;&#x014B;&#x014B;</span> <span title="U+014D">&#x014D;&#x014D;&#x014D; &#x014C;&#x014D;&#x014D;</span> <span title="U+014F">&#x014F;&#x014F;&#x014F; &#x014E;&#x014F;&#x014F;</span> <span title="U+0151">&#x0151;&#x0151;&#x0151; &#x0150;&#x0151;&#x0151;</span> <span title="U+0153">&#x0153;&#x0153;&#x0153; &#x0152;&#x0153;&#x0153;</span> <span title="U+0155">&#x0155;&#x0155;&#x0155; &#x0154;&#x0155;&#x0155;</span> <span title="U+0157">&#x0157;&#x0157;&#x0157; &#x0156;&#x0157;&#x0157;</span> <span title="U+0159">&#x0159;&#x0159;&#x0159; &#x0158;&#x0159;&#x0159;</span> <span title="U+015B">&#x015B;&#x015B;&#x015B; &#x015A;&#x015B;&#x015B;</span> <span title="U+015D">&#x015D;&#x015D;&#x015D; &#x015C;&#x015D;&#x015D;</span> <span title="U+015F">&#x015F;&#x015F;&#x015F; &#x015E;&#x015F;&#x015F;</span> <span title="U+0161">&#x0161;&#x0161;&#x0161; &#x0160;&#x0161;&#x0161;</span> <span title="U+0163">&#x0163;&#x0163;&#x0163; &#x0162;&#x0163;&#x0163;</span> <span title="U+0165">&#x0165;&#x0165;&#x0165; &#x0164;&#x0165;&#x0165;</span> <span title="U+0167">&#x0167;&#x0167;&#x0167; &#x0166;&#x0167;&#x0167;</span> <span title="U+0169">&#x0169;&#x0169;&#x0169; &#x0168;&#x0169;&#x0169;</span> <span title="U+016B">&#x016B;&#x016B;&#x016B; &#x016A;&#x016B;&#x016B;</span> <span title="U+016D">&#x016D;&#x016D;&#x016D; &#x016C;&#x016D;&#x016D;</span> <span title="U+016F">&#x016F;&#x016F;&#x016F; &#x016E;&#x016F;&#x016F;</span> <span title="U+0171">&#x0171;&#x0171;&#x0171; &#x0170;&#x0171;&#x0171;</span> <span title="U+0173">&#x0173;&#x0173;&#x0173; &#x0172;&#x0173;&#x0173;</span> <span title="U+0175">&#x0175;&#x0175;&#x0175; &#x0174;&#x0175;&#x0175;</span> <span title="U+0177">&#x0177;&#x0177;&#x0177; &#x0176;&#x0177;&#x0177;</span> <span title="U+017A">&#x017A;&#x017A;&#x017A; &#x0179;&#x017A;&#x017A;</span> <span title="U+017C">&#x017C;&#x017C;&#x017C; &#x017B;&#x017C;&#x017C;</span> <span title="U+017E">&#x017E;&#x017E;&#x017E; &#x017D;&#x017E;&#x017E;</span> <span title="U+017F">&#x017F;&#x017F;&#x017F; &#x0053;&#x017F;&#x017F;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-007.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-007.html
new file mode 100644
index 0000000000..6d4e5e432f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-007.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Latin Extended-B</title>
+<meta name="assert" content="For the Latin Extended-B Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-007-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 100%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0180">&#x0180;&#x0180;&#x0180; &#x0243;&#x0180;&#x0180;</span> <span title="U+0183">&#x0183;&#x0183;&#x0183; &#x0182;&#x0183;&#x0183;</span> <span title="U+0185">&#x0185;&#x0185;&#x0185; &#x0184;&#x0185;&#x0185;</span> <span title="U+0188">&#x0188;&#x0188;&#x0188; &#x0187;&#x0188;&#x0188;</span> <span title="U+018C">&#x018C;&#x018C;&#x018C; &#x018B;&#x018C;&#x018C;</span> <span title="U+0192">&#x0192;&#x0192;&#x0192; &#x0191;&#x0192;&#x0192;</span> <span title="U+0195">&#x0195;&#x0195;&#x0195; &#x01F6;&#x0195;&#x0195;</span> <span title="U+0199">&#x0199;&#x0199;&#x0199; &#x0198;&#x0199;&#x0199;</span> <span title="U+019A">&#x019A;&#x019A;&#x019A; &#x023D;&#x019A;&#x019A;</span> <span title="U+019E">&#x019E;&#x019E;&#x019E; &#x0220;&#x019E;&#x019E;</span> <span title="U+01A1">&#x01A1;&#x01A1;&#x01A1; &#x01A0;&#x01A1;&#x01A1;</span> <span title="U+01A3">&#x01A3;&#x01A3;&#x01A3; &#x01A2;&#x01A3;&#x01A3;</span> <span title="U+01A5">&#x01A5;&#x01A5;&#x01A5; &#x01A4;&#x01A5;&#x01A5;</span> <span title="U+01A8">&#x01A8;&#x01A8;&#x01A8; &#x01A7;&#x01A8;&#x01A8;</span> <span title="U+01AD">&#x01AD;&#x01AD;&#x01AD; &#x01AC;&#x01AD;&#x01AD;</span> <span title="U+01B0">&#x01B0;&#x01B0;&#x01B0; &#x01AF;&#x01B0;&#x01B0;</span> <span title="U+01B4">&#x01B4;&#x01B4;&#x01B4; &#x01B3;&#x01B4;&#x01B4;</span> <span title="U+01B6">&#x01B6;&#x01B6;&#x01B6; &#x01B5;&#x01B6;&#x01B6;</span> <span title="U+01B9">&#x01B9;&#x01B9;&#x01B9; &#x01B8;&#x01B9;&#x01B9;</span> <span title="U+01BD">&#x01BD;&#x01BD;&#x01BD; &#x01BC;&#x01BD;&#x01BD;</span> <span title="U+01BF">&#x01BF;&#x01BF;&#x01BF; &#x01F7;&#x01BF;&#x01BF;</span> <span title="U+01C4">&#x01C4;&#x01C6;&#x01C6; &#x01C5;&#x01C6;&#x01C6;</span> <span title="U+01C6">&#x01C6;&#x01C6;&#x01C6; &#x01C5;&#x01C6;&#x01C6;</span> <span title="U+01C7">&#x01C7;&#x01C9;&#x01C9; &#x01C8;&#x01C9;&#x01C9;</span> <span title="U+01C9">&#x01C9;&#x01C9;&#x01C9; &#x01C8;&#x01C9;&#x01C9;</span> <span title="U+01CA">&#x01CA;&#x01CC;&#x01CC; &#x01CB;&#x01CC;&#x01CC;</span> <span title="U+01CC">&#x01CC;&#x01CC;&#x01CC; &#x01CB;&#x01CC;&#x01CC;</span> <span title="U+01CE">&#x01CE;&#x01CE;&#x01CE; &#x01CD;&#x01CE;&#x01CE;</span> <span title="U+01D0">&#x01D0;&#x01D0;&#x01D0; &#x01CF;&#x01D0;&#x01D0;</span> <span title="U+01D2">&#x01D2;&#x01D2;&#x01D2; &#x01D1;&#x01D2;&#x01D2;</span> <span title="U+01D4">&#x01D4;&#x01D4;&#x01D4; &#x01D3;&#x01D4;&#x01D4;</span> <span title="U+01D6">&#x01D6;&#x01D6;&#x01D6; &#x01D5;&#x01D6;&#x01D6;</span> <span title="U+01D8">&#x01D8;&#x01D8;&#x01D8; &#x01D7;&#x01D8;&#x01D8;</span> <span title="U+01DA">&#x01DA;&#x01DA;&#x01DA; &#x01D9;&#x01DA;&#x01DA;</span> <span title="U+01DC">&#x01DC;&#x01DC;&#x01DC; &#x01DB;&#x01DC;&#x01DC;</span> <span title="U+01DD">&#x01DD;&#x01DD;&#x01DD; &#x018E;&#x01DD;&#x01DD;</span> <span title="U+01DF">&#x01DF;&#x01DF;&#x01DF; &#x01DE;&#x01DF;&#x01DF;</span> <span title="U+01E1">&#x01E1;&#x01E1;&#x01E1; &#x01E0;&#x01E1;&#x01E1;</span> <span title="U+01E3">&#x01E3;&#x01E3;&#x01E3; &#x01E2;&#x01E3;&#x01E3;</span> <span title="U+01E5">&#x01E5;&#x01E5;&#x01E5; &#x01E4;&#x01E5;&#x01E5;</span> <span title="U+01E7">&#x01E7;&#x01E7;&#x01E7; &#x01E6;&#x01E7;&#x01E7;</span> <span title="U+01E9">&#x01E9;&#x01E9;&#x01E9; &#x01E8;&#x01E9;&#x01E9;</span> <span title="U+01EB">&#x01EB;&#x01EB;&#x01EB; &#x01EA;&#x01EB;&#x01EB;</span> <span title="U+01ED">&#x01ED;&#x01ED;&#x01ED; &#x01EC;&#x01ED;&#x01ED;</span> <span title="U+01EF">&#x01EF;&#x01EF;&#x01EF; &#x01EE;&#x01EF;&#x01EF;</span> <span title="U+01F1">&#x01F1;&#x01F3;&#x01F3; &#x01F2;&#x01F3;&#x01F3;</span> <span title="U+01F3">&#x01F3;&#x01F3;&#x01F3; &#x01F2;&#x01F3;&#x01F3;</span> <span title="U+01F5">&#x01F5;&#x01F5;&#x01F5; &#x01F4;&#x01F5;&#x01F5;</span> <span title="U+01F9">&#x01F9;&#x01F9;&#x01F9; &#x01F8;&#x01F9;&#x01F9;</span> <span title="U+01FB">&#x01FB;&#x01FB;&#x01FB; &#x01FA;&#x01FB;&#x01FB;</span> <span title="U+01FD">&#x01FD;&#x01FD;&#x01FD; &#x01FC;&#x01FD;&#x01FD;</span> <span title="U+01FF">&#x01FF;&#x01FF;&#x01FF; &#x01FE;&#x01FF;&#x01FF;</span> <span title="U+0201">&#x0201;&#x0201;&#x0201; &#x0200;&#x0201;&#x0201;</span> <span title="U+0203">&#x0203;&#x0203;&#x0203; &#x0202;&#x0203;&#x0203;</span> <span title="U+0205">&#x0205;&#x0205;&#x0205; &#x0204;&#x0205;&#x0205;</span> <span title="U+0207">&#x0207;&#x0207;&#x0207; &#x0206;&#x0207;&#x0207;</span> <span title="U+0209">&#x0209;&#x0209;&#x0209; &#x0208;&#x0209;&#x0209;</span> <span title="U+020B">&#x020B;&#x020B;&#x020B; &#x020A;&#x020B;&#x020B;</span> <span title="U+020D">&#x020D;&#x020D;&#x020D; &#x020C;&#x020D;&#x020D;</span> <span title="U+020F">&#x020F;&#x020F;&#x020F; &#x020E;&#x020F;&#x020F;</span> <span title="U+0211">&#x0211;&#x0211;&#x0211; &#x0210;&#x0211;&#x0211;</span> <span title="U+0213">&#x0213;&#x0213;&#x0213; &#x0212;&#x0213;&#x0213;</span> <span title="U+0215">&#x0215;&#x0215;&#x0215; &#x0214;&#x0215;&#x0215;</span> <span title="U+0217">&#x0217;&#x0217;&#x0217; &#x0216;&#x0217;&#x0217;</span> <span title="U+0219">&#x0219;&#x0219;&#x0219; &#x0218;&#x0219;&#x0219;</span> <span title="U+021B">&#x021B;&#x021B;&#x021B; &#x021A;&#x021B;&#x021B;</span> <span title="U+021D">&#x021D;&#x021D;&#x021D; &#x021C;&#x021D;&#x021D;</span> <span title="U+021F">&#x021F;&#x021F;&#x021F; &#x021E;&#x021F;&#x021F;</span> <span title="U+0223">&#x0223;&#x0223;&#x0223; &#x0222;&#x0223;&#x0223;</span> <span title="U+0225">&#x0225;&#x0225;&#x0225; &#x0224;&#x0225;&#x0225;</span> <span title="U+0227">&#x0227;&#x0227;&#x0227; &#x0226;&#x0227;&#x0227;</span> <span title="U+0229">&#x0229;&#x0229;&#x0229; &#x0228;&#x0229;&#x0229;</span> <span title="U+022B">&#x022B;&#x022B;&#x022B; &#x022A;&#x022B;&#x022B;</span> <span title="U+022D">&#x022D;&#x022D;&#x022D; &#x022C;&#x022D;&#x022D;</span> <span title="U+022F">&#x022F;&#x022F;&#x022F; &#x022E;&#x022F;&#x022F;</span> <span title="U+0231">&#x0231;&#x0231;&#x0231; &#x0230;&#x0231;&#x0231;</span> <span title="U+0233">&#x0233;&#x0233;&#x0233; &#x0232;&#x0233;&#x0233;</span> <span title="U+023C">&#x023C;&#x023C;&#x023C; &#x023B;&#x023C;&#x023C;</span> <span title="U+023F">&#x023F;&#x023F;&#x023F; &#x2C7E;&#x023F;&#x023F;</span> <span title="U+0240">&#x0240;&#x0240;&#x0240; &#x2C7F;&#x0240;&#x0240;</span> <span title="U+0242">&#x0242;&#x0242;&#x0242; &#x0241;&#x0242;&#x0242;</span> <span title="U+0247">&#x0247;&#x0247;&#x0247; &#x0246;&#x0247;&#x0247;</span> <span title="U+0249">&#x0249;&#x0249;&#x0249; &#x0248;&#x0249;&#x0249;</span> <span title="U+024B">&#x024B;&#x024B;&#x024B; &#x024A;&#x024B;&#x024B;</span> <span title="U+024D">&#x024D;&#x024D;&#x024D; &#x024C;&#x024D;&#x024D;</span> <span title="U+024F">&#x024F;&#x024F;&#x024F; &#x024E;&#x024F;&#x024F;</span> </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-009.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-009.html
new file mode 100644
index 0000000000..0e2bdd139f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-009.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Latin Extended-C</title>
+<meta name="assert" content="For the Latin Extended-C Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-009-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2C61">&#x2C61;&#x2C61;&#x2C61; &#x2C60;&#x2C61;&#x2C61;</span> <span title="U+2C65">&#x2C65;&#x2C65;&#x2C65; &#x023A;&#x2C65;&#x2C65;</span> <span title="U+2C66">&#x2C66;&#x2C66;&#x2C66; &#x023E;&#x2C66;&#x2C66;</span> <span title="U+2C68">&#x2C68;&#x2C68;&#x2C68; &#x2C67;&#x2C68;&#x2C68;</span> <span title="U+2C6A">&#x2C6A;&#x2C6A;&#x2C6A; &#x2C69;&#x2C6A;&#x2C6A;</span> <span title="U+2C6C">&#x2C6C;&#x2C6C;&#x2C6C; &#x2C6B;&#x2C6C;&#x2C6C;</span> <span title="U+2C73">&#x2C73;&#x2C73;&#x2C73; &#x2C72;&#x2C73;&#x2C73;</span> <span title="U+2C76">&#x2C76;&#x2C76;&#x2C76; &#x2C75;&#x2C76;&#x2C76;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-010.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-010.html
new file mode 100644
index 0000000000..fd6cb377e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-010.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Latin Extended-D</title>
+<meta name="assert" content="For the Latin Extended-D Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-010-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+A723">&#xA723;&#xA723;&#xA723; &#xA722;&#xA723;&#xA723;</span> <span title="U+A725">&#xA725;&#xA725;&#xA725; &#xA724;&#xA725;&#xA725;</span> <span title="U+A727">&#xA727;&#xA727;&#xA727; &#xA726;&#xA727;&#xA727;</span> <span title="U+A729">&#xA729;&#xA729;&#xA729; &#xA728;&#xA729;&#xA729;</span> <span title="U+A72B">&#xA72B;&#xA72B;&#xA72B; &#xA72A;&#xA72B;&#xA72B;</span> <span title="U+A72D">&#xA72D;&#xA72D;&#xA72D; &#xA72C;&#xA72D;&#xA72D;</span> <span title="U+A72F">&#xA72F;&#xA72F;&#xA72F; &#xA72E;&#xA72F;&#xA72F;</span> <span title="U+A733">&#xA733;&#xA733;&#xA733; &#xA732;&#xA733;&#xA733;</span> <span title="U+A735">&#xA735;&#xA735;&#xA735; &#xA734;&#xA735;&#xA735;</span> <span title="U+A737">&#xA737;&#xA737;&#xA737; &#xA736;&#xA737;&#xA737;</span> <span title="U+A739">&#xA739;&#xA739;&#xA739; &#xA738;&#xA739;&#xA739;</span> <span title="U+A73B">&#xA73B;&#xA73B;&#xA73B; &#xA73A;&#xA73B;&#xA73B;</span> <span title="U+A73D">&#xA73D;&#xA73D;&#xA73D; &#xA73C;&#xA73D;&#xA73D;</span> <span title="U+A73F">&#xA73F;&#xA73F;&#xA73F; &#xA73E;&#xA73F;&#xA73F;</span> <span title="U+A741">&#xA741;&#xA741;&#xA741; &#xA740;&#xA741;&#xA741;</span> <span title="U+A743">&#xA743;&#xA743;&#xA743; &#xA742;&#xA743;&#xA743;</span> <span title="U+A745">&#xA745;&#xA745;&#xA745; &#xA744;&#xA745;&#xA745;</span> <span title="U+A747">&#xA747;&#xA747;&#xA747; &#xA746;&#xA747;&#xA747;</span> <span title="U+A749">&#xA749;&#xA749;&#xA749; &#xA748;&#xA749;&#xA749;</span> <span title="U+A74B">&#xA74B;&#xA74B;&#xA74B; &#xA74A;&#xA74B;&#xA74B;</span> <span title="U+A74D">&#xA74D;&#xA74D;&#xA74D; &#xA74C;&#xA74D;&#xA74D;</span> <span title="U+A74F">&#xA74F;&#xA74F;&#xA74F; &#xA74E;&#xA74F;&#xA74F;</span> <span title="U+A751">&#xA751;&#xA751;&#xA751; &#xA750;&#xA751;&#xA751;</span> <span title="U+A753">&#xA753;&#xA753;&#xA753; &#xA752;&#xA753;&#xA753;</span> <span title="U+A755">&#xA755;&#xA755;&#xA755; &#xA754;&#xA755;&#xA755;</span> <span title="U+A757">&#xA757;&#xA757;&#xA757; &#xA756;&#xA757;&#xA757;</span> <span title="U+A759">&#xA759;&#xA759;&#xA759; &#xA758;&#xA759;&#xA759;</span> <span title="U+A75B">&#xA75B;&#xA75B;&#xA75B; &#xA75A;&#xA75B;&#xA75B;</span> <span title="U+A75D">&#xA75D;&#xA75D;&#xA75D; &#xA75C;&#xA75D;&#xA75D;</span> <span title="U+A75F">&#xA75F;&#xA75F;&#xA75F; &#xA75E;&#xA75F;&#xA75F;</span> <span title="U+A761">&#xA761;&#xA761;&#xA761; &#xA760;&#xA761;&#xA761;</span> <span title="U+A763">&#xA763;&#xA763;&#xA763; &#xA762;&#xA763;&#xA763;</span> <span title="U+A765">&#xA765;&#xA765;&#xA765; &#xA764;&#xA765;&#xA765;</span> <span title="U+A767">&#xA767;&#xA767;&#xA767; &#xA766;&#xA767;&#xA767;</span> <span title="U+A769">&#xA769;&#xA769;&#xA769; &#xA768;&#xA769;&#xA769;</span> <span title="U+A76B">&#xA76B;&#xA76B;&#xA76B; &#xA76A;&#xA76B;&#xA76B;</span> <span title="U+A76D">&#xA76D;&#xA76D;&#xA76D; &#xA76C;&#xA76D;&#xA76D;</span> <span title="U+A76F">&#xA76F;&#xA76F;&#xA76F; &#xA76E;&#xA76F;&#xA76F;</span> <span title="U+A77A">&#xA77A;&#xA77A;&#xA77A; &#xA779;&#xA77A;&#xA77A;</span> <span title="U+A77C">&#xA77C;&#xA77C;&#xA77C; &#xA77B;&#xA77C;&#xA77C;</span> <span title="U+A77F">&#xA77F;&#xA77F;&#xA77F; &#xA77E;&#xA77F;&#xA77F;</span> <span title="U+A781">&#xA781;&#xA781;&#xA781; &#xA780;&#xA781;&#xA781;</span> <span title="U+A783">&#xA783;&#xA783;&#xA783; &#xA782;&#xA783;&#xA783;</span> <span title="U+A785">&#xA785;&#xA785;&#xA785; &#xA784;&#xA785;&#xA785;</span> <span title="U+A787">&#xA787;&#xA787;&#xA787; &#xA786;&#xA787;&#xA787;</span> <span title="U+A78C">&#xA78C;&#xA78C;&#xA78C; &#xA78B;&#xA78C;&#xA78C;</span> <span title="U+A791">&#xA791;&#xA791;&#xA791; &#xA790;&#xA791;&#xA791;</span> <span title="U+A793">&#xA793;&#xA793;&#xA793; &#xA792;&#xA793;&#xA793;</span> <span title="U+A797">&#xA797;&#xA797;&#xA797; &#xA796;&#xA797;&#xA797;</span> <span title="U+A799">&#xA799;&#xA799;&#xA799; &#xA798;&#xA799;&#xA799;</span> <span title="U+A79B">&#xA79B;&#xA79B;&#xA79B; &#xA79A;&#xA79B;&#xA79B;</span> <span title="U+A79D">&#xA79D;&#xA79D;&#xA79D; &#xA79C;&#xA79D;&#xA79D;</span> <span title="U+A79F">&#xA79F;&#xA79F;&#xA79F; &#xA79E;&#xA79F;&#xA79F;</span> <span title="U+A7A1">&#xA7A1;&#xA7A1;&#xA7A1; &#xA7A0;&#xA7A1;&#xA7A1;</span> <span title="U+A7A3">&#xA7A3;&#xA7A3;&#xA7A3; &#xA7A2;&#xA7A3;&#xA7A3;</span> <span title="U+A7A5">&#xA7A5;&#xA7A5;&#xA7A5; &#xA7A4;&#xA7A5;&#xA7A5;</span> <span title="U+A7A7">&#xA7A7;&#xA7A7;&#xA7A7; &#xA7A6;&#xA7A7;&#xA7A7;</span> <span title="U+A7A9">&#xA7A9;&#xA7A9;&#xA7A9; &#xA7A8;&#xA7A9;&#xA7A9;</span> </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-011.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-011.html
new file mode 100644
index 0000000000..eb16d77c77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-011.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Full-width Latin</title>
+<meta name="assert" content="For the Latin letters in the Halfwidth and Fullwidth Forms Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-011-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+FF41">&#xFF41;&#xFF41;&#xFF41; &#xFF21;&#xFF41;&#xFF41;</span> <span title="U+FF42">&#xFF42;&#xFF42;&#xFF42; &#xFF22;&#xFF42;&#xFF42;</span> <span title="U+FF43">&#xFF43;&#xFF43;&#xFF43; &#xFF23;&#xFF43;&#xFF43;</span> <span title="U+FF44">&#xFF44;&#xFF44;&#xFF44; &#xFF24;&#xFF44;&#xFF44;</span> <span title="U+FF45">&#xFF45;&#xFF45;&#xFF45; &#xFF25;&#xFF45;&#xFF45;</span> <span title="U+FF46">&#xFF46;&#xFF46;&#xFF46; &#xFF26;&#xFF46;&#xFF46;</span> <span title="U+FF47">&#xFF47;&#xFF47;&#xFF47; &#xFF27;&#xFF47;&#xFF47;</span> <span title="U+FF48">&#xFF48;&#xFF48;&#xFF48; &#xFF28;&#xFF48;&#xFF48;</span> <span title="U+FF49">&#xFF49;&#xFF49;&#xFF49; &#xFF29;&#xFF49;&#xFF49;</span> <span title="U+FF4A">&#xFF4A;&#xFF4A;&#xFF4A; &#xFF2A;&#xFF4A;&#xFF4A;</span> <span title="U+FF4B">&#xFF4B;&#xFF4B;&#xFF4B; &#xFF2B;&#xFF4B;&#xFF4B;</span> <span title="U+FF4C">&#xFF4C;&#xFF4C;&#xFF4C; &#xFF2C;&#xFF4C;&#xFF4C;</span> <span title="U+FF4D">&#xFF4D;&#xFF4D;&#xFF4D; &#xFF2D;&#xFF4D;&#xFF4D;</span> <span title="U+FF4E">&#xFF4E;&#xFF4E;&#xFF4E; &#xFF2E;&#xFF4E;&#xFF4E;</span> <span title="U+FF4F">&#xFF4F;&#xFF4F;&#xFF4F; &#xFF2F;&#xFF4F;&#xFF4F;</span> <span title="U+FF50">&#xFF50;&#xFF50;&#xFF50; &#xFF30;&#xFF50;&#xFF50;</span> <span title="U+FF51">&#xFF51;&#xFF51;&#xFF51; &#xFF31;&#xFF51;&#xFF51;</span> <span title="U+FF52">&#xFF52;&#xFF52;&#xFF52; &#xFF32;&#xFF52;&#xFF52;</span> <span title="U+FF53">&#xFF53;&#xFF53;&#xFF53; &#xFF33;&#xFF53;&#xFF53;</span> <span title="U+FF54">&#xFF54;&#xFF54;&#xFF54; &#xFF34;&#xFF54;&#xFF54;</span> <span title="U+FF55">&#xFF55;&#xFF55;&#xFF55; &#xFF35;&#xFF55;&#xFF55;</span> <span title="U+FF56">&#xFF56;&#xFF56;&#xFF56; &#xFF36;&#xFF56;&#xFF56;</span> <span title="U+FF57">&#xFF57;&#xFF57;&#xFF57; &#xFF37;&#xFF57;&#xFF57;</span> <span title="U+FF58">&#xFF58;&#xFF58;&#xFF58; &#xFF38;&#xFF58;&#xFF58;</span> <span title="U+FF59">&#xFF59;&#xFF59;&#xFF59; &#xFF39;&#xFF59;&#xFF59;</span> <span title="U+FF5A">&#xFF5A;&#xFF5A;&#xFF5A; &#xFF3A;&#xFF5A;&#xFF5A;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-014.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-014.html
new file mode 100644
index 0000000000..69550cfb7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-014.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Greek and Coptic</title>
+<meta name="assert" content="For the Greek and Coptic Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-014-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0371">&#x0371;&#x0371;&#x0371; &#x0370;&#x0371;&#x0371;</span> <span title="U+0373">&#x0373;&#x0373;&#x0373; &#x0372;&#x0373;&#x0373;</span> <span title="U+0377">&#x0377;&#x0377;&#x0377; &#x0376;&#x0377;&#x0377;</span> <span title="U+037B">&#x037B;&#x037B;&#x037B; &#x03FD;&#x037B;&#x037B;</span> <span title="U+037C">&#x037C;&#x037C;&#x037C; &#x03FE;&#x037C;&#x037C;</span> <span title="U+037D">&#x037D;&#x037D;&#x037D; &#x03FF;&#x037D;&#x037D;</span> <span title="U+03AC">&#x03AC;&#x03AC;&#x03AC; &#x0386;&#x03AC;&#x03AC;</span> <span title="U+03AD">&#x03AD;&#x03AD;&#x03AD; &#x0388;&#x03AD;&#x03AD;</span> <span title="U+03AE">&#x03AE;&#x03AE;&#x03AE; &#x0389;&#x03AE;&#x03AE;</span> <span title="U+03AF">&#x03AF;&#x03AF;&#x03AF; &#x038A;&#x03AF;&#x03AF;</span> <span title="U+03B1">&#x03B1;&#x03B1;&#x03B1; &#x0391;&#x03B1;&#x03B1;</span> <span title="U+03B2">&#x03B2;&#x03B2;&#x03B2; &#x0392;&#x03B2;&#x03B2;</span> <span title="U+03B3">&#x03B3;&#x03B3;&#x03B3; &#x0393;&#x03B3;&#x03B3;</span> <span title="U+03B4">&#x03B4;&#x03B4;&#x03B4; &#x0394;&#x03B4;&#x03B4;</span> <span title="U+03B5">&#x03B5;&#x03B5;&#x03B5; &#x0395;&#x03B5;&#x03B5;</span> <span title="U+03B6">&#x03B6;&#x03B6;&#x03B6; &#x0396;&#x03B6;&#x03B6;</span> <span title="U+03B7">&#x03B7;&#x03B7;&#x03B7; &#x0397;&#x03B7;&#x03B7;</span> <span title="U+03B8">&#x03B8;&#x03B8;&#x03B8; &#x0398;&#x03B8;&#x03B8;</span> <span title="U+03B9">&#x03B9;&#x03B9;&#x03B9; &#x0399;&#x03B9;&#x03B9;</span> <span title="U+03BA">&#x03BA;&#x03BA;&#x03BA; &#x039A;&#x03BA;&#x03BA;</span> <span title="U+03BB">&#x03BB;&#x03BB;&#x03BB; &#x039B;&#x03BB;&#x03BB;</span> <span title="U+03BC">&#x03BC;&#x03BC;&#x03BC; &#x039C;&#x03BC;&#x03BC;</span> <span title="U+03BD">&#x03BD;&#x03BD;&#x03BD; &#x039D;&#x03BD;&#x03BD;</span> <span title="U+03BE">&#x03BE;&#x03BE;&#x03BE; &#x039E;&#x03BE;&#x03BE;</span> <span title="U+03BF">&#x03BF;&#x03BF;&#x03BF; &#x039F;&#x03BF;&#x03BF;</span> <span title="U+03C0">&#x03C0;&#x03C0;&#x03C0; &#x03A0;&#x03C0;&#x03C0;</span> <span title="U+03C1">&#x03C1;&#x03C1;&#x03C1; &#x03A1;&#x03C1;&#x03C1;</span> <span title="U+03C2">&#x03C2;&#x03C2;&#x03C2; &#x03A3;&#x03C2;&#x03C2;</span> <span title="U+03C3">&#x03C3;&#x03C3;&#x03C3; &#x03A3;&#x03C3;&#x03C3;</span> <span title="U+03C4">&#x03C4;&#x03C4;&#x03C4; &#x03A4;&#x03C4;&#x03C4;</span> <span title="U+03C5">&#x03C5;&#x03C5;&#x03C5; &#x03A5;&#x03C5;&#x03C5;</span> <span title="U+03C6">&#x03C6;&#x03C6;&#x03C6; &#x03A6;&#x03C6;&#x03C6;</span> <span title="U+03C7">&#x03C7;&#x03C7;&#x03C7; &#x03A7;&#x03C7;&#x03C7;</span> <span title="U+03C8">&#x03C8;&#x03C8;&#x03C8; &#x03A8;&#x03C8;&#x03C8;</span> <span title="U+03C9">&#x03C9;&#x03C9;&#x03C9; &#x03A9;&#x03C9;&#x03C9;</span> <span title="U+03CA">&#x03CA;&#x03CA;&#x03CA; &#x03AA;&#x03CA;&#x03CA;</span> <span title="U+03CB">&#x03CB;&#x03CB;&#x03CB; &#x03AB;&#x03CB;&#x03CB;</span> <span title="U+03CC">&#x03CC;&#x03CC;&#x03CC; &#x038C;&#x03CC;&#x03CC;</span> <span title="U+03CD">&#x03CD;&#x03CD;&#x03CD; &#x038E;&#x03CD;&#x03CD;</span> <span title="U+03CE">&#x03CE;&#x03CE;&#x03CE; &#x038F;&#x03CE;&#x03CE;</span> <span title="U+03D0">&#x03D0;&#x03D0;&#x03D0; &#x0392;&#x03D0;&#x03D0;</span> <span title="U+03D1">&#x03D1;&#x03D1;&#x03D1; &#x0398;&#x03D1;&#x03D1;</span> <span title="U+03D5">&#x03D5;&#x03D5;&#x03D5; &#x03A6;&#x03D5;&#x03D5;</span> <span title="U+03D6">&#x03D6;&#x03D6;&#x03D6; &#x03A0;&#x03D6;&#x03D6;</span> <span title="U+03D7">&#x03D7;&#x03D7;&#x03D7; &#x03CF;&#x03D7;&#x03D7;</span> <span title="U+03D9">&#x03D9;&#x03D9;&#x03D9; &#x03D8;&#x03D9;&#x03D9;</span> <span title="U+03DB">&#x03DB;&#x03DB;&#x03DB; &#x03DA;&#x03DB;&#x03DB;</span> <span title="U+03DD">&#x03DD;&#x03DD;&#x03DD; &#x03DC;&#x03DD;&#x03DD;</span> <span title="U+03DF">&#x03DF;&#x03DF;&#x03DF; &#x03DE;&#x03DF;&#x03DF;</span> <span title="U+03E1">&#x03E1;&#x03E1;&#x03E1; &#x03E0;&#x03E1;&#x03E1;</span> <span title="U+03E3">&#x03E3;&#x03E3;&#x03E3; &#x03E2;&#x03E3;&#x03E3;</span> <span title="U+03E5">&#x03E5;&#x03E5;&#x03E5; &#x03E4;&#x03E5;&#x03E5;</span> <span title="U+03E7">&#x03E7;&#x03E7;&#x03E7; &#x03E6;&#x03E7;&#x03E7;</span> <span title="U+03E9">&#x03E9;&#x03E9;&#x03E9; &#x03E8;&#x03E9;&#x03E9;</span> <span title="U+03EB">&#x03EB;&#x03EB;&#x03EB; &#x03EA;&#x03EB;&#x03EB;</span> <span title="U+03ED">&#x03ED;&#x03ED;&#x03ED; &#x03EC;&#x03ED;&#x03ED;</span> <span title="U+03EF">&#x03EF;&#x03EF;&#x03EF; &#x03EE;&#x03EF;&#x03EF;</span> <span title="U+03F0">&#x03F0;&#x03F0;&#x03F0; &#x039A;&#x03F0;&#x03F0;</span> <span title="U+03F1">&#x03F1;&#x03F1;&#x03F1; &#x03A1;&#x03F1;&#x03F1;</span> <span title="U+03F2">&#x03F2;&#x03F2;&#x03F2; &#x03F9;&#x03F2;&#x03F2;</span> <span title="U+03F3">&#x03F3;&#x03F3;&#x03F3; &#x037F;&#x03F3;&#x03F3;</span> <span title="U+03F5">&#x03F5;&#x03F5;&#x03F5; &#x0395;&#x03F5;&#x03F5;</span> <span title="U+03F8">&#x03F8;&#x03F8;&#x03F8; &#x03F7;&#x03F8;&#x03F8;</span> <span title="U+03FB">&#x03FB;&#x03FB;&#x03FB; &#x03FA;&#x03FB;&#x03FB;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-016.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-016.html
new file mode 100644
index 0000000000..7e1bbe3d6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-016.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Greek Extended</title>
+<meta name="assert" content="For the Greek Extended Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-016-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 100%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1F00">&#x1F00;&#x1F00;&#x1F00; &#x1F08;&#x1F00;&#x1F00;</span> <span title="U+1F01">&#x1F01;&#x1F01;&#x1F01; &#x1F09;&#x1F01;&#x1F01;</span> <span title="U+1F02">&#x1F02;&#x1F02;&#x1F02; &#x1F0A;&#x1F02;&#x1F02;</span> <span title="U+1F03">&#x1F03;&#x1F03;&#x1F03; &#x1F0B;&#x1F03;&#x1F03;</span> <span title="U+1F04">&#x1F04;&#x1F04;&#x1F04; &#x1F0C;&#x1F04;&#x1F04;</span> <span title="U+1F05">&#x1F05;&#x1F05;&#x1F05; &#x1F0D;&#x1F05;&#x1F05;</span> <span title="U+1F06">&#x1F06;&#x1F06;&#x1F06; &#x1F0E;&#x1F06;&#x1F06;</span> <span title="U+1F07">&#x1F07;&#x1F07;&#x1F07; &#x1F0F;&#x1F07;&#x1F07;</span> <span title="U+1F10">&#x1F10;&#x1F10;&#x1F10; &#x1F18;&#x1F10;&#x1F10;</span> <span title="U+1F11">&#x1F11;&#x1F11;&#x1F11; &#x1F19;&#x1F11;&#x1F11;</span> <span title="U+1F12">&#x1F12;&#x1F12;&#x1F12; &#x1F1A;&#x1F12;&#x1F12;</span> <span title="U+1F13">&#x1F13;&#x1F13;&#x1F13; &#x1F1B;&#x1F13;&#x1F13;</span> <span title="U+1F14">&#x1F14;&#x1F14;&#x1F14; &#x1F1C;&#x1F14;&#x1F14;</span> <span title="U+1F15">&#x1F15;&#x1F15;&#x1F15; &#x1F1D;&#x1F15;&#x1F15;</span> <span title="U+1F20">&#x1F20;&#x1F20;&#x1F20; &#x1F28;&#x1F20;&#x1F20;</span> <span title="U+1F21">&#x1F21;&#x1F21;&#x1F21; &#x1F29;&#x1F21;&#x1F21;</span> <span title="U+1F22">&#x1F22;&#x1F22;&#x1F22; &#x1F2A;&#x1F22;&#x1F22;</span> <span title="U+1F23">&#x1F23;&#x1F23;&#x1F23; &#x1F2B;&#x1F23;&#x1F23;</span> <span title="U+1F24">&#x1F24;&#x1F24;&#x1F24; &#x1F2C;&#x1F24;&#x1F24;</span> <span title="U+1F25">&#x1F25;&#x1F25;&#x1F25; &#x1F2D;&#x1F25;&#x1F25;</span> <span title="U+1F26">&#x1F26;&#x1F26;&#x1F26; &#x1F2E;&#x1F26;&#x1F26;</span> <span title="U+1F27">&#x1F27;&#x1F27;&#x1F27; &#x1F2F;&#x1F27;&#x1F27;</span> <span title="U+1F30">&#x1F30;&#x1F30;&#x1F30; &#x1F38;&#x1F30;&#x1F30;</span> <span title="U+1F31">&#x1F31;&#x1F31;&#x1F31; &#x1F39;&#x1F31;&#x1F31;</span> <span title="U+1F32">&#x1F32;&#x1F32;&#x1F32; &#x1F3A;&#x1F32;&#x1F32;</span> <span title="U+1F33">&#x1F33;&#x1F33;&#x1F33; &#x1F3B;&#x1F33;&#x1F33;</span> <span title="U+1F34">&#x1F34;&#x1F34;&#x1F34; &#x1F3C;&#x1F34;&#x1F34;</span> <span title="U+1F35">&#x1F35;&#x1F35;&#x1F35; &#x1F3D;&#x1F35;&#x1F35;</span> <span title="U+1F36">&#x1F36;&#x1F36;&#x1F36; &#x1F3E;&#x1F36;&#x1F36;</span> <span title="U+1F37">&#x1F37;&#x1F37;&#x1F37; &#x1F3F;&#x1F37;&#x1F37;</span> <span title="U+1F40">&#x1F40;&#x1F40;&#x1F40; &#x1F48;&#x1F40;&#x1F40;</span> <span title="U+1F41">&#x1F41;&#x1F41;&#x1F41; &#x1F49;&#x1F41;&#x1F41;</span> <span title="U+1F42">&#x1F42;&#x1F42;&#x1F42; &#x1F4A;&#x1F42;&#x1F42;</span> <span title="U+1F43">&#x1F43;&#x1F43;&#x1F43; &#x1F4B;&#x1F43;&#x1F43;</span> <span title="U+1F44">&#x1F44;&#x1F44;&#x1F44; &#x1F4C;&#x1F44;&#x1F44;</span> <span title="U+1F45">&#x1F45;&#x1F45;&#x1F45; &#x1F4D;&#x1F45;&#x1F45;</span> <span title="U+1F51">&#x1F51;&#x1F51;&#x1F51; &#x1F59;&#x1F51;&#x1F51;</span> <span title="U+1F53">&#x1F53;&#x1F53;&#x1F53; &#x1F5B;&#x1F53;&#x1F53;</span> <span title="U+1F55">&#x1F55;&#x1F55;&#x1F55; &#x1F5D;&#x1F55;&#x1F55;</span> <span title="U+1F57">&#x1F57;&#x1F57;&#x1F57; &#x1F5F;&#x1F57;&#x1F57;</span> <span title="U+1F60">&#x1F60;&#x1F60;&#x1F60; &#x1F68;&#x1F60;&#x1F60;</span> <span title="U+1F61">&#x1F61;&#x1F61;&#x1F61; &#x1F69;&#x1F61;&#x1F61;</span> <span title="U+1F62">&#x1F62;&#x1F62;&#x1F62; &#x1F6A;&#x1F62;&#x1F62;</span> <span title="U+1F63">&#x1F63;&#x1F63;&#x1F63; &#x1F6B;&#x1F63;&#x1F63;</span> <span title="U+1F64">&#x1F64;&#x1F64;&#x1F64; &#x1F6C;&#x1F64;&#x1F64;</span> <span title="U+1F65">&#x1F65;&#x1F65;&#x1F65; &#x1F6D;&#x1F65;&#x1F65;</span> <span title="U+1F66">&#x1F66;&#x1F66;&#x1F66; &#x1F6E;&#x1F66;&#x1F66;</span> <span title="U+1F67">&#x1F67;&#x1F67;&#x1F67; &#x1F6F;&#x1F67;&#x1F67;</span> <span title="U+1F70">&#x1F70;&#x1F70;&#x1F70; &#x1FBA;&#x1F70;&#x1F70;</span> <span title="U+1F71">&#x1F71;&#x1F71;&#x1F71; &#x1FBB;&#x1F71;&#x1F71;</span> <span title="U+1F72">&#x1F72;&#x1F72;&#x1F72; &#x1FC8;&#x1F72;&#x1F72;</span> <span title="U+1F73">&#x1F73;&#x1F73;&#x1F73; &#x1FC9;&#x1F73;&#x1F73;</span> <span title="U+1F74">&#x1F74;&#x1F74;&#x1F74; &#x1FCA;&#x1F74;&#x1F74;</span> <span title="U+1F75">&#x1F75;&#x1F75;&#x1F75; &#x1FCB;&#x1F75;&#x1F75;</span> <span title="U+1F76">&#x1F76;&#x1F76;&#x1F76; &#x1FDA;&#x1F76;&#x1F76;</span> <span title="U+1F77">&#x1F77;&#x1F77;&#x1F77; &#x1FDB;&#x1F77;&#x1F77;</span> <span title="U+1F78">&#x1F78;&#x1F78;&#x1F78; &#x1FF8;&#x1F78;&#x1F78;</span> <span title="U+1F79">&#x1F79;&#x1F79;&#x1F79; &#x1FF9;&#x1F79;&#x1F79;</span> <span title="U+1F7A">&#x1F7A;&#x1F7A;&#x1F7A; &#x1FEA;&#x1F7A;&#x1F7A;</span> <span title="U+1F7B">&#x1F7B;&#x1F7B;&#x1F7B; &#x1FEB;&#x1F7B;&#x1F7B;</span> <span title="U+1F7C">&#x1F7C;&#x1F7C;&#x1F7C; &#x1FFA;&#x1F7C;&#x1F7C;</span> <span title="U+1F7D">&#x1F7D;&#x1F7D;&#x1F7D; &#x1FFB;&#x1F7D;&#x1F7D;</span> <span title="U+1F80">&#x1F80;&#x1F80;&#x1F80; &#x1F88;&#x1F80;&#x1F80;</span> <span title="U+1F81">&#x1F81;&#x1F81;&#x1F81; &#x1F89;&#x1F81;&#x1F81;</span> <span title="U+1F82">&#x1F82;&#x1F82;&#x1F82; &#x1F8A;&#x1F82;&#x1F82;</span> <span title="U+1F83">&#x1F83;&#x1F83;&#x1F83; &#x1F8B;&#x1F83;&#x1F83;</span> <span title="U+1F84">&#x1F84;&#x1F84;&#x1F84; &#x1F8C;&#x1F84;&#x1F84;</span> <span title="U+1F85">&#x1F85;&#x1F85;&#x1F85; &#x1F8D;&#x1F85;&#x1F85;</span> <span title="U+1F86">&#x1F86;&#x1F86;&#x1F86; &#x1F8E;&#x1F86;&#x1F86;</span> <span title="U+1F87">&#x1F87;&#x1F87;&#x1F87; &#x1F8F;&#x1F87;&#x1F87;</span> <span title="U+1F90">&#x1F90;&#x1F90;&#x1F90; &#x1F98;&#x1F90;&#x1F90;</span> <span title="U+1F91">&#x1F91;&#x1F91;&#x1F91; &#x1F99;&#x1F91;&#x1F91;</span> <span title="U+1F92">&#x1F92;&#x1F92;&#x1F92; &#x1F9A;&#x1F92;&#x1F92;</span> <span title="U+1F93">&#x1F93;&#x1F93;&#x1F93; &#x1F9B;&#x1F93;&#x1F93;</span> <span title="U+1F94">&#x1F94;&#x1F94;&#x1F94; &#x1F9C;&#x1F94;&#x1F94;</span> <span title="U+1F95">&#x1F95;&#x1F95;&#x1F95; &#x1F9D;&#x1F95;&#x1F95;</span> <span title="U+1F96">&#x1F96;&#x1F96;&#x1F96; &#x1F9E;&#x1F96;&#x1F96;</span> <span title="U+1F97">&#x1F97;&#x1F97;&#x1F97; &#x1F9F;&#x1F97;&#x1F97;</span> <span title="U+1FA0">&#x1FA0;&#x1FA0;&#x1FA0; &#x1FA8;&#x1FA0;&#x1FA0;</span> <span title="U+1FA1">&#x1FA1;&#x1FA1;&#x1FA1; &#x1FA9;&#x1FA1;&#x1FA1;</span> <span title="U+1FA2">&#x1FA2;&#x1FA2;&#x1FA2; &#x1FAA;&#x1FA2;&#x1FA2;</span> <span title="U+1FA3">&#x1FA3;&#x1FA3;&#x1FA3; &#x1FAB;&#x1FA3;&#x1FA3;</span> <span title="U+1FA4">&#x1FA4;&#x1FA4;&#x1FA4; &#x1FAC;&#x1FA4;&#x1FA4;</span> <span title="U+1FA5">&#x1FA5;&#x1FA5;&#x1FA5; &#x1FAD;&#x1FA5;&#x1FA5;</span> <span title="U+1FA6">&#x1FA6;&#x1FA6;&#x1FA6; &#x1FAE;&#x1FA6;&#x1FA6;</span> <span title="U+1FA7">&#x1FA7;&#x1FA7;&#x1FA7; &#x1FAF;&#x1FA7;&#x1FA7;</span> <span title="U+1FB0">&#x1FB0;&#x1FB0;&#x1FB0; &#x1FB8;&#x1FB0;&#x1FB0;</span> <span title="U+1FB1">&#x1FB1;&#x1FB1;&#x1FB1; &#x1FB9;&#x1FB1;&#x1FB1;</span> <span title="U+1FB3">&#x1FB3;&#x1FB3;&#x1FB3; &#x1FBC;&#x1FB3;&#x1FB3;</span> <span title="U+1FBE">&#x1FBE;&#x1FBE;&#x1FBE; &#x0399;&#x1FBE;&#x1FBE;</span> <span title="U+1FC3">&#x1FC3;&#x1FC3;&#x1FC3; &#x1FCC;&#x1FC3;&#x1FC3;</span> <span title="U+1FD0">&#x1FD0;&#x1FD0;&#x1FD0; &#x1FD8;&#x1FD0;&#x1FD0;</span> <span title="U+1FD1">&#x1FD1;&#x1FD1;&#x1FD1; &#x1FD9;&#x1FD1;&#x1FD1;</span> <span title="U+1FE0">&#x1FE0;&#x1FE0;&#x1FE0; &#x1FE8;&#x1FE0;&#x1FE0;</span> <span title="U+1FE1">&#x1FE1;&#x1FE1;&#x1FE1; &#x1FE9;&#x1FE1;&#x1FE1;</span> <span title="U+1FE5">&#x1FE5;&#x1FE5;&#x1FE5; &#x1FEC;&#x1FE5;&#x1FE5;</span> <span title="U+1FF3">&#x1FF3;&#x1FF3;&#x1FF3; &#x1FFC;&#x1FF3;&#x1FF3;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-018.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-018.html
new file mode 100644
index 0000000000..6568a0366c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-018.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Cyrillic</title>
+<meta name="assert" content="For the Cyrillic Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-018-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 100%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0430">&#x0430;&#x0430;&#x0430; &#x0410;&#x0430;&#x0430;</span> <span title="U+0431">&#x0431;&#x0431;&#x0431; &#x0411;&#x0431;&#x0431;</span> <span title="U+0432">&#x0432;&#x0432;&#x0432; &#x0412;&#x0432;&#x0432;</span> <span title="U+0433">&#x0433;&#x0433;&#x0433; &#x0413;&#x0433;&#x0433;</span> <span title="U+0434">&#x0434;&#x0434;&#x0434; &#x0414;&#x0434;&#x0434;</span> <span title="U+0435">&#x0435;&#x0435;&#x0435; &#x0415;&#x0435;&#x0435;</span> <span title="U+0436">&#x0436;&#x0436;&#x0436; &#x0416;&#x0436;&#x0436;</span> <span title="U+0437">&#x0437;&#x0437;&#x0437; &#x0417;&#x0437;&#x0437;</span> <span title="U+0438">&#x0438;&#x0438;&#x0438; &#x0418;&#x0438;&#x0438;</span> <span title="U+0439">&#x0439;&#x0439;&#x0439; &#x0419;&#x0439;&#x0439;</span> <span title="U+043A">&#x043A;&#x043A;&#x043A; &#x041A;&#x043A;&#x043A;</span> <span title="U+043B">&#x043B;&#x043B;&#x043B; &#x041B;&#x043B;&#x043B;</span> <span title="U+043C">&#x043C;&#x043C;&#x043C; &#x041C;&#x043C;&#x043C;</span> <span title="U+043D">&#x043D;&#x043D;&#x043D; &#x041D;&#x043D;&#x043D;</span> <span title="U+043E">&#x043E;&#x043E;&#x043E; &#x041E;&#x043E;&#x043E;</span> <span title="U+043F">&#x043F;&#x043F;&#x043F; &#x041F;&#x043F;&#x043F;</span> <span title="U+0440">&#x0440;&#x0440;&#x0440; &#x0420;&#x0440;&#x0440;</span> <span title="U+0441">&#x0441;&#x0441;&#x0441; &#x0421;&#x0441;&#x0441;</span> <span title="U+0442">&#x0442;&#x0442;&#x0442; &#x0422;&#x0442;&#x0442;</span> <span title="U+0443">&#x0443;&#x0443;&#x0443; &#x0423;&#x0443;&#x0443;</span> <span title="U+0444">&#x0444;&#x0444;&#x0444; &#x0424;&#x0444;&#x0444;</span> <span title="U+0445">&#x0445;&#x0445;&#x0445; &#x0425;&#x0445;&#x0445;</span> <span title="U+0446">&#x0446;&#x0446;&#x0446; &#x0426;&#x0446;&#x0446;</span> <span title="U+0447">&#x0447;&#x0447;&#x0447; &#x0427;&#x0447;&#x0447;</span> <span title="U+0448">&#x0448;&#x0448;&#x0448; &#x0428;&#x0448;&#x0448;</span> <span title="U+0449">&#x0449;&#x0449;&#x0449; &#x0429;&#x0449;&#x0449;</span> <span title="U+044A">&#x044A;&#x044A;&#x044A; &#x042A;&#x044A;&#x044A;</span> <span title="U+044B">&#x044B;&#x044B;&#x044B; &#x042B;&#x044B;&#x044B;</span> <span title="U+044C">&#x044C;&#x044C;&#x044C; &#x042C;&#x044C;&#x044C;</span> <span title="U+044D">&#x044D;&#x044D;&#x044D; &#x042D;&#x044D;&#x044D;</span> <span title="U+044E">&#x044E;&#x044E;&#x044E; &#x042E;&#x044E;&#x044E;</span> <span title="U+044F">&#x044F;&#x044F;&#x044F; &#x042F;&#x044F;&#x044F;</span> <span title="U+0450">&#x0450;&#x0450;&#x0450; &#x0400;&#x0450;&#x0450;</span> <span title="U+0451">&#x0451;&#x0451;&#x0451; &#x0401;&#x0451;&#x0451;</span> <span title="U+0452">&#x0452;&#x0452;&#x0452; &#x0402;&#x0452;&#x0452;</span> <span title="U+0453">&#x0453;&#x0453;&#x0453; &#x0403;&#x0453;&#x0453;</span> <span title="U+0454">&#x0454;&#x0454;&#x0454; &#x0404;&#x0454;&#x0454;</span> <span title="U+0455">&#x0455;&#x0455;&#x0455; &#x0405;&#x0455;&#x0455;</span> <span title="U+0456">&#x0456;&#x0456;&#x0456; &#x0406;&#x0456;&#x0456;</span> <span title="U+0457">&#x0457;&#x0457;&#x0457; &#x0407;&#x0457;&#x0457;</span> <span title="U+0458">&#x0458;&#x0458;&#x0458; &#x0408;&#x0458;&#x0458;</span> <span title="U+0459">&#x0459;&#x0459;&#x0459; &#x0409;&#x0459;&#x0459;</span> <span title="U+045A">&#x045A;&#x045A;&#x045A; &#x040A;&#x045A;&#x045A;</span> <span title="U+045B">&#x045B;&#x045B;&#x045B; &#x040B;&#x045B;&#x045B;</span> <span title="U+045C">&#x045C;&#x045C;&#x045C; &#x040C;&#x045C;&#x045C;</span> <span title="U+045D">&#x045D;&#x045D;&#x045D; &#x040D;&#x045D;&#x045D;</span> <span title="U+045E">&#x045E;&#x045E;&#x045E; &#x040E;&#x045E;&#x045E;</span> <span title="U+045F">&#x045F;&#x045F;&#x045F; &#x040F;&#x045F;&#x045F;</span> <span title="U+0461">&#x0461;&#x0461;&#x0461; &#x0460;&#x0461;&#x0461;</span> <span title="U+0463">&#x0463;&#x0463;&#x0463; &#x0462;&#x0463;&#x0463;</span> <span title="U+0465">&#x0465;&#x0465;&#x0465; &#x0464;&#x0465;&#x0465;</span> <span title="U+0467">&#x0467;&#x0467;&#x0467; &#x0466;&#x0467;&#x0467;</span> <span title="U+0469">&#x0469;&#x0469;&#x0469; &#x0468;&#x0469;&#x0469;</span> <span title="U+046B">&#x046B;&#x046B;&#x046B; &#x046A;&#x046B;&#x046B;</span> <span title="U+046D">&#x046D;&#x046D;&#x046D; &#x046C;&#x046D;&#x046D;</span> <span title="U+046F">&#x046F;&#x046F;&#x046F; &#x046E;&#x046F;&#x046F;</span> <span title="U+0471">&#x0471;&#x0471;&#x0471; &#x0470;&#x0471;&#x0471;</span> <span title="U+0473">&#x0473;&#x0473;&#x0473; &#x0472;&#x0473;&#x0473;</span> <span title="U+0475">&#x0475;&#x0475;&#x0475; &#x0474;&#x0475;&#x0475;</span> <span title="U+0477">&#x0477;&#x0477;&#x0477; &#x0476;&#x0477;&#x0477;</span> <span title="U+0479">&#x0479;&#x0479;&#x0479; &#x0478;&#x0479;&#x0479;</span> <span title="U+047B">&#x047B;&#x047B;&#x047B; &#x047A;&#x047B;&#x047B;</span> <span title="U+047D">&#x047D;&#x047D;&#x047D; &#x047C;&#x047D;&#x047D;</span> <span title="U+047F">&#x047F;&#x047F;&#x047F; &#x047E;&#x047F;&#x047F;</span> <span title="U+0481">&#x0481;&#x0481;&#x0481; &#x0480;&#x0481;&#x0481;</span> <span title="U+048B">&#x048B;&#x048B;&#x048B; &#x048A;&#x048B;&#x048B;</span> <span title="U+048D">&#x048D;&#x048D;&#x048D; &#x048C;&#x048D;&#x048D;</span> <span title="U+048F">&#x048F;&#x048F;&#x048F; &#x048E;&#x048F;&#x048F;</span> <span title="U+0491">&#x0491;&#x0491;&#x0491; &#x0490;&#x0491;&#x0491;</span> <span title="U+0493">&#x0493;&#x0493;&#x0493; &#x0492;&#x0493;&#x0493;</span> <span title="U+0495">&#x0495;&#x0495;&#x0495; &#x0494;&#x0495;&#x0495;</span> <span title="U+0497">&#x0497;&#x0497;&#x0497; &#x0496;&#x0497;&#x0497;</span> <span title="U+0499">&#x0499;&#x0499;&#x0499; &#x0498;&#x0499;&#x0499;</span> <span title="U+049B">&#x049B;&#x049B;&#x049B; &#x049A;&#x049B;&#x049B;</span> <span title="U+049D">&#x049D;&#x049D;&#x049D; &#x049C;&#x049D;&#x049D;</span> <span title="U+049F">&#x049F;&#x049F;&#x049F; &#x049E;&#x049F;&#x049F;</span> <span title="U+04A1">&#x04A1;&#x04A1;&#x04A1; &#x04A0;&#x04A1;&#x04A1;</span> <span title="U+04A3">&#x04A3;&#x04A3;&#x04A3; &#x04A2;&#x04A3;&#x04A3;</span> <span title="U+04A5">&#x04A5;&#x04A5;&#x04A5; &#x04A4;&#x04A5;&#x04A5;</span> <span title="U+04A7">&#x04A7;&#x04A7;&#x04A7; &#x04A6;&#x04A7;&#x04A7;</span> <span title="U+04A9">&#x04A9;&#x04A9;&#x04A9; &#x04A8;&#x04A9;&#x04A9;</span> <span title="U+04AB">&#x04AB;&#x04AB;&#x04AB; &#x04AA;&#x04AB;&#x04AB;</span> <span title="U+04AD">&#x04AD;&#x04AD;&#x04AD; &#x04AC;&#x04AD;&#x04AD;</span> <span title="U+04AF">&#x04AF;&#x04AF;&#x04AF; &#x04AE;&#x04AF;&#x04AF;</span> <span title="U+04B1">&#x04B1;&#x04B1;&#x04B1; &#x04B0;&#x04B1;&#x04B1;</span> <span title="U+04B3">&#x04B3;&#x04B3;&#x04B3; &#x04B2;&#x04B3;&#x04B3;</span> <span title="U+04B5">&#x04B5;&#x04B5;&#x04B5; &#x04B4;&#x04B5;&#x04B5;</span> <span title="U+04B7">&#x04B7;&#x04B7;&#x04B7; &#x04B6;&#x04B7;&#x04B7;</span> <span title="U+04B9">&#x04B9;&#x04B9;&#x04B9; &#x04B8;&#x04B9;&#x04B9;</span> <span title="U+04BB">&#x04BB;&#x04BB;&#x04BB; &#x04BA;&#x04BB;&#x04BB;</span> <span title="U+04BD">&#x04BD;&#x04BD;&#x04BD; &#x04BC;&#x04BD;&#x04BD;</span> <span title="U+04BF">&#x04BF;&#x04BF;&#x04BF; &#x04BE;&#x04BF;&#x04BF;</span> <span title="U+04C2">&#x04C2;&#x04C2;&#x04C2; &#x04C1;&#x04C2;&#x04C2;</span> <span title="U+04C4">&#x04C4;&#x04C4;&#x04C4; &#x04C3;&#x04C4;&#x04C4;</span> <span title="U+04C6">&#x04C6;&#x04C6;&#x04C6; &#x04C5;&#x04C6;&#x04C6;</span> <span title="U+04C8">&#x04C8;&#x04C8;&#x04C8; &#x04C7;&#x04C8;&#x04C8;</span> <span title="U+04CA">&#x04CA;&#x04CA;&#x04CA; &#x04C9;&#x04CA;&#x04CA;</span> <span title="U+04CC">&#x04CC;&#x04CC;&#x04CC; &#x04CB;&#x04CC;&#x04CC;</span> <span title="U+04CE">&#x04CE;&#x04CE;&#x04CE; &#x04CD;&#x04CE;&#x04CE;</span> <span title="U+04CF">&#x04CF;&#x04CF;&#x04CF; &#x04C0;&#x04CF;&#x04CF;</span> <span title="U+04D1">&#x04D1;&#x04D1;&#x04D1; &#x04D0;&#x04D1;&#x04D1;</span> <span title="U+04D3">&#x04D3;&#x04D3;&#x04D3; &#x04D2;&#x04D3;&#x04D3;</span> <span title="U+04D5">&#x04D5;&#x04D5;&#x04D5; &#x04D4;&#x04D5;&#x04D5;</span> <span title="U+04D7">&#x04D7;&#x04D7;&#x04D7; &#x04D6;&#x04D7;&#x04D7;</span> <span title="U+04D9">&#x04D9;&#x04D9;&#x04D9; &#x04D8;&#x04D9;&#x04D9;</span> <span title="U+04DB">&#x04DB;&#x04DB;&#x04DB; &#x04DA;&#x04DB;&#x04DB;</span> <span title="U+04DD">&#x04DD;&#x04DD;&#x04DD; &#x04DC;&#x04DD;&#x04DD;</span> <span title="U+04DF">&#x04DF;&#x04DF;&#x04DF; &#x04DE;&#x04DF;&#x04DF;</span> <span title="U+04E1">&#x04E1;&#x04E1;&#x04E1; &#x04E0;&#x04E1;&#x04E1;</span> <span title="U+04E3">&#x04E3;&#x04E3;&#x04E3; &#x04E2;&#x04E3;&#x04E3;</span> <span title="U+04E5">&#x04E5;&#x04E5;&#x04E5; &#x04E4;&#x04E5;&#x04E5;</span> <span title="U+04E7">&#x04E7;&#x04E7;&#x04E7; &#x04E6;&#x04E7;&#x04E7;</span> <span title="U+04E9">&#x04E9;&#x04E9;&#x04E9; &#x04E8;&#x04E9;&#x04E9;</span> <span title="U+04EB">&#x04EB;&#x04EB;&#x04EB; &#x04EA;&#x04EB;&#x04EB;</span> <span title="U+04ED">&#x04ED;&#x04ED;&#x04ED; &#x04EC;&#x04ED;&#x04ED;</span> <span title="U+04EF">&#x04EF;&#x04EF;&#x04EF; &#x04EE;&#x04EF;&#x04EF;</span> <span title="U+04F1">&#x04F1;&#x04F1;&#x04F1; &#x04F0;&#x04F1;&#x04F1;</span> <span title="U+04F3">&#x04F3;&#x04F3;&#x04F3; &#x04F2;&#x04F3;&#x04F3;</span> <span title="U+04F5">&#x04F5;&#x04F5;&#x04F5; &#x04F4;&#x04F5;&#x04F5;</span> <span title="U+04F7">&#x04F7;&#x04F7;&#x04F7; &#x04F6;&#x04F7;&#x04F7;</span> <span title="U+04F9">&#x04F9;&#x04F9;&#x04F9; &#x04F8;&#x04F9;&#x04F9;</span> <span title="U+04FB">&#x04FB;&#x04FB;&#x04FB; &#x04FA;&#x04FB;&#x04FB;</span> <span title="U+04FD">&#x04FD;&#x04FD;&#x04FD; &#x04FC;&#x04FD;&#x04FD;</span> <span title="U+04FF">&#x04FF;&#x04FF;&#x04FF; &#x04FE;&#x04FF;&#x04FF;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-020.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-020.html
new file mode 100644
index 0000000000..0b852ba9ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-020.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Cyrillic Supplement</title>
+<meta name="assert" content="For the Cyrillic Supplement Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-020-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0501">&#x0501;&#x0501;&#x0501; &#x0500;&#x0501;&#x0501;</span> <span title="U+0503">&#x0503;&#x0503;&#x0503; &#x0502;&#x0503;&#x0503;</span> <span title="U+0505">&#x0505;&#x0505;&#x0505; &#x0504;&#x0505;&#x0505;</span> <span title="U+0507">&#x0507;&#x0507;&#x0507; &#x0506;&#x0507;&#x0507;</span> <span title="U+0509">&#x0509;&#x0509;&#x0509; &#x0508;&#x0509;&#x0509;</span> <span title="U+050B">&#x050B;&#x050B;&#x050B; &#x050A;&#x050B;&#x050B;</span> <span title="U+050D">&#x050D;&#x050D;&#x050D; &#x050C;&#x050D;&#x050D;</span> <span title="U+050F">&#x050F;&#x050F;&#x050F; &#x050E;&#x050F;&#x050F;</span> <span title="U+0511">&#x0511;&#x0511;&#x0511; &#x0510;&#x0511;&#x0511;</span> <span title="U+0513">&#x0513;&#x0513;&#x0513; &#x0512;&#x0513;&#x0513;</span> <span title="U+0515">&#x0515;&#x0515;&#x0515; &#x0514;&#x0515;&#x0515;</span> <span title="U+0517">&#x0517;&#x0517;&#x0517; &#x0516;&#x0517;&#x0517;</span> <span title="U+0519">&#x0519;&#x0519;&#x0519; &#x0518;&#x0519;&#x0519;</span> <span title="U+051B">&#x051B;&#x051B;&#x051B; &#x051A;&#x051B;&#x051B;</span> <span title="U+051D">&#x051D;&#x051D;&#x051D; &#x051C;&#x051D;&#x051D;</span> <span title="U+051F">&#x051F;&#x051F;&#x051F; &#x051E;&#x051F;&#x051F;</span> <span title="U+0521">&#x0521;&#x0521;&#x0521; &#x0520;&#x0521;&#x0521;</span> <span title="U+0523">&#x0523;&#x0523;&#x0523; &#x0522;&#x0523;&#x0523;</span> <span title="U+0525">&#x0525;&#x0525;&#x0525; &#x0524;&#x0525;&#x0525;</span> <span title="U+0527">&#x0527;&#x0527;&#x0527; &#x0526;&#x0527;&#x0527;</span> <span title="U+0529">&#x0529;&#x0529;&#x0529; &#x0528;&#x0529;&#x0529;</span> <span title="U+052B">&#x052B;&#x052B;&#x052B; &#x052A;&#x052B;&#x052B;</span> <span title="U+052D">&#x052D;&#x052D;&#x052D; &#x052C;&#x052D;&#x052D;</span> <span title="U+052F">&#x052F;&#x052F;&#x052F; &#x052E;&#x052F;&#x052F;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-022.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-022.html
new file mode 100644
index 0000000000..aa702810b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-022.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Armenian</title>
+<meta name="assert" content="For the ArmenianUnicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-022-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansArmenian-Regular') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Noto Sans Armenian', webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0561">&#x0561;&#x0561;&#x0561; &#x0531;&#x0561;&#x0561;</span> <span title="U+0562">&#x0562;&#x0562;&#x0562; &#x0532;&#x0562;&#x0562;</span> <span title="U+0563">&#x0563;&#x0563;&#x0563; &#x0533;&#x0563;&#x0563;</span> <span title="U+0564">&#x0564;&#x0564;&#x0564; &#x0534;&#x0564;&#x0564;</span> <span title="U+0565">&#x0565;&#x0565;&#x0565; &#x0535;&#x0565;&#x0565;</span> <span title="U+0566">&#x0566;&#x0566;&#x0566; &#x0536;&#x0566;&#x0566;</span> <span title="U+0567">&#x0567;&#x0567;&#x0567; &#x0537;&#x0567;&#x0567;</span> <span title="U+0568">&#x0568;&#x0568;&#x0568; &#x0538;&#x0568;&#x0568;</span> <span title="U+0569">&#x0569;&#x0569;&#x0569; &#x0539;&#x0569;&#x0569;</span> <span title="U+056A">&#x056A;&#x056A;&#x056A; &#x053A;&#x056A;&#x056A;</span> <span title="U+056B">&#x056B;&#x056B;&#x056B; &#x053B;&#x056B;&#x056B;</span> <span title="U+056C">&#x056C;&#x056C;&#x056C; &#x053C;&#x056C;&#x056C;</span> <span title="U+056D">&#x056D;&#x056D;&#x056D; &#x053D;&#x056D;&#x056D;</span> <span title="U+056E">&#x056E;&#x056E;&#x056E; &#x053E;&#x056E;&#x056E;</span> <span title="U+056F">&#x056F;&#x056F;&#x056F; &#x053F;&#x056F;&#x056F;</span> <span title="U+0570">&#x0570;&#x0570;&#x0570; &#x0540;&#x0570;&#x0570;</span> <span title="U+0571">&#x0571;&#x0571;&#x0571; &#x0541;&#x0571;&#x0571;</span> <span title="U+0572">&#x0572;&#x0572;&#x0572; &#x0542;&#x0572;&#x0572;</span> <span title="U+0573">&#x0573;&#x0573;&#x0573; &#x0543;&#x0573;&#x0573;</span> <span title="U+0574">&#x0574;&#x0574;&#x0574; &#x0544;&#x0574;&#x0574;</span> <span title="U+0575">&#x0575;&#x0575;&#x0575; &#x0545;&#x0575;&#x0575;</span> <span title="U+0576">&#x0576;&#x0576;&#x0576; &#x0546;&#x0576;&#x0576;</span> <span title="U+0577">&#x0577;&#x0577;&#x0577; &#x0547;&#x0577;&#x0577;</span> <span title="U+0578">&#x0578;&#x0578;&#x0578; &#x0548;&#x0578;&#x0578;</span> <span title="U+0579">&#x0579;&#x0579;&#x0579; &#x0549;&#x0579;&#x0579;</span> <span title="U+057A">&#x057A;&#x057A;&#x057A; &#x054A;&#x057A;&#x057A;</span> <span title="U+057B">&#x057B;&#x057B;&#x057B; &#x054B;&#x057B;&#x057B;</span> <span title="U+057C">&#x057C;&#x057C;&#x057C; &#x054C;&#x057C;&#x057C;</span> <span title="U+057D">&#x057D;&#x057D;&#x057D; &#x054D;&#x057D;&#x057D;</span> <span title="U+057E">&#x057E;&#x057E;&#x057E; &#x054E;&#x057E;&#x057E;</span> <span title="U+057F">&#x057F;&#x057F;&#x057F; &#x054F;&#x057F;&#x057F;</span> <span title="U+0580">&#x0580;&#x0580;&#x0580; &#x0550;&#x0580;&#x0580;</span> <span title="U+0581">&#x0581;&#x0581;&#x0581; &#x0551;&#x0581;&#x0581;</span> <span title="U+0582">&#x0582;&#x0582;&#x0582; &#x0552;&#x0582;&#x0582;</span> <span title="U+0583">&#x0583;&#x0583;&#x0583; &#x0553;&#x0583;&#x0583;</span> <span title="U+0584">&#x0584;&#x0584;&#x0584; &#x0554;&#x0584;&#x0584;</span> <span title="U+0585">&#x0585;&#x0585;&#x0585; &#x0555;&#x0585;&#x0585;</span> <span title="U+0586">&#x0586;&#x0586;&#x0586; &#x0556;&#x0586;&#x0586;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-024.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-024.html
new file mode 100644
index 0000000000..891228db89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-024.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Number Forms</title>
+<meta name="assert" content="For the Number Forms Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-024-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2170">&#x2170;&#x2170;&#x2170; &#x2160;&#x2170;&#x2170;</span> <span title="U+2171">&#x2171;&#x2171;&#x2171; &#x2161;&#x2171;&#x2171;</span> <span title="U+2172">&#x2172;&#x2172;&#x2172; &#x2162;&#x2172;&#x2172;</span> <span title="U+2173">&#x2173;&#x2173;&#x2173; &#x2163;&#x2173;&#x2173;</span> <span title="U+2174">&#x2174;&#x2174;&#x2174; &#x2164;&#x2174;&#x2174;</span> <span title="U+2175">&#x2175;&#x2175;&#x2175; &#x2165;&#x2175;&#x2175;</span> <span title="U+2176">&#x2176;&#x2176;&#x2176; &#x2166;&#x2176;&#x2176;</span> <span title="U+2177">&#x2177;&#x2177;&#x2177; &#x2167;&#x2177;&#x2177;</span> <span title="U+2178">&#x2178;&#x2178;&#x2178; &#x2168;&#x2178;&#x2178;</span> <span title="U+2179">&#x2179;&#x2179;&#x2179; &#x2169;&#x2179;&#x2179;</span> <span title="U+217A">&#x217A;&#x217A;&#x217A; &#x216A;&#x217A;&#x217A;</span> <span title="U+217B">&#x217B;&#x217B;&#x217B; &#x216B;&#x217B;&#x217B;</span> <span title="U+217C">&#x217C;&#x217C;&#x217C; &#x216C;&#x217C;&#x217C;</span> <span title="U+217D">&#x217D;&#x217D;&#x217D; &#x216D;&#x217D;&#x217D;</span> <span title="U+217E">&#x217E;&#x217E;&#x217E; &#x216E;&#x217E;&#x217E;</span> <span title="U+217F">&#x217F;&#x217F;&#x217F; &#x216F;&#x217F;&#x217F;</span> <span title="U+2184">&#x2184;&#x2184;&#x2184; &#x2183;&#x2184;&#x2184;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-026.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-026.html
new file mode 100644
index 0000000000..30e654c576
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-026.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Enclosed Alphanumerics</title>
+<meta name="assert" content="For the Enclosed Alphanumerics Unicode block, text-transform: capitalize does NOT put any character in titlecase.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-026-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if there are NO uppercase letters.<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+24D0">&#x24D0;&#x24D0;&#x24D0;</span> <span title="U+24D1">&#x24D1;&#x24D1;&#x24D1;</span> <span title="U+24D2">&#x24D2;&#x24D2;&#x24D2;</span> <span title="U+24D3">&#x24D3;&#x24D3;&#x24D3;</span> <span title="U+24D4">&#x24D4;&#x24D4;&#x24D4;</span> <span title="U+24D5">&#x24D5;&#x24D5;&#x24D5;</span> <span title="U+24D6">&#x24D6;&#x24D6;&#x24D6;</span> <span title="U+24D7">&#x24D7;&#x24D7;&#x24D7;</span> <span title="U+24D8">&#x24D8;&#x24D8;&#x24D8;</span> <span title="U+24D9">&#x24D9;&#x24D9;&#x24D9;</span> <span title="U+24DA">&#x24DA;&#x24DA;&#x24DA;</span> <span title="U+24DB">&#x24DB;&#x24DB;&#x24DB;</span> <span title="U+24DC">&#x24DC;&#x24DC;&#x24DC;</span> <span title="U+24DD">&#x24DD;&#x24DD;&#x24DD;</span> <span title="U+24DE">&#x24DE;&#x24DE;&#x24DE;</span> <span title="U+24DF">&#x24DF;&#x24DF;&#x24DF;</span> <span title="U+24E0">&#x24E0;&#x24E0;&#x24E0;</span> <span title="U+24E1">&#x24E1;&#x24E1;&#x24E1;</span> <span title="U+24E2">&#x24E2;&#x24E2;&#x24E2;</span> <span title="U+24E3">&#x24E3;&#x24E3;&#x24E3;</span> <span title="U+24E4">&#x24E4;&#x24E4;&#x24E4;</span> <span title="U+24E5">&#x24E5;&#x24E5;&#x24E5;</span> <span title="U+24E6">&#x24E6;&#x24E6;&#x24E6;</span> <span title="U+24E7">&#x24E7;&#x24E7;&#x24E7;</span> <span title="U+24E8">&#x24E8;&#x24E8;&#x24E8;</span> <span title="U+24E9">&#x24E9;&#x24E9;&#x24E9;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-028.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-028.html
new file mode 100644
index 0000000000..b274012eb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-028.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Deseret</title>
+<meta name="assert" content="For the Deseret Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-028-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/noto/NotoSansDeseret-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+10428">&#x10428;&#x10428;&#x10428; &#x10400;&#x10428;&#x10428;</span> <span title="U+10429">&#x10429;&#x10429;&#x10429; &#x10401;&#x10429;&#x10429;</span> <span title="U+1042A">&#x1042A;&#x1042A;&#x1042A; &#x10402;&#x1042A;&#x1042A;</span> <span title="U+1042B">&#x1042B;&#x1042B;&#x1042B; &#x10403;&#x1042B;&#x1042B;</span> <span title="U+1042C">&#x1042C;&#x1042C;&#x1042C; &#x10404;&#x1042C;&#x1042C;</span> <span title="U+1042D">&#x1042D;&#x1042D;&#x1042D; &#x10405;&#x1042D;&#x1042D;</span> <span title="U+1042E">&#x1042E;&#x1042E;&#x1042E; &#x10406;&#x1042E;&#x1042E;</span> <span title="U+1042F">&#x1042F;&#x1042F;&#x1042F; &#x10407;&#x1042F;&#x1042F;</span> <span title="U+10430">&#x10430;&#x10430;&#x10430; &#x10408;&#x10430;&#x10430;</span> <span title="U+10431">&#x10431;&#x10431;&#x10431; &#x10409;&#x10431;&#x10431;</span> <span title="U+10432">&#x10432;&#x10432;&#x10432; &#x1040A;&#x10432;&#x10432;</span> <span title="U+10433">&#x10433;&#x10433;&#x10433; &#x1040B;&#x10433;&#x10433;</span> <span title="U+10434">&#x10434;&#x10434;&#x10434; &#x1040C;&#x10434;&#x10434;</span> <span title="U+10435">&#x10435;&#x10435;&#x10435; &#x1040D;&#x10435;&#x10435;</span> <span title="U+10436">&#x10436;&#x10436;&#x10436; &#x1040E;&#x10436;&#x10436;</span> <span title="U+10437">&#x10437;&#x10437;&#x10437; &#x1040F;&#x10437;&#x10437;</span> <span title="U+10438">&#x10438;&#x10438;&#x10438; &#x10410;&#x10438;&#x10438;</span> <span title="U+10439">&#x10439;&#x10439;&#x10439; &#x10411;&#x10439;&#x10439;</span> <span title="U+1043A">&#x1043A;&#x1043A;&#x1043A; &#x10412;&#x1043A;&#x1043A;</span> <span title="U+1043B">&#x1043B;&#x1043B;&#x1043B; &#x10413;&#x1043B;&#x1043B;</span> <span title="U+1043C">&#x1043C;&#x1043C;&#x1043C; &#x10414;&#x1043C;&#x1043C;</span> <span title="U+1043D">&#x1043D;&#x1043D;&#x1043D; &#x10415;&#x1043D;&#x1043D;</span> <span title="U+1043E">&#x1043E;&#x1043E;&#x1043E; &#x10416;&#x1043E;&#x1043E;</span> <span title="U+1043F">&#x1043F;&#x1043F;&#x1043F; &#x10417;&#x1043F;&#x1043F;</span> <span title="U+10440">&#x10440;&#x10440;&#x10440; &#x10418;&#x10440;&#x10440;</span> <span title="U+10441">&#x10441;&#x10441;&#x10441; &#x10419;&#x10441;&#x10441;</span> <span title="U+10442">&#x10442;&#x10442;&#x10442; &#x1041A;&#x10442;&#x10442;</span> <span title="U+10443">&#x10443;&#x10443;&#x10443; &#x1041B;&#x10443;&#x10443;</span> <span title="U+10444">&#x10444;&#x10444;&#x10444; &#x1041C;&#x10444;&#x10444;</span> <span title="U+10445">&#x10445;&#x10445;&#x10445; &#x1041D;&#x10445;&#x10445;</span> <span title="U+10446">&#x10446;&#x10446;&#x10446; &#x1041E;&#x10446;&#x10446;</span> <span title="U+10447">&#x10447;&#x10447;&#x10447; &#x1041F;&#x10447;&#x10447;</span> <span title="U+10448">&#x10448;&#x10448;&#x10448; &#x10420;&#x10448;&#x10448;</span> <span title="U+10449">&#x10449;&#x10449;&#x10449; &#x10421;&#x10449;&#x10449;</span> <span title="U+1044A">&#x1044A;&#x1044A;&#x1044A; &#x10422;&#x1044A;&#x1044A;</span> <span title="U+1044B">&#x1044B;&#x1044B;&#x1044B; &#x10423;&#x1044B;&#x1044B;</span> <span title="U+1044C">&#x1044C;&#x1044C;&#x1044C; &#x10424;&#x1044C;&#x1044C;</span> <span title="U+1044D">&#x1044D;&#x1044D;&#x1044D; &#x10425;&#x1044D;&#x1044D;</span> <span title="U+1044E">&#x1044E;&#x1044E;&#x1044E; &#x10426;&#x1044E;&#x1044E;</span> <span title="U+1044F">&#x1044F;&#x1044F;&#x1044F; &#x10427;&#x1044F;&#x1044F;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-030.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-030.html
new file mode 100644
index 0000000000..be2a7bb3f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-030.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Georgian Supplement</title>
+<meta name="assert" content="For the Georgian Supplement Unicode block, text-transform: capitalize puts the first typographic letter unit of each word in titlecase; other characters are unaffected.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-030-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansGeorgian-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">The text is arranged in pairs of three-letter 'words'. Test passes if the words in each pair match<br>
+If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2D00">&#x2D00;&#x2D00;&#x2D00; &#x10A0;&#x2D00;&#x2D00;</span> <span title="U+2D01">&#x2D01;&#x2D01;&#x2D01; &#x10A1;&#x2D01;&#x2D01;</span> <span title="U+2D02">&#x2D02;&#x2D02;&#x2D02; &#x10A2;&#x2D02;&#x2D02;</span> <span title="U+2D03">&#x2D03;&#x2D03;&#x2D03; &#x10A3;&#x2D03;&#x2D03;</span> <span title="U+2D04">&#x2D04;&#x2D04;&#x2D04; &#x10A4;&#x2D04;&#x2D04;</span> <span title="U+2D05">&#x2D05;&#x2D05;&#x2D05; &#x10A5;&#x2D05;&#x2D05;</span> <span title="U+2D06">&#x2D06;&#x2D06;&#x2D06; &#x10A6;&#x2D06;&#x2D06;</span> <span title="U+2D07">&#x2D07;&#x2D07;&#x2D07; &#x10A7;&#x2D07;&#x2D07;</span> <span title="U+2D08">&#x2D08;&#x2D08;&#x2D08; &#x10A8;&#x2D08;&#x2D08;</span> <span title="U+2D09">&#x2D09;&#x2D09;&#x2D09; &#x10A9;&#x2D09;&#x2D09;</span> <span title="U+2D0A">&#x2D0A;&#x2D0A;&#x2D0A; &#x10AA;&#x2D0A;&#x2D0A;</span> <span title="U+2D0B">&#x2D0B;&#x2D0B;&#x2D0B; &#x10AB;&#x2D0B;&#x2D0B;</span> <span title="U+2D0C">&#x2D0C;&#x2D0C;&#x2D0C; &#x10AC;&#x2D0C;&#x2D0C;</span> <span title="U+2D0D">&#x2D0D;&#x2D0D;&#x2D0D; &#x10AD;&#x2D0D;&#x2D0D;</span> <span title="U+2D0E">&#x2D0E;&#x2D0E;&#x2D0E; &#x10AE;&#x2D0E;&#x2D0E;</span> <span title="U+2D0F">&#x2D0F;&#x2D0F;&#x2D0F; &#x10AF;&#x2D0F;&#x2D0F;</span> <span title="U+2D10">&#x2D10;&#x2D10;&#x2D10; &#x10B0;&#x2D10;&#x2D10;</span> <span title="U+2D11">&#x2D11;&#x2D11;&#x2D11; &#x10B1;&#x2D11;&#x2D11;</span> <span title="U+2D12">&#x2D12;&#x2D12;&#x2D12; &#x10B2;&#x2D12;&#x2D12;</span> <span title="U+2D13">&#x2D13;&#x2D13;&#x2D13; &#x10B3;&#x2D13;&#x2D13;</span> <span title="U+2D14">&#x2D14;&#x2D14;&#x2D14; &#x10B4;&#x2D14;&#x2D14;</span> <span title="U+2D15">&#x2D15;&#x2D15;&#x2D15; &#x10B5;&#x2D15;&#x2D15;</span> <span title="U+2D16">&#x2D16;&#x2D16;&#x2D16; &#x10B6;&#x2D16;&#x2D16;</span> <span title="U+2D17">&#x2D17;&#x2D17;&#x2D17; &#x10B7;&#x2D17;&#x2D17;</span> <span title="U+2D18">&#x2D18;&#x2D18;&#x2D18; &#x10B8;&#x2D18;&#x2D18;</span> <span title="U+2D19">&#x2D19;&#x2D19;&#x2D19; &#x10B9;&#x2D19;&#x2D19;</span> <span title="U+2D1A">&#x2D1A;&#x2D1A;&#x2D1A; &#x10BA;&#x2D1A;&#x2D1A;</span> <span title="U+2D1B">&#x2D1B;&#x2D1B;&#x2D1B; &#x10BB;&#x2D1B;&#x2D1B;</span> <span title="U+2D1C">&#x2D1C;&#x2D1C;&#x2D1C; &#x10BC;&#x2D1C;&#x2D1C;</span> <span title="U+2D1D">&#x2D1D;&#x2D1D;&#x2D1D; &#x10BD;&#x2D1D;&#x2D1D;</span> <span title="U+2D1E">&#x2D1E;&#x2D1E;&#x2D1E; &#x10BE;&#x2D1E;&#x2D1E;</span> <span title="U+2D1F">&#x2D1F;&#x2D1F;&#x2D1F; &#x10BF;&#x2D1F;&#x2D1F;</span> <span title="U+2D20">&#x2D20;&#x2D20;&#x2D20; &#x10C0;&#x2D20;&#x2D20;</span> <span title="U+2D21">&#x2D21;&#x2D21;&#x2D21; &#x10C1;&#x2D21;&#x2D21;</span> <span title="U+2D22">&#x2D22;&#x2D22;&#x2D22; &#x10C2;&#x2D22;&#x2D22;</span> <span title="U+2D23">&#x2D23;&#x2D23;&#x2D23; &#x10C3;&#x2D23;&#x2D23;</span> <span title="U+2D24">&#x2D24;&#x2D24;&#x2D24; &#x10C4;&#x2D24;&#x2D24;</span> <span title="U+2D25">&#x2D25;&#x2D25;&#x2D25; &#x10C5;&#x2D25;&#x2D25;</span> <span title="U+2D27">&#x2D27;&#x2D27;&#x2D27; &#x10C7;&#x2D27;&#x2D27;</span> <span title="U+2D2D">&#x2D2D;&#x2D2D;&#x2D2D; &#x10CD;&#x2D2D;&#x2D2D;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-031.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-031.html
new file mode 100644
index 0000000000..3a5b5d1537
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-031.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, initial punctuation</title>
+<meta name="assert" content="text-transform: uppercase ignores characters that are not typographic letter units and capitalizes the first typographic letter unit in a word.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-capitalize-031-ref.html">
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', sans-serif; border: 1px solid orange; margin: 10px;  padding: 5px; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize	; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test">({[-–"«'.&lt;?!transform</div>
+<div class="ref">({[-–"«'.&lt;?!Transform</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-032.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-032.xht
new file mode 100644
index 0000000000..3a133933b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-032.xht
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-transform - capitalize - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 3: 3.1. Transforming Text: the ‘text-transform’ property" href="http://www.w3.org/TR/css-text-3/#text-transform" />
+		<link rel="match" href="reference/text-transform-capitalize-032-ref.xht"/>
+		<meta name="assert" content="The UA should put all words in titlecase when text-transform is set to capitalize." />
+		<style type="text/css">
+			<![CDATA[
+				.test span {
+					text-transform: capitalize;
+				}
+				/* the CSS below is not part of the test */
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first sentence matches the second one.
+		</p>
+		<div class="test">
+			<span>All words should be put in titlecase.</span>
+		</div>
+		<div>
+			<span>All Words Should Be Put In Titlecase.</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-033-ref.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-033-ref.html
new file mode 100644
index 0000000000..7bbacef735
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-033-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>
+  Should read "Pass" below
+</p>
+<p style="font-kerning: none">
+  Pass
+</p>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-033.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-033.html
new file mode 100644
index 0000000000..7a764cdf68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-033.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>CSS Test: text-transform ignores out of flow</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-text-transform">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=906369">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=191807">
+<link rel="match" href="text-transform-capitalize-033-ref.html">
+<p>
+  Should read "Pass" below
+</p>
+<p style="text-transform: capitalize; font-kerning: none">
+  p<span style="position: absolute"></span>ass
+</p>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-034-ref.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-034-ref.html
new file mode 100644
index 0000000000..c71e7d50ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-034-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" href="mailto:jkew@mozilla.com" title="Jonathan Kew">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<style>
+</style>
+All "a" characters in "Abc" below should be capitalized.
+<br><br>
+No spaces before abspos:<br>
+Abc Abc
+<br><br>
+Abc Abc
+<br><br>
+
+Space before abspos:<br>
+Abc Abc
+<br><br>
+Abc Abc
+<br><br>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-034.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-034.html
new file mode 100644
index 0000000000..4fa0bf8a25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-034.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Test: text-transform ignores out of flow</title>
+<link rel="author" href="mailto:jkew@mozilla.com" title="Jonathan Kew">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-text-transform">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1837272">
+<link rel="match" href="text-transform-capitalize-034-ref.html">
+<style>
+.caps{
+  text-transform: capitalize;
+}
+.abs{
+  position: absolute;
+}
+</style>
+All "a" characters in "Abc" below should be capitalized.
+<br><br>
+No spaces before abspos:<br>
+<span class="caps">abc</span><span class="abs"></span>
+<span class="caps">abc</span>
+<br><br>
+
+<span class="caps">abc<span class="abs"></span></span>
+<span class="caps">abc</span>
+<br><br>
+
+Space before abspos:<br>
+<span class="caps">abc</span> <span class="abs"></span>
+<span class="caps">abc</span>
+<br><br>
+
+<span class="caps">abc <span class="abs"></span></span>
+<span class="caps">abc</span>
+<br><br>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-035-ref.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-035-ref.html
new file mode 100644
index 0000000000..7993386715
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-035-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Test reference</title>
+<link rel="author" href="https://florian.rivoal.net" title="Florian Rivoal">
+<style>
+.test {
+  text-decoration-color: orange;
+}
+span {
+    text-decoration: underline solid blue;
+}
+span + span::before {
+    content: "\a";
+    white-space:pre;
+}
+div {
+    margin-top: 1em;
+}
+
+</style>
+<p>
+The test passes if,
+in each pair of words below,
+the same letters are upper or lower case.
+
+<div lang=ca>
+    <span class=test>Cancel·lar</span>
+    <span>Cancel·lar</span>
+<div>
+
+<div lang=sc>
+    <span class=test>Agiuda·nos</span>
+    <span>Agiuda·nos</span>
+<div>
+
+<div lang=oc>
+    <span class=test>In·hèrn</span>
+    <span>In·hèrn</span>
+<div>
+
+<div lang=frp>
+    <span class=test>G·eografia</span>
+    <span>G·eografia</span>
+<div>
+
+<div lang=fr-gallo>
+    <span class=test>Ag·rouée</span>
+    <span>Ag·rouée</span>
+<div>
+
+<div lang=fr>
+    <span class=test>Un·e Député·e</span>
+    <span>Un·e Député·e</span>
+<div>
+
+
+
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-035.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-035.html
new file mode 100644
index 0000000000..8b979ab2d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-capitalize-035.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Test: text-transform treatment of </title>
+<link rel="author" href="https://florian.rivoal.net" title="Florian Rivoal">
+<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-text-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text/#text-transform-mapping">
+<link rel="match" href="text-transform-capitalize-035-ref.html">
+<style>
+.test {
+  text-transform: capitalize;
+}
+/* The remaining styles make it easier to review,
+   but don't affect the behavior under test.
+*/
+.test {
+  text-decoration-color: orange;
+}
+span {
+    text-decoration: underline solid blue;
+}
+span + span::before {
+    content: "\a";
+    white-space:pre;
+}
+div {
+    margin-top: 1em;
+}
+
+</style>
+<p>
+The test passes if,
+in each pair of words below,
+the same letters are upper or lower case.
+
+<div lang=ca>
+    <span class=test>cancel·lar</span>
+    <span>Cancel·lar</span>
+<div>
+
+<div lang=sc>
+    <span class=test>agiuda·nos</span>
+    <span>Agiuda·nos</span>
+<div>
+
+<div lang=oc>
+    <span class=test>in·hèrn</span>
+    <span>In·hèrn</span>
+<div>
+
+<div lang=frp>
+    <span class=test>g·eografia</span>
+    <span>G·eografia</span>
+<div>
+
+<div lang=fr-gallo>
+    <span class=test>ag·rouée</span>
+    <span>Ag·rouée</span>
+<div>
+
+<div lang=fr>
+    <span class=test>un·e député·e</span>
+    <span>Un·e Député·e</span>
+<div>
+
+
+
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-copy-paste-001-manual.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-copy-paste-001-manual.html
new file mode 100644
index 0000000000..d80901cb2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-copy-paste-001-manual.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text 3 test: effects of text-transform on plain text copy&paste</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#text-transform-property">
+<meta name=flags content="interact">
+<meta name=assert content="text-transform must not affect the content of a plain text copy and paste operation.">
+<!--
+I wish this test could be written automatedly, but I don't think it can.
+We can work around the fact that  document.execCommand(‘copy’) only works when triggered by user interactions
+by using test_driver.bless,
+but even then there's no way to read the content of the clipboard in an automated way:
+* document.execCommand(‘paste’) isn't supported in regular web pages by anyone but IE
+* The Clipboard API is not supported across the board,
+  and Firefox only supports reading the clipboard in browser extensions,
+  not in regular web pages.
+-->
+<style>
+div {
+  text-transform: uppercase;
+  border: solid 5px blue;
+}
+textarea { border: solid 5px orange; }
+div, textarea { padding: 1em; }
+</style>
+
+<p>Copy the content of the blue box, then paste it in the orange box.
+<p>The test passes if the result is in lowercase.
+
+<div id=source>there is no need to shout</div>
+<textarea></textarea>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-001.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-001.html
new file mode 100644
index 0000000000..8c532ff723
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Hiragana and text-transform: full-size-kana</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-text-transform-full-size-kana">
+<link rel="match" href="reference/text-transform-full-size-kana-001-ref.html">
+<meta name="assert" content="small hiragana are transformed to normal hiragana by text-tranform:full-size-kana">
+<style>
+td:nth-of-type(2) {
+  text-transform: full-size-kana
+}
+</style>
+
+<p>Test passes if the characters in the second column are
+the same shape and size as those in the rightmost column,
+not small as those in the leftmost column.<br>
+Any missing glyph should be ignored as long as it is missing in both the second and the rightmost column.
+
+<table>
+  <tr><td>ぁ<td>ぁ<td>あ
+  <tr><td>ぃ<td>ぃ<td>い
+  <tr><td>ぅ<td>ぅ<td>う
+  <tr><td>ぇ<td>ぇ<td>え
+  <tr><td>ぉ<td>ぉ<td>お
+  <tr><td>ゕ<td>ゕ<td>か
+  <tr><td>ゖ<td>ゖ<td>け
+  <tr><td>っ<td>っ<td>つ
+  <tr><td>ゃ<td>ゃ<td>や
+  <tr><td>ゅ<td>ゅ<td>ゆ
+  <tr><td>ょ<td>ょ<td>よ
+  <tr><td>ゎ<td>ゎ<td>わ
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-002.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-002.html
new file mode 100644
index 0000000000..1aa03aa2f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Katakana and text-transform: full-size-kana</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-text-transform-full-size-kana">
+<link rel="match" href="reference/text-transform-full-size-kana-002-ref.html">
+<meta name="assert" content="small katakana are transformed to normal katakana by text-tranform:full-size-kana (part 1)">
+<style>
+td:nth-of-type(2) {
+  text-transform: full-size-kana
+}
+</style>
+
+<p>Test passes if the characters in the second column are
+the same shape and size as those in the rightmost column,
+not small as those in the leftmost column.<br>
+Any missing glyph should be ignored as long as it is missing in both the second and the rightmost column.
+
+<table>
+  <tr><td>ァ<td>ァ<td>ア
+  <tr><td>ィ<td>ィ<td>イ
+  <tr><td>ゥ<td>ゥ<td>ウ
+  <tr><td>ェ<td>ェ<td>エ
+  <tr><td>ォ<td>ォ<td>オ
+  <tr><td>ヵ<td>ヵ<td>カ
+  <tr><td>ㇰ<td>ㇰ<td>ク
+  <tr><td>ヶ<td>ヶ<td>ケ
+  <tr><td>ㇱ<td>ㇱ<td>シ
+  <tr><td>ㇲ<td>ㇲ<td>ス
+  <tr><td>ッ<td>ッ<td>ツ
+  <tr><td>ㇳ<td>ㇳ<td>ト
+  <tr><td>ㇴ<td>ㇴ<td>ヌ
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-003.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-003.html
new file mode 100644
index 0000000000..49938c2185
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Katakana and text-transform: full-size-kana</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-text-transform-full-size-kana">
+<link rel="match" href="reference/text-transform-full-size-kana-003-ref.html">
+<meta name="assert" content="small katakana are transformed to normal katakana by text-tranform:full-size-kana (part 2)">
+<style>
+td:nth-of-type(2) {
+  text-transform: full-size-kana
+}
+</style>
+
+<p>Test passes if the characters in the second column are
+the same shape and size as those in the rightmost column,
+not small as those in the leftmost column.<br>
+Any missing glyph should be ignored as long as it is missing in both the second and the rightmost column.
+
+<table>
+  <tr><td>ㇵ<td>ㇵ<td>ハ
+  <tr><td>ㇶ<td>ㇶ<td>ヒ
+  <tr><td>ㇷ<td>ㇷ<td>フ
+  <tr><td>ㇸ<td>ㇸ<td>ヘ
+  <tr><td>ㇹ<td>ㇹ<td>ホ
+  <tr><td>ㇺ<td>ㇺ<td>ム
+  <tr><td>ャ<td>ャ<td>ヤ
+  <tr><td>ュ<td>ュ<td>ユ
+  <tr><td>ョ<td>ョ<td>ヨ
+  <tr><td>ㇻ<td>ㇻ<td>ラ
+  <tr><td>ㇼ<td>ㇼ<td>リ
+  <tr><td>ㇽ<td>ㇽ<td>ル
+  <tr><td>ㇾ<td>ㇾ<td>レ
+  <tr><td>ㇿ<td>ㇿ<td>ロ
+  <tr><td>ヮ<td>ヮ<td>ワ
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-004.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-004.html
new file mode 100644
index 0000000000..1e6e690d73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-004.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: half-width Katakana and text-transform: full-size-kana</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-text-transform-full-size-kana">
+<link rel="match" href="reference/text-transform-full-size-kana-004-ref.html">
+<meta name="assert" content="small half-width katakana are transformed to normal half-width katakana by text-tranform:full-size-kana">
+<style>
+td:nth-of-type(2) {
+  text-transform: full-size-kana
+}
+</style>
+
+<p>Test passes if the characters in the second column are
+the same shape and size as those in the rightmost column,
+not small as those in the leftmost column.<br>
+Any missing glyph should be ignored as long as it is missing in both the second and the rightmost column.
+
+<table>
+  <tr><td>ｧ<td>ｧ<td>ｱ
+  <tr><td>ｨ<td>ｨ<td>ｲ
+  <tr><td>ｩ<td>ｩ<td>ｳ
+  <tr><td>ｪ<td>ｪ<td>ｴ
+  <tr><td>ｫ<td>ｫ<td>ｵ
+  <tr><td>ｯ<td>ｯ<td>ﾂ
+  <tr><td>ｬ<td>ｬ<td>ﾔ
+  <tr><td>ｭ<td>ｭ<td>ﾕ
+  <tr><td>ｮ<td>ｮ<td>ﾖ
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-005.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-005.html
new file mode 100644
index 0000000000..32cadd3138
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-005.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS3 Text, text transform: full-size-kana, full-size kanas, hiragana</title>
+<meta name="assert" content="For full-size kanas, text-transform: full-size-kana leaves all kanas unaltered (testing the hiragana subset).">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-full-size-kana-005-ref.html">
+<style>
+div { font-size: 150%;}
+div > span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: full-size-kana; }
+</style>
+
+<p>Test passes if both characters in each pair are the same shape <strong>and size</strong>.<br>
+Any missing glyph should be ignored
+as long as it is missing for both the first and second characters in a pair.
+
+<div>
+  <span><span class=test>&#x30FC;</span> &#x30FC;</span>
+  <span><span class=test>&#x3042;</span> &#x3042;</span>
+  <span><span class=test>&#x3044;</span> &#x3044;</span>
+  <span><span class=test>&#x3046;</span> &#x3046;</span>
+  <span><span class=test>&#x3048;</span> &#x3048;</span>
+  <span><span class=test>&#x304A;</span> &#x304A;</span>
+  <span><span class=test>&#x304B;</span> &#x304B;</span>
+  <span><span class=test>&#x304C;</span> &#x304C;</span>
+  <span><span class=test>&#x304D;</span> &#x304D;</span>
+  <span><span class=test>&#x304E;</span> &#x304E;</span>
+  <span><span class=test>&#x304F;</span> &#x304F;</span>
+  <span><span class=test>&#x3050;</span> &#x3050;</span>
+  <span><span class=test>&#x3051;</span> &#x3051;</span>
+  <span><span class=test>&#x3052;</span> &#x3052;</span>
+  <span><span class=test>&#x3053;</span> &#x3053;</span>
+  <span><span class=test>&#x3054;</span> &#x3054;</span>
+  <span><span class=test>&#x3055;</span> &#x3055;</span>
+  <span><span class=test>&#x3056;</span> &#x3056;</span>
+  <span><span class=test>&#x3057;</span> &#x3057;</span>
+  <span><span class=test>&#x3058;</span> &#x3058;</span>
+  <span><span class=test>&#x3059;</span> &#x3059;</span>
+  <span><span class=test>&#x305A;</span> &#x305A;</span>
+  <span><span class=test>&#x305B;</span> &#x305B;</span>
+  <span><span class=test>&#x305C;</span> &#x305C;</span>
+  <span><span class=test>&#x305D;</span> &#x305D;</span>
+  <span><span class=test>&#x305E;</span> &#x305E;</span>
+  <span><span class=test>&#x305F;</span> &#x305F;</span>
+  <span><span class=test>&#x3060;</span> &#x3060;</span>
+  <span><span class=test>&#x3061;</span> &#x3061;</span>
+  <span><span class=test>&#x3062;</span> &#x3062;</span>
+  <span><span class=test>&#x3064;</span> &#x3064;</span>
+  <span><span class=test>&#x3065;</span> &#x3065;</span>
+  <span><span class=test>&#x3066;</span> &#x3066;</span>
+  <span><span class=test>&#x3067;</span> &#x3067;</span>
+  <span><span class=test>&#x3068;</span> &#x3068;</span>
+  <span><span class=test>&#x3069;</span> &#x3069;</span>
+  <span><span class=test>&#x306A;</span> &#x306A;</span>
+  <span><span class=test>&#x306B;</span> &#x306B;</span>
+  <span><span class=test>&#x306C;</span> &#x306C;</span>
+  <span><span class=test>&#x306D;</span> &#x306D;</span>
+  <span><span class=test>&#x306E;</span> &#x306E;</span>
+  <span><span class=test>&#x306F;</span> &#x306F;</span>
+  <span><span class=test>&#x3070;</span> &#x3070;</span>
+  <span><span class=test>&#x3071;</span> &#x3071;</span>
+  <span><span class=test>&#x3072;</span> &#x3072;</span>
+  <span><span class=test>&#x3073;</span> &#x3073;</span>
+  <span><span class=test>&#x3074;</span> &#x3074;</span>
+  <span><span class=test>&#x3075;</span> &#x3075;</span>
+  <span><span class=test>&#x3076;</span> &#x3076;</span>
+  <span><span class=test>&#x3077;</span> &#x3077;</span>
+  <span><span class=test>&#x3078;</span> &#x3078;</span>
+  <span><span class=test>&#x3079;</span> &#x3079;</span>
+  <span><span class=test>&#x307A;</span> &#x307A;</span>
+  <span><span class=test>&#x307B;</span> &#x307B;</span>
+  <span><span class=test>&#x307C;</span> &#x307C;</span>
+  <span><span class=test>&#x307D;</span> &#x307D;</span>
+  <span><span class=test>&#x307E;</span> &#x307E;</span>
+  <span><span class=test>&#x307F;</span> &#x307F;</span>
+  <span><span class=test>&#x3080;</span> &#x3080;</span>
+  <span><span class=test>&#x3081;</span> &#x3081;</span>
+  <span><span class=test>&#x3082;</span> &#x3082;</span>
+  <span><span class=test>&#x3084;</span> &#x3084;</span>
+  <span><span class=test>&#x3086;</span> &#x3086;</span>
+  <span><span class=test>&#x3088;</span> &#x3088;</span>
+  <span><span class=test>&#x3089;</span> &#x3089;</span>
+  <span><span class=test>&#x308A;</span> &#x308A;</span>
+  <span><span class=test>&#x308B;</span> &#x308B;</span>
+  <span><span class=test>&#x308C;</span> &#x308C;</span>
+  <span><span class=test>&#x308D;</span> &#x308D;</span>
+  <span><span class=test>&#x308F;</span> &#x308F;</span>
+  <span><span class=test>&#x3090;</span> &#x3090;</span>
+  <span><span class=test>&#x3091;</span> &#x3091;</span>
+  <span><span class=test>&#x3092;</span> &#x3092;</span>
+  <span><span class=test>&#x3093;</span> &#x3093;</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-006.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-006.html
new file mode 100644
index 0000000000..b9e3f19b4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-006.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS3 Text, text transform: full-size-kana, full-size kanas, katakana</title>
+<meta name="assert" content="For full-size kanas, text-transform: full-size-kana leaves all kanas unaltered (testing the katakana subset).">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-full-size-kana-006-ref.html">
+<style>
+div { font-size: 150%;}
+div > span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: full-size-kana; }
+</style>
+
+<p>Test passes if both characters in each pair are the same shape <strong>and size</strong>.<br>
+Any missing glyph should be ignored
+as long as it is missing for both the first and second characters in a pair.
+
+<div>
+  <span><span class=test>&#x30A2;</span> &#x30A2;</span>
+  <span><span class=test>&#x30A4;</span> &#x30A4;</span>
+  <span><span class=test>&#x30A6;</span> &#x30A6;</span>
+  <span><span class=test>&#x30A8;</span> &#x30A8;</span>
+  <span><span class=test>&#x30AA;</span> &#x30AA;</span>
+  <span><span class=test>&#x30AB;</span> &#x30AB;</span>
+  <span><span class=test>&#x30AC;</span> &#x30AC;</span>
+  <span><span class=test>&#x30AD;</span> &#x30AD;</span>
+  <span><span class=test>&#x30AE;</span> &#x30AE;</span>
+  <span><span class=test>&#x30AF;</span> &#x30AF;</span>
+  <span><span class=test>&#x30B0;</span> &#x30B0;</span>
+  <span><span class=test>&#x30B1;</span> &#x30B1;</span>
+  <span><span class=test>&#x30B2;</span> &#x30B2;</span>
+  <span><span class=test>&#x30B3;</span> &#x30B3;</span>
+  <span><span class=test>&#x30B4;</span> &#x30B4;</span>
+  <span><span class=test>&#x30B5;</span> &#x30B5;</span>
+  <span><span class=test>&#x30B6;</span> &#x30B6;</span>
+  <span><span class=test>&#x30B7;</span> &#x30B7;</span>
+  <span><span class=test>&#x30B8;</span> &#x30B8;</span>
+  <span><span class=test>&#x30B9;</span> &#x30B9;</span>
+  <span><span class=test>&#x30BA;</span> &#x30BA;</span>
+  <span><span class=test>&#x30BB;</span> &#x30BB;</span>
+  <span><span class=test>&#x30BC;</span> &#x30BC;</span>
+  <span><span class=test>&#x30BD;</span> &#x30BD;</span>
+  <span><span class=test>&#x30BE;</span> &#x30BE;</span>
+  <span><span class=test>&#x30BF;</span> &#x30BF;</span>
+  <span><span class=test>&#x30C0;</span> &#x30C0;</span>
+  <span><span class=test>&#x30C1;</span> &#x30C1;</span>
+  <span><span class=test>&#x30C2;</span> &#x30C2;</span>
+  <span><span class=test>&#x30C4;</span> &#x30C4;</span>
+  <span><span class=test>&#x30C5;</span> &#x30C5;</span>
+  <span><span class=test>&#x30C6;</span> &#x30C6;</span>
+  <span><span class=test>&#x30C7;</span> &#x30C7;</span>
+  <span><span class=test>&#x30C8;</span> &#x30C8;</span>
+  <span><span class=test>&#x30C9;</span> &#x30C9;</span>
+  <span><span class=test>&#x30CA;</span> &#x30CA;</span>
+  <span><span class=test>&#x30CB;</span> &#x30CB;</span>
+  <span><span class=test>&#x30CC;</span> &#x30CC;</span>
+  <span><span class=test>&#x30CD;</span> &#x30CD;</span>
+  <span><span class=test>&#x30CE;</span> &#x30CE;</span>
+  <span><span class=test>&#x30CF;</span> &#x30CF;</span>
+  <span><span class=test>&#x30D0;</span> &#x30D0;</span>
+  <span><span class=test>&#x30D1;</span> &#x30D1;</span>
+  <span><span class=test>&#x30D2;</span> &#x30D2;</span>
+  <span><span class=test>&#x30D3;</span> &#x30D3;</span>
+  <span><span class=test>&#x30D4;</span> &#x30D4;</span>
+  <span><span class=test>&#x30D5;</span> &#x30D5;</span>
+  <span><span class=test>&#x30D6;</span> &#x30D6;</span>
+  <span><span class=test>&#x30D7;</span> &#x30D7;</span>
+  <span><span class=test>&#x30D8;</span> &#x30D8;</span>
+  <span><span class=test>&#x30D9;</span> &#x30D9;</span>
+  <span><span class=test>&#x30DA;</span> &#x30DA;</span>
+  <span><span class=test>&#x30DB;</span> &#x30DB;</span>
+  <span><span class=test>&#x30DC;</span> &#x30DC;</span>
+  <span><span class=test>&#x30DD;</span> &#x30DD;</span>
+  <span><span class=test>&#x30DE;</span> &#x30DE;</span>
+  <span><span class=test>&#x30DF;</span> &#x30DF;</span>
+  <span><span class=test>&#x30E0;</span> &#x30E0;</span>
+  <span><span class=test>&#x30E1;</span> &#x30E1;</span>
+  <span><span class=test>&#x30E2;</span> &#x30E2;</span>
+  <span><span class=test>&#x30E4;</span> &#x30E4;</span>
+  <span><span class=test>&#x30E6;</span> &#x30E6;</span>
+  <span><span class=test>&#x30E8;</span> &#x30E8;</span>
+  <span><span class=test>&#x30E9;</span> &#x30E9;</span>
+  <span><span class=test>&#x30EA;</span> &#x30EA;</span>
+  <span><span class=test>&#x30EB;</span> &#x30EB;</span>
+  <span><span class=test>&#x30EC;</span> &#x30EC;</span>
+  <span><span class=test>&#x30ED;</span> &#x30ED;</span>
+  <span><span class=test>&#x30EF;</span> &#x30EF;</span>
+  <span><span class=test>&#x30F0;</span> &#x30F0;</span>
+  <span><span class=test>&#x30F1;</span> &#x30F1;</span>
+  <span><span class=test>&#x30F2;</span> &#x30F2;</span>
+  <span><span class=test>&#x30F3;</span> &#x30F3;</span>
+  <span><span class=test>&#x30F4;</span> &#x30F4;</span>
+  <span><span class=test>&#x309B;</span> &#x309B;</span>
+  <span><span class=test>&#x309C;</span> &#x309C;</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-007.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-007.html
new file mode 100644
index 0000000000..5ea0105088
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-007.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS3 Text, text transform: full-size-kana, full-size kanas, half-width katakana</title>
+<meta name="assert" content="For full-size kanas, text-transform: full-size-kana leaves all kanas unaltered (testing the half-wdith katakana subset).">
+<link rel='author' title='Diego Pino Garcia' href='mailto:dpino@igalia.com'>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-full-size-kana-007-ref.html">
+<style>
+div { font-size: 150%;}
+div > span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: full-size-kana; }
+</style>
+
+<p>Test passes if both characters in each pair are the same shape <strong>and size</strong>.<br>
+Any missing glyph should be ignored
+as long as it is missing for both the first and second characters in a pair.
+
+<div>
+  <span><span class=test>&#xFF65;</span> &#xFF65;</span>
+  <span><span class=test>&#xFF66;</span> &#xFF66;</span>
+  <span><span class=test>&#xFF70;</span> &#xFF70;</span>
+  <span><span class=test>&#xFF71;</span> &#xFF71;</span>
+  <span><span class=test>&#xFF72;</span> &#xFF72;</span>
+  <span><span class=test>&#xFF73;</span> &#xFF73;</span>
+  <span><span class=test>&#xFF74;</span> &#xFF74;</span>
+  <span><span class=test>&#xFF75;</span> &#xFF75;</span>
+  <span><span class=test>&#xFF76;</span> &#xFF76;</span>
+  <span><span class=test>&#xFF77;</span> &#xFF77;</span>
+  <span><span class=test>&#xFF78;</span> &#xFF78;</span>
+  <span><span class=test>&#xFF79;</span> &#xFF79;</span>
+  <span><span class=test>&#xFF7A;</span> &#xFF7A;</span>
+  <span><span class=test>&#xFF7B;</span> &#xFF7B;</span>
+  <span><span class=test>&#xFF7C;</span> &#xFF7C;</span>
+  <span><span class=test>&#xFF7D;</span> &#xFF7D;</span>
+  <span><span class=test>&#xFF7E;</span> &#xFF7E;</span>
+  <span><span class=test>&#xFF7F;</span> &#xFF7F;</span>
+  <span><span class=test>&#xFF80;</span> &#xFF80;</span>
+  <span><span class=test>&#xFF81;</span> &#xFF81;</span>
+  <span><span class=test>&#xFF82;</span> &#xFF82;</span>
+  <span><span class=test>&#xFF83;</span> &#xFF83;</span>
+  <span><span class=test>&#xFF84;</span> &#xFF84;</span>
+  <span><span class=test>&#xFF85;</span> &#xFF85;</span>
+  <span><span class=test>&#xFF86;</span> &#xFF86;</span>
+  <span><span class=test>&#xFF87;</span> &#xFF87;</span>
+  <span><span class=test>&#xFF88;</span> &#xFF88;</span>
+  <span><span class=test>&#xFF89;</span> &#xFF89;</span>
+  <span><span class=test>&#xFF8A;</span> &#xFF8A;</span>
+  <span><span class=test>&#xFF8B;</span> &#xFF8B;</span>
+  <span><span class=test>&#xFF8C;</span> &#xFF8C;</span>
+  <span><span class=test>&#xFF8D;</span> &#xFF8D;</span>
+  <span><span class=test>&#xFF8E;</span> &#xFF8E;</span>
+  <span><span class=test>&#xFF8F;</span> &#xFF8F;</span>
+  <span><span class=test>&#xFF90;</span> &#xFF90;</span>
+  <span><span class=test>&#xFF91;</span> &#xFF91;</span>
+  <span><span class=test>&#xFF92;</span> &#xFF92;</span>
+  <span><span class=test>&#xFF93;</span> &#xFF93;</span>
+  <span><span class=test>&#xFF94;</span> &#xFF94;</span>
+  <span><span class=test>&#xFF95;</span> &#xFF95;</span>
+  <span><span class=test>&#xFF96;</span> &#xFF96;</span>
+  <span><span class=test>&#xFF97;</span> &#xFF97;</span>
+  <span><span class=test>&#xFF98;</span> &#xFF98;</span>
+  <span><span class=test>&#xFF99;</span> &#xFF99;</span>
+  <span><span class=test>&#xFF9A;</span> &#xFF9A;</span>
+  <span><span class=test>&#xFF9B;</span> &#xFF9B;</span>
+  <span><span class=test>&#xFF9C;</span> &#xFF9C;</span>
+  <span><span class=test>&#xFF9D;</span> &#xFF9D;</span>
+  <span><span class=test>&#xFF9E;</span> &#xFF9E;</span>
+  <span><span class=test>&#xFF9F;</span> &#xFF9F;</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-008.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-008.html
new file mode 100644
index 0000000000..5b1cdde7b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-full-size-kana-008.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Unicode 15 kana and text-transform: full-size-kana</title>
+<link rel="author" title="Elika Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-text-transform-full-size-kana">
+<link rel="match" href="reference/text-transform-full-size-kana-008-ref.html">
+<meta name="assert" content="small kana added in Unicode 15 are transformed to normal kana by text-tranform:full-size-kana">
+<style>
+td:nth-of-type(2) {
+  text-transform: full-size-kana
+}
+</style>
+
+<p>Test passes if the characters in the second column are
+the same shape and size as those in the rightmost column,
+not small as those in the leftmost column.<br>
+Any missing glyph should be ignored as long as it is missing in both the second and the rightmost column.
+
+<table>
+  <tr><td>&#x1B132;<td>&#x1B132;<td>&#x3053;
+  <tr><td>&#x1B150;<td>&#x1B150;<td>&#x3090;
+  <tr><td>&#x1B151;<td>&#x1B151;<td>&#x3091;
+  <tr><td>&#x1B152;<td>&#x1B152;<td>&#x3092;
+  <tr><td>&#x1B155;<td>&#x1B155;<td>&#x30B3;
+  <tr><td>&#x1B164;<td>&#x1B164;<td>&#x30F0;
+  <tr><td>&#x1B165;<td>&#x1B165;<td>&#x30F1;
+  <tr><td>&#x1B166;<td>&#x1B166;<td>&#x30F2;
+  <tr><td>&#x1B167;<td>&#x1B167;<td>&#x30F3;
+</table>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-001.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-001.xht
new file mode 100644
index 0000000000..355aace0a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-001.xht
@@ -0,0 +1,316 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-transform - fullwidth - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="reviewer" title="Koji Ishii" href="mailto:kojiishi@gluesoft.co.jp" />
+		<link rel="help" title="CSS Text Level 3: 3.1. Transforming Text: the ‘text-transform’ property" href="http://www.w3.org/TR/css-text-3/#text-transform" />
+		<link rel="match" href="reference/text-transform-fullwidth-001-ref.xht"/>
+		<meta name="assert" content="The UA should transform halfwidth character to fullwidth character when text-transform is set to fullwidth." />
+		<style type="text/css">
+			<![CDATA[
+			        @font-face {
+					font-family: 'mplus-1p-regular';
+					src: url('/fonts/mplus-1p-regular.woff') format('woff');
+			        }
+				.test span {
+					text-transform: full-width;
+				}
+				/* the CSS below is not part of the test */
+				span {
+				       font-family: 'mplus-1p-regular';
+					background-color: cyan;
+				}
+				.test {
+					color: Blue;
+					line-height: 1.1;
+				}
+				.test div {
+					display: inline-block;
+					margin-bottom: .5em;
+					text-align: center;
+					white-space: nowrap;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the upper character in each pair matches the lower one in both shape <strong>and size</strong>.
+		</p>
+		<div class="test">
+
+		<!-- FULLWIDTH LATIN -->
+			<div>[<span>　</span>]<br />[<span> </span>]</div>
+			<div><span>！</span><br /><span>!</span></div>
+			<div><span>＂</span><br /><span>&quot;</span></div>
+			<div><span>＃</span><br /><span>#</span></div>
+			<div><span>＄</span><br /><span>$</span></div>
+			<div><span>％</span><br /><span>%</span></div>
+			<div><span>＆</span><br /><span>&amp;</span></div>
+			<div><span>＇</span><br /><span>'</span></div>
+			<div><span>（</span><br /><span>(</span></div>
+			<div><span>）</span><br /><span>)</span></div>
+			<div><span>＊</span><br /><span>*</span></div>
+			<div><span>＋</span><br /><span>+</span></div>
+			<div><span>，</span><br /><span>,</span></div>
+			<div><span>－</span><br /><span>-</span></div>
+			<div><span>．</span><br /><span>.</span></div>
+			<div><span>／</span><br /><span>/</span></div>
+
+			<div><span>０</span><br /><span>0</span></div>
+			<div><span>１</span><br /><span>1</span></div>
+			<div><span>２</span><br /><span>2</span></div>
+			<div><span>３</span><br /><span>3</span></div>
+			<div><span>４</span><br /><span>4</span></div>
+			<div><span>５</span><br /><span>5</span></div>
+			<div><span>６</span><br /><span>6</span></div>
+			<div><span>７</span><br /><span>7</span></div>
+			<div><span>８</span><br /><span>8</span></div>
+			<div><span>９</span><br /><span>9</span></div>
+
+			<div><span>：</span><br /><span>:</span></div>
+			<div><span>；</span><br /><span>;</span></div>
+			<div><span>＜</span><br /><span>&lt;</span></div>
+			<div><span>＝</span><br /><span>=</span></div>
+			<div><span>＞</span><br /><span>&gt;</span></div>
+			<div><span>？</span><br /><span>?</span></div>
+			<div><span>＠</span><br /><span>@</span></div>
+
+			<div><span>Ａ</span><br /><span>A</span></div>
+			<div><span>Ｂ</span><br /><span>B</span></div>
+			<div><span>Ｃ</span><br /><span>C</span></div>
+			<div><span>Ｄ</span><br /><span>D</span></div>
+			<div><span>Ｅ</span><br /><span>E</span></div>
+			<div><span>Ｆ</span><br /><span>F</span></div>
+			<div><span>Ｇ</span><br /><span>G</span></div>
+			<div><span>Ｈ</span><br /><span>H</span></div>
+			<div><span>Ｉ</span><br /><span>I</span></div>
+			<div><span>Ｊ</span><br /><span>J</span></div>
+			<div><span>Ｋ</span><br /><span>K</span></div>
+			<div><span>Ｌ</span><br /><span>L</span></div>
+			<div><span>Ｍ</span><br /><span>M</span></div>
+			<div><span>Ｎ</span><br /><span>N</span></div>
+			<div><span>Ｏ</span><br /><span>O</span></div>
+			<div><span>Ｐ</span><br /><span>P</span></div>
+			<div><span>Ｑ</span><br /><span>Q</span></div>
+			<div><span>Ｒ</span><br /><span>R</span></div>
+			<div><span>Ｓ</span><br /><span>S</span></div>
+			<div><span>Ｔ</span><br /><span>T</span></div>
+			<div><span>Ｕ</span><br /><span>U</span></div>
+			<div><span>Ｖ</span><br /><span>V</span></div>
+			<div><span>Ｗ</span><br /><span>W</span></div>
+			<div><span>Ｘ</span><br /><span>X</span></div>
+			<div><span>Ｙ</span><br /><span>Y</span></div>
+			<div><span>Ｚ</span><br /><span>Z</span></div>
+
+			<div><span>［</span><br /><span>[</span></div>
+			<div><span>＼</span><br /><span>\</span></div>
+			<div><span>］</span><br /><span>]</span></div>
+			<div><span>＾</span><br /><span>^</span></div>
+			<div><span>＿</span><br /><span>_</span></div>
+			<div><span>｀</span><br /><span>`</span></div>
+
+			<div><span>ａ</span><br /><span>a</span></div>
+			<div><span>ｂ</span><br /><span>b</span></div>
+			<div><span>ｃ</span><br /><span>c</span></div>
+			<div><span>ｄ</span><br /><span>d</span></div>
+			<div><span>ｅ</span><br /><span>e</span></div>
+			<div><span>ｆ</span><br /><span>f</span></div>
+			<div><span>ｇ</span><br /><span>g</span></div>
+			<div><span>ｈ</span><br /><span>h</span></div>
+			<div><span>ｉ</span><br /><span>i</span></div>
+			<div><span>ｊ</span><br /><span>j</span></div>
+			<div><span>ｋ</span><br /><span>k</span></div>
+			<div><span>ｌ</span><br /><span>l</span></div>
+			<div><span>ｍ</span><br /><span>m</span></div>
+			<div><span>ｎ</span><br /><span>n</span></div>
+			<div><span>ｏ</span><br /><span>o</span></div>
+			<div><span>ｐ</span><br /><span>p</span></div>
+			<div><span>ｑ</span><br /><span>q</span></div>
+			<div><span>ｒ</span><br /><span>r</span></div>
+			<div><span>ｓ</span><br /><span>s</span></div>
+			<div><span>ｔ</span><br /><span>t</span></div>
+			<div><span>ｕ</span><br /><span>u</span></div>
+			<div><span>ｖ</span><br /><span>v</span></div>
+			<div><span>ｗ</span><br /><span>w</span></div>
+			<div><span>ｘ</span><br /><span>x</span></div>
+			<div><span>ｙ</span><br /><span>y</span></div>
+			<div><span>ｚ</span><br /><span>z</span></div>
+
+			<div><span>｛</span><br /><span>{</span></div>
+			<div><span>｜</span><br /><span>|</span></div>
+			<div><span>｝</span><br /><span>}</span></div>
+			<div><span>～</span><br /><span>~</span></div>
+
+			<div><span>｟</span><br /><span>⦅</span></div>				<!-- LEFT WHITE PARENTHESIS -->
+			<div><span>｠</span><br /><span>⦆</span></div>				<!-- RIGHT WHITE PARENTHESIS -->
+
+		<!-- HALFWIDTH KATAKANA -->
+			<div><span>。</span><br /><span>｡</span></div>
+			<div><span>「</span><br /><span>｢</span></div>
+			<div><span>」</span><br /><span>｣</span></div>
+			<div><span>、</span><br /><span>､</span></div>
+			<div><span>・</span><br /><span>･</span></div>
+
+			<div><span>ヲ</span><br /><span>ｦ</span></div>
+			<div><span>ァ</span><br /><span>ｧ</span></div>
+			<div><span>ィ</span><br /><span>ｨ</span></div>
+			<div><span>ゥ</span><br /><span>ｩ</span></div>
+			<div><span>ェ</span><br /><span>ｪ</span></div>
+			<div><span>ォ</span><br /><span>ｫ</span></div>
+			<div><span>ャ</span><br /><span>ｬ</span></div>
+			<div><span>ュ</span><br /><span>ｭ</span></div>
+			<div><span>ョ</span><br /><span>ｮ</span></div>
+			<div><span>ッ</span><br /><span>ｯ</span></div>
+			<div><span>ー</span><br /><span>ｰ</span></div>
+
+			<div><span>ア</span><br /><span>ｱ</span></div>
+			<div><span>イ</span><br /><span>ｲ</span></div>
+			<div><span>ウ</span><br /><span>ｳ</span></div>
+			<div><span>エ</span><br /><span>ｴ</span></div>
+			<div><span>オ</span><br /><span>ｵ</span></div>
+			<div><span>カ</span><br /><span>ｶ</span></div>
+			<div><span>キ</span><br /><span>ｷ</span></div>
+			<div><span>ク</span><br /><span>ｸ</span></div>
+			<div><span>ケ</span><br /><span>ｹ</span></div>
+			<div><span>コ</span><br /><span>ｺ</span></div>
+			<div><span>サ</span><br /><span>ｻ</span></div>
+			<div><span>シ</span><br /><span>ｼ</span></div>
+			<div><span>ス</span><br /><span>ｽ</span></div>
+			<div><span>セ</span><br /><span>ｾ</span></div>
+			<div><span>ソ</span><br /><span>ｿ</span></div>
+			<div><span>タ</span><br /><span>ﾀ</span></div>
+			<div><span>チ</span><br /><span>ﾁ</span></div>
+			<div><span>ツ</span><br /><span>ﾂ</span></div>
+			<div><span>テ</span><br /><span>ﾃ</span></div>
+			<div><span>ト</span><br /><span>ﾄ</span></div>
+			<div><span>ナ</span><br /><span>ﾅ</span></div>
+			<div><span>ニ</span><br /><span>ﾆ</span></div>
+			<div><span>ヌ</span><br /><span>ﾇ</span></div>
+			<div><span>ネ</span><br /><span>ﾈ</span></div>
+			<div><span>ノ</span><br /><span>ﾉ</span></div>
+			<div><span>ハ</span><br /><span>ﾊ</span></div>
+			<div><span>ヒ</span><br /><span>ﾋ</span></div>
+			<div><span>フ</span><br /><span>ﾌ</span></div>
+			<div><span>ヘ</span><br /><span>ﾍ</span></div>
+			<div><span>ホ</span><br /><span>ﾎ</span></div>
+			<div><span>マ</span><br /><span>ﾏ</span></div>
+			<div><span>ミ</span><br /><span>ﾐ</span></div>
+			<div><span>ム</span><br /><span>ﾑ</span></div>
+			<div><span>メ</span><br /><span>ﾒ</span></div>
+			<div><span>モ</span><br /><span>ﾓ</span></div>
+			<div><span>ヤ</span><br /><span>ﾔ</span></div>
+			<div><span>ユ</span><br /><span>ﾕ</span></div>
+			<div><span>ヨ</span><br /><span>ﾖ</span></div>
+			<div><span>ラ</span><br /><span>ﾗ</span></div>
+			<div><span>リ</span><br /><span>ﾘ</span></div>
+			<div><span>ル</span><br /><span>ﾙ</span></div>
+			<div><span>レ</span><br /><span>ﾚ</span></div>
+			<div><span>ロ</span><br /><span>ﾛ</span></div>
+			<div><span>ワ</span><br /><span>ﾜ</span></div>
+			<div><span>ン</span><br /><span>ﾝ</span></div>
+
+			<div><span>&nbsp;&#x3099;</span><br /><span>&nbsp;ﾞ</span></div>
+			<div><span>&nbsp;&#x309A;</span><br /><span>&nbsp;ﾟ</span></div>
+
+		<!-- HALFWIDTH HANGUL -->
+			<div>[<span>&#x115F;</span>]<br />[<span>&#xFFA0;</span>]</div>	<!-- HANGUL FILLER -->
+			<div><span>ᆨ</span><br /><span>ﾡ</span></div>				<!-- HANGUL LETTER KIYEOK -->
+			<div><span>ㄲ</span><br /><span>ﾢ</span></div>				<!-- HANGUL LETTER SSANGKIYEOK -->
+			<div><span>ᆪ</span><br /><span>ﾣ</span></div>				<!-- HANGUL LETTER KIYEOK-SIOS -->
+			<div><span>ᆫ</span><br /><span>ﾤ</span></div>				<!-- HANGUL LETTER NIEUN -->
+			<div><span>ᆬ</span><br /><span>ﾥ</span></div>				<!-- HANGUL LETTER NIEUN-CIEUC -->
+			<div><span>ᆭ</span><br /><span>ﾦ</span></div>				<!-- HANGUL LETTER NIEUN-HIEUH -->
+			<div><span>ᆮ</span><br /><span>ﾧ</span></div>				<!-- HANGUL LETTER TIKEUT -->
+			<div><span>ᄄ</span><br /><span>ﾨ</span></div>				<!-- HANGUL LETTER SSANGTIKEUT -->
+			<div><span>ᆯ</span><br /><span>ﾩ</span></div>				<!-- HANGUL LETTER RIEUL -->
+			<div><span>ᆰ</span><br /><span>ﾪ</span></div>				<!-- HANGUL LETTER RIEUL-KIYEOK -->
+			<div><span>ᆱ</span><br /><span>ﾫ</span></div>				<!-- HANGUL LETTER RIEUL-MIEUM -->
+			<div><span>ᆲ</span><br /><span>ﾬ</span></div>				<!-- HANGUL LETTER RIEUL-PIEUP -->
+			<div><span>ᆳ</span><br /><span>ﾭ</span></div>				<!-- HANGUL LETTER RIEUL-SIOS -->
+			<div><span>ᆴ</span><br /><span>ﾮ</span></div>				<!-- HANGUL LETTER RIEUL-THIEUTH -->
+			<div><span>ᆵ</span><br /><span>ﾯ</span></div>				<!-- HANGUL LETTER RIEUL-PHIEUPH -->
+			<div><span>ㅀ</span><br /><span>ﾰ</span></div>			<!-- HANGUL LETTER RIEUL-HIEUH -->
+			<div><span>ᄆ</span><br /><span>ﾱ</span></div>				<!-- HANGUL LETTER MIEUM -->
+			<div><span>ᄇ</span><br /><span>ﾲ</span></div>				<!-- HANGUL LETTER PIEUP -->
+			<div><span>ᄈ</span><br /><span>ﾳ</span></div>				<!-- HANGUL LETTER SSANGPIEUP -->
+			<div><span>ᆹ</span><br /><span>ﾴ</span></div>				<!-- HANGUL LETTER PIEUP-SIOS -->
+			<div><span>ᄉ</span><br /><span>ﾵ</span></div>				<!-- HANGUL LETTER SIOS -->
+			<div><span>ᆻ</span><br /><span>ﾶ</span></div>				<!-- HANGUL LETTER SSANGSIOS -->
+			<div><span>ᄋ</span><br /><span>ﾷ</span></div>				<!-- HANGUL LETTER IEUNG -->
+			<div><span>ᆽ</span><br /><span>ﾸ</span></div>				<!-- HANGUL LETTER CIEUC -->
+			<div><span>ᄍ</span><br /><span>ﾹ</span></div>				<!-- HANGUL LETTER SSANGCIEUC -->
+			<div><span>ᆾ</span><br /><span>ﾺ</span></div>				<!-- HANGUL LETTER CHIEUCH -->
+			<div><span>ᄏ</span><br /><span>ﾻ</span></div>				<!-- HANGUL LETTER KHIEUKH -->
+			<div><span>ᇀ</span><br /><span>ﾼ</span></div>				<!-- HANGUL LETTER THIEUTH -->
+			<div><span>ᄑ</span><br /><span>ﾽ</span></div>				<!-- HANGUL LETTER PHIEUPH -->
+			<div><span>ᇂ</span><br /><span>ﾾ</span></div>				<!-- HANGUL LETTER HIEUH -->
+			<div><span>ᅡ</span><br /><span>ￂ</span></div>				<!-- HANGUL LETTER A -->
+			<div><span>ᅢ</span><br /><span>ￃ</span></div>				<!-- HANGUL LETTER AE -->
+			<div><span>ᅣ</span><br /><span>ￄ</span></div>				<!-- HANGUL LETTER YA -->
+			<div><span>ᅤ</span><br /><span>ￅ</span></div>				<!-- HANGUL LETTER YAE -->
+			<div><span>ᅥ</span><br /><span>ￆ</span></div>				<!-- HANGUL LETTER EO -->
+			<div><span>ᅦ</span><br /><span>ￇ</span></div>				<!-- HANGUL LETTER E -->
+
+			<div><span>ᅧ</span><br /><span>ￊ</span></div>				<!-- HANGUL LETTER YEO -->
+			<div><span>ᅨ</span><br /><span>ￋ</span></div>				<!-- HANGUL LETTER YE -->
+			<div><span>ᅩ</span><br /><span>ￌ</span></div>				<!-- HANGUL LETTER O -->
+			<div><span>ᅪ</span><br /><span>ￍ</span></div>				<!-- HANGUL LETTER WA -->
+			<div><span>ᅫ</span><br /><span>ￎ</span></div>				<!-- HANGUL LETTER WAE -->
+			<div><span>ᅬ</span><br /><span>ￏ</span></div>				<!-- HANGUL LETTER OE -->
+
+			<div><span>ᅭ</span><br /><span>ￒ</span></div>				<!-- HANGUL LETTER YO -->
+			<div><span>ᅮ</span><br /><span>ￓ</span></div>				<!-- HANGUL LETTER U -->
+			<div><span>ᅯ</span><br /><span>ￔ</span></div>				<!-- HANGUL LETTER WEO -->
+			<div><span>ᅰ</span><br /><span>ￕ</span></div>				<!-- HANGUL LETTER WE -->
+			<div><span>ᅱ</span><br /><span>ￖ</span></div>				<!-- HANGUL LETTER WI -->
+			<div><span>ᅲ</span><br /><span>ￗ</span></div>				<!-- HANGUL LETTER YU -->
+
+			<div><span>ᅳ</span><br /><span>ￚ</span></div>				<!-- HANGUL LETTER EU -->
+			<div><span>ᅴ</span><br /><span>ￛ</span></div>				<!-- HANGUL LETTER YI -->
+			<div><span>ᅵ</span><br /><span>ￜ</span></div>				<!-- HANGUL LETTER I -->
+
+		<!-- FULLWIDTH SIGN -->
+			<div><span>￠</span><br /><span>¢</span></div>				<!-- CENT SIGN -->
+			<div><span>￡</span><br /><span>£</span></div>				<!-- POUND SIGN -->
+			<div><span>￢</span><br /><span>¬</span></div>				<!-- NOT SIGN -->
+			<div><span>￣</span><br /><span>¯</span></div>				<!-- MACRON -->
+			<div><span>￤</span><br /><span>¦</span></div>				<!-- BROKEN BAR -->
+			<div><span>￥</span><br /><span>¥</span></div>				<!-- YEN SIGN -->
+			<div><span>￦</span><br /><span>₩</span></div>				<!-- WON SIGN -->
+
+		<!-- HALFWIDTH SIGN -->
+			<div><span>│</span><br /><span>￨</span></div>				<!-- FORMS LIGHT VERTICAL -->
+			<div><span>←</span><br /><span>￩</span></div>				<!-- LEFTWARDS ARROW -->
+			<div><span>↑</span><br /><span>￪</span></div>				<!-- UPWARDS ARROW -->
+			<div><span>→</span><br /><span>￫</span></div>				<!-- RIGHTWARDS ARROW -->
+			<div><span>↓</span><br /><span>￬</span></div>				<!-- DOWNWARDS ARROW -->
+			<div><span>■</span><br /><span>￭</span></div>					<!-- BLACK SQUARE -->
+			<div><span>○</span><br /><span>￮</span></div>					<!-- WHITE CIRCLE -->
+
+		<!-- HALFWIDTH LATIN -->
+			<div><span>Ａ</span><br /><span>Ａ</span></div>
+			<div><span>Ｂ</span><br /><span>Ｂ</span></div>
+			<div><span>Ｃ</span><br /><span>Ｃ</span></div>
+
+			<div><span>ａ</span><br /><span>ａ</span></div>
+			<div><span>ｂ</span><br /><span>ｂ</span></div>
+			<div><span>ｃ</span><br /><span>ｃ</span></div>
+
+		<!-- FULLWIDTH KANA -->
+			<div><span>あ</span><br /><span>あ</span></div>
+			<div><span>い</span><br /><span>い</span></div>
+			<div><span>う</span><br /><span>う</span></div>
+			<div><span>え</span><br /><span>え</span></div>
+			<div><span>お</span><br /><span>お</span></div>
+
+			<div><span>ア</span><br /><span>ア</span></div>
+			<div><span>イ</span><br /><span>イ</span></div>
+			<div><span>ウ</span><br /><span>ウ</span></div>
+			<div><span>エ</span><br /><span>エ</span></div>
+			<div><span>オ</span><br /><span>オ</span></div>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-002-ref.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-002-ref.xht
new file mode 100644
index 0000000000..157a06d23b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-002-ref.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <meta name="DC.date.created" content="2017-01-11T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-12T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font-size: 32px;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if the "Text sample" characters are translated upright and not rotated toward the righthand side.</p>
+
+  <div>&#xFF34;&#xFF45;&#xFF58;&#xFF54;&#x3000;&#xFF53;&#xFF41;&#xFF4D;&#xFF50;&#xFF4C;&#xFF45;</div>
+
+  <!--
+  T = U+FF34 is the FULLWIDTH LATIN CAPITAL LETTER T
+  e = U+FF45 is the FULLWIDTH LATIN SMALL LETTER E
+  x = U+FF58 is the FULLWIDTH LATIN SMALL LETTER X
+  t = U+FF54 is the FULLWIDTH LATIN SMALL LETTER T
+
+      U+3000 is the fullwidth space character
+
+  s = U+FF53 is the FULLWIDTH LATIN SMALL LETTER S
+  a = U+FF41 is the FULLWIDTH LATIN SMALL LETTER A
+  m = U+FF4D is the FULLWIDTH LATIN SMALL LETTER M
+  p = U+FF50 is the FULLWIDTH LATIN SMALL LETTER P
+  l = U+FF4C is the FULLWIDTH LATIN SMALL LETTER L
+  e = U+FF45 is the FULLWIDTH LATIN SMALL LETTER E
+
+  Halfwidth and Fullwidth Forms
+  Range: FF00–FFEF
+  http://www.unicode.org/charts/PDF/UFF00.pdf
+  -->
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-002.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-002.xht
new file mode 100644
index 0000000000..f0d419e463
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-002.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Text Test: text-transform: full-width (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform" title="2.1 Case Transforms: the 'text-transform' property" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" title="9.1.3.1 Full-width Characters" />
+  <link rel="match" href="text-transform-fullwidth-002-ref.xht" />
+
+  <meta content="This test checks basic support of 'text-transform: full-width' in a vertical writing context. Since full-width Latin characters are typeset upright, then the characters of the text sample of this test should not be rotated toward the right but should be upright." name="assert" />
+
+  <meta name="DC.date.created" content="2017-01-11T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-12T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      font-size: 32px;
+      text-transform: full-width;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if the "Text sample" characters are translated upright and not rotated toward the righthand side.</p>
+
+  <div>Text sample</div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-004-ref.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-004-ref.xht
new file mode 100644
index 0000000000..d855d294e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-004-ref.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <meta name="DC.date.created" content="2017-01-26T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-26T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if both "６" glyphs have <strong>identical</strong> layout and orientation.</p>
+
+  <div>
+
+    <h1>&#65302;月</h1>
+
+    <h1>&#65302;月</h1>
+
+    <!--
+    ６ == &#65302; or &xFF16; or U+FF16 is the FULLWIDTH DIGIT 6 (≈ <wide> 0036 6)
+    In the Halfwidth and Fullwidth Forms range:
+    http://unicode.org/charts/PDF/UFF00.pdf
+    -->
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-004.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-004.xht
new file mode 100644
index 0000000000..2bf1b8cc49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-004.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Text Test: text-transform: full-width with 1 single digit (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform" title="2.1 Case Transforms: the 'text-transform' property" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" title="9.1.3.1 Full-width Characters" />
+  <link rel="match" href="text-transform-fullwidth-004-ref.xht" />
+
+  <meta content="This test checks basic support of 'text-transform: full-width' in a vertical writing context. Since full-width digit characters are typeset upright, then the single digit character in the text sample should not be rotated toward the right but should be upright." name="assert" />
+
+  <meta name="DC.date.created" content="2017-01-26T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      text-transform: full-width;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if both "６" glyphs have <strong>identical</strong> layout and orientation.</p>
+
+  <div>
+
+    <h1 id="test"><span>&#54;</span>月</h1>
+
+    <!-- 6 == &#54; or &x36; or U+0036 In the basic latin range: ASCII Digit 6 -->
+
+    <h1 id="reference">&#65302;月</h1>
+
+    <!--
+    ６ == &#65302; or &xFF16; or U+FF16 is the FULLWIDTH DIGIT 6 (≈ <wide> 0036 6)
+    In the Halfwidth and Fullwidth Forms range:
+    http://unicode.org/charts/PDF/UFF00.pdf
+    -->
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-005-ref.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-005-ref.xht
new file mode 100644
index 0000000000..0c8e9ea343
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-005-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+
+  <meta name="DC.date.created" content="2017-01-26T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-01-26T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if both pairs of "２３" glyphs have <strong>identical</strong> layout and orientation.</p>
+
+  <div>
+
+    <h1>&#65298;&#65299;日</h1>
+
+    <h1>&#65298;&#65299;日</h1>
+
+  <!--
+  ２ == &#65298; or &xFF12; or U+FF12 is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)
+  ３ == &#65299; or &xFF13; or U+FF13 is the FULLWIDTH DIGIT 3 (≈ <wide> 0033 3)
+  In the Halfwidth and Fullwidth Forms range:
+  http://unicode.org/charts/PDF/UFF00.pdf
+  -->
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-005.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-005.xht
new file mode 100644
index 0000000000..546cac2035
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-005.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Text Test: text-transform: full-width with 2 digits (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform" title="2.1 Case Transforms: the 'text-transform' property" />
+  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#text-combine-fullwidth" title="9.1.3.1 Full-width Characters" />
+  <link rel="match" href="text-transform-fullwidth-005-ref.xht" />
+
+  <meta content="This test checks basic support of 'text-transform: full-width' in a vertical writing context. Since full-width digit characters are typeset upright, then both digit characters in the text sample should not be rotated toward the right but should be upright. This is furthermore the case since, in this test, there is no 'text-combine-upright' in effect or applying to such pair of digits." name="assert" />
+
+  <meta name="DC.date.created" content="2017-01-26T09:54:03+11:00" scheme="W3CDTF" />
+  <meta name="DC.date.modified" content="2017-02-18T09:54:03+11:00" scheme="W3CDTF" />
+
+  <style type="text/css"><![CDATA[
+  div
+    {
+      writing-mode: vertical-rl;
+    }
+
+  span
+    {
+      text-transform: full-width;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if both pairs of "２３" glyphs have <strong>identical</strong> layout and orientation.</p>
+
+  <div>
+
+    <h1 id="test"><span>&#50;&#51;</span>日</h1>
+
+    <!-- &#50; or &#x32; or U+0032 In the basic latin range: ASCII Digit 2 -->
+
+    <!-- &#51; or &#x33; or U+0033 In the basic latin range: ASCII Digit 3 -->
+
+    <h1 id="reference">&#65298;&#65299;日</h1>
+
+    <!--
+    ２ == &#65298; or &xFF12; or U+FF12 is the FULLWIDTH DIGIT 2 (≈ <wide> 0032 2)
+    ３ == &#65299; or &xFF13; or U+FF13 is the FULLWIDTH DIGIT 3 (≈ <wide> 0033 3)
+    In the Halfwidth and Fullwidth Forms range:
+    http://unicode.org/charts/PDF/UFF00.pdf
+    -->
+
+  </div>
+
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-006.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-006.html
new file mode 100644
index 0000000000..0bd0aa8840
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-006.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: text-transform:fullwidth and collapsed spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property">
+<link rel="match" href="reference/text-transform-fullwidth-006-ref.html">
+<meta name="assert" content="full-width does not transform collapsed U+0020 spaces to U+3000, only the remaining one after collapsing.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div { font: 50px/1 Ahem; }
+#test {
+  color: green;
+}
+span {
+  text-transform: full-width;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there are two green squares and no red.
+<div id=ref>x&#x3000;x</div>
+<div id=test>x<span>   </span>x</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-007.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-007.html
new file mode 100644
index 0000000000..f1089f19ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-007.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: text-transform:fullwidth and preserved spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property">
+<link rel="match" href="reference/text-transform-fullwidth-007-ref.html">
+<meta name="assert" content="full-width does transforms U+0020 spaces to U+3000 within preserved white space.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div { font: 50px/1 Ahem; }
+#test {
+  color: green;
+  white-space: pre-wrap;
+}
+span {
+  text-transform: full-width;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there are two green squares and no red.
+<div id=ref>x&#x3000;&#x3000;&#x3000;x</div>
+<div id=test>x<span>   </span>x</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-008.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-008.html
new file mode 100644
index 0000000000..d6cd9c4c98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-008.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: text-transform:fullwidth and trailing spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/text-transform-fullwidth-008-ref.html">
+<meta name="assert" content="full-width does transforms U+0020 spaces to U+3000 after phase 1, but before phase 2, so that end-of-line transformed spaces get the same treatment as natural ones: hang when white-space is normal.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+  margin: 1em 0;
+}
+.pre {
+  white-space: pre;
+}
+#test, #ref {
+  width: 2em;
+  text-align: right;
+}
+span {
+  text-transform: full-width;
+}
+#test2, #ref2 {
+  width: min-content;
+  margin-left: 1em;
+  background: black;
+}
+</style>
+
+<p>Test passes if all black boxes below have the same width and height and are aligned vertically.
+<div class=pre> x<br> x</div>
+<div id=ref>x&#x3000;x</div>
+<div id=test>x<span> </span>x</div>
+<div id=ref2>x&#x3000;x</div>
+<div id=test2>x<span> </span>x</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-009.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-009.html
new file mode 100644
index 0000000000..afcb89b0cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-fullwidth-009.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: text-transform:fullwidth and trailing spaces, with pre-wrap</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/text-transform-fullwidth-009-ref.html">
+<meta name="assert" content="full-width does transforms U+0020 spaces to U+3000 after phase 1, but before phase 2, so that end-of-line transformed spaces get the same treatment as natural ones: hang at the end of soft-wrapped lines, and conditionally hang before forced breaks when white-space is pre-wrap.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 10px/1 Ahem;
+  margin: 1em 0;
+}
+.pre {
+  white-space: pre;
+}
+#test, #ref,
+#test3, #ref3 {
+  width: 2em;
+  text-align: right;
+  white-space: pre-wrap;
+}
+#test3, #ref3 {
+  margin-left: 1em;
+}
+span {
+  text-transform: full-width;
+}
+#test2, #ref2,
+#test4, #ref4 {
+  width: min-content;
+  margin-left: 1em;
+  white-space: pre-wrap;
+  background: black;
+}
+</style>
+
+<p>Test passes if all black boxes below have the same width and height and are aligned vertically.
+<div class=pre> x<br> x</div>
+<div id=ref>x&#x3000;x</div>
+<div id=test>x<span> </span>x</div>
+<div id=ref2>x&#x3000;x</div>
+<div id=test2>x<span> </span>x</div>
+
+<div id=ref3>x&#x3000;<br>x&#x3000;</div>
+<div id=test3>x<span> </span><br>x<span> </span></div>
+<div id=ref4>x&#x3000;<br>x&#x3000;</div>
+<div id=test4>x<span> </span><br>x<span> </span></div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-lowercase-101.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-lowercase-101.xht
new file mode 100644
index 0000000000..e3b2faf66b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-lowercase-101.xht
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-transform - lowercase - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 3: 3.1. Transforming Text: the ‘text-transform’ property" href="http://www.w3.org/TR/css-text-3/#text-transform" />
+		<link rel="match" href="reference/text-transform-lowercase-101-ref.xht"/>
+		<meta name="assert" content="The UA should put all characters in lowercase when text-transform is set to lowercase." />
+		<style type="text/css">
+			<![CDATA[
+				.test span {
+					text-transform: lowercase;
+				}
+				/* the CSS below is not part of the test */
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first sentence matches the second one.
+		</p>
+		<div class="test">
+			<span>ALL CHARACTERS SHOULD BE PUT IN LOWERCASE.</span>
+		</div>
+		<div>
+			<span>all characters should be put in lowercase.</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-lowercase-102-ref.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-lowercase-102-ref.xht
new file mode 100644
index 0000000000..f6da9069cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-lowercase-102-ref.xht
@@ -0,0 +1,8 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <link rel="author" title="Anthony Ramine" href="mailto:n.oxyde@gmail.com"/>
+  </head><body>
+    <span lang="en" style="font-size:32px">i&#775;i</span>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-lowercase-102.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-lowercase-102.xht
new file mode 100644
index 0000000000..729c1246ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-lowercase-102.xht
@@ -0,0 +1,10 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+  <head>
+    <title>CSS Test: text-transform I with dot above</title>
+    <link rel="author" title="Anthony Ramine" href="mailto:n.oxyde@gmail.com"/>
+    <link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-text-transform-lowercase"/>
+    <link rel="match" href="text-transform-lowercase-102-ref.xht"/>
+    <meta name="assert" content="Tests that U+0130 to lowercase includes U+0307"/>
+  </head><body>
+    <span lang="en" style="font-size:32px;text-transform:lowercase">&#304;I</span>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-multiple-001.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-multiple-001.html
new file mode 100644
index 0000000000..946aa9c93d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-multiple-001.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="ja">
+<meta charset=utf-8>
+<title>text-transform with multiple values</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel=match href="reference/text-transform-multiple-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-transform-property">
+<meta name="assert" content="case transforms can be combined with full-width and/or full-size-kana transforms">
+<body style="font-family:serif">
+<h4>Each pair of lines should look identical:</h4>
+<hr>
+<div style="text-transform:uppercase full-width">HELLO Transformed world</div>
+<div>ＨＥＬＬＯ　ＴＲＡＮＳＦＯＲＭＥＤ　ＷＯＲＬＤ</div>
+<hr>
+<div style="text-transform:lowercase full-width">HELLO Transformed world</div>
+<div>ｈｅｌｌｏ　ｔｒａｎｓｆｏｒｍｅｄ　ｗｏｒｌｄ</div>
+<hr>
+<div style="text-transform:capitalize full-width">HELLO Transformed world</div>
+<div>ＨＥＬＬＯ　Ｔｒａｎｓｆｏｒｍｅｄ　Ｗｏｒｌｄ</div>
+<hr>
+<div style="text-transform:uppercase full-size-kana">Katakana: ァィゥェォヵㇰヶㇱㇲッㇳㇴ</div>
+<div>KATAKANA: アイウエオカクケシスツトヌ</div>
+<hr>
+<div style="text-transform:full-width full-size-kana lowercase">Hiragana: ぁぃぅぇぉゕゖっゃゅょゎ</div>
+<div>ｈｉｒａｇａｎａ：　あいうえおかけつやゆよわ</div>
+<hr>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-none-001.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-none-001.xht
new file mode 100644
index 0000000000..81214e9a54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-none-001.xht
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-transform - none - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 3: 3.1. Transforming Text: the ‘text-transform’ property" href="http://www.w3.org/TR/css-text-3/#text-transform" />
+		<link rel="match" href="reference/text-transform-none-001-ref.xht"/>
+		<meta name="assert" content="The UA should do nothing when text-transform is set to none." />
+		<style type="text/css">
+			<![CDATA[
+				.test span {
+					text-transform: none;
+				}
+				/* the CSS below is not part of the test */
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first sentence matches the second one.
+		</p>
+		<div class="test">
+			<span>All words should have no effects.</span>
+		</div>
+		<div>
+			<span>All words should have no effects.</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-shaping-001.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-shaping-001.html
new file mode 100644
index 0000000000..fa0a04cd22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-shaping-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: text-transform:capitalize and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#boundary-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property">
+<link rel="match" href="reference/text-transform-shaping-001-ref.html">
+<meta name="assert" content="Text shaping must not be broken across inline box boundaries when there is no change in formatting. Arabic is not a bicameral script, so text-transform:capitalize has no effect, and should not affect shaping.">
+<style>
+  div { font-size: 4em; }
+  div:last-of-type::first-letter { text-transform: capitalize; }
+  body {
+    /* Optional bit, just to avoid the arabic strings being too far off to the right,
+     which makes them harder to notice if you're going through a lot of tests
+     and not paying all that much attention. */
+    max-width: 600px;
+    max-width: max-content;
+  }
+</style>
+
+<p>Test passes if there are two identical strings below. Pay attention to the right-most character.
+<div dir=rtl lang=ar>عائلة</div>
+<div dir=rtl lang=ar>عائلة</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-shaping-002.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-shaping-002.html
new file mode 100644
index 0000000000..6245135e04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-shaping-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: text-transform:uppercase and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#boundary-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property">
+<link rel="match" href="reference/text-transform-shaping-001-ref.html">
+<meta name="assert" content="Text shaping must not be broken across inline box boundaries when there is no change in formatting. Arabic is not a bicameral script, so text-transform:uppercase has no effect, and should not affect shaping.">
+<style>
+  div { font-size: 4em; }
+  div:last-of-type::first-letter { text-transform: uppercase; }
+  body {
+    /* Optional bit, just to avoid the arabic strings being too far off to the right,
+     which makes them harder to notice if you're going through a lot of tests
+     and not paying all that much attention. */
+    max-width: 600px;
+    max-width: max-content;
+  }
+</style>
+
+<p>Test passes if there are two identical strings below. Pay attention to the right-most character.
+<div dir=rtl lang=ar>عائلة</div>
+<div dir=rtl lang=ar>عائلة</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-shaping-003.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-shaping-003.html
new file mode 100644
index 0000000000..54650a9f19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-shaping-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: text-transform:lowercase and text-shaping</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#boundary-shaping">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property">
+<link rel="match" href="reference/text-transform-shaping-001-ref.html">
+<meta name="assert" content="Text shaping must not be broken across inline box boundaries when there is no change in formatting. Arabic is not a bicameral script, so text-transform:lowercase has no effect, and should not affect shaping.">
+<style>
+  div { font-size: 4em; }
+  div:last-of-type::first-letter { text-transform: lowercase; }
+  body {
+    /* Optional bit, just to avoid the arabic strings being too far off to the right,
+     which makes them harder to notice if you're going through a lot of tests
+     and not paying all that much attention. */
+    max-width: 600px;
+    max-width: max-content;
+  }
+</style>
+
+<p>Test passes if there are two identical strings below. Pay attention to the right-most character.
+<div dir=rtl lang=ar>عائلة</div>
+<div dir=rtl lang=ar>عائلة</div>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-001.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-001.html
new file mode 100644
index 0000000000..6cc2cdf345
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Dutch IJ</title>
+<meta name="assert" content="[Exploratory] the brower tailors text-transform: capitalize to put both I and J in titlecase at the start of a word when the language is Dutch.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-tailoring-001-ref.html">
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="nl">ijsland</div>
+<div class="ref">IJsland</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-002.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-002.html
new file mode 100644
index 0000000000..090ed9349c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-002.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: uppercase, Greek tonos</title>
+<meta name="assert" content="[Exploratory] the brower tailors text-transform: uppercase such that Greek words that are all uppercase lose tonos.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-tailoring-002-ref.html">
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="el">καλημέρα αύριο</div>
+<div class="ref">ΚΑΛΗΜΕΡΑ ΑΥΡΙΟ</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-002a.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-002a.html
new file mode 100644
index 0000000000..5cdbbfb832
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-002a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: uppercase, Greek dialytika</title>
+<meta name="assert" content="[Exploratory] the brower tailors text-transform: uppercase such that Greek words that are all uppercase lose tonos, but not dialytika.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-tailoring-002a-ref.html">
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="el">θεϊκό</div>
+<div class="ref">ΘΕΪΚΟ</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-003.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-003.html
new file mode 100644
index 0000000000..37409e0a21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-003.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: uppercase, more Greek accents</title>
+<meta name="assert" content="[Exploratory] the brower tailors text-transform: uppercase such that Greek words that are all uppercase convert tonos plus dialytika to just dialytika, and convert diphthongs with tonos on the first character to a dialytika on the second character.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-tailoring-003-ref.html">
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="el">ευφυΐα Νεράιδα</div>
+<div class="ref">ΕΥΦΥΪΑ ΝΕΡΑΪΔΑ</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-004.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-004.html
new file mode 100644
index 0000000000..2d66c34cbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: capitalize, Greek initial stress</title>
+<meta name="assert" content="[Exploratory] the brower tailors text-transform: capitalize such that a stressed vowel that is the first syllable of a Greek sentence keeps its tonos diacritic.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-tailoring-004-ref.html">
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+/* the CSS above is not part of the test */
+.test { text-transform: capitalize	; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="el">όμηρος</div>
+<div class="ref">Όμηρος</div>
+<!-- Notes:
+The result of this test should be ignored if text-transform-tailoring-002 fails.
+-->
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-005.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-005.html
new file mode 100644
index 0000000000..5dea8f9139
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-tailoring-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: uppercase, Greek disjunctive eta</title>
+<meta name="assert" content="[Exploratory] the brower tailors text-transform: uppercase such that a disjunctive eta in a Greek sentence keeps its tonos diacritic.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-tailoring-005-ref.html">
+<style type='text/css'>
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 400px;  padding: 5px; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase	; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test" lang="el">ήσουν ή εγώ ή εσύ</div>
+<div class="ref">ΗΣΟΥΝ Ή ΕΓΩ Ή ΕΣΥ</div>
+<!-- Notes:
+The result of this test should be ignored if text-transform-tailoring-002 fails.
+-->
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-uppercase-101.xht b/testing/web-platform/tests/css/css-text/text-transform/text-transform-uppercase-101.xht
new file mode 100644
index 0000000000..ffe3715a5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-uppercase-101.xht
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: text-transform - uppercase - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 3: 3.1. Transforming Text: the ‘text-transform’ property" href="http://www.w3.org/TR/css-text-3/#text-transform" />
+		<link rel="match" href="reference/text-transform-uppercase-101-ref.xht"/>
+		<meta name="assert" content="The UA should put all characters in uppercase when text-transform is set to uppercase." />
+		<style type="text/css">
+			<![CDATA[
+				.test span {
+					text-transform: uppercase;
+				}
+				/* the CSS below is not part of the test */
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first sentence matches the second one.
+		</p>
+		<div class="test">
+			<span>All characters should be put in uppercase.</span>
+		</div>
+		<div>
+			<span>ALL CHARACTERS SHOULD BE PUT IN UPPERCASE.</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-uppercase-dynamic.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-uppercase-dynamic.html
new file mode 100644
index 0000000000..b8683ad512
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-uppercase-dynamic.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#text-transform">
+<link rel="match" href="reference/text-transform-uppercase-dynamic-ref.html">
+<style>
+.test { text-transform: uppercase; }
+</style>
+<script>
+requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    document.getElementById('sp').setAttribute('lang', 'my');
+    document.documentElement.classList.remove('reftest-wait');
+  });
+});
+</script>
+<div class="test" lang="lt">
+  <span id="sp">i̇̃ Ĩ</span>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-001.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-001.html
new file mode 100644
index 0000000000..0174f0c811
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Basic and Latin-1 uppercase</title>
+<meta name="assert" content="For the Latin Basic and Latin-1 blocks, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-001-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>a A</span> <span>b B</span> <span>c C</span> <span>d D</span> <span>e E</span> <span>f F</span> <span>g G</span> <span>h H</span> <span>i I</span> <span>j J</span> <span>k K</span> <span>l L</span> <span>m M</span> <span>n N</span> <span>o O</span> <span>p P</span> <span>q Q</span> <span>r R</span> <span>s S</span> <span>t T</span> <span>u U</span> <span>v V</span> <span>w W</span> <span>x X</span> <span>y Y</span> <span>z Z</span> <span title="U+00B5">&#x00B5; &#x039C;</span> <span title="U+00E0">&#x00E0; &#x00C0;</span> <span title="U+00E1">&#x00E1; &#x00C1;</span> <span title="U+00E2">&#x00E2; &#x00C2;</span> <span title="U+00E3">&#x00E3; &#x00C3;</span> <span title="U+00E4">&#x00E4; &#x00C4;</span> <span title="U+00E5">&#x00E5; &#x00C5;</span> <span title="U+00E6">&#x00E6; &#x00C6;</span> <span title="U+00E7">&#x00E7; &#x00C7;</span> <span title="U+00E8">&#x00E8; &#x00C8;</span> <span title="U+00E9">&#x00E9; &#x00C9;</span> <span title="U+00EA">&#x00EA; &#x00CA;</span> <span title="U+00EB">&#x00EB; &#x00CB;</span> <span title="U+00EC">&#x00EC; &#x00CC;</span> <span title="U+00ED">&#x00ED; &#x00CD;</span> <span title="U+00EE">&#x00EE; &#x00CE;</span> <span title="U+00EF">&#x00EF; &#x00CF;</span> <span title="U+00F0">&#x00F0; &#x00D0;</span> <span title="U+00F1">&#x00F1; &#x00D1;</span> <span title="U+00F2">&#x00F2; &#x00D2;</span> <span title="U+00F3">&#x00F3; &#x00D3;</span> <span title="U+00F4">&#x00F4; &#x00D4;</span> <span title="U+00F5">&#x00F5; &#x00D5;</span> <span title="U+00F6">&#x00F6; &#x00D6;</span> <span title="U+00F8">&#x00F8; &#x00D8;</span> <span title="U+00F9">&#x00F9; &#x00D9;</span> <span title="U+00FA">&#x00FA; &#x00DA;</span> <span title="U+00FB">&#x00FB; &#x00DB;</span> <span title="U+00FC">&#x00FC; &#x00DC;</span> <span title="U+00FD">&#x00FD; &#x00DD;</span> <span title="U+00FE">&#x00FE; &#x00DE;</span> <span title="U+00FF">&#x00FF; &#x0178;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-002.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-002.html
new file mode 100644
index 0000000000..77ec3d4f9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Basic and Latin-1 lowercase</title>
+<meta name="assert" content="For the Latin Basic and Latin-1 blocks, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-002-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>A a</span> <span>B b</span> <span>C c</span> <span>D d</span> <span>E e</span> <span>F f</span> <span>G g</span> <span>H h</span> <span>I i</span> <span>J j</span> <span>K k</span> <span>L l</span> <span>M m</span> <span>N n</span> <span>O o</span> <span>P p</span> <span>Q q</span> <span>R r</span> <span>S s</span> <span>T t</span> <span>U u</span> <span>V v</span> <span>W w</span> <span>X x</span> <span>Y y</span> <span>Z z</span> <span title="U+00C0">&#x00C0; &#x00E0;</span> <span title="U+00C1">&#x00C1; &#x00E1;</span> <span title="U+00C2">&#x00C2; &#x00E2;</span> <span title="U+00C3">&#x00C3; &#x00E3;</span> <span title="U+00C4">&#x00C4; &#x00E4;</span> <span title="U+00C5">&#x00C5; &#x00E5;</span> <span title="U+00C6">&#x00C6; &#x00E6;</span> <span title="U+00C7">&#x00C7; &#x00E7;</span> <span title="U+00C8">&#x00C8; &#x00E8;</span> <span title="U+00C9">&#x00C9; &#x00E9;</span> <span title="U+00CA">&#x00CA; &#x00EA;</span> <span title="U+00CB">&#x00CB; &#x00EB;</span> <span title="U+00CC">&#x00CC; &#x00EC;</span> <span title="U+00CD">&#x00CD; &#x00ED;</span> <span title="U+00CE">&#x00CE; &#x00EE;</span> <span title="U+00CF">&#x00CF; &#x00EF;</span> <span title="U+00D0">&#x00D0; &#x00F0;</span> <span title="U+00D1">&#x00D1; &#x00F1;</span> <span title="U+00D2">&#x00D2; &#x00F2;</span> <span title="U+00D3">&#x00D3; &#x00F3;</span> <span title="U+00D4">&#x00D4; &#x00F4;</span> <span title="U+00D5">&#x00D5; &#x00F5;</span> <span title="U+00D6">&#x00D6; &#x00F6;</span> <span title="U+00D8">&#x00D8; &#x00F8;</span> <span title="U+00D9">&#x00D9; &#x00F9;</span> <span title="U+00DA">&#x00DA; &#x00FA;</span> <span title="U+00DB">&#x00DB; &#x00FB;</span> <span title="U+00DC">&#x00DC; &#x00FC;</span> <span title="U+00DD">&#x00DD; &#x00FD;</span> <span title="U+00DE">&#x00DE; &#x00FE;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-003.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-003.html
new file mode 100644
index 0000000000..a0381452bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-003.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended Additional, uppercase</title>
+<meta name="assert" content="For the Latin Extended Additional Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-003-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1E01">&#x1E01; &#x1E00;</span> <span title="U+1E03">&#x1E03; &#x1E02;</span> <span title="U+1E05">&#x1E05; &#x1E04;</span> <span title="U+1E07">&#x1E07; &#x1E06;</span> <span title="U+1E09">&#x1E09; &#x1E08;</span> <span title="U+1E0B">&#x1E0B; &#x1E0A;</span> <span title="U+1E0D">&#x1E0D; &#x1E0C;</span> <span title="U+1E0F">&#x1E0F; &#x1E0E;</span> <span title="U+1E11">&#x1E11; &#x1E10;</span> <span title="U+1E13">&#x1E13; &#x1E12;</span> <span title="U+1E15">&#x1E15; &#x1E14;</span> <span title="U+1E17">&#x1E17; &#x1E16;</span> <span title="U+1E19">&#x1E19; &#x1E18;</span> <span title="U+1E1B">&#x1E1B; &#x1E1A;</span> <span title="U+1E1D">&#x1E1D; &#x1E1C;</span> <span title="U+1E1F">&#x1E1F; &#x1E1E;</span> <span title="U+1E21">&#x1E21; &#x1E20;</span> <span title="U+1E23">&#x1E23; &#x1E22;</span> <span title="U+1E25">&#x1E25; &#x1E24;</span> <span title="U+1E27">&#x1E27; &#x1E26;</span> <span title="U+1E29">&#x1E29; &#x1E28;</span> <span title="U+1E2B">&#x1E2B; &#x1E2A;</span> <span title="U+1E2D">&#x1E2D; &#x1E2C;</span> <span title="U+1E2F">&#x1E2F; &#x1E2E;</span> <span title="U+1E31">&#x1E31; &#x1E30;</span> <span title="U+1E33">&#x1E33; &#x1E32;</span> <span title="U+1E35">&#x1E35; &#x1E34;</span> <span title="U+1E37">&#x1E37; &#x1E36;</span> <span title="U+1E39">&#x1E39; &#x1E38;</span> <span title="U+1E3B">&#x1E3B; &#x1E3A;</span> <span title="U+1E3D">&#x1E3D; &#x1E3C;</span> <span title="U+1E3F">&#x1E3F; &#x1E3E;</span> <span title="U+1E41">&#x1E41; &#x1E40;</span> <span title="U+1E43">&#x1E43; &#x1E42;</span> <span title="U+1E45">&#x1E45; &#x1E44;</span> <span title="U+1E47">&#x1E47; &#x1E46;</span> <span title="U+1E49">&#x1E49; &#x1E48;</span> <span title="U+1E4B">&#x1E4B; &#x1E4A;</span> <span title="U+1E4D">&#x1E4D; &#x1E4C;</span> <span title="U+1E4F">&#x1E4F; &#x1E4E;</span> <span title="U+1E51">&#x1E51; &#x1E50;</span> <span title="U+1E53">&#x1E53; &#x1E52;</span> <span title="U+1E55">&#x1E55; &#x1E54;</span> <span title="U+1E57">&#x1E57; &#x1E56;</span> <span title="U+1E59">&#x1E59; &#x1E58;</span> <span title="U+1E5B">&#x1E5B; &#x1E5A;</span> <span title="U+1E5D">&#x1E5D; &#x1E5C;</span> <span title="U+1E5F">&#x1E5F; &#x1E5E;</span> <span title="U+1E61">&#x1E61; &#x1E60;</span> <span title="U+1E63">&#x1E63; &#x1E62;</span> <span title="U+1E65">&#x1E65; &#x1E64;</span> <span title="U+1E67">&#x1E67; &#x1E66;</span> <span title="U+1E69">&#x1E69; &#x1E68;</span> <span title="U+1E6B">&#x1E6B; &#x1E6A;</span> <span title="U+1E6D">&#x1E6D; &#x1E6C;</span> <span title="U+1E6F">&#x1E6F; &#x1E6E;</span> <span title="U+1E71">&#x1E71; &#x1E70;</span> <span title="U+1E73">&#x1E73; &#x1E72;</span> <span title="U+1E75">&#x1E75; &#x1E74;</span> <span title="U+1E77">&#x1E77; &#x1E76;</span> <span title="U+1E79">&#x1E79; &#x1E78;</span> <span title="U+1E7B">&#x1E7B; &#x1E7A;</span> <span title="U+1E7D">&#x1E7D; &#x1E7C;</span> <span title="U+1E7F">&#x1E7F; &#x1E7E;</span> <span title="U+1E81">&#x1E81; &#x1E80;</span> <span title="U+1E83">&#x1E83; &#x1E82;</span> <span title="U+1E85">&#x1E85; &#x1E84;</span> <span title="U+1E87">&#x1E87; &#x1E86;</span> <span title="U+1E89">&#x1E89; &#x1E88;</span> <span title="U+1E8B">&#x1E8B; &#x1E8A;</span> <span title="U+1E8D">&#x1E8D; &#x1E8C;</span> <span title="U+1E8F">&#x1E8F; &#x1E8E;</span> <span title="U+1E91">&#x1E91; &#x1E90;</span> <span title="U+1E93">&#x1E93; &#x1E92;</span> <span title="U+1E95">&#x1E95; &#x1E94;</span> <span title="U+1E9B">&#x1E9B; &#x1E60;</span> <span title="U+1EA1">&#x1EA1; &#x1EA0;</span> <span title="U+1EA3">&#x1EA3; &#x1EA2;</span> <span title="U+1EA5">&#x1EA5; &#x1EA4;</span> <span title="U+1EA7">&#x1EA7; &#x1EA6;</span> <span title="U+1EA9">&#x1EA9; &#x1EA8;</span> <span title="U+1EAB">&#x1EAB; &#x1EAA;</span> <span title="U+1EAD">&#x1EAD; &#x1EAC;</span> <span title="U+1EAF">&#x1EAF; &#x1EAE;</span> <span title="U+1EB1">&#x1EB1; &#x1EB0;</span> <span title="U+1EB3">&#x1EB3; &#x1EB2;</span> <span title="U+1EB5">&#x1EB5; &#x1EB4;</span> <span title="U+1EB7">&#x1EB7; &#x1EB6;</span> <span title="U+1EB9">&#x1EB9; &#x1EB8;</span> <span title="U+1EBB">&#x1EBB; &#x1EBA;</span> <span title="U+1EBD">&#x1EBD; &#x1EBC;</span> <span title="U+1EBF">&#x1EBF; &#x1EBE;</span> <span title="U+1EC1">&#x1EC1; &#x1EC0;</span> <span title="U+1EC3">&#x1EC3; &#x1EC2;</span> <span title="U+1EC5">&#x1EC5; &#x1EC4;</span> <span title="U+1EC7">&#x1EC7; &#x1EC6;</span> <span title="U+1EC9">&#x1EC9; &#x1EC8;</span> <span title="U+1ECB">&#x1ECB; &#x1ECA;</span> <span title="U+1ECD">&#x1ECD; &#x1ECC;</span> <span title="U+1ECF">&#x1ECF; &#x1ECE;</span> <span title="U+1ED1">&#x1ED1; &#x1ED0;</span> <span title="U+1ED3">&#x1ED3; &#x1ED2;</span> <span title="U+1ED5">&#x1ED5; &#x1ED4;</span> <span title="U+1ED7">&#x1ED7; &#x1ED6;</span> <span title="U+1ED9">&#x1ED9; &#x1ED8;</span> <span title="U+1EDB">&#x1EDB; &#x1EDA;</span> <span title="U+1EDD">&#x1EDD; &#x1EDC;</span> <span title="U+1EDF">&#x1EDF; &#x1EDE;</span> <span title="U+1EE1">&#x1EE1; &#x1EE0;</span> <span title="U+1EE3">&#x1EE3; &#x1EE2;</span> <span title="U+1EE5">&#x1EE5; &#x1EE4;</span> <span title="U+1EE7">&#x1EE7; &#x1EE6;</span> <span title="U+1EE9">&#x1EE9; &#x1EE8;</span> <span title="U+1EEB">&#x1EEB; &#x1EEA;</span> <span title="U+1EED">&#x1EED; &#x1EEC;</span> <span title="U+1EEF">&#x1EEF; &#x1EEE;</span> <span title="U+1EF1">&#x1EF1; &#x1EF0;</span> <span title="U+1EF3">&#x1EF3; &#x1EF2;</span> <span title="U+1EF5">&#x1EF5; &#x1EF4;</span> <span title="U+1EF7">&#x1EF7; &#x1EF6;</span> <span title="U+1EF9">&#x1EF9; &#x1EF8;</span> <span title="U+1EFB">&#x1EFB; &#x1EFA;</span> <span title="U+1EFD">&#x1EFD; &#x1EFC;</span> <span title="U+1EFF">&#x1EFF; &#x1EFE;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x1E96; &#x1E97; &#x1E98; &#x1E99; &#x1E9A; &#x1E9C; &#x1E9D; &#x1E9F;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-004.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-004.html
new file mode 100644
index 0000000000..e22775e1b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-004.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended Additional, lowercase</title>
+<meta name="assert" content="For the Latin Extended Additional Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-004-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1E00">&#x1E00; &#x1E01;</span> <span title="U+1E02">&#x1E02; &#x1E03;</span> <span title="U+1E04">&#x1E04; &#x1E05;</span> <span title="U+1E06">&#x1E06; &#x1E07;</span> <span title="U+1E08">&#x1E08; &#x1E09;</span> <span title="U+1E0A">&#x1E0A; &#x1E0B;</span> <span title="U+1E0C">&#x1E0C; &#x1E0D;</span> <span title="U+1E0E">&#x1E0E; &#x1E0F;</span> <span title="U+1E10">&#x1E10; &#x1E11;</span> <span title="U+1E12">&#x1E12; &#x1E13;</span> <span title="U+1E14">&#x1E14; &#x1E15;</span> <span title="U+1E16">&#x1E16; &#x1E17;</span> <span title="U+1E18">&#x1E18; &#x1E19;</span> <span title="U+1E1A">&#x1E1A; &#x1E1B;</span> <span title="U+1E1C">&#x1E1C; &#x1E1D;</span> <span title="U+1E1E">&#x1E1E; &#x1E1F;</span> <span title="U+1E20">&#x1E20; &#x1E21;</span> <span title="U+1E22">&#x1E22; &#x1E23;</span> <span title="U+1E24">&#x1E24; &#x1E25;</span> <span title="U+1E26">&#x1E26; &#x1E27;</span> <span title="U+1E28">&#x1E28; &#x1E29;</span> <span title="U+1E2A">&#x1E2A; &#x1E2B;</span> <span title="U+1E2C">&#x1E2C; &#x1E2D;</span> <span title="U+1E2E">&#x1E2E; &#x1E2F;</span> <span title="U+1E30">&#x1E30; &#x1E31;</span> <span title="U+1E32">&#x1E32; &#x1E33;</span> <span title="U+1E34">&#x1E34; &#x1E35;</span> <span title="U+1E36">&#x1E36; &#x1E37;</span> <span title="U+1E38">&#x1E38; &#x1E39;</span> <span title="U+1E3A">&#x1E3A; &#x1E3B;</span> <span title="U+1E3C">&#x1E3C; &#x1E3D;</span> <span title="U+1E3E">&#x1E3E; &#x1E3F;</span> <span title="U+1E40">&#x1E40; &#x1E41;</span> <span title="U+1E42">&#x1E42; &#x1E43;</span> <span title="U+1E44">&#x1E44; &#x1E45;</span> <span title="U+1E46">&#x1E46; &#x1E47;</span> <span title="U+1E48">&#x1E48; &#x1E49;</span> <span title="U+1E4A">&#x1E4A; &#x1E4B;</span> <span title="U+1E4C">&#x1E4C; &#x1E4D;</span> <span title="U+1E4E">&#x1E4E; &#x1E4F;</span> <span title="U+1E50">&#x1E50; &#x1E51;</span> <span title="U+1E52">&#x1E52; &#x1E53;</span> <span title="U+1E54">&#x1E54; &#x1E55;</span> <span title="U+1E56">&#x1E56; &#x1E57;</span> <span title="U+1E58">&#x1E58; &#x1E59;</span> <span title="U+1E5A">&#x1E5A; &#x1E5B;</span> <span title="U+1E5C">&#x1E5C; &#x1E5D;</span> <span title="U+1E5E">&#x1E5E; &#x1E5F;</span> <span title="U+1E60">&#x1E60; &#x1E61;</span> <span title="U+1E62">&#x1E62; &#x1E63;</span> <span title="U+1E64">&#x1E64; &#x1E65;</span> <span title="U+1E66">&#x1E66; &#x1E67;</span> <span title="U+1E68">&#x1E68; &#x1E69;</span> <span title="U+1E6A">&#x1E6A; &#x1E6B;</span> <span title="U+1E6C">&#x1E6C; &#x1E6D;</span> <span title="U+1E6E">&#x1E6E; &#x1E6F;</span> <span title="U+1E70">&#x1E70; &#x1E71;</span> <span title="U+1E72">&#x1E72; &#x1E73;</span> <span title="U+1E74">&#x1E74; &#x1E75;</span> <span title="U+1E76">&#x1E76; &#x1E77;</span> <span title="U+1E78">&#x1E78; &#x1E79;</span> <span title="U+1E7A">&#x1E7A; &#x1E7B;</span> <span title="U+1E7C">&#x1E7C; &#x1E7D;</span> <span title="U+1E7E">&#x1E7E; &#x1E7F;</span> <span title="U+1E80">&#x1E80; &#x1E81;</span> <span title="U+1E82">&#x1E82; &#x1E83;</span> <span title="U+1E84">&#x1E84; &#x1E85;</span> <span title="U+1E86">&#x1E86; &#x1E87;</span> <span title="U+1E88">&#x1E88; &#x1E89;</span> <span title="U+1E8A">&#x1E8A; &#x1E8B;</span> <span title="U+1E8C">&#x1E8C; &#x1E8D;</span> <span title="U+1E8E">&#x1E8E; &#x1E8F;</span> <span title="U+1E90">&#x1E90; &#x1E91;</span> <span title="U+1E92">&#x1E92; &#x1E93;</span> <span title="U+1E94">&#x1E94; &#x1E95;</span> <span title="U+1E9E">&#x1E9E; &#x00DF;</span> <span title="U+1EA0">&#x1EA0; &#x1EA1;</span> <span title="U+1EA2">&#x1EA2; &#x1EA3;</span> <span title="U+1EA4">&#x1EA4; &#x1EA5;</span> <span title="U+1EA6">&#x1EA6; &#x1EA7;</span> <span title="U+1EA8">&#x1EA8; &#x1EA9;</span> <span title="U+1EAA">&#x1EAA; &#x1EAB;</span> <span title="U+1EAC">&#x1EAC; &#x1EAD;</span> <span title="U+1EAE">&#x1EAE; &#x1EAF;</span> <span title="U+1EB0">&#x1EB0; &#x1EB1;</span> <span title="U+1EB2">&#x1EB2; &#x1EB3;</span> <span title="U+1EB4">&#x1EB4; &#x1EB5;</span> <span title="U+1EB6">&#x1EB6; &#x1EB7;</span> <span title="U+1EB8">&#x1EB8; &#x1EB9;</span> <span title="U+1EBA">&#x1EBA; &#x1EBB;</span> <span title="U+1EBC">&#x1EBC; &#x1EBD;</span> <span title="U+1EBE">&#x1EBE; &#x1EBF;</span> <span title="U+1EC0">&#x1EC0; &#x1EC1;</span> <span title="U+1EC2">&#x1EC2; &#x1EC3;</span> <span title="U+1EC4">&#x1EC4; &#x1EC5;</span> <span title="U+1EC6">&#x1EC6; &#x1EC7;</span> <span title="U+1EC8">&#x1EC8; &#x1EC9;</span> <span title="U+1ECA">&#x1ECA; &#x1ECB;</span> <span title="U+1ECC">&#x1ECC; &#x1ECD;</span> <span title="U+1ECE">&#x1ECE; &#x1ECF;</span> <span title="U+1ED0">&#x1ED0; &#x1ED1;</span> <span title="U+1ED2">&#x1ED2; &#x1ED3;</span> <span title="U+1ED4">&#x1ED4; &#x1ED5;</span> <span title="U+1ED6">&#x1ED6; &#x1ED7;</span> <span title="U+1ED8">&#x1ED8; &#x1ED9;</span> <span title="U+1EDA">&#x1EDA; &#x1EDB;</span> <span title="U+1EDC">&#x1EDC; &#x1EDD;</span> <span title="U+1EDE">&#x1EDE; &#x1EDF;</span> <span title="U+1EE0">&#x1EE0; &#x1EE1;</span> <span title="U+1EE2">&#x1EE2; &#x1EE3;</span> <span title="U+1EE4">&#x1EE4; &#x1EE5;</span> <span title="U+1EE6">&#x1EE6; &#x1EE7;</span> <span title="U+1EE8">&#x1EE8; &#x1EE9;</span> <span title="U+1EEA">&#x1EEA; &#x1EEB;</span> <span title="U+1EEC">&#x1EEC; &#x1EED;</span> <span title="U+1EEE">&#x1EEE; &#x1EEF;</span> <span title="U+1EF0">&#x1EF0; &#x1EF1;</span> <span title="U+1EF2">&#x1EF2; &#x1EF3;</span> <span title="U+1EF4">&#x1EF4; &#x1EF5;</span> <span title="U+1EF6">&#x1EF6; &#x1EF7;</span> <span title="U+1EF8">&#x1EF8; &#x1EF9;</span> <span title="U+1EFA">&#x1EFA; &#x1EFB;</span> <span title="U+1EFC">&#x1EFC; &#x1EFD;</span> <span title="U+1EFE">&#x1EFE; &#x1EFF;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x1E96; &#x1E97; &#x1E98; &#x1E99; &#x1E9A; &#x1E9C; &#x1E9D; &#x1E9F;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-005.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-005.html
new file mode 100644
index 0000000000..cc6a04fa7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-005.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-A, uppercase</title>
+<meta name="assert" content="For the Latin Extended-A Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-005-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0101">&#x0101; &#x0100;</span> <span title="U+0103">&#x0103; &#x0102;</span> <span title="U+0105">&#x0105; &#x0104;</span> <span title="U+0107">&#x0107; &#x0106;</span> <span title="U+0109">&#x0109; &#x0108;</span> <span title="U+010B">&#x010B; &#x010A;</span> <span title="U+010D">&#x010D; &#x010C;</span> <span title="U+010F">&#x010F; &#x010E;</span> <span title="U+0111">&#x0111; &#x0110;</span> <span title="U+0113">&#x0113; &#x0112;</span> <span title="U+0115">&#x0115; &#x0114;</span> <span title="U+0117">&#x0117; &#x0116;</span> <span title="U+0119">&#x0119; &#x0118;</span> <span title="U+011B">&#x011B; &#x011A;</span> <span title="U+011D">&#x011D; &#x011C;</span> <span title="U+011F">&#x011F; &#x011E;</span> <span title="U+0121">&#x0121; &#x0120;</span> <span title="U+0123">&#x0123; &#x0122;</span> <span title="U+0125">&#x0125; &#x0124;</span> <span title="U+0127">&#x0127; &#x0126;</span> <span title="U+0129">&#x0129; &#x0128;</span> <span title="U+012B">&#x012B; &#x012A;</span> <span title="U+012D">&#x012D; &#x012C;</span> <span title="U+012F">&#x012F; &#x012E;</span> <span title="U+0131">&#x0131; &#x0049;</span> <span title="U+0133">&#x0133; &#x0132;</span> <span title="U+0135">&#x0135; &#x0134;</span> <span title="U+0137">&#x0137; &#x0136;</span> <span title="U+013A">&#x013A; &#x0139;</span> <span title="U+013C">&#x013C; &#x013B;</span> <span title="U+013E">&#x013E; &#x013D;</span> <span title="U+0140">&#x0140; &#x013F;</span> <span title="U+0142">&#x0142; &#x0141;</span> <span title="U+0144">&#x0144; &#x0143;</span> <span title="U+0146">&#x0146; &#x0145;</span> <span title="U+0148">&#x0148; &#x0147;</span> <span title="U+014B">&#x014B; &#x014A;</span> <span title="U+014D">&#x014D; &#x014C;</span> <span title="U+014F">&#x014F; &#x014E;</span> <span title="U+0151">&#x0151; &#x0150;</span> <span title="U+0153">&#x0153; &#x0152;</span> <span title="U+0155">&#x0155; &#x0154;</span> <span title="U+0157">&#x0157; &#x0156;</span> <span title="U+0159">&#x0159; &#x0158;</span> <span title="U+015B">&#x015B; &#x015A;</span> <span title="U+015D">&#x015D; &#x015C;</span> <span title="U+015F">&#x015F; &#x015E;</span> <span title="U+0161">&#x0161; &#x0160;</span> <span title="U+0163">&#x0163; &#x0162;</span> <span title="U+0165">&#x0165; &#x0164;</span> <span title="U+0167">&#x0167; &#x0166;</span> <span title="U+0169">&#x0169; &#x0168;</span> <span title="U+016B">&#x016B; &#x016A;</span> <span title="U+016D">&#x016D; &#x016C;</span> <span title="U+016F">&#x016F; &#x016E;</span> <span title="U+0171">&#x0171; &#x0170;</span> <span title="U+0173">&#x0173; &#x0172;</span> <span title="U+0175">&#x0175; &#x0174;</span> <span title="U+0177">&#x0177; &#x0176;</span> <span title="U+017A">&#x017A; &#x0179;</span> <span title="U+017C">&#x017C; &#x017B;</span> <span title="U+017E">&#x017E; &#x017D;</span> <span title="U+017F">&#x017F; &#x0053;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0130;, &#x0138;, &#x0149;, &#x0178;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-006.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-006.html
new file mode 100644
index 0000000000..90388a249f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-006.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-A, lowercase</title>
+<meta name="assert" content="For the Latin Extended-A Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-006-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0100">&#x0100; &#x0101;</span> <span title="U+0102">&#x0102; &#x0103;</span> <span title="U+0104">&#x0104; &#x0105;</span> <span title="U+0106">&#x0106; &#x0107;</span> <span title="U+0108">&#x0108; &#x0109;</span> <span title="U+010A">&#x010A; &#x010B;</span> <span title="U+010C">&#x010C; &#x010D;</span> <span title="U+010E">&#x010E; &#x010F;</span> <span title="U+0110">&#x0110; &#x0111;</span> <span title="U+0112">&#x0112; &#x0113;</span> <span title="U+0114">&#x0114; &#x0115;</span> <span title="U+0116">&#x0116; &#x0117;</span> <span title="U+0118">&#x0118; &#x0119;</span> <span title="U+011A">&#x011A; &#x011B;</span> <span title="U+011C">&#x011C; &#x011D;</span> <span title="U+011E">&#x011E; &#x011F;</span> <span title="U+0120">&#x0120; &#x0121;</span> <span title="U+0122">&#x0122; &#x0123;</span> <span title="U+0124">&#x0124; &#x0125;</span> <span title="U+0126">&#x0126; &#x0127;</span> <span title="U+0128">&#x0128; &#x0129;</span> <span title="U+012A">&#x012A; &#x012B;</span> <span title="U+012C">&#x012C; &#x012D;</span> <span title="U+012E">&#x012E; &#x012F;</span> <span title="U+0130">&#x0130; &#x0069;</span> <span title="U+0132">&#x0132; &#x0133;</span> <span title="U+0134">&#x0134; &#x0135;</span> <span title="U+0136">&#x0136; &#x0137;</span> <span title="U+0139">&#x0139; &#x013A;</span> <span title="U+013B">&#x013B; &#x013C;</span> <span title="U+013D">&#x013D; &#x013E;</span> <span title="U+013F">&#x013F; &#x0140;</span> <span title="U+0141">&#x0141; &#x0142;</span> <span title="U+0143">&#x0143; &#x0144;</span> <span title="U+0145">&#x0145; &#x0146;</span> <span title="U+0147">&#x0147; &#x0148;</span> <span title="U+014A">&#x014A; &#x014B;</span> <span title="U+014C">&#x014C; &#x014D;</span> <span title="U+014E">&#x014E; &#x014F;</span> <span title="U+0150">&#x0150; &#x0151;</span> <span title="U+0152">&#x0152; &#x0153;</span> <span title="U+0154">&#x0154; &#x0155;</span> <span title="U+0156">&#x0156; &#x0157;</span> <span title="U+0158">&#x0158; &#x0159;</span> <span title="U+015A">&#x015A; &#x015B;</span> <span title="U+015C">&#x015C; &#x015D;</span> <span title="U+015E">&#x015E; &#x015F;</span> <span title="U+0160">&#x0160; &#x0161;</span> <span title="U+0162">&#x0162; &#x0163;</span> <span title="U+0164">&#x0164; &#x0165;</span> <span title="U+0166">&#x0166; &#x0167;</span> <span title="U+0168">&#x0168; &#x0169;</span> <span title="U+016A">&#x016A; &#x016B;</span> <span title="U+016C">&#x016C; &#x016D;</span> <span title="U+016E">&#x016E; &#x016F;</span> <span title="U+0170">&#x0170; &#x0171;</span> <span title="U+0172">&#x0172; &#x0173;</span> <span title="U+0174">&#x0174; &#x0175;</span> <span title="U+0176">&#x0176; &#x0177;</span> <span title="U+0178">&#x0178; &#x00FF;</span> <span title="U+0179">&#x0179; &#x017A;</span> <span title="U+017B">&#x017B; &#x017C;</span> <span title="U+017D">&#x017D; &#x017E;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0131;, &#x0138;, &#x0149;, &#x017F;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-007.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-007.html
new file mode 100644
index 0000000000..b2014ee971
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-007.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-B, uppercase</title>
+<meta name="assert" content="For the Latin Extended-B Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-007-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0180">&#x0180; &#x0243;</span> <span title="U+0183">&#x0183; &#x0182;</span> <span title="U+0185">&#x0185; &#x0184;</span> <span title="U+0188">&#x0188; &#x0187;</span> <span title="U+018C">&#x018C; &#x018B;</span> <span title="U+0192">&#x0192; &#x0191;</span> <span title="U+0195">&#x0195; &#x01F6;</span> <span title="U+0199">&#x0199; &#x0198;</span> <span title="U+019A">&#x019A; &#x023D;</span> <span title="U+019E">&#x019E; &#x0220;</span> <span title="U+01A1">&#x01A1; &#x01A0;</span> <span title="U+01A3">&#x01A3; &#x01A2;</span> <span title="U+01A5">&#x01A5; &#x01A4;</span> <span title="U+01A8">&#x01A8; &#x01A7;</span> <span title="U+01AD">&#x01AD; &#x01AC;</span> <span title="U+01B0">&#x01B0; &#x01AF;</span> <span title="U+01B4">&#x01B4; &#x01B3;</span> <span title="U+01B6">&#x01B6; &#x01B5;</span> <span title="U+01B9">&#x01B9; &#x01B8;</span> <span title="U+01BD">&#x01BD; &#x01BC;</span> <span title="U+01BF">&#x01BF; &#x01F7;</span> <span title="U+01C5">&#x01C5; &#x01C4;</span> <span title="U+01C6">&#x01C6; &#x01C4;</span> <span title="U+01C8">&#x01C8; &#x01C7;</span> <span title="U+01C9">&#x01C9; &#x01C7;</span> <span title="U+01CB">&#x01CB; &#x01CA;</span> <span title="U+01CC">&#x01CC; &#x01CA;</span> <span title="U+01CE">&#x01CE; &#x01CD;</span> <span title="U+01D0">&#x01D0; &#x01CF;</span> <span title="U+01D2">&#x01D2; &#x01D1;</span> <span title="U+01D4">&#x01D4; &#x01D3;</span> <span title="U+01D6">&#x01D6; &#x01D5;</span> <span title="U+01D8">&#x01D8; &#x01D7;</span> <span title="U+01DA">&#x01DA; &#x01D9;</span> <span title="U+01DC">&#x01DC; &#x01DB;</span> <span title="U+01DD">&#x01DD; &#x018E;</span> <span title="U+01DF">&#x01DF; &#x01DE;</span> <span title="U+01E1">&#x01E1; &#x01E0;</span> <span title="U+01E3">&#x01E3; &#x01E2;</span> <span title="U+01E5">&#x01E5; &#x01E4;</span> <span title="U+01E7">&#x01E7; &#x01E6;</span> <span title="U+01E9">&#x01E9; &#x01E8;</span> <span title="U+01EB">&#x01EB; &#x01EA;</span> <span title="U+01ED">&#x01ED; &#x01EC;</span> <span title="U+01EF">&#x01EF; &#x01EE;</span> <span title="U+01F2">&#x01F2; &#x01F1;</span> <span title="U+01F3">&#x01F3; &#x01F1;</span> <span title="U+01F5">&#x01F5; &#x01F4;</span> <span title="U+01F9">&#x01F9; &#x01F8;</span> <span title="U+01FB">&#x01FB; &#x01FA;</span> <span title="U+01FD">&#x01FD; &#x01FC;</span> <span title="U+01FF">&#x01FF; &#x01FE;</span> <span title="U+0201">&#x0201; &#x0200;</span> <span title="U+0203">&#x0203; &#x0202;</span> <span title="U+0205">&#x0205; &#x0204;</span> <span title="U+0207">&#x0207; &#x0206;</span> <span title="U+0209">&#x0209; &#x0208;</span> <span title="U+020B">&#x020B; &#x020A;</span> <span title="U+020D">&#x020D; &#x020C;</span> <span title="U+020F">&#x020F; &#x020E;</span> <span title="U+0211">&#x0211; &#x0210;</span> <span title="U+0213">&#x0213; &#x0212;</span> <span title="U+0215">&#x0215; &#x0214;</span> <span title="U+0217">&#x0217; &#x0216;</span> <span title="U+0219">&#x0219; &#x0218;</span> <span title="U+021B">&#x021B; &#x021A;</span> <span title="U+021D">&#x021D; &#x021C;</span> <span title="U+021F">&#x021F; &#x021E;</span> <span title="U+0223">&#x0223; &#x0222;</span> <span title="U+0225">&#x0225; &#x0224;</span> <span title="U+0227">&#x0227; &#x0226;</span> <span title="U+0229">&#x0229; &#x0228;</span> <span title="U+022B">&#x022B; &#x022A;</span> <span title="U+022D">&#x022D; &#x022C;</span> <span title="U+022F">&#x022F; &#x022E;</span> <span title="U+0231">&#x0231; &#x0230;</span> <span title="U+0233">&#x0233; &#x0232;</span> <span title="U+023C">&#x023C; &#x023B;</span> <span title="U+023F">&#x023F; &#x2C7E;</span> <span title="U+0240">&#x0240; &#x2C7F;</span> <span title="U+0242">&#x0242; &#x0241;</span> <span title="U+0247">&#x0247; &#x0246;</span> <span title="U+0249">&#x0249; &#x0248;</span> <span title="U+024B">&#x024B; &#x024A;</span> <span title="U+024D">&#x024D; &#x024C;</span> <span title="U+024F">&#x024F; &#x024E;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x018D; &#x019B; &#x01AA; &#x01AB; &#x01BA; &#x01BB; &#x01BE; &#x01C0; &#x01C1; &#x01C2; &#x01C3; &#x01F0; &#x0221; &#x0234; &#x0235; &#x0236; &#x0237; &#x0238; &#x0239;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-008.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-008.html
new file mode 100644
index 0000000000..991e0e0e4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-008.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-B, lowercase</title>
+<meta name="assert" content="For the Latin Extended-B Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-008-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0181">&#x0181; &#x0253;</span> <span title="U+0182">&#x0182; &#x0183;</span> <span title="U+0184">&#x0184; &#x0185;</span> <span title="U+0186">&#x0186; &#x0254;</span> <span title="U+0187">&#x0187; &#x0188;</span> <span title="U+0189">&#x0189; &#x0256;</span> <span title="U+018A">&#x018A; &#x0257;</span> <span title="U+018B">&#x018B; &#x018C;</span> <span title="U+018E">&#x018E; &#x01DD;</span> <span title="U+018F">&#x018F; &#x0259;</span> <span title="U+0190">&#x0190; &#x025B;</span> <span title="U+0191">&#x0191; &#x0192;</span> <span title="U+0193">&#x0193; &#x0260;</span> <span title="U+0194">&#x0194; &#x0263;</span> <span title="U+0196">&#x0196; &#x0269;</span> <span title="U+0197">&#x0197; &#x0268;</span> <span title="U+0198">&#x0198; &#x0199;</span> <span title="U+019C">&#x019C; &#x026F;</span> <span title="U+019D">&#x019D; &#x0272;</span> <span title="U+019F">&#x019F; &#x0275;</span> <span title="U+01A0">&#x01A0; &#x01A1;</span> <span title="U+01A2">&#x01A2; &#x01A3;</span> <span title="U+01A4">&#x01A4; &#x01A5;</span> <span title="U+01A6">&#x01A6; &#x0280;</span> <span title="U+01A7">&#x01A7; &#x01A8;</span> <span title="U+01A9">&#x01A9; &#x0283;</span> <span title="U+01AC">&#x01AC; &#x01AD;</span> <span title="U+01AE">&#x01AE; &#x0288;</span> <span title="U+01AF">&#x01AF; &#x01B0;</span> <span title="U+01B1">&#x01B1; &#x028A;</span> <span title="U+01B2">&#x01B2; &#x028B;</span> <span title="U+01B3">&#x01B3; &#x01B4;</span> <span title="U+01B5">&#x01B5; &#x01B6;</span> <span title="U+01B7">&#x01B7; &#x0292;</span> <span title="U+01B8">&#x01B8; &#x01B9;</span> <span title="U+01BC">&#x01BC; &#x01BD;</span> <span title="U+01C4">&#x01C4; &#x01C6;</span> <span title="U+01C5">&#x01C5; &#x01C6;</span> <span title="U+01C7">&#x01C7; &#x01C9;</span> <span title="U+01C8">&#x01C8; &#x01C9;</span> <span title="U+01CA">&#x01CA; &#x01CC;</span> <span title="U+01CB">&#x01CB; &#x01CC;</span> <span title="U+01CD">&#x01CD; &#x01CE;</span> <span title="U+01CF">&#x01CF; &#x01D0;</span> <span title="U+01D1">&#x01D1; &#x01D2;</span> <span title="U+01D3">&#x01D3; &#x01D4;</span> <span title="U+01D5">&#x01D5; &#x01D6;</span> <span title="U+01D7">&#x01D7; &#x01D8;</span> <span title="U+01D9">&#x01D9; &#x01DA;</span> <span title="U+01DB">&#x01DB; &#x01DC;</span> <span title="U+01DE">&#x01DE; &#x01DF;</span> <span title="U+01E0">&#x01E0; &#x01E1;</span> <span title="U+01E2">&#x01E2; &#x01E3;</span> <span title="U+01E4">&#x01E4; &#x01E5;</span> <span title="U+01E6">&#x01E6; &#x01E7;</span> <span title="U+01E8">&#x01E8; &#x01E9;</span> <span title="U+01EA">&#x01EA; &#x01EB;</span> <span title="U+01EC">&#x01EC; &#x01ED;</span> <span title="U+01EE">&#x01EE; &#x01EF;</span> <span title="U+01F1">&#x01F1; &#x01F3;</span> <span title="U+01F2">&#x01F2; &#x01F3;</span> <span title="U+01F4">&#x01F4; &#x01F5;</span> <span title="U+01F6">&#x01F6; &#x0195;</span> <span title="U+01F7">&#x01F7; &#x01BF;</span> <span title="U+01F8">&#x01F8; &#x01F9;</span> <span title="U+01FA">&#x01FA; &#x01FB;</span> <span title="U+01FC">&#x01FC; &#x01FD;</span> <span title="U+01FE">&#x01FE; &#x01FF;</span> <span title="U+0200">&#x0200; &#x0201;</span> <span title="U+0202">&#x0202; &#x0203;</span> <span title="U+0204">&#x0204; &#x0205;</span> <span title="U+0206">&#x0206; &#x0207;</span> <span title="U+0208">&#x0208; &#x0209;</span> <span title="U+020A">&#x020A; &#x020B;</span> <span title="U+020C">&#x020C; &#x020D;</span> <span title="U+020E">&#x020E; &#x020F;</span> <span title="U+0210">&#x0210; &#x0211;</span> <span title="U+0212">&#x0212; &#x0213;</span> <span title="U+0214">&#x0214; &#x0215;</span> <span title="U+0216">&#x0216; &#x0217;</span> <span title="U+0218">&#x0218; &#x0219;</span> <span title="U+021A">&#x021A; &#x021B;</span> <span title="U+021C">&#x021C; &#x021D;</span> <span title="U+021E">&#x021E; &#x021F;</span> <span title="U+0220">&#x0220; &#x019E;</span> <span title="U+0222">&#x0222; &#x0223;</span> <span title="U+0224">&#x0224; &#x0225;</span> <span title="U+0226">&#x0226; &#x0227;</span> <span title="U+0228">&#x0228; &#x0229;</span> <span title="U+022A">&#x022A; &#x022B;</span> <span title="U+022C">&#x022C; &#x022D;</span> <span title="U+022E">&#x022E; &#x022F;</span> <span title="U+0230">&#x0230; &#x0231;</span> <span title="U+0232">&#x0232; &#x0233;</span> <span title="U+023A">&#x023A; &#x2C65;</span> <span title="U+023B">&#x023B; &#x023C;</span> <span title="U+023D">&#x023D; &#x019A;</span> <span title="U+023E">&#x023E; &#x2C66;</span> <span title="U+0241">&#x0241; &#x0242;</span> <span title="U+0243">&#x0243; &#x0180;</span> <span title="U+0244">&#x0244; &#x0289;</span> <span title="U+0245">&#x0245; &#x028C;</span> <span title="U+0246">&#x0246; &#x0247;</span> <span title="U+0248">&#x0248; &#x0249;</span> <span title="U+024A">&#x024A; &#x024B;</span> <span title="U+024C">&#x024C; &#x024D;</span> <span title="U+024E">&#x024E; &#x024F;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x018D; &#x019B; &#x01AA; &#x01AB; &#x01BA; &#x01BB; &#x01BE; &#x01C0; &#x01C1; &#x01C2; &#x01C3; &#x01F0; &#x0221; &#x0234; &#x0235; &#x0236; &#x0237; &#x0238; &#x0239;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-009.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-009.html
new file mode 100644
index 0000000000..5e513dcd07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-009.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-C, uppercase</title>
+<meta name="assert" content="For the Latin Extended-C Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-009-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2C61">&#x2C61; &#x2C60;</span> <span title="U+2C65">&#x2C65; &#x023A;</span> <span title="U+2C66">&#x2C66; &#x023E;</span> <span title="U+2C68">&#x2C68; &#x2C67;</span> <span title="U+2C6A">&#x2C6A; &#x2C69;</span> <span title="U+2C6C">&#x2C6C; &#x2C6B;</span> <span title="U+2C73">&#x2C73; &#x2C72;</span> <span title="U+2C76">&#x2C76; &#x2C75;</span> </div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x2C71; &#x2C74; &#x2C77; &#x2C78; &#x2C79; &#x2C7A; &#x2C7B; &#x2C7C; &#x2C7D;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-010.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-010.html
new file mode 100644
index 0000000000..c214f91487
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-010.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-C, lowercase</title>
+<meta name="assert" content="For the Latin Extended-C Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-010-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2C60">&#x2C60; &#x2C61;</span> <span title="U+2C62">&#x2C62; &#x026B;</span> <span title="U+2C63">&#x2C63; &#x1D7D;</span> <span title="U+2C64">&#x2C64; &#x027D;</span> <span title="U+2C67">&#x2C67; &#x2C68;</span> <span title="U+2C69">&#x2C69; &#x2C6A;</span> <span title="U+2C6B">&#x2C6B; &#x2C6C;</span> <span title="U+2C6D">&#x2C6D; &#x0251;</span> <span title="U+2C6E">&#x2C6E; &#x0271;</span> <span title="U+2C6F">&#x2C6F; &#x0250;</span> <span title="U+2C70">&#x2C70; &#x0252;</span> <span title="U+2C72">&#x2C72; &#x2C73;</span> <span title="U+2C75">&#x2C75; &#x2C76;</span> <span title="U+2C7E">&#x2C7E; &#x023F;</span> <span title="U+2C7F">&#x2C7F; &#x0240;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x2C71; &#x2C74; &#x2C77; &#x2C78; &#x2C79; &#x2C7A; &#x2C7B; &#x2C7C; &#x2C7D;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-011.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-011.html
new file mode 100644
index 0000000000..4d71b28d60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-011.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Full-width Latin, uppercase</title>
+<meta name="assert" content="For the Latin letters in the Halfwidth and Fullwidth Forms Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-011-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+FF41">&#xFF41; &#xFF21;</span> <span title="U+FF42">&#xFF42; &#xFF22;</span> <span title="U+FF43">&#xFF43; &#xFF23;</span> <span title="U+FF44">&#xFF44; &#xFF24;</span> <span title="U+FF45">&#xFF45; &#xFF25;</span> <span title="U+FF46">&#xFF46; &#xFF26;</span> <span title="U+FF47">&#xFF47; &#xFF27;</span> <span title="U+FF48">&#xFF48; &#xFF28;</span> <span title="U+FF49">&#xFF49; &#xFF29;</span> <span title="U+FF4A">&#xFF4A; &#xFF2A;</span> <span title="U+FF4B">&#xFF4B; &#xFF2B;</span> <span title="U+FF4C">&#xFF4C; &#xFF2C;</span> <span title="U+FF4D">&#xFF4D; &#xFF2D;</span> <span title="U+FF4E">&#xFF4E; &#xFF2E;</span> <span title="U+FF4F">&#xFF4F; &#xFF2F;</span> <span title="U+FF50">&#xFF50; &#xFF30;</span> <span title="U+FF51">&#xFF51; &#xFF31;</span> <span title="U+FF52">&#xFF52; &#xFF32;</span> <span title="U+FF53">&#xFF53; &#xFF33;</span> <span title="U+FF54">&#xFF54; &#xFF34;</span> <span title="U+FF55">&#xFF55; &#xFF35;</span> <span title="U+FF56">&#xFF56; &#xFF36;</span> <span title="U+FF57">&#xFF57; &#xFF37;</span> <span title="U+FF58">&#xFF58; &#xFF38;</span> <span title="U+FF59">&#xFF59; &#xFF39;</span> <span title="U+FF5A">&#xFF5A; &#xFF3A;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0138; &#x0149;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-012.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-012.html
new file mode 100644
index 0000000000..210551a07d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-012.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Full-width Latin, lowercase</title>
+<meta name="assert" content="For the Latin letters in the Halfwidth and Fullwidth Forms block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-012-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+FF21">&#xFF21; &#xFF41;</span> <span title="U+FF22">&#xFF22; &#xFF42;</span> <span title="U+FF23">&#xFF23; &#xFF43;</span> <span title="U+FF24">&#xFF24; &#xFF44;</span> <span title="U+FF25">&#xFF25; &#xFF45;</span> <span title="U+FF26">&#xFF26; &#xFF46;</span> <span title="U+FF27">&#xFF27; &#xFF47;</span> <span title="U+FF28">&#xFF28; &#xFF48;</span> <span title="U+FF29">&#xFF29; &#xFF49;</span> <span title="U+FF2A">&#xFF2A; &#xFF4A;</span> <span title="U+FF2B">&#xFF2B; &#xFF4B;</span> <span title="U+FF2C">&#xFF2C; &#xFF4C;</span> <span title="U+FF2D">&#xFF2D; &#xFF4D;</span> <span title="U+FF2E">&#xFF2E; &#xFF4E;</span> <span title="U+FF2F">&#xFF2F; &#xFF4F;</span> <span title="U+FF30">&#xFF30; &#xFF50;</span> <span title="U+FF31">&#xFF31; &#xFF51;</span> <span title="U+FF32">&#xFF32; &#xFF52;</span> <span title="U+FF33">&#xFF33; &#xFF53;</span> <span title="U+FF34">&#xFF34; &#xFF54;</span> <span title="U+FF35">&#xFF35; &#xFF55;</span> <span title="U+FF36">&#xFF36; &#xFF56;</span> <span title="U+FF37">&#xFF37; &#xFF57;</span> <span title="U+FF38">&#xFF38; &#xFF58;</span> <span title="U+FF39">&#xFF39; &#xFF59;</span> <span title="U+FF3A">&#xFF3A; &#xFF5A;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0138; &#x0149;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-014.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-014.html
new file mode 100644
index 0000000000..0fbe5e97b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-014.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek and Coptic, uppercase</title>
+<meta name="assert" content="For the Greek and Coptic Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-014-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0371">&#x0371; &#x0370;</span> <span title="U+0373">&#x0373; &#x0372;</span> <span title="U+0377">&#x0377; &#x0376;</span> <span title="U+037B">&#x037B; &#x03FD;</span> <span title="U+037C">&#x037C; &#x03FE;</span> <span title="U+037D">&#x037D; &#x03FF;</span> <span title="U+03AC">&#x03AC; &#x0386;</span> <span title="U+03AD">&#x03AD; &#x0388;</span> <span title="U+03AE">&#x03AE; &#x0389;</span> <span title="U+03AF">&#x03AF; &#x038A;</span> <span title="U+03B1">&#x03B1; &#x0391;</span> <span title="U+03B2">&#x03B2; &#x0392;</span> <span title="U+03B3">&#x03B3; &#x0393;</span> <span title="U+03B4">&#x03B4; &#x0394;</span> <span title="U+03B5">&#x03B5; &#x0395;</span> <span title="U+03B6">&#x03B6; &#x0396;</span> <span title="U+03B7">&#x03B7; &#x0397;</span> <span title="U+03B8">&#x03B8; &#x0398;</span> <span title="U+03B9">&#x03B9; &#x0399;</span> <span title="U+03BA">&#x03BA; &#x039A;</span> <span title="U+03BB">&#x03BB; &#x039B;</span> <span title="U+03BC">&#x03BC; &#x039C;</span> <span title="U+03BD">&#x03BD; &#x039D;</span> <span title="U+03BE">&#x03BE; &#x039E;</span> <span title="U+03BF">&#x03BF; &#x039F;</span> <span title="U+03C0">&#x03C0; &#x03A0;</span> <span title="U+03C1">&#x03C1; &#x03A1;</span> <span title="U+03C2">&#x03C2; &#x03A3;</span> <span title="U+03C3">&#x03C3; &#x03A3;</span> <span title="U+03C4">&#x03C4; &#x03A4;</span> <span title="U+03C5">&#x03C5; &#x03A5;</span> <span title="U+03C6">&#x03C6; &#x03A6;</span> <span title="U+03C7">&#x03C7; &#x03A7;</span> <span title="U+03C8">&#x03C8; &#x03A8;</span> <span title="U+03C9">&#x03C9; &#x03A9;</span> <span title="U+03CA">&#x03CA; &#x03AA;</span> <span title="U+03CB">&#x03CB; &#x03AB;</span> <span title="U+03CC">&#x03CC; &#x038C;</span> <span title="U+03CD">&#x03CD; &#x038E;</span> <span title="U+03CE">&#x03CE; &#x038F;</span> <span title="U+03D0">&#x03D0; &#x0392;</span> <span title="U+03D1">&#x03D1; &#x0398;</span> <span title="U+03D5">&#x03D5; &#x03A6;</span> <span title="U+03D6">&#x03D6; &#x03A0;</span> <span title="U+03D7">&#x03D7; &#x03CF;</span> <span title="U+03D9">&#x03D9; &#x03D8;</span> <span title="U+03DB">&#x03DB; &#x03DA;</span> <span title="U+03DD">&#x03DD; &#x03DC;</span> <span title="U+03DF">&#x03DF; &#x03DE;</span> <span title="U+03E1">&#x03E1; &#x03E0;</span> <span title="U+03E3">&#x03E3; &#x03E2;</span> <span title="U+03E5">&#x03E5; &#x03E4;</span> <span title="U+03E7">&#x03E7; &#x03E6;</span> <span title="U+03E9">&#x03E9; &#x03E8;</span> <span title="U+03EB">&#x03EB; &#x03EA;</span> <span title="U+03ED">&#x03ED; &#x03EC;</span> <span title="U+03EF">&#x03EF; &#x03EE;</span> <span title="U+03F0">&#x03F0; &#x039A;</span> <span title="U+03F1">&#x03F1; &#x03A1;</span> <span title="U+03F2">&#x03F2; &#x03F9;</span> <span title="U+03F3">&#x03F3; &#x037F;</span> <span title="U+03F5">&#x03F5; &#x0395;</span> <span title="U+03F8">&#x03F8; &#x03F7;</span> <span title="U+03FB">&#x03FB; &#x03FA;</span> </div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0374; &#x0375; &#x037A; &#x037E; &#x0384; &#x0385; &#x0387; &#x0390; &#x03B0; &#x03D2; &#x03D3; &#x03D4; &#x03F6; &#x03FC;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-015.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-015.html
new file mode 100644
index 0000000000..65071771df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-015.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek and Coptic, lowercase</title>
+<meta name="assert" content="For the Greek and Coptic Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-015-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0370">&#x0370; &#x0371;</span> <span title="U+0372">&#x0372; &#x0373;</span> <span title="U+0376">&#x0376; &#x0377;</span> <span title="U+037F">&#x037F; &#x03F3;</span> <span title="U+0386">&#x0386; &#x03AC;</span> <span title="U+0388">&#x0388; &#x03AD;</span> <span title="U+0389">&#x0389; &#x03AE;</span> <span title="U+038A">&#x038A; &#x03AF;</span> <span title="U+038C">&#x038C; &#x03CC;</span> <span title="U+038E">&#x038E; &#x03CD;</span> <span title="U+038F">&#x038F; &#x03CE;</span> <span title="U+0391">&#x0391; &#x03B1;</span> <span title="U+0392">&#x0392; &#x03B2;</span> <span title="U+0393">&#x0393; &#x03B3;</span> <span title="U+0394">&#x0394; &#x03B4;</span> <span title="U+0395">&#x0395; &#x03B5;</span> <span title="U+0396">&#x0396; &#x03B6;</span> <span title="U+0397">&#x0397; &#x03B7;</span> <span title="U+0398">&#x0398; &#x03B8;</span> <span title="U+0399">&#x0399; &#x03B9;</span> <span title="U+039A">&#x039A; &#x03BA;</span> <span title="U+039B">&#x039B; &#x03BB;</span> <span title="U+039C">&#x039C; &#x03BC;</span> <span title="U+039D">&#x039D; &#x03BD;</span> <span title="U+039E">&#x039E; &#x03BE;</span> <span title="U+039F">&#x039F; &#x03BF;</span> <span title="U+03A0">&#x03A0; &#x03C0;</span> <span title="U+03A1">&#x03A1; &#x03C1;</span> <span title="U+03A3">&#x03A3; &#x03C3;</span> <span title="U+03A4">&#x03A4; &#x03C4;</span> <span title="U+03A5">&#x03A5; &#x03C5;</span> <span title="U+03A6">&#x03A6; &#x03C6;</span> <span title="U+03A7">&#x03A7; &#x03C7;</span> <span title="U+03A8">&#x03A8; &#x03C8;</span> <span title="U+03A9">&#x03A9; &#x03C9;</span> <span title="U+03AA">&#x03AA; &#x03CA;</span> <span title="U+03AB">&#x03AB; &#x03CB;</span> <span title="U+03CF">&#x03CF; &#x03D7;</span> <span title="U+03D8">&#x03D8; &#x03D9;</span> <span title="U+03DA">&#x03DA; &#x03DB;</span> <span title="U+03DC">&#x03DC; &#x03DD;</span> <span title="U+03DE">&#x03DE; &#x03DF;</span> <span title="U+03E0">&#x03E0; &#x03E1;</span> <span title="U+03E2">&#x03E2; &#x03E3;</span> <span title="U+03E4">&#x03E4; &#x03E5;</span> <span title="U+03E6">&#x03E6; &#x03E7;</span> <span title="U+03E8">&#x03E8; &#x03E9;</span> <span title="U+03EA">&#x03EA; &#x03EB;</span> <span title="U+03EC">&#x03EC; &#x03ED;</span> <span title="U+03EE">&#x03EE; &#x03EF;</span> <span title="U+03F4">&#x03F4; &#x03B8;</span> <span title="U+03F7">&#x03F7; &#x03F8;</span> <span title="U+03F9">&#x03F9; &#x03F2;</span> <span title="U+03FA">&#x03FA; &#x03FB;</span> <span title="U+03FD">&#x03FD; &#x037B;</span> <span title="U+03FE">&#x03FE; &#x037C;</span> <span title="U+03FF">&#x03FF; &#x037D;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0374; &#x0375; &#x037A; &#x037E; &#x0384; &#x0385; &#x0387; &#x0390; &#x03B0; &#x03D2; &#x03D3; &#x03D4; &#x03F6; &#x03FC;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-016.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-016.html
new file mode 100644
index 0000000000..d28f177f32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-016.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek Extended, uppercase</title>
+<meta name="assert" content="For the Greek Extended Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-016-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1F00">&#x1F00; &#x1F08;</span> <span title="U+1F01">&#x1F01; &#x1F09;</span> <span title="U+1F02">&#x1F02; &#x1F0A;</span> <span title="U+1F03">&#x1F03; &#x1F0B;</span> <span title="U+1F04">&#x1F04; &#x1F0C;</span> <span title="U+1F05">&#x1F05; &#x1F0D;</span> <span title="U+1F06">&#x1F06; &#x1F0E;</span> <span title="U+1F07">&#x1F07; &#x1F0F;</span> <span title="U+1F10">&#x1F10; &#x1F18;</span> <span title="U+1F11">&#x1F11; &#x1F19;</span> <span title="U+1F12">&#x1F12; &#x1F1A;</span> <span title="U+1F13">&#x1F13; &#x1F1B;</span> <span title="U+1F14">&#x1F14; &#x1F1C;</span> <span title="U+1F15">&#x1F15; &#x1F1D;</span> <span title="U+1F20">&#x1F20; &#x1F28;</span> <span title="U+1F21">&#x1F21; &#x1F29;</span> <span title="U+1F22">&#x1F22; &#x1F2A;</span> <span title="U+1F23">&#x1F23; &#x1F2B;</span> <span title="U+1F24">&#x1F24; &#x1F2C;</span> <span title="U+1F25">&#x1F25; &#x1F2D;</span> <span title="U+1F26">&#x1F26; &#x1F2E;</span> <span title="U+1F27">&#x1F27; &#x1F2F;</span> <span title="U+1F30">&#x1F30; &#x1F38;</span> <span title="U+1F31">&#x1F31; &#x1F39;</span> <span title="U+1F32">&#x1F32; &#x1F3A;</span> <span title="U+1F33">&#x1F33; &#x1F3B;</span> <span title="U+1F34">&#x1F34; &#x1F3C;</span> <span title="U+1F35">&#x1F35; &#x1F3D;</span> <span title="U+1F36">&#x1F36; &#x1F3E;</span> <span title="U+1F37">&#x1F37; &#x1F3F;</span> <span title="U+1F40">&#x1F40; &#x1F48;</span> <span title="U+1F41">&#x1F41; &#x1F49;</span> <span title="U+1F42">&#x1F42; &#x1F4A;</span> <span title="U+1F43">&#x1F43; &#x1F4B;</span> <span title="U+1F44">&#x1F44; &#x1F4C;</span> <span title="U+1F45">&#x1F45; &#x1F4D;</span> <span title="U+1F51">&#x1F51; &#x1F59;</span> <span title="U+1F53">&#x1F53; &#x1F5B;</span> <span title="U+1F55">&#x1F55; &#x1F5D;</span> <span title="U+1F57">&#x1F57; &#x1F5F;</span> <span title="U+1F60">&#x1F60; &#x1F68;</span> <span title="U+1F61">&#x1F61; &#x1F69;</span> <span title="U+1F62">&#x1F62; &#x1F6A;</span> <span title="U+1F63">&#x1F63; &#x1F6B;</span> <span title="U+1F64">&#x1F64; &#x1F6C;</span> <span title="U+1F65">&#x1F65; &#x1F6D;</span> <span title="U+1F66">&#x1F66; &#x1F6E;</span> <span title="U+1F67">&#x1F67; &#x1F6F;</span> <span title="U+1F70">&#x1F70; &#x1FBA;</span> <span title="U+1F71">&#x1F71; &#x1FBB;</span> <span title="U+1F72">&#x1F72; &#x1FC8;</span> <span title="U+1F73">&#x1F73; &#x1FC9;</span> <span title="U+1F74">&#x1F74; &#x1FCA;</span> <span title="U+1F75">&#x1F75; &#x1FCB;</span> <span title="U+1F76">&#x1F76; &#x1FDA;</span> <span title="U+1F77">&#x1F77; &#x1FDB;</span> <span title="U+1F78">&#x1F78; &#x1FF8;</span> <span title="U+1F79">&#x1F79; &#x1FF9;</span> <span title="U+1F7A">&#x1F7A; &#x1FEA;</span> <span title="U+1F7B">&#x1F7B; &#x1FEB;</span> <span title="U+1F7C">&#x1F7C; &#x1FFA;</span> <span title="U+1F7D">&#x1F7D; &#x1FFB;</span> <span title="U+1F80">&#x1F80; &#x1F88;</span> <span title="U+1F81">&#x1F81; &#x1F89;</span> <span title="U+1F82">&#x1F82; &#x1F8A;</span> <span title="U+1F83">&#x1F83; &#x1F8B;</span> <span title="U+1F84">&#x1F84; &#x1F8C;</span> <span title="U+1F85">&#x1F85; &#x1F8D;</span> <span title="U+1F86">&#x1F86; &#x1F8E;</span> <span title="U+1F87">&#x1F87; &#x1F8F;</span> <span title="U+1F90">&#x1F90; &#x1F98;</span> <span title="U+1F91">&#x1F91; &#x1F99;</span> <span title="U+1F92">&#x1F92; &#x1F9A;</span> <span title="U+1F93">&#x1F93; &#x1F9B;</span> <span title="U+1F94">&#x1F94; &#x1F9C;</span> <span title="U+1F95">&#x1F95; &#x1F9D;</span> <span title="U+1F96">&#x1F96; &#x1F9E;</span> <span title="U+1F97">&#x1F97; &#x1F9F;</span> <span title="U+1FA0">&#x1FA0; &#x1FA8;</span> <span title="U+1FA1">&#x1FA1; &#x1FA9;</span> <span title="U+1FA2">&#x1FA2; &#x1FAA;</span> <span title="U+1FA3">&#x1FA3; &#x1FAB;</span> <span title="U+1FA4">&#x1FA4; &#x1FAC;</span> <span title="U+1FA5">&#x1FA5; &#x1FAD;</span> <span title="U+1FA6">&#x1FA6; &#x1FAE;</span> <span title="U+1FA7">&#x1FA7; &#x1FAF;</span> <span title="U+1FB0">&#x1FB0; &#x1FB8;</span> <span title="U+1FB1">&#x1FB1; &#x1FB9;</span> <span title="U+1FB3">&#x1FB3; &#x1FBC;</span> <span title="U+1FBE">&#x1FBE; &#x0399;</span> <span title="U+1FC3">&#x1FC3; &#x1FCC;</span> <span title="U+1FD0">&#x1FD0; &#x1FD8;</span> <span title="U+1FD1">&#x1FD1; &#x1FD9;</span> <span title="U+1FE0">&#x1FE0; &#x1FE8;</span> <span title="U+1FE1">&#x1FE1; &#x1FE9;</span> <span title="U+1FE5">&#x1FE5; &#x1FEC;</span> <span title="U+1FF3">&#x1FF3; &#x1FFC;</span></div>
+<!--Notes:
+Glyphs for the following characters are not available in the Doulos Sil font, so will need to be tested at a later date: &#xA79B; &#xA79D; &#xA79F; &#xA79A; &#xA79C; &#xA79E;
+Characters from this block that do not have case equivalents: &#x1F50; &#x1F52; &#x1F54; &#x1F56; &#x1FB2; &#x1FB4; &#x1FB6; &#x1FB7; &#x1FBD; &#x1FBF; &#x1FC0; &#x1FC1; &#x1FC2; &#x1FC4; &#x1FC6; &#x1FC7; &#x1FCD; &#x1FCE; &#x1FCF; &#x1FD2; &#x1FD3; &#x1FD6; &#x1FD7; &#x1FDD; &#x1FDE; &#x1FDF; &#x1FE2; &#x1FE3; &#x1FE4; &#x1FE6; &#x1FE7; &#x1FED; &#x1FEE; &#x1FEF; &#x1FF2; &#x1FF4; &#x1FF6; &#x1FF7; &#x1FFD; &#x1FFE;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-017.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-017.html
new file mode 100644
index 0000000000..e35cb4c359
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-017.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek Extended, lowercase</title>
+<meta name="assert" content="For the Greek Extended Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-017-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+1F08">&#x1F08; &#x1F00;</span> <span title="U+1F09">&#x1F09; &#x1F01;</span> <span title="U+1F0A">&#x1F0A; &#x1F02;</span> <span title="U+1F0B">&#x1F0B; &#x1F03;</span> <span title="U+1F0C">&#x1F0C; &#x1F04;</span> <span title="U+1F0D">&#x1F0D; &#x1F05;</span> <span title="U+1F0E">&#x1F0E; &#x1F06;</span> <span title="U+1F0F">&#x1F0F; &#x1F07;</span> <span title="U+1F18">&#x1F18; &#x1F10;</span> <span title="U+1F19">&#x1F19; &#x1F11;</span> <span title="U+1F1A">&#x1F1A; &#x1F12;</span> <span title="U+1F1B">&#x1F1B; &#x1F13;</span> <span title="U+1F1C">&#x1F1C; &#x1F14;</span> <span title="U+1F1D">&#x1F1D; &#x1F15;</span> <span title="U+1F28">&#x1F28; &#x1F20;</span> <span title="U+1F29">&#x1F29; &#x1F21;</span> <span title="U+1F2A">&#x1F2A; &#x1F22;</span> <span title="U+1F2B">&#x1F2B; &#x1F23;</span> <span title="U+1F2C">&#x1F2C; &#x1F24;</span> <span title="U+1F2D">&#x1F2D; &#x1F25;</span> <span title="U+1F2E">&#x1F2E; &#x1F26;</span> <span title="U+1F2F">&#x1F2F; &#x1F27;</span> <span title="U+1F38">&#x1F38; &#x1F30;</span> <span title="U+1F39">&#x1F39; &#x1F31;</span> <span title="U+1F3A">&#x1F3A; &#x1F32;</span> <span title="U+1F3B">&#x1F3B; &#x1F33;</span> <span title="U+1F3C">&#x1F3C; &#x1F34;</span> <span title="U+1F3D">&#x1F3D; &#x1F35;</span> <span title="U+1F3E">&#x1F3E; &#x1F36;</span> <span title="U+1F3F">&#x1F3F; &#x1F37;</span> <span title="U+1F48">&#x1F48; &#x1F40;</span> <span title="U+1F49">&#x1F49; &#x1F41;</span> <span title="U+1F4A">&#x1F4A; &#x1F42;</span> <span title="U+1F4B">&#x1F4B; &#x1F43;</span> <span title="U+1F4C">&#x1F4C; &#x1F44;</span> <span title="U+1F4D">&#x1F4D; &#x1F45;</span> <span title="U+1F59">&#x1F59; &#x1F51;</span> <span title="U+1F5B">&#x1F5B; &#x1F53;</span> <span title="U+1F5D">&#x1F5D; &#x1F55;</span> <span title="U+1F5F">&#x1F5F; &#x1F57;</span> <span title="U+1F68">&#x1F68; &#x1F60;</span> <span title="U+1F69">&#x1F69; &#x1F61;</span> <span title="U+1F6A">&#x1F6A; &#x1F62;</span> <span title="U+1F6B">&#x1F6B; &#x1F63;</span> <span title="U+1F6C">&#x1F6C; &#x1F64;</span> <span title="U+1F6D">&#x1F6D; &#x1F65;</span> <span title="U+1F6E">&#x1F6E; &#x1F66;</span> <span title="U+1F6F">&#x1F6F; &#x1F67;</span> <span title="U+1F88">&#x1F88; &#x1F80;</span> <span title="U+1F89">&#x1F89; &#x1F81;</span> <span title="U+1F8A">&#x1F8A; &#x1F82;</span> <span title="U+1F8B">&#x1F8B; &#x1F83;</span> <span title="U+1F8C">&#x1F8C; &#x1F84;</span> <span title="U+1F8D">&#x1F8D; &#x1F85;</span> <span title="U+1F8E">&#x1F8E; &#x1F86;</span> <span title="U+1F8F">&#x1F8F; &#x1F87;</span> <span title="U+1F98">&#x1F98; &#x1F90;</span> <span title="U+1F99">&#x1F99; &#x1F91;</span> <span title="U+1F9A">&#x1F9A; &#x1F92;</span> <span title="U+1F9B">&#x1F9B; &#x1F93;</span> <span title="U+1F9C">&#x1F9C; &#x1F94;</span> <span title="U+1F9D">&#x1F9D; &#x1F95;</span> <span title="U+1F9E">&#x1F9E; &#x1F96;</span> <span title="U+1F9F">&#x1F9F; &#x1F97;</span> <span title="U+1FA8">&#x1FA8; &#x1FA0;</span> <span title="U+1FA9">&#x1FA9; &#x1FA1;</span> <span title="U+1FAA">&#x1FAA; &#x1FA2;</span> <span title="U+1FAB">&#x1FAB; &#x1FA3;</span> <span title="U+1FAC">&#x1FAC; &#x1FA4;</span> <span title="U+1FAD">&#x1FAD; &#x1FA5;</span> <span title="U+1FAE">&#x1FAE; &#x1FA6;</span> <span title="U+1FAF">&#x1FAF; &#x1FA7;</span> <span title="U+1FB8">&#x1FB8; &#x1FB0;</span> <span title="U+1FB9">&#x1FB9; &#x1FB1;</span> <span title="U+1FBA">&#x1FBA; &#x1F70;</span> <span title="U+1FBB">&#x1FBB; &#x1F71;</span> <span title="U+1FBC">&#x1FBC; &#x1FB3;</span> <span title="U+1FC8">&#x1FC8; &#x1F72;</span> <span title="U+1FC9">&#x1FC9; &#x1F73;</span> <span title="U+1FCA">&#x1FCA; &#x1F74;</span> <span title="U+1FCB">&#x1FCB; &#x1F75;</span> <span title="U+1FCC">&#x1FCC; &#x1FC3;</span> <span title="U+1FD8">&#x1FD8; &#x1FD0;</span> <span title="U+1FD9">&#x1FD9; &#x1FD1;</span> <span title="U+1FDA">&#x1FDA; &#x1F76;</span> <span title="U+1FDB">&#x1FDB; &#x1F77;</span> <span title="U+1FE8">&#x1FE8; &#x1FE0;</span> <span title="U+1FE9">&#x1FE9; &#x1FE1;</span> <span title="U+1FEA">&#x1FEA; &#x1F7A;</span> <span title="U+1FEB">&#x1FEB; &#x1F7B;</span> <span title="U+1FEC">&#x1FEC; &#x1FE5;</span> <span title="U+1FF8">&#x1FF8; &#x1F78;</span> <span title="U+1FF9">&#x1FF9; &#x1F79;</span> <span title="U+1FFA">&#x1FFA; &#x1F7C;</span> <span title="U+1FFB">&#x1FFB; &#x1F7D;</span> <span title="U+1FFC">&#x1FFC; &#x1FF3;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x1F50; &#x1F52; &#x1F54; &#x1F56; &#x1FB2; &#x1FB4; &#x1FB6; &#x1FB7; &#x1FBD; &#x1FBF; &#x1FC0; &#x1FC1; &#x1FC2; &#x1FC4; &#x1FC6; &#x1FC7; &#x1FCD; &#x1FCE; &#x1FCF; &#x1FD2; &#x1FD3; &#x1FD6; &#x1FD7; &#x1FDD; &#x1FDE; &#x1FDF; &#x1FE2; &#x1FE3; &#x1FE4; &#x1FE6; &#x1FE7; &#x1FED; &#x1FEE; &#x1FEF; &#x1FF2; &#x1FF4; &#x1FF6; &#x1FF7; &#x1FFD; &#x1FFE;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-018.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-018.html
new file mode 100644
index 0000000000..ea636e2eda
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-018.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic, uppercase</title>
+<meta name="assert" content="For the Cyrillic Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-018-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0430">&#x0430; &#x0410;</span> <span title="U+0431">&#x0431; &#x0411;</span> <span title="U+0432">&#x0432; &#x0412;</span> <span title="U+0433">&#x0433; &#x0413;</span> <span title="U+0434">&#x0434; &#x0414;</span> <span title="U+0435">&#x0435; &#x0415;</span> <span title="U+0436">&#x0436; &#x0416;</span> <span title="U+0437">&#x0437; &#x0417;</span> <span title="U+0438">&#x0438; &#x0418;</span> <span title="U+0439">&#x0439; &#x0419;</span> <span title="U+043A">&#x043A; &#x041A;</span> <span title="U+043B">&#x043B; &#x041B;</span> <span title="U+043C">&#x043C; &#x041C;</span> <span title="U+043D">&#x043D; &#x041D;</span> <span title="U+043E">&#x043E; &#x041E;</span> <span title="U+043F">&#x043F; &#x041F;</span> <span title="U+0440">&#x0440; &#x0420;</span> <span title="U+0441">&#x0441; &#x0421;</span> <span title="U+0442">&#x0442; &#x0422;</span> <span title="U+0443">&#x0443; &#x0423;</span> <span title="U+0444">&#x0444; &#x0424;</span> <span title="U+0445">&#x0445; &#x0425;</span> <span title="U+0446">&#x0446; &#x0426;</span> <span title="U+0447">&#x0447; &#x0427;</span> <span title="U+0448">&#x0448; &#x0428;</span> <span title="U+0449">&#x0449; &#x0429;</span> <span title="U+044A">&#x044A; &#x042A;</span> <span title="U+044B">&#x044B; &#x042B;</span> <span title="U+044C">&#x044C; &#x042C;</span> <span title="U+044D">&#x044D; &#x042D;</span> <span title="U+044E">&#x044E; &#x042E;</span> <span title="U+044F">&#x044F; &#x042F;</span> <span title="U+0450">&#x0450; &#x0400;</span> <span title="U+0451">&#x0451; &#x0401;</span> <span title="U+0452">&#x0452; &#x0402;</span> <span title="U+0453">&#x0453; &#x0403;</span> <span title="U+0454">&#x0454; &#x0404;</span> <span title="U+0455">&#x0455; &#x0405;</span> <span title="U+0456">&#x0456; &#x0406;</span> <span title="U+0457">&#x0457; &#x0407;</span> <span title="U+0458">&#x0458; &#x0408;</span> <span title="U+0459">&#x0459; &#x0409;</span> <span title="U+045A">&#x045A; &#x040A;</span> <span title="U+045B">&#x045B; &#x040B;</span> <span title="U+045C">&#x045C; &#x040C;</span> <span title="U+045D">&#x045D; &#x040D;</span> <span title="U+045E">&#x045E; &#x040E;</span> <span title="U+045F">&#x045F; &#x040F;</span> <span title="U+0461">&#x0461; &#x0460;</span> <span title="U+0463">&#x0463; &#x0462;</span> <span title="U+0465">&#x0465; &#x0464;</span> <span title="U+0467">&#x0467; &#x0466;</span> <span title="U+0469">&#x0469; &#x0468;</span> <span title="U+046B">&#x046B; &#x046A;</span> <span title="U+046D">&#x046D; &#x046C;</span> <span title="U+046F">&#x046F; &#x046E;</span> <span title="U+0471">&#x0471; &#x0470;</span> <span title="U+0473">&#x0473; &#x0472;</span> <span title="U+0475">&#x0475; &#x0474;</span> <span title="U+0477">&#x0477; &#x0476;</span> <span title="U+0479">&#x0479; &#x0478;</span> <span title="U+047B">&#x047B; &#x047A;</span> <span title="U+047D">&#x047D; &#x047C;</span> <span title="U+047F">&#x047F; &#x047E;</span> <span title="U+0481">&#x0481; &#x0480;</span> <span title="U+048B">&#x048B; &#x048A;</span> <span title="U+048D">&#x048D; &#x048C;</span> <span title="U+048F">&#x048F; &#x048E;</span> <span title="U+0491">&#x0491; &#x0490;</span> <span title="U+0493">&#x0493; &#x0492;</span> <span title="U+0495">&#x0495; &#x0494;</span> <span title="U+0497">&#x0497; &#x0496;</span> <span title="U+0499">&#x0499; &#x0498;</span> <span title="U+049B">&#x049B; &#x049A;</span> <span title="U+049D">&#x049D; &#x049C;</span> <span title="U+049F">&#x049F; &#x049E;</span> <span title="U+04A1">&#x04A1; &#x04A0;</span> <span title="U+04A3">&#x04A3; &#x04A2;</span> <span title="U+04A5">&#x04A5; &#x04A4;</span> <span title="U+04A7">&#x04A7; &#x04A6;</span> <span title="U+04A9">&#x04A9; &#x04A8;</span> <span title="U+04AB">&#x04AB; &#x04AA;</span> <span title="U+04AD">&#x04AD; &#x04AC;</span> <span title="U+04AF">&#x04AF; &#x04AE;</span> <span title="U+04B1">&#x04B1; &#x04B0;</span> <span title="U+04B3">&#x04B3; &#x04B2;</span> <span title="U+04B5">&#x04B5; &#x04B4;</span> <span title="U+04B7">&#x04B7; &#x04B6;</span> <span title="U+04B9">&#x04B9; &#x04B8;</span> <span title="U+04BB">&#x04BB; &#x04BA;</span> <span title="U+04BD">&#x04BD; &#x04BC;</span> <span title="U+04BF">&#x04BF; &#x04BE;</span> <span title="U+04C2">&#x04C2; &#x04C1;</span> <span title="U+04C4">&#x04C4; &#x04C3;</span> <span title="U+04C6">&#x04C6; &#x04C5;</span> <span title="U+04C8">&#x04C8; &#x04C7;</span> <span title="U+04CA">&#x04CA; &#x04C9;</span> <span title="U+04CC">&#x04CC; &#x04CB;</span> <span title="U+04CE">&#x04CE; &#x04CD;</span> <span title="U+04CF">&#x04CF; &#x04C0;</span> <span title="U+04D1">&#x04D1; &#x04D0;</span> <span title="U+04D3">&#x04D3; &#x04D2;</span> <span title="U+04D5">&#x04D5; &#x04D4;</span> <span title="U+04D7">&#x04D7; &#x04D6;</span> <span title="U+04D9">&#x04D9; &#x04D8;</span> <span title="U+04DB">&#x04DB; &#x04DA;</span> <span title="U+04DD">&#x04DD; &#x04DC;</span> <span title="U+04DF">&#x04DF; &#x04DE;</span> <span title="U+04E1">&#x04E1; &#x04E0;</span> <span title="U+04E3">&#x04E3; &#x04E2;</span> <span title="U+04E5">&#x04E5; &#x04E4;</span> <span title="U+04E7">&#x04E7; &#x04E6;</span> <span title="U+04E9">&#x04E9; &#x04E8;</span> <span title="U+04EB">&#x04EB; &#x04EA;</span> <span title="U+04ED">&#x04ED; &#x04EC;</span> <span title="U+04EF">&#x04EF; &#x04EE;</span> <span title="U+04F1">&#x04F1; &#x04F0;</span> <span title="U+04F3">&#x04F3; &#x04F2;</span> <span title="U+04F5">&#x04F5; &#x04F4;</span> <span title="U+04F7">&#x04F7; &#x04F6;</span> <span title="U+04F9">&#x04F9; &#x04F8;</span> <span title="U+04FB">&#x04FB; &#x04FA;</span> <span title="U+04FD">&#x04FD; &#x04FC;</span> <span title="U+04FF">&#x04FF; &#x04FE;</span> </div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x0482; &#x0483; &#x0484; &#x0485; &#x0486; &#x0487; &#x0488; &#x0489;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-019.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-019.html
new file mode 100644
index 0000000000..ceac92f14e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-019.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic, lowercase</title>
+<meta name="assert" content="For the Cyrillic Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-019-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0400">&#x0400; &#x0450;</span> <span title="U+0401">&#x0401; &#x0451;</span> <span title="U+0402">&#x0402; &#x0452;</span> <span title="U+0403">&#x0403; &#x0453;</span> <span title="U+0404">&#x0404; &#x0454;</span> <span title="U+0405">&#x0405; &#x0455;</span> <span title="U+0406">&#x0406; &#x0456;</span> <span title="U+0407">&#x0407; &#x0457;</span> <span title="U+0408">&#x0408; &#x0458;</span> <span title="U+0409">&#x0409; &#x0459;</span> <span title="U+040A">&#x040A; &#x045A;</span> <span title="U+040B">&#x040B; &#x045B;</span> <span title="U+040C">&#x040C; &#x045C;</span> <span title="U+040D">&#x040D; &#x045D;</span> <span title="U+040E">&#x040E; &#x045E;</span> <span title="U+040F">&#x040F; &#x045F;</span> <span title="U+0410">&#x0410; &#x0430;</span> <span title="U+0411">&#x0411; &#x0431;</span> <span title="U+0412">&#x0412; &#x0432;</span> <span title="U+0413">&#x0413; &#x0433;</span> <span title="U+0414">&#x0414; &#x0434;</span> <span title="U+0415">&#x0415; &#x0435;</span> <span title="U+0416">&#x0416; &#x0436;</span> <span title="U+0417">&#x0417; &#x0437;</span> <span title="U+0418">&#x0418; &#x0438;</span> <span title="U+0419">&#x0419; &#x0439;</span> <span title="U+041A">&#x041A; &#x043A;</span> <span title="U+041B">&#x041B; &#x043B;</span> <span title="U+041C">&#x041C; &#x043C;</span> <span title="U+041D">&#x041D; &#x043D;</span> <span title="U+041E">&#x041E; &#x043E;</span> <span title="U+041F">&#x041F; &#x043F;</span> <span title="U+0420">&#x0420; &#x0440;</span> <span title="U+0421">&#x0421; &#x0441;</span> <span title="U+0422">&#x0422; &#x0442;</span> <span title="U+0423">&#x0423; &#x0443;</span> <span title="U+0424">&#x0424; &#x0444;</span> <span title="U+0425">&#x0425; &#x0445;</span> <span title="U+0426">&#x0426; &#x0446;</span> <span title="U+0427">&#x0427; &#x0447;</span> <span title="U+0428">&#x0428; &#x0448;</span> <span title="U+0429">&#x0429; &#x0449;</span> <span title="U+042A">&#x042A; &#x044A;</span> <span title="U+042B">&#x042B; &#x044B;</span> <span title="U+042C">&#x042C; &#x044C;</span> <span title="U+042D">&#x042D; &#x044D;</span> <span title="U+042E">&#x042E; &#x044E;</span> <span title="U+042F">&#x042F; &#x044F;</span> <span title="U+0460">&#x0460; &#x0461;</span> <span title="U+0462">&#x0462; &#x0463;</span> <span title="U+0464">&#x0464; &#x0465;</span> <span title="U+0466">&#x0466; &#x0467;</span> <span title="U+0468">&#x0468; &#x0469;</span> <span title="U+046A">&#x046A; &#x046B;</span> <span title="U+046C">&#x046C; &#x046D;</span> <span title="U+046E">&#x046E; &#x046F;</span> <span title="U+0470">&#x0470; &#x0471;</span> <span title="U+0472">&#x0472; &#x0473;</span> <span title="U+0474">&#x0474; &#x0475;</span> <span title="U+0476">&#x0476; &#x0477;</span> <span title="U+0478">&#x0478; &#x0479;</span> <span title="U+047A">&#x047A; &#x047B;</span> <span title="U+047C">&#x047C; &#x047D;</span> <span title="U+047E">&#x047E; &#x047F;</span> <span title="U+0480">&#x0480; &#x0481;</span> <span title="U+048A">&#x048A; &#x048B;</span> <span title="U+048C">&#x048C; &#x048D;</span> <span title="U+048E">&#x048E; &#x048F;</span> <span title="U+0490">&#x0490; &#x0491;</span> <span title="U+0492">&#x0492; &#x0493;</span> <span title="U+0494">&#x0494; &#x0495;</span> <span title="U+0496">&#x0496; &#x0497;</span> <span title="U+0498">&#x0498; &#x0499;</span> <span title="U+049A">&#x049A; &#x049B;</span> <span title="U+049C">&#x049C; &#x049D;</span> <span title="U+049E">&#x049E; &#x049F;</span> <span title="U+04A0">&#x04A0; &#x04A1;</span> <span title="U+04A2">&#x04A2; &#x04A3;</span> <span title="U+04A4">&#x04A4; &#x04A5;</span> <span title="U+04A6">&#x04A6; &#x04A7;</span> <span title="U+04A8">&#x04A8; &#x04A9;</span> <span title="U+04AA">&#x04AA; &#x04AB;</span> <span title="U+04AC">&#x04AC; &#x04AD;</span> <span title="U+04AE">&#x04AE; &#x04AF;</span> <span title="U+04B0">&#x04B0; &#x04B1;</span> <span title="U+04B2">&#x04B2; &#x04B3;</span> <span title="U+04B4">&#x04B4; &#x04B5;</span> <span title="U+04B6">&#x04B6; &#x04B7;</span> <span title="U+04B8">&#x04B8; &#x04B9;</span> <span title="U+04BA">&#x04BA; &#x04BB;</span> <span title="U+04BC">&#x04BC; &#x04BD;</span> <span title="U+04BE">&#x04BE; &#x04BF;</span> <span title="U+04C0">&#x04C0; &#x04CF;</span> <span title="U+04C1">&#x04C1; &#x04C2;</span> <span title="U+04C3">&#x04C3; &#x04C4;</span> <span title="U+04C5">&#x04C5; &#x04C6;</span> <span title="U+04C7">&#x04C7; &#x04C8;</span> <span title="U+04C9">&#x04C9; &#x04CA;</span> <span title="U+04CB">&#x04CB; &#x04CC;</span> <span title="U+04CD">&#x04CD; &#x04CE;</span> <span title="U+04D0">&#x04D0; &#x04D1;</span> <span title="U+04D2">&#x04D2; &#x04D3;</span> <span title="U+04D4">&#x04D4; &#x04D5;</span> <span title="U+04D6">&#x04D6; &#x04D7;</span> <span title="U+04D8">&#x04D8; &#x04D9;</span> <span title="U+04DA">&#x04DA; &#x04DB;</span> <span title="U+04DC">&#x04DC; &#x04DD;</span> <span title="U+04DE">&#x04DE; &#x04DF;</span> <span title="U+04E0">&#x04E0; &#x04E1;</span> <span title="U+04E2">&#x04E2; &#x04E3;</span> <span title="U+04E4">&#x04E4; &#x04E5;</span> <span title="U+04E6">&#x04E6; &#x04E7;</span> <span title="U+04E8">&#x04E8; &#x04E9;</span> <span title="U+04EA">&#x04EA; &#x04EB;</span> <span title="U+04EC">&#x04EC; &#x04ED;</span> <span title="U+04EE">&#x04EE; &#x04EF;</span> <span title="U+04F0">&#x04F0; &#x04F1;</span> <span title="U+04F2">&#x04F2; &#x04F3;</span> <span title="U+04F4">&#x04F4; &#x04F5;</span> <span title="U+04F6">&#x04F6; &#x04F7;</span> <span title="U+04F8">&#x04F8; &#x04F9;</span> <span title="U+04FA">&#x04FA; &#x04FB;</span> <span title="U+04FC">&#x04FC; &#x04FD;</span> <span title="U+04FE">&#x04FE; &#x04FF;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x0482; &#x0483; &#x0484; &#x0485; &#x0486; &#x0487; &#x0488; &#x0489;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-020.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-020.html
new file mode 100644
index 0000000000..8487e688b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-020.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic Supplement, uppercase</title>
+<meta name="assert" content="For the Cyrillic Supplement Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-020-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0501">&#x0501; &#x0500;</span> <span title="U+0503">&#x0503; &#x0502;</span> <span title="U+0505">&#x0505; &#x0504;</span> <span title="U+0507">&#x0507; &#x0506;</span> <span title="U+0509">&#x0509; &#x0508;</span> <span title="U+050B">&#x050B; &#x050A;</span> <span title="U+050D">&#x050D; &#x050C;</span> <span title="U+050F">&#x050F; &#x050E;</span> <span title="U+0511">&#x0511; &#x0510;</span> <span title="U+0513">&#x0513; &#x0512;</span> <span title="U+0515">&#x0515; &#x0514;</span> <span title="U+0517">&#x0517; &#x0516;</span> <span title="U+0519">&#x0519; &#x0518;</span> <span title="U+051B">&#x051B; &#x051A;</span> <span title="U+051D">&#x051D; &#x051C;</span> <span title="U+051F">&#x051F; &#x051E;</span> <span title="U+0521">&#x0521; &#x0520;</span> <span title="U+0523">&#x0523; &#x0522;</span> <span title="U+0525">&#x0525; &#x0524;</span> <span title="U+0527">&#x0527; &#x0526;</span> <span title="U+0529">&#x0529; &#x0528;</span> <span title="U+052B">&#x052B; &#x052A;</span> <span title="U+052D">&#x052D; &#x052C;</span> <span title="U+052F">&#x052F; &#x052E;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-021.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-021.html
new file mode 100644
index 0000000000..ce5125540c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-021.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic Extended, lowercase</title>
+<meta name="assert" content="For the Cyrillic Extended Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-021-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0500">&#x0500; &#x0501;</span> <span title="U+0502">&#x0502; &#x0503;</span> <span title="U+0504">&#x0504; &#x0505;</span> <span title="U+0506">&#x0506; &#x0507;</span> <span title="U+0508">&#x0508; &#x0509;</span> <span title="U+050A">&#x050A; &#x050B;</span> <span title="U+050C">&#x050C; &#x050D;</span> <span title="U+050E">&#x050E; &#x050F;</span> <span title="U+0510">&#x0510; &#x0511;</span> <span title="U+0512">&#x0512; &#x0513;</span> <span title="U+0514">&#x0514; &#x0515;</span> <span title="U+0516">&#x0516; &#x0517;</span> <span title="U+0518">&#x0518; &#x0519;</span> <span title="U+051A">&#x051A; &#x051B;</span> <span title="U+051C">&#x051C; &#x051D;</span> <span title="U+051E">&#x051E; &#x051F;</span> <span title="U+0520">&#x0520; &#x0521;</span> <span title="U+0522">&#x0522; &#x0523;</span> <span title="U+0524">&#x0524; &#x0525;</span> <span title="U+0526">&#x0526; &#x0527;</span> <span title="U+0528">&#x0528; &#x0529;</span> <span title="U+052A">&#x052A; &#x052B;</span> <span title="U+052C">&#x052C; &#x052D;</span> <span title="U+052E">&#x052E; &#x052F;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-022.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-022.html
new file mode 100644
index 0000000000..cdfd7068a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-022.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Armenian, uppercase</title>
+<meta name="assert" content="For the ArmenianUnicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-022-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansArmenian-Regular') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Noto Sans Armenian', webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0561">&#x0561; &#x0531;</span> <span title="U+0562">&#x0562; &#x0532;</span> <span title="U+0563">&#x0563; &#x0533;</span> <span title="U+0564">&#x0564; &#x0534;</span> <span title="U+0565">&#x0565; &#x0535;</span> <span title="U+0566">&#x0566; &#x0536;</span> <span title="U+0567">&#x0567; &#x0537;</span> <span title="U+0568">&#x0568; &#x0538;</span> <span title="U+0569">&#x0569; &#x0539;</span> <span title="U+056A">&#x056A; &#x053A;</span> <span title="U+056B">&#x056B; &#x053B;</span> <span title="U+056C">&#x056C; &#x053C;</span> <span title="U+056D">&#x056D; &#x053D;</span> <span title="U+056E">&#x056E; &#x053E;</span> <span title="U+056F">&#x056F; &#x053F;</span> <span title="U+0570">&#x0570; &#x0540;</span> <span title="U+0571">&#x0571; &#x0541;</span> <span title="U+0572">&#x0572; &#x0542;</span> <span title="U+0573">&#x0573; &#x0543;</span> <span title="U+0574">&#x0574; &#x0544;</span> <span title="U+0575">&#x0575; &#x0545;</span> <span title="U+0576">&#x0576; &#x0546;</span> <span title="U+0577">&#x0577; &#x0547;</span> <span title="U+0578">&#x0578; &#x0548;</span> <span title="U+0579">&#x0579; &#x0549;</span> <span title="U+057A">&#x057A; &#x054A;</span> <span title="U+057B">&#x057B; &#x054B;</span> <span title="U+057C">&#x057C; &#x054C;</span> <span title="U+057D">&#x057D; &#x054D;</span> <span title="U+057E">&#x057E; &#x054E;</span> <span title="U+057F">&#x057F; &#x054F;</span> <span title="U+0580">&#x0580; &#x0550;</span> <span title="U+0581">&#x0581; &#x0551;</span> <span title="U+0582">&#x0582; &#x0552;</span> <span title="U+0583">&#x0583; &#x0553;</span> <span title="U+0584">&#x0584; &#x0554;</span> <span title="U+0585">&#x0585; &#x0555;</span> <span title="U+0586">&#x0586; &#x0556;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0559; &#x055A; &#x055B; &#x055C; &#x055D; &#x055E; &#x055F; &#x0587; &#x0589; &#x058A; &#x058D; &#x058E; &#x058F;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-023.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-023.html
new file mode 100644
index 0000000000..f79980f39b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-023.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-D, lowercase</title>
+<meta name="assert" content="For the Latin Extended-D Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-023-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansArmenian-Regular') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Noto Sans Armenian', webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+0531">&#x0531; &#x0561;</span> <span title="U+0532">&#x0532; &#x0562;</span> <span title="U+0533">&#x0533; &#x0563;</span> <span title="U+0534">&#x0534; &#x0564;</span> <span title="U+0535">&#x0535; &#x0565;</span> <span title="U+0536">&#x0536; &#x0566;</span> <span title="U+0537">&#x0537; &#x0567;</span> <span title="U+0538">&#x0538; &#x0568;</span> <span title="U+0539">&#x0539; &#x0569;</span> <span title="U+053A">&#x053A; &#x056A;</span> <span title="U+053B">&#x053B; &#x056B;</span> <span title="U+053C">&#x053C; &#x056C;</span> <span title="U+053D">&#x053D; &#x056D;</span> <span title="U+053E">&#x053E; &#x056E;</span> <span title="U+053F">&#x053F; &#x056F;</span> <span title="U+0540">&#x0540; &#x0570;</span> <span title="U+0541">&#x0541; &#x0571;</span> <span title="U+0542">&#x0542; &#x0572;</span> <span title="U+0543">&#x0543; &#x0573;</span> <span title="U+0544">&#x0544; &#x0574;</span> <span title="U+0545">&#x0545; &#x0575;</span> <span title="U+0546">&#x0546; &#x0576;</span> <span title="U+0547">&#x0547; &#x0577;</span> <span title="U+0548">&#x0548; &#x0578;</span> <span title="U+0549">&#x0549; &#x0579;</span> <span title="U+054A">&#x054A; &#x057A;</span> <span title="U+054B">&#x054B; &#x057B;</span> <span title="U+054C">&#x054C; &#x057C;</span> <span title="U+054D">&#x054D; &#x057D;</span> <span title="U+054E">&#x054E; &#x057E;</span> <span title="U+054F">&#x054F; &#x057F;</span> <span title="U+0550">&#x0550; &#x0580;</span> <span title="U+0551">&#x0551; &#x0581;</span> <span title="U+0552">&#x0552; &#x0582;</span> <span title="U+0553">&#x0553; &#x0583;</span> <span title="U+0554">&#x0554; &#x0584;</span> <span title="U+0555">&#x0555; &#x0585;</span> <span title="U+0556">&#x0556; &#x0586;</span> </div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#x0559; &#x055A; &#x055B; &#x055C; &#x055D; &#x055E; &#x055F; &#x0587; &#x0589; &#x058A; &#x058D; &#x058E; &#x058F;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-024.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-024.html
new file mode 100644
index 0000000000..0511872c7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-024.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Number Forms, uppercase</title>
+<meta name="assert" content="For the Number Forms Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-024-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2170">&#x2170; &#x2160;</span> <span title="U+2171">&#x2171; &#x2161;</span> <span title="U+2172">&#x2172; &#x2162;</span> <span title="U+2173">&#x2173; &#x2163;</span> <span title="U+2174">&#x2174; &#x2164;</span> <span title="U+2175">&#x2175; &#x2165;</span> <span title="U+2176">&#x2176; &#x2166;</span> <span title="U+2177">&#x2177; &#x2167;</span> <span title="U+2178">&#x2178; &#x2168;</span> <span title="U+2179">&#x2179; &#x2169;</span> <span title="U+217A">&#x217A; &#x216A;</span> <span title="U+217B">&#x217B; &#x216B;</span> <span title="U+217C">&#x217C; &#x216C;</span> <span title="U+217D">&#x217D; &#x216D;</span> <span title="U+217E">&#x217E; &#x216E;</span> <span title="U+217F">&#x217F; &#x216F;</span> <span title="U+2184">&#x2184; &#x2183;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x2150; &#x2151; &#x2152; &#x2153; &#x2154; &#x2155; &#x2156; &#x2157; &#x2158; &#x2159; &#x215A; &#x215B; &#x215C; &#x215D; &#x215E; &#x215F; &#x2180; &#x2181; &#x2182; &#x2185; &#x2186; &#x2187; &#x2188; &#x2189; &#x2150; &#x2151; &#x2152; &#x2153; &#x2154; &#x2155; &#x2156; &#x2157; &#x2158; &#x2159; &#x215A; &#x215B; &#x215C; &#x215D; &#x215E; &#x215F; &#x2180; &#x2181; &#x2182; &#x2185; &#x2186; &#x2187; &#x2188; &#x2189;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-025.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-025.html
new file mode 100644
index 0000000000..ce906c08fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-025.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Number Forms, lowercase</title>
+<meta name="assert" content="For the Number Forms Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-025-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2160">&#x2160; &#x2170;</span> <span title="U+2161">&#x2161; &#x2171;</span> <span title="U+2162">&#x2162; &#x2172;</span> <span title="U+2163">&#x2163; &#x2173;</span> <span title="U+2164">&#x2164; &#x2174;</span> <span title="U+2165">&#x2165; &#x2175;</span> <span title="U+2166">&#x2166; &#x2176;</span> <span title="U+2167">&#x2167; &#x2177;</span> <span title="U+2168">&#x2168; &#x2178;</span> <span title="U+2169">&#x2169; &#x2179;</span> <span title="U+216A">&#x216A; &#x217A;</span> <span title="U+216B">&#x216B; &#x217B;</span> <span title="U+216C">&#x216C; &#x217C;</span> <span title="U+216D">&#x216D; &#x217D;</span> <span title="U+216E">&#x216E; &#x217E;</span> <span title="U+216F">&#x216F; &#x217F;</span> <span title="U+2183">&#x2183; &#x2184;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x2150; &#x2151; &#x2152; &#x2153; &#x2154; &#x2155; &#x2156; &#x2157; &#x2158; &#x2159; &#x215A; &#x215B; &#x215C; &#x215D; &#x215E; &#x215F; &#x2180; &#x2181; &#x2182; &#x2185; &#x2186; &#x2187; &#x2188; &#x2189; &#x2150; &#x2151; &#x2152; &#x2153; &#x2154; &#x2155; &#x2156; &#x2157; &#x2158; &#x2159; &#x215A; &#x215B; &#x215C; &#x215D; &#x215E; &#x215F; &#x2180; &#x2181; &#x2182; &#x2185; &#x2186; &#x2187; &#x2188; &#x2189;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-026.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-026.html
new file mode 100644
index 0000000000..7694acb7a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-026.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Enclosed Alphanumerics, uppercase</title>
+<meta name="assert" content="For the Enclosed Alphanumerics Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-026-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+24D0">&#x24D0; &#x24B6;</span> <span title="U+24D1">&#x24D1; &#x24B7;</span> <span title="U+24D2">&#x24D2; &#x24B8;</span> <span title="U+24D3">&#x24D3; &#x24B9;</span> <span title="U+24D4">&#x24D4; &#x24BA;</span> <span title="U+24D5">&#x24D5; &#x24BB;</span> <span title="U+24D6">&#x24D6; &#x24BC;</span> <span title="U+24D7">&#x24D7; &#x24BD;</span> <span title="U+24D8">&#x24D8; &#x24BE;</span> <span title="U+24D9">&#x24D9; &#x24BF;</span> <span title="U+24DA">&#x24DA; &#x24C0;</span> <span title="U+24DB">&#x24DB; &#x24C1;</span> <span title="U+24DC">&#x24DC; &#x24C2;</span> <span title="U+24DD">&#x24DD; &#x24C3;</span> <span title="U+24DE">&#x24DE; &#x24C4;</span> <span title="U+24DF">&#x24DF; &#x24C5;</span> <span title="U+24E0">&#x24E0; &#x24C6;</span> <span title="U+24E1">&#x24E1; &#x24C7;</span> <span title="U+24E2">&#x24E2; &#x24C8;</span> <span title="U+24E3">&#x24E3; &#x24C9;</span> <span title="U+24E4">&#x24E4; &#x24CA;</span> <span title="U+24E5">&#x24E5; &#x24CB;</span> <span title="U+24E6">&#x24E6; &#x24CC;</span> <span title="U+24E7">&#x24E7; &#x24CD;</span> <span title="U+24E8">&#x24E8; &#x24CE;</span> <span title="U+24E9">&#x24E9; &#x24CF;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x2460; &#x2461; &#x2462; &#x2463; &#x2464; &#x2465; &#x2466; &#x2467; &#x2468; &#x2469; &#x246A; &#x246B; &#x246C; &#x246D; &#x246E; &#x246F; &#x2470; &#x2471; &#x2472; &#x2473; &#x2474; &#x2475; &#x2476; &#x2477; &#x2478; &#x2479; &#x247A; &#x247B; &#x247C; &#x247D; &#x247E; &#x247F; &#x2480; &#x2481; &#x2482; &#x2483; &#x2484; &#x2485; &#x2486; &#x2487; &#x2488; &#x2489; &#x248A; &#x248B; &#x248C; &#x248D; &#x248E; &#x248F; &#x2490; &#x2491; &#x2492; &#x2493; &#x2494; &#x2495; &#x2496; &#x2497; &#x2498; &#x2499; &#x249A; &#x249B; &#x249C; &#x249D; &#x249E; &#x249F; &#x24A0; &#x24A1; &#x24A2; &#x24A3; &#x24A4; &#x24A5; &#x24A6; &#x24A7; &#x24A8; &#x24A9; &#x24AA; &#x24AB; &#x24AC; &#x24AD; &#x24AE; &#x24AF; &#x24B0; &#x24B1; &#x24B2; &#x24B3; &#x24B4; &#x24B5; &#x24EA; &#x24EB; &#x24EC; &#x24ED; &#x24EE; &#x24EF; &#x24F0; &#x24F1; &#x24F2; &#x24F3; &#x24F4; &#x24F5; &#x24F6; &#x24F7; &#x24F8; &#x24F9; &#x24FA; &#x24FB; &#x24FC; &#x24FD; &#x24FE; &#x24FF;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-027.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-027.html
new file mode 100644
index 0000000000..3f892c502b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-027.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Enclosed Alphanumerics, lowercase</title>
+<meta name="assert" content="For the Enclosed Alphanumerics Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-027-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+24B6">&#x24B6; &#x24D0;</span> <span title="U+24B7">&#x24B7; &#x24D1;</span> <span title="U+24B8">&#x24B8; &#x24D2;</span> <span title="U+24B9">&#x24B9; &#x24D3;</span> <span title="U+24BA">&#x24BA; &#x24D4;</span> <span title="U+24BB">&#x24BB; &#x24D5;</span> <span title="U+24BC">&#x24BC; &#x24D6;</span> <span title="U+24BD">&#x24BD; &#x24D7;</span> <span title="U+24BE">&#x24BE; &#x24D8;</span> <span title="U+24BF">&#x24BF; &#x24D9;</span> <span title="U+24C0">&#x24C0; &#x24DA;</span> <span title="U+24C1">&#x24C1; &#x24DB;</span> <span title="U+24C2">&#x24C2; &#x24DC;</span> <span title="U+24C3">&#x24C3; &#x24DD;</span> <span title="U+24C4">&#x24C4; &#x24DE;</span> <span title="U+24C5">&#x24C5; &#x24DF;</span> <span title="U+24C6">&#x24C6; &#x24E0;</span> <span title="U+24C7">&#x24C7; &#x24E1;</span> <span title="U+24C8">&#x24C8; &#x24E2;</span> <span title="U+24C9">&#x24C9; &#x24E3;</span> <span title="U+24CA">&#x24CA; &#x24E4;</span> <span title="U+24CB">&#x24CB; &#x24E5;</span> <span title="U+24CC">&#x24CC; &#x24E6;</span> <span title="U+24CD">&#x24CD; &#x24E7;</span> <span title="U+24CE">&#x24CE; &#x24E8;</span> <span title="U+24CF">&#x24CF; &#x24E9;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x2460; &#x2461; &#x2462; &#x2463; &#x2464; &#x2465; &#x2466; &#x2467; &#x2468; &#x2469; &#x246A; &#x246B; &#x246C; &#x246D; &#x246E; &#x246F; &#x2470; &#x2471; &#x2472; &#x2473; &#x2474; &#x2475; &#x2476; &#x2477; &#x2478; &#x2479; &#x247A; &#x247B; &#x247C; &#x247D; &#x247E; &#x247F; &#x2480; &#x2481; &#x2482; &#x2483; &#x2484; &#x2485; &#x2486; &#x2487; &#x2488; &#x2489; &#x248A; &#x248B; &#x248C; &#x248D; &#x248E; &#x248F; &#x2490; &#x2491; &#x2492; &#x2493; &#x2494; &#x2495; &#x2496; &#x2497; &#x2498; &#x2499; &#x249A; &#x249B; &#x249C; &#x249D; &#x249E; &#x249F; &#x24A0; &#x24A1; &#x24A2; &#x24A3; &#x24A4; &#x24A5; &#x24A6; &#x24A7; &#x24A8; &#x24A9; &#x24AA; &#x24AB; &#x24AC; &#x24AD; &#x24AE; &#x24AF; &#x24B0; &#x24B1; &#x24B2; &#x24B3; &#x24B4; &#x24B5; &#x24EA; &#x24EB; &#x24EC; &#x24ED; &#x24EE; &#x24EF; &#x24F0; &#x24F1; &#x24F2; &#x24F3; &#x24F4; &#x24F5; &#x24F6; &#x24F7; &#x24F8; &#x24F9; &#x24FA; &#x24FB; &#x24FC; &#x24FD; &#x24FE; &#x24FF;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-028.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-028.html
new file mode 100644
index 0000000000..41b7711b26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-028.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Deseret, uppercase</title>
+<meta name="assert" content="For the Deseret Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-028-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/noto/NotoSansDeseret-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+10428">&#x10428; &#x10400;</span> <span title="U+10429">&#x10429; &#x10401;</span> <span title="U+1042A">&#x1042A; &#x10402;</span> <span title="U+1042B">&#x1042B; &#x10403;</span> <span title="U+1042C">&#x1042C; &#x10404;</span> <span title="U+1042D">&#x1042D; &#x10405;</span> <span title="U+1042E">&#x1042E; &#x10406;</span> <span title="U+1042F">&#x1042F; &#x10407;</span> <span title="U+10430">&#x10430; &#x10408;</span> <span title="U+10431">&#x10431; &#x10409;</span> <span title="U+10432">&#x10432; &#x1040A;</span> <span title="U+10433">&#x10433; &#x1040B;</span> <span title="U+10434">&#x10434; &#x1040C;</span> <span title="U+10435">&#x10435; &#x1040D;</span> <span title="U+10436">&#x10436; &#x1040E;</span> <span title="U+10437">&#x10437; &#x1040F;</span> <span title="U+10438">&#x10438; &#x10410;</span> <span title="U+10439">&#x10439; &#x10411;</span> <span title="U+1043A">&#x1043A; &#x10412;</span> <span title="U+1043B">&#x1043B; &#x10413;</span> <span title="U+1043C">&#x1043C; &#x10414;</span> <span title="U+1043D">&#x1043D; &#x10415;</span> <span title="U+1043E">&#x1043E; &#x10416;</span> <span title="U+1043F">&#x1043F; &#x10417;</span> <span title="U+10440">&#x10440; &#x10418;</span> <span title="U+10441">&#x10441; &#x10419;</span> <span title="U+10442">&#x10442; &#x1041A;</span> <span title="U+10443">&#x10443; &#x1041B;</span> <span title="U+10444">&#x10444; &#x1041C;</span> <span title="U+10445">&#x10445; &#x1041D;</span> <span title="U+10446">&#x10446; &#x1041E;</span> <span title="U+10447">&#x10447; &#x1041F;</span> <span title="U+10448">&#x10448; &#x10420;</span> <span title="U+10449">&#x10449; &#x10421;</span> <span title="U+1044A">&#x1044A; &#x10422;</span> <span title="U+1044B">&#x1044B; &#x10423;</span> <span title="U+1044C">&#x1044C; &#x10424;</span> <span title="U+1044D">&#x1044D; &#x10425;</span> <span title="U+1044E">&#x1044E; &#x10426;</span> <span title="U+1044F">&#x1044F; &#x10427;</span> </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-029.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-029.html
new file mode 100644
index 0000000000..a18a0c651c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-029.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Deseret, lowercase</title>
+<meta name="assert" content="For the Deseret Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-029-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/noto/NotoSansDeseret-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+10400">&#x10400; &#x10428;</span> <span title="U+10401">&#x10401; &#x10429;</span> <span title="U+10402">&#x10402; &#x1042A;</span> <span title="U+10403">&#x10403; &#x1042B;</span> <span title="U+10404">&#x10404; &#x1042C;</span> <span title="U+10405">&#x10405; &#x1042D;</span> <span title="U+10406">&#x10406; &#x1042E;</span> <span title="U+10407">&#x10407; &#x1042F;</span> <span title="U+10408">&#x10408; &#x10430;</span> <span title="U+10409">&#x10409; &#x10431;</span> <span title="U+1040A">&#x1040A; &#x10432;</span> <span title="U+1040B">&#x1040B; &#x10433;</span> <span title="U+1040C">&#x1040C; &#x10434;</span> <span title="U+1040D">&#x1040D; &#x10435;</span> <span title="U+1040E">&#x1040E; &#x10436;</span> <span title="U+1040F">&#x1040F; &#x10437;</span> <span title="U+10410">&#x10410; &#x10438;</span> <span title="U+10411">&#x10411; &#x10439;</span> <span title="U+10412">&#x10412; &#x1043A;</span> <span title="U+10413">&#x10413; &#x1043B;</span> <span title="U+10414">&#x10414; &#x1043C;</span> <span title="U+10415">&#x10415; &#x1043D;</span> <span title="U+10416">&#x10416; &#x1043E;</span> <span title="U+10417">&#x10417; &#x1043F;</span> <span title="U+10418">&#x10418; &#x10440;</span> <span title="U+10419">&#x10419; &#x10441;</span> <span title="U+1041A">&#x1041A; &#x10442;</span> <span title="U+1041B">&#x1041B; &#x10443;</span> <span title="U+1041C">&#x1041C; &#x10444;</span> <span title="U+1041D">&#x1041D; &#x10445;</span> <span title="U+1041E">&#x1041E; &#x10446;</span> <span title="U+1041F">&#x1041F; &#x10447;</span> <span title="U+10420">&#x10420; &#x10448;</span> <span title="U+10421">&#x10421; &#x10449;</span> <span title="U+10422">&#x10422; &#x1044A;</span> <span title="U+10423">&#x10423; &#x1044B;</span> <span title="U+10424">&#x10424; &#x1044C;</span> <span title="U+10425">&#x10425; &#x1044D;</span> <span title="U+10426">&#x10426; &#x1044E;</span> <span title="U+10427">&#x10427; &#x1044F;</span> </div>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-030.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-030.html
new file mode 100644
index 0000000000..635ad68294
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-030.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Georgian Supplement, uppercase</title>
+<meta name="assert" content="For the Georgian Supplement Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-030-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansGeorgian-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+2D00">&#x2D00; &#x10A0;</span> <span title="U+2D01">&#x2D01; &#x10A1;</span> <span title="U+2D02">&#x2D02; &#x10A2;</span> <span title="U+2D03">&#x2D03; &#x10A3;</span> <span title="U+2D04">&#x2D04; &#x10A4;</span> <span title="U+2D05">&#x2D05; &#x10A5;</span> <span title="U+2D06">&#x2D06; &#x10A6;</span> <span title="U+2D07">&#x2D07; &#x10A7;</span> <span title="U+2D08">&#x2D08; &#x10A8;</span> <span title="U+2D09">&#x2D09; &#x10A9;</span> <span title="U+2D0A">&#x2D0A; &#x10AA;</span> <span title="U+2D0B">&#x2D0B; &#x10AB;</span> <span title="U+2D0C">&#x2D0C; &#x10AC;</span> <span title="U+2D0D">&#x2D0D; &#x10AD;</span> <span title="U+2D0E">&#x2D0E; &#x10AE;</span> <span title="U+2D0F">&#x2D0F; &#x10AF;</span> <span title="U+2D10">&#x2D10; &#x10B0;</span> <span title="U+2D11">&#x2D11; &#x10B1;</span> <span title="U+2D12">&#x2D12; &#x10B2;</span> <span title="U+2D13">&#x2D13; &#x10B3;</span> <span title="U+2D14">&#x2D14; &#x10B4;</span> <span title="U+2D15">&#x2D15; &#x10B5;</span> <span title="U+2D16">&#x2D16; &#x10B6;</span> <span title="U+2D17">&#x2D17; &#x10B7;</span> <span title="U+2D18">&#x2D18; &#x10B8;</span> <span title="U+2D19">&#x2D19; &#x10B9;</span> <span title="U+2D1A">&#x2D1A; &#x10BA;</span> <span title="U+2D1B">&#x2D1B; &#x10BB;</span> <span title="U+2D1C">&#x2D1C; &#x10BC;</span> <span title="U+2D1D">&#x2D1D; &#x10BD;</span> <span title="U+2D1E">&#x2D1E; &#x10BE;</span> <span title="U+2D1F">&#x2D1F; &#x10BF;</span> <span title="U+2D20">&#x2D20; &#x10C0;</span> <span title="U+2D21">&#x2D21; &#x10C1;</span> <span title="U+2D22">&#x2D22; &#x10C2;</span> <span title="U+2D23">&#x2D23; &#x10C3;</span> <span title="U+2D24">&#x2D24; &#x10C4;</span> <span title="U+2D25">&#x2D25; &#x10C5;</span> <span title="U+2D27">&#x2D27; &#x10C7;</span> <span title="U+2D2D">&#x2D2D; &#x10CD;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-031.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-031.html
new file mode 100644
index 0000000000..916e978bc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-031.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Georgian, lowercase</title>
+<meta name="assert" content="For the Georgian Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-031-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansGeorgian-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+10A0">&#x10A0; &#x2D00;</span> <span title="U+10A1">&#x10A1; &#x2D01;</span> <span title="U+10A2">&#x10A2; &#x2D02;</span> <span title="U+10A3">&#x10A3; &#x2D03;</span> <span title="U+10A4">&#x10A4; &#x2D04;</span> <span title="U+10A5">&#x10A5; &#x2D05;</span> <span title="U+10A6">&#x10A6; &#x2D06;</span> <span title="U+10A7">&#x10A7; &#x2D07;</span> <span title="U+10A8">&#x10A8; &#x2D08;</span> <span title="U+10A9">&#x10A9; &#x2D09;</span> <span title="U+10AA">&#x10AA; &#x2D0A;</span> <span title="U+10AB">&#x10AB; &#x2D0B;</span> <span title="U+10AC">&#x10AC; &#x2D0C;</span> <span title="U+10AD">&#x10AD; &#x2D0D;</span> <span title="U+10AE">&#x10AE; &#x2D0E;</span> <span title="U+10AF">&#x10AF; &#x2D0F;</span> <span title="U+10B0">&#x10B0; &#x2D10;</span> <span title="U+10B1">&#x10B1; &#x2D11;</span> <span title="U+10B2">&#x10B2; &#x2D12;</span> <span title="U+10B3">&#x10B3; &#x2D13;</span> <span title="U+10B4">&#x10B4; &#x2D14;</span> <span title="U+10B5">&#x10B5; &#x2D15;</span> <span title="U+10B6">&#x10B6; &#x2D16;</span> <span title="U+10B7">&#x10B7; &#x2D17;</span> <span title="U+10B8">&#x10B8; &#x2D18;</span> <span title="U+10B9">&#x10B9; &#x2D19;</span> <span title="U+10BA">&#x10BA; &#x2D1A;</span> <span title="U+10BB">&#x10BB; &#x2D1B;</span> <span title="U+10BC">&#x10BC; &#x2D1C;</span> <span title="U+10BD">&#x10BD; &#x2D1D;</span> <span title="U+10BE">&#x10BE; &#x2D1E;</span> <span title="U+10BF">&#x10BF; &#x2D1F;</span> <span title="U+10C0">&#x10C0; &#x2D20;</span> <span title="U+10C1">&#x10C1; &#x2D21;</span> <span title="U+10C2">&#x10C2; &#x2D22;</span> <span title="U+10C3">&#x10C3; &#x2D23;</span> <span title="U+10C4">&#x10C4; &#x2D24;</span> <span title="U+10C5">&#x10C5; &#x2D25;</span> <span title="U+10C7">&#x10C7; &#x2D27;</span> <span title="U+10CD">&#x10CD; &#x2D2D;</span> </div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#x10D0; &#x10D1; &#x10D2; &#x10D3; &#x10D4; &#x10D5; &#x10D6; &#x10D7; &#x10D8; &#x10D9; &#x10DA; &#x10DB; &#x10DC; &#x10DD; &#x10DE; &#x10DF; &#x10E0; &#x10E1; &#x10E2; &#x10E3; &#x10E4; &#x10E5; &#x10E6; &#x10E7; &#x10E8; &#x10E9; &#x10EA; &#x10EB; &#x10EC; &#x10ED; &#x10EE; &#x10EF; &#x10F0; &#x10F1; &#x10F2; &#x10F3; &#x10F4; &#x10F5; &#x10F6; &#x10F7; &#x10F8; &#x10F9; &#x10FA; &#x10FB; &#x10FC; &#x10FD; &#x10FE; &#x10FF;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-032.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-032.html
new file mode 100644
index 0000000000..df784b0655
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-032.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: German sharp S, uppercase</title>
+<meta name="assert" content="text-transform: uppercase will uppercase the German sharp S as described in Unicode's SpecialCasing.txt .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-032-ref.html">
+<style type='text/css'>
+.test, .ref { font-size: 125%; line-height: 1.5em; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters below match.</p>
+<div class="test" lang="de"><span>&#x00DF; SS</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-033.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-033.html
new file mode 100644
index 0000000000..a952866b1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-033.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin ligatures, uppercase</title>
+<meta name="assert" content="text-transform: uppercase will uppercase Latin ligatures as described in Unicode's SpecialCasing.txt .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-033-ref.html">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>&#xFB00; FF</span> <span>&#xFB01; FI</span> <span>&#xFB02; FL</span> <span>&#xFB03; FFI</span> <span>&#xFB04; FFL</span> <span>&#xFB05; ST</span> <span>&#xFB06; ST</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-034.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-034.html
new file mode 100644
index 0000000000..dc32f3b4c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-034.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Armenian ligatures, uppercase</title>
+<meta name="assert" content="text-transform: uppercase will uppercase Armenian ligatures as described in Unicode's SpecialCasing.txt .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-034-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/NotoSansArmenian-Regular') format('truetype');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Noto Sans Armenian', webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>&#x0587; &#x0535;&#x0552;</span> <span>&#xFB13; &#x0544;&#x0546;</span> <span>&#xFB14; &#x0544;&#x0535;</span> <span>&#xFB15; &#x0544;&#x053B;</span> <span>&#xFB16; &#x054E;&#x0546;</span> <span>&#xFB17; &#x0544;&#x053D;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-035.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-035.html
new file mode 100644
index 0000000000..f436582d1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-035.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek specials, uppercase</title>
+<meta name="assert" content="text-transform: uppercase will uppercase Greek specials as described in Unicode's SpecialCasing.txt .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-035-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span>&#x0149; &#x02BC;N</span> <span>&#x0390; &#x03AA;&#x0301;</span> <span>&#x03B0; &#x03AB;&#x0301;</span> <span>&#x01F0; J&#x030C;</span> <span>&#x1E96; H&#x0331;</span> <span>&#x1E97; T&#x0308;</span> <span>&#x1E98; W&#x030A;</span> <span>&#x1E99; Y&#x030A;</span> <span>&#x1E9A; A&#x02BE;</span> <span>&#x1F50; &#x03A5;&#x0313;</span> <span>&#x1F52; &#x03A5;&#x0313;&#x0300;</span> <span>&#x1F54; &#x03A5;&#x0313;&#x0301;</span> <span>&#x1F56; &#x03A5;&#x0313;&#x0342;</span> <span>&#x1FB6; &#x0391;&#x0342;</span> <span>&#x1FC6; &#x0397;&#x0342;</span> <span>&#x1FD2; &#x03AA;&#x0300;</span> <span>&#x1FD3; &#x03AA;&#x0301;</span> <span>&#x1FD6; &#x0399;&#x0342;</span> <span>&#x1FD7; &#x03AA;&#x0342;</span> <span>&#x1FE2; &#x03AB;&#x0300;</span> <span>&#x1FE3; &#x03AB;&#x0301;</span> <span>&#x1FE4; &#x03A1;&#x0313;</span> <span>&#x1FE6; &#x03A5;&#x0342;</span> <span>&#x1FE7; &#x03AB;&#x0342;</span> <span>&#x1FF6; &#x03A9;&#x0342;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-038.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-038.html
new file mode 100644
index 0000000000..1da4fa3a0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-038.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Greek final sigma, lowercase</title>
+<meta name="assert" content="text-transform: lowercase will lowercase Greek final sigma at the end of a word as described in Unicode's SpecialCasing.txt .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-038-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 36px; font-family: 'Gentium Plus', 'Noto Serif', 'Noto Sans', webfont, sans-serif; border: 1px solid orange; margin: 10px; width: 200px;  padding: 5px; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the orange boxes are identical.</p>
+<div class="test">ΟΔΥΣΣΕΥΣ</div>
+<div class="ref">οδυσσευς</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-039.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-039.html
new file mode 100644
index 0000000000..005d5cb314
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-039.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Lithuanian, lowercase</title>
+<meta name="assert" content="text-transform: lowercase will lowercase Lithuanian as described in Unicode's SpecialCasing.txt .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-039-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="lt">
+  <span>&#xCC; &#x69;&#x307;&#x300;</span> <span>&#xCD; &#x69;&#x307;&#x301;</span> <span>&#x128; &#x69;&#x307;&#x303;</span>
+  <span>&#x49;&#x300; &#x69;&#x307;&#x300;</span> <span>&#x4A;&#x301; &#x6A;&#x307;&#x301;</span> <span>&#x12E;&#x303; &#x12F;&#x307;&#x303;</span>
+</div>
+<!--Notes:
+The language of the test box is set to Lithuanian (lt)
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-040.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-040.html
new file mode 100644
index 0000000000..c458b53eb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-040.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Turkish, uppercase</title>
+<meta name="assert" content="text-transform: uppercase will uppercase Turkish as described in Unicode's SpecialCasing.txt when the language is specified as Turkish.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-040-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="tr"><span>&#x69; &#x130;</span> <span>&#x131; &#x49;</span></div>
+<!--Notes:
+The language of the test box is set to Turkish (tr).
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-041.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-041.html
new file mode 100644
index 0000000000..b6e3047724
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-041.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Turkish, lowercase</title>
+<meta name="assert" content="text-transform: lowercase will lowercase Turkish as described in Unicode's SpecialCasing.txt when the language is specified as Turkish.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-041-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="tr"><span>&#x130; &#x69;</span> <span>&#x49;&#x307; &#x69;</span> <span>&#x49; &#x131;</span></div>
+<!--Notes:
+The language of the test box is set to Turkish (tr).
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-042.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-042.html
new file mode 100644
index 0000000000..15a777d78d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-042.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Azeri, uppercase</title>
+<meta name="assert" content="text-transform: uppercase will uppercase Azeri as described in Unicode's SpecialCasing.txt when the language is specified as Azeri.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-042-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="az"><span>&#x69; &#x130;</span> <span>&#x131; &#x49;</span></div>
+<!--Notes:
+The language of the test box is set to Azeri (az).
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-043.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-043.html
new file mode 100644
index 0000000000..cc943e5669
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-043.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Azeri, lowercase</title>
+<meta name="assert" content="text-transform: lowercase will lowercase Azeri as described in Unicode's SpecialCasing.txt when the language is specified as Azeri.">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-043-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="az"><span>&#x130; &#x69;</span> <span>&#x49;&#x307; &#x69;</span> <span>&#x49; &#x131;</span></div>
+<!--Notes:
+The language of the test box is set to Azeri (az).
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-044.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-044.html
new file mode 100644
index 0000000000..43e678c24b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-044.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Lithuanian, uppercase</title>
+<meta name="assert" content="text-transform: uppercase will uppercase Lithuanian as described in Unicode's SpecialCasing.txt .">
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-044-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test" lang="lt">
+  <span>&#x69;&#x307;&#x300; &#x49;&#x300;</span>
+  <span>&#x69;&#x307;&#x301; &#x49;&#x301;</span>
+  <span>&#x69;&#x307;&#x303; &#x49;&#x303;</span>
+  <span>&#x69;&#x307; &#x49;</span>
+  <span>&#x6A;&#x307; &#x4A;</span>
+  <span>&#x12F;&#x307; &#x12E;</span>
+  <span>x&#x307; X&#x307;</span> <!-- check that dot isn't deleted in other contexts -->
+</div>
+<!--Notes:
+The language of the test box is set to Lithuanian (lt)
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-101.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-101.html
new file mode 100644
index 0000000000..1b527467a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-101.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-D, uppercase</title>
+<meta name="assert" content="For the Latin Extended-D Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-101-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+A723">&#xA723; &#xA722;</span> <span title="U+A725">&#xA725; &#xA724;</span> <span title="U+A727">&#xA727; &#xA726;</span> <span title="U+A729">&#xA729; &#xA728;</span> <span title="U+A72B">&#xA72B; &#xA72A;</span> <span title="U+A72D">&#xA72D; &#xA72C;</span> <span title="U+A72F">&#xA72F; &#xA72E;</span> <span title="U+A733">&#xA733; &#xA732;</span> <span title="U+A735">&#xA735; &#xA734;</span> <span title="U+A737">&#xA737; &#xA736;</span> <span title="U+A739">&#xA739; &#xA738;</span> <span title="U+A73B">&#xA73B; &#xA73A;</span> <span title="U+A73D">&#xA73D; &#xA73C;</span> <span title="U+A73F">&#xA73F; &#xA73E;</span> <span title="U+A741">&#xA741; &#xA740;</span> <span title="U+A743">&#xA743; &#xA742;</span> <span title="U+A745">&#xA745; &#xA744;</span> <span title="U+A747">&#xA747; &#xA746;</span> <span title="U+A749">&#xA749; &#xA748;</span> <span title="U+A74B">&#xA74B; &#xA74A;</span> <span title="U+A74D">&#xA74D; &#xA74C;</span> <span title="U+A74F">&#xA74F; &#xA74E;</span> <span title="U+A751">&#xA751; &#xA750;</span> <span title="U+A753">&#xA753; &#xA752;</span> <span title="U+A755">&#xA755; &#xA754;</span> <span title="U+A757">&#xA757; &#xA756;</span> <span title="U+A759">&#xA759; &#xA758;</span> <span title="U+A75B">&#xA75B; &#xA75A;</span> <span title="U+A75D">&#xA75D; &#xA75C;</span> <span title="U+A75F">&#xA75F; &#xA75E;</span> <span title="U+A761">&#xA761; &#xA760;</span> <span title="U+A763">&#xA763; &#xA762;</span> <span title="U+A765">&#xA765; &#xA764;</span> <span title="U+A767">&#xA767; &#xA766;</span> <span title="U+A769">&#xA769; &#xA768;</span> <span title="U+A76B">&#xA76B; &#xA76A;</span> <span title="U+A76D">&#xA76D; &#xA76C;</span> <span title="U+A76F">&#xA76F; &#xA76E;</span> <span title="U+A77A">&#xA77A; &#xA779;</span> <span title="U+A77C">&#xA77C; &#xA77B;</span> <span title="U+A77F">&#xA77F; &#xA77E;</span> <span title="U+A781">&#xA781; &#xA780;</span> <span title="U+A783">&#xA783; &#xA782;</span> <span title="U+A785">&#xA785; &#xA784;</span> <span title="U+A787">&#xA787; &#xA786;</span> <span title="U+A78C">&#xA78C; &#xA78B;</span> <span title="U+A791">&#xA791; &#xA790;</span> <span title="U+A793">&#xA793; &#xA792;</span> <span title="U+A797">&#xA797; &#xA796;</span> <span title="U+A799">&#xA799; &#xA798;</span> <span title="U+A79B">&#xA79B; &#xA79A;</span> <span title="U+A79D">&#xA79D; &#xA79C;</span> <span title="U+A79F">&#xA79F; &#xA79E;</span> <span title="U+A7A1">&#xA7A1; &#xA7A0;</span> <span title="U+A7A3">&#xA7A3; &#xA7A2;</span> <span title="U+A7A5">&#xA7A5; &#xA7A4;</span> <span title="U+A7A7">&#xA7A7; &#xA7A6;</span> <span title="U+A7A9">&#xA7A9; &#xA7A8;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#xA720; &#xA721; &#xA730; &#xA731; &#xA770; &#xA771; &#xA772; &#xA773; &#xA774; &#xA775; &#xA776; &#xA777; &#xA778; &#xA788; &#xA789; &#xA78A; &#xA78E; &#xA794; &#xA795; &#xA7F7; &#xA7F8; &#xA7F9; &#xA7FA; &#xA7FB; &#xA7FC; &#xA7FD; &#xA7FE; &#xA7FF;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-102.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-102.html
new file mode 100644
index 0000000000..8c790bcf65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-102.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Latin Extended-D, lowercase</title>
+<meta name="assert" content="For the Latin Extended-D Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-102-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/DoulosSIL-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: webfont, serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+A722">&#xA722; &#xA723;</span> <span title="U+A724">&#xA724; &#xA725;</span> <span title="U+A726">&#xA726; &#xA727;</span> <span title="U+A728">&#xA728; &#xA729;</span> <span title="U+A72A">&#xA72A; &#xA72B;</span> <span title="U+A72C">&#xA72C; &#xA72D;</span> <span title="U+A72E">&#xA72E; &#xA72F;</span> <span title="U+A732">&#xA732; &#xA733;</span> <span title="U+A734">&#xA734; &#xA735;</span> <span title="U+A736">&#xA736; &#xA737;</span> <span title="U+A738">&#xA738; &#xA739;</span> <span title="U+A73A">&#xA73A; &#xA73B;</span> <span title="U+A73C">&#xA73C; &#xA73D;</span> <span title="U+A73E">&#xA73E; &#xA73F;</span> <span title="U+A740">&#xA740; &#xA741;</span> <span title="U+A742">&#xA742; &#xA743;</span> <span title="U+A744">&#xA744; &#xA745;</span> <span title="U+A746">&#xA746; &#xA747;</span> <span title="U+A748">&#xA748; &#xA749;</span> <span title="U+A74A">&#xA74A; &#xA74B;</span> <span title="U+A74C">&#xA74C; &#xA74D;</span> <span title="U+A74E">&#xA74E; &#xA74F;</span> <span title="U+A750">&#xA750; &#xA751;</span> <span title="U+A752">&#xA752; &#xA753;</span> <span title="U+A754">&#xA754; &#xA755;</span> <span title="U+A756">&#xA756; &#xA757;</span> <span title="U+A758">&#xA758; &#xA759;</span> <span title="U+A75A">&#xA75A; &#xA75B;</span> <span title="U+A75C">&#xA75C; &#xA75D;</span> <span title="U+A75E">&#xA75E; &#xA75F;</span> <span title="U+A760">&#xA760; &#xA761;</span> <span title="U+A762">&#xA762; &#xA763;</span> <span title="U+A764">&#xA764; &#xA765;</span> <span title="U+A766">&#xA766; &#xA767;</span> <span title="U+A768">&#xA768; &#xA769;</span> <span title="U+A76A">&#xA76A; &#xA76B;</span> <span title="U+A76C">&#xA76C; &#xA76D;</span> <span title="U+A76E">&#xA76E; &#xA76F;</span> <span title="U+A779">&#xA779; &#xA77A;</span> <span title="U+A77B">&#xA77B; &#xA77C;</span> <span title="U+A77D">&#xA77D; &#x1D79;</span> <span title="U+A77E">&#xA77E; &#xA77F;</span> <span title="U+A780">&#xA780; &#xA781;</span> <span title="U+A782">&#xA782; &#xA783;</span> <span title="U+A784">&#xA784; &#xA785;</span> <span title="U+A786">&#xA786; &#xA787;</span> <span title="U+A78B">&#xA78B; &#xA78C;</span> <span title="U+A78D">&#xA78D; &#x0265;</span> <span title="U+A790">&#xA790; &#xA791;</span> <span title="U+A792">&#xA792; &#xA793;</span> <span title="U+A796">&#xA796; &#xA797;</span> <span title="U+A798">&#xA798; &#xA799;</span> <span title="U+A79A">&#xA79A; &#xA79B;</span> <span title="U+A79C">&#xA79C; &#xA79D;</span> <span title="U+A79E">&#xA79E; &#xA79F;</span> <span title="U+A7A0">&#xA7A0; &#xA7A1;</span> <span title="U+A7A2">&#xA7A2; &#xA7A3;</span> <span title="U+A7A4">&#xA7A4; &#xA7A5;</span> <span title="U+A7A6">&#xA7A6; &#xA7A7;</span> <span title="U+A7A8">&#xA7A8; &#xA7A9;</span> <span title="U+A7AA">&#xA7AA; &#x0266;</span> <span title="U+A7AB">&#xA7AB; &#x025C;</span> <span title="U+A7AC">&#xA7AC; &#x0261;</span> <span title="U+A7AD">&#xA7AD; &#x026C;</span> <span title="U+A7B0">&#xA7B0; &#x029E;</span> <span title="U+A7B1">&#xA7B1; &#x0287;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents: &#xA720; &#xA721; &#xA730; &#xA731; &#xA770; &#xA771; &#xA772; &#xA773; &#xA774; &#xA775; &#xA776; &#xA777; &#xA778; &#xA788; &#xA789; &#xA78A; &#xA78E; &#xA794; &#xA795; &#xA7F7; &#xA7F8; &#xA7F9; &#xA7FA; &#xA7FB; &#xA7FC; &#xA7FD; &#xA7FE; &#xA7FF;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-103.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-103.html
new file mode 100644
index 0000000000..500c877f27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-103.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic Extended-B, uppercase</title>
+<meta name="assert" content="For the Cyrillic Extended-B Unicode block, text-transform: uppercase puts all letters in uppercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-103-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: uppercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+A641">&#xA641; &#xA640;</span> <span title="U+A643">&#xA643; &#xA642;</span> <span title="U+A645">&#xA645; &#xA644;</span> <span title="U+A647">&#xA647; &#xA646;</span> <span title="U+A649">&#xA649; &#xA648;</span> <span title="U+A64B">&#xA64B; &#xA64A;</span> <span title="U+A64D">&#xA64D; &#xA64C;</span> <span title="U+A64F">&#xA64F; &#xA64E;</span> <span title="U+A651">&#xA651; &#xA650;</span> <span title="U+A653">&#xA653; &#xA652;</span> <span title="U+A655">&#xA655; &#xA654;</span> <span title="U+A657">&#xA657; &#xA656;</span> <span title="U+A659">&#xA659; &#xA658;</span> <span title="U+A65B">&#xA65B; &#xA65A;</span> <span title="U+A65D">&#xA65D; &#xA65C;</span> <span title="U+A65F">&#xA65F; &#xA65E;</span> <span title="U+A661">&#xA661; &#xA660;</span> <span title="U+A663">&#xA663; &#xA662;</span> <span title="U+A665">&#xA665; &#xA664;</span> <span title="U+A667">&#xA667; &#xA666;</span> <span title="U+A669">&#xA669; &#xA668;</span> <span title="U+A66B">&#xA66B; &#xA66A;</span> <span title="U+A66D">&#xA66D; &#xA66C;</span> <span title="U+A681">&#xA681; &#xA680;</span> <span title="U+A683">&#xA683; &#xA682;</span> <span title="U+A685">&#xA685; &#xA684;</span> <span title="U+A687">&#xA687; &#xA686;</span> <span title="U+A689">&#xA689; &#xA688;</span> <span title="U+A68B">&#xA68B; &#xA68A;</span> <span title="U+A68D">&#xA68D; &#xA68C;</span> <span title="U+A68F">&#xA68F; &#xA68E;</span> <span title="U+A691">&#xA691; &#xA690;</span> <span title="U+A693">&#xA693; &#xA692;</span> <span title="U+A695">&#xA695; &#xA694;</span> <span title="U+A697">&#xA697; &#xA696;</span> <span title="U+A699">&#xA699; &#xA698;</span> <span title="U+A69B">&#xA69B; &#xA69A;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#xA66E; &#xA66F; &#xA670; &#xA671; &#xA672; &#xA673; &#xA674; &#xA675; &#xA676; &#xA677; &#xA678; &#xA679; &#xA67A; &#xA67B; &#xA67C; &#xA67D; &#xA67E; &#xA67F; &#xA69C; &#xA69D; &#xA69F;
+-->
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-104.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-104.html
new file mode 100644
index 0000000000..57a7460058
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-104.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS3 Text, text transform: Cyrillic Extended-B, lowercase</title>
+<meta name="assert" content="For the Cyrillic Extended-B Unicode block, text-transform: lowercase puts all letters in lowercase .">
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-transform'>
+<link rel="match" href="reference/text-transform-upperlower-104-ref.html">
+<style type='text/css'>
+@font-face {
+	font-family: 'webfont';
+	src: url('/fonts/GentiumPlus-R.woff2') format('woff2'),
+	 url('/fonts/GentiumPlus-R.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	}
+.test, .ref { font-size: 125%; line-height: 1.5em; font-family: 'Doulos SIL', 'Noto Serif', 'Noto Sans', webfont, sans-serif; }
+.test span, .ref span { margin-right: 1em; white-space: nowrap; }
+/* the CSS above is not part of the test */
+.test { text-transform: lowercase; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if both characters in each pair match. If you are missing a font glyph for a character, ignore that pair, but report which characters were ignored.</p>
+<div class="test"><span title="U+A640">&#xA640; &#xA641;</span> <span title="U+A642">&#xA642; &#xA643;</span> <span title="U+A644">&#xA644; &#xA645;</span> <span title="U+A646">&#xA646; &#xA647;</span> <span title="U+A648">&#xA648; &#xA649;</span> <span title="U+A64A">&#xA64A; &#xA64B;</span> <span title="U+A64C">&#xA64C; &#xA64D;</span> <span title="U+A64E">&#xA64E; &#xA64F;</span> <span title="U+A650">&#xA650; &#xA651;</span> <span title="U+A652">&#xA652; &#xA653;</span> <span title="U+A654">&#xA654; &#xA655;</span> <span title="U+A656">&#xA656; &#xA657;</span> <span title="U+A658">&#xA658; &#xA659;</span> <span title="U+A65A">&#xA65A; &#xA65B;</span> <span title="U+A65C">&#xA65C; &#xA65D;</span> <span title="U+A65E">&#xA65E; &#xA65F;</span> <span title="U+A660">&#xA660; &#xA661;</span> <span title="U+A662">&#xA662; &#xA663;</span> <span title="U+A664">&#xA664; &#xA665;</span> <span title="U+A666">&#xA666; &#xA667;</span> <span title="U+A668">&#xA668; &#xA669;</span> <span title="U+A66A">&#xA66A; &#xA66B;</span> <span title="U+A66C">&#xA66C; &#xA66D;</span> <span title="U+A680">&#xA680; &#xA681;</span> <span title="U+A682">&#xA682; &#xA683;</span> <span title="U+A684">&#xA684; &#xA685;</span> <span title="U+A686">&#xA686; &#xA687;</span> <span title="U+A688">&#xA688; &#xA689;</span> <span title="U+A68A">&#xA68A; &#xA68B;</span> <span title="U+A68C">&#xA68C; &#xA68D;</span> <span title="U+A68E">&#xA68E; &#xA68F;</span> <span title="U+A690">&#xA690; &#xA691;</span> <span title="U+A692">&#xA692; &#xA693;</span> <span title="U+A694">&#xA694; &#xA695;</span> <span title="U+A696">&#xA696; &#xA697;</span> <span title="U+A698">&#xA698; &#xA699;</span> <span title="U+A69A">&#xA69A; &#xA69B;</span></div>
+<!--Notes:
+Characters from this block that do not have case equivalents:  &#xA66E; &#xA66F; &#xA670; &#xA671; &#xA672; &#xA673; &#xA674; &#xA675; &#xA676; &#xA677; &#xA678; &#xA679; &#xA67A; &#xA67B; &#xA67C; &#xA67D; &#xA67E; &#xA67F; &#xA69C; &#xA69D; &#xA69F;
+-->
+</html>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-105.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-105.html
new file mode 100644
index 0000000000..8b41ae4e33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-105.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-transform uppercase German sharp S and selection</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-text-transform">
+<link rel="match" href="reference/text-transform-upperlower-105-ref.html">
+<meta name="assert" content="text-transform: uppercase will uppercase the German sharp S as SS, and the whole 2 characters width is selectable.">
+<style>
+#target {
+  text-transform: uppercase;
+  color: white;
+  background: red;
+}
+#target::selection {
+  background: green;
+}
+</style>
+
+<p>The test passes if you see no red below (when you select the text below you can select the whole "SS" text).</p>
+
+<span id="target" lang="de">&#x00DF;</span>
+
+<script>
+  window.getSelection().setBaseAndExtent(target, 0, target, 1);
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-106.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-106.html
new file mode 100644
index 0000000000..e4dc180fcf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-106.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-transform uppercase Greek acute diaeresis iota and selection</title>
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-text-transform">
+<link rel="match" href="reference/text-transform-upperlower-106-ref.html">
+<meta name="assert" content="text-transform: uppercase will uppercase the Greek acute diaeresis iota by removing acute, and the rendered character is selectable.">
+<style>
+#target {
+  text-transform: uppercase;
+  color: white;
+  background: red;
+}
+#target::selection {
+  background: green;
+}
+</style>
+
+<p>The test passes if you see red below (by selecting the first letter only).</p>
+
+<span id="target" lang="el">&#x0399;&#x0308;&#x0301;&#x03A1;</span>
+
+<script>
+  window.getSelection().setBaseAndExtent(target.firstChild, 0, target.firstChild, 3);
+</script>
diff --git a/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-107.html b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-107.html
new file mode 100644
index 0000000000..791edd14c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-transform/text-transform-upperlower-107.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: text-transform uppercase German sharp S and selection</title>
+<link rel="author" title="Frédéric Wang" href="mailto:fwang@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-text-transform">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="assert" content="text-transform: uppercase will uppercase the German sharp S as SS, the whole 2 characters is selectable and should be returned when retriving the selected string.">
+<style>
+  #target {
+    text-transform: uppercase;
+  }
+</style>
+
+<span id="target" lang="de">&#x00DF;</span>
+
+<script>
+  test(() => {
+    window.getSelection().setBaseAndExtent(target, 0, target, 1);
+    assert_equals(window.getSelection().toString(), "SS");
+  }, "Selection.toString() for 'ß' with text-transform: uppercase");
+</script>
diff --git a/testing/web-platform/tests/css/css-text/white-space/append-whitespace-only-node-crash-001.html b/testing/web-platform/tests/css/css-text/white-space/append-whitespace-only-node-crash-001.html
new file mode 100644
index 0000000000..b32555b188
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/append-whitespace-only-node-crash-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/971811">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+  <div id="log"></div>
+<script>
+const strings = [' ', '\t', '\n', '\f', '\r'];
+const whitespace_values = ['normal', 'pre', 'nowrap', 'pre-wrap', 'break-spaces', 'pre-line'];
+const container = document.body;
+for (let whitespace_value of whitespace_values) {
+  for (let string of strings) {
+    test(() => {
+      let div = document.createElement('div');
+      div.style.whiteSpace = whitespace_value;
+      div.textContent = 'test';
+      container.appendChild(div);
+      container.offsetTop;  // Force layout
+      div.appendChild(document.createTextNode(string));
+      container.offsetTop;  // Force layout
+    }, `Append ${toCodePoints(string)} to 'white-space: ${whitespace_value}'`);
+  }
+}
+
+function toCodePoints(string) {
+  let results = [];
+  for (let ch of string) {
+    let hex = ch.codePointAt(0).toString(16).toUpperCase();
+    hex = ('000' + hex).substr(-4)
+    results.push('U+' + hex);
+  }
+  return results.join(' ');
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-001.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-001.html
new file mode 100644
index 0000000000..f3b881afc1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of line and white-space is break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is wrapped when the white-space property is set to break-spaces.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: break-spaces;
+  color: green;
+
+  background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  margin-left: -1ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div> XX  XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-002.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-002.html
new file mode 100644
index 0000000000..1fec090991
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: single preserved white space at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="a single preserved white space at the end of the line is not wrapped when the white-space property is set to break-spaces.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: break-spaces;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 2ch;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-003.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-003.html
new file mode 100644
index 0000000000..9ff9180625
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-003.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="break-word + break-spaces do not allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are other wrapping opportunities earlier in the line.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+   font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XX<span>XX</span><br>X<span>X</span>X<span>X<br>XXXX<br>XXXX</span></div>
+  <div class="test">XX X X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-004.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-004.html
new file mode 100644
index 0000000000..8d7915fccc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-004.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the 'white-space: break-spaces' value.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 2ch;
+
+  white-space: break-spaces;
+  word-break: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>XX</span><br>XX</div>
+  <div class="test"> XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-005.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-005.html
new file mode 100644
index 0000000000..01c760726d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-005.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="If 'white-space' is set to 'break-spaces', collapsing preserved white-spaces' advance width is not allowed, so that they can be wrapped honoring the 'white-space' propery.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 10px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 100px;
+
+  white-space: break-spaces;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<span>XXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XX</span>XXXX<span>XXXX</span></div>
+  <div class="test">XXXX                                                                                        XXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-006.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-006.html
new file mode 100644
index 0000000000..056aa8a21b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-006.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', but the words are broken, honring the 'word-beak: break-all' even though there are previous breaking opportunities in the white-spaces.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4.1ch;  /* ".1" to cover floating point errors. */
+
+  white-space: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>X</span>XXX<br>X<span>X</span>XX<br>X<span>XXX</span><br><span>XXXX</span></div>
+  <div class="test"> XXXX XXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-007.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-007.html
new file mode 100644
index 0000000000..4b9df29042
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-007.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A single leading white-space should be used, honoring white-space: break-spaces, to avoid overflow; however, a single preserved white-space at the end of the line cannot be wrapped, hence it overflows when breaking after it to move the rest of the text to the next line.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>XXXX</span><br>XXXX<br>XXX<span>X</span><br><span>XXXX</span></div>
+  <div class="test"> XXXX XXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-008.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-008.html
new file mode 100644
index 0000000000..4612996c52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-008.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', which may lead to overfow. However, we can break before the las letter in the word honoring the 'break-all' value.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXX<span>X</span><br>X<span>X</span>XX<br><span>XXXX</span><br><span>XXXX</span></div>
+  <div class="test">XXXX XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-009.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-009.html
new file mode 100644
index 0000000000..58682d6044
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-009.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break:break-word + white-space:break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="break-word + break-spaces do allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are no other wrapping opportunities earlier in the line">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.expected {
+  position: absolute;
+  color: green;
+  width: 100px;
+  height: 100px;
+  white-space: pre;
+}
+.test {
+  background: green;
+  color: red;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-word;
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="expected">XXXX<br> <br>XXXX<br></div>
+<div class="test">XXXX XXXX </div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-010.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-010.html
new file mode 100644
index 0000000000..a72dc67aff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-010.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="break-spaces only allows breaking after a white space, hence, a preserved white space may overflow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">XXXX<br><span>X</span>XX<span>X<br>XXXX<br>XXXX</span></div>
+<div class="test">XXXX  XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-011.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-011.html
new file mode 100644
index 0000000000..0355d6d6b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-011.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: line breaking with white-space: break-spaces and element boundaries</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.1. Line Breaking Details" href="https://drafts.csswg.org/css-text-3/#line-break-details">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="An element boundary doesn't allow breaking if white-space is set to break-spaces at both sides of the boundary">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+.fail span { color: green; }
+.test {
+  color: green;
+  width: 4.1ch;  /* ".1" to cover floating point errors. */
+  white-space: break-spaces;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">XXXX<br>X<span>X</span>X<span>X</span><br>XX<span>XX</span><br>X<span>X</span>X<span>X</span></div>
+<div class="test"><span>XXXX</span> X X XX<span> </span><span> </span>X X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-051.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-051.html
new file mode 100644
index 0000000000..2626511808
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-051.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: inline starting with a collapsible white space</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <style>
+  div
+    {
+      background-color: red;
+      color: green;
+      float: left;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+     }
+
+  span#break-spaces
+    {
+      white-space: break-spaces;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div><span id="break-spaces">AB&NewLine;</span><span> CD</span></div>
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-052.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-052.html
new file mode 100644
index 0000000000..28219d55c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-052.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: inline starting with a collapsible white space</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <style>
+  div
+    {
+      background-color: red;
+      color: green;
+      display: inline-block;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+     }
+
+  span#break-spaces
+    {
+      white-space: break-spaces;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div><span id="break-spaces">AB&NewLine;</span><span> CD</span></div>
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-001.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-001.html
new file mode 100644
index 0000000000..6fd97f39d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists only after a preserved white space character.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>XXX<br></span>XX<span>X</span>X<br><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-002.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-002.html
new file mode 100644
index 0000000000..dbafa34816
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the overflow-wrap property, except when there are previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>XXX<br></span>XX<span>X</span>X<br><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-003.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-003.html
new file mode 100644
index 0000000000..6eb32b57f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the overflow-wrap property, except when there are previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>XXX<br></span>XX<span>X</span>X<br><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-004.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-004.html
new file mode 100644
index 0000000000..88c3727c69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-004.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists only after a preserved white space character, but it's possible to avoid the overflow honoring the 'word-break' property.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-all;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>X<span>X<br></span>X<span>X</span>X<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-005.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-005.html
new file mode 100644
index 0000000000..d4259a13d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-005.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists only after a preserved white space character, but it's possible to avoid the overflow honoring the 'word-break' property, hence the overflow-wrap property is not applied.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+  word-break: break-all;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>X<span>X<br></span>X<span>X</span>X<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-006.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-006.html
new file mode 100644
index 0000000000..367d95f9d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-006.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists only after a preserved white space character, but it's possible to avoid the overflow honoring the 'word-break' property, hence the overflow-wrap property is not applied.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>X<span>X<br></span>X<span>X</span>X<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-007.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-007.html
new file mode 100644
index 0000000000..4534cc96ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-007.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the 'line-break' property.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-008.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-008.html
new file mode 100644
index 0000000000..4e1e69325b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-008.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  overflow-wrap: break-word;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-009.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-009.html
new file mode 100644
index 0000000000..bec4520b11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-009.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-010.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-010.html
new file mode 100644
index 0000000000..4c44d054ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-010.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  word-break: break-all;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-011.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-011.html
new file mode 100644
index 0000000000..cf1babeb5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-011.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-012.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-012.html
new file mode 100644
index 0000000000..52669c2221
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-012.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the overflow-wrap property.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<br><span>X</span>XX<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">XXXX XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-013.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-013.html
new file mode 100644
index 0000000000..828058f53d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-013.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the overflow-wrap property.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<br><span>X</span>XX<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">XXXX XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-014.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-014.html
new file mode 100644
index 0000000000..6eb32b57f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-014.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the overflow-wrap property, except when there are previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>XXX<br></span>XX<span>X</span>X<br><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-015.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-015.html
new file mode 100644
index 0000000000..785c2f2a4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-015.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists only after a preserved white space character, but it's possible to avoid the overflow honoring the 'word-break' property, hence the 'overflow-wrap' property is not applied.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>X<span>X<br></span>X<span>X</span>X<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-016.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-016.html
new file mode 100644
index 0000000000..bec4520b11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-016.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-017.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-017.html
new file mode 100644
index 0000000000..9cb8fdbebc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-017.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X XX X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-018.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-018.html
new file mode 100644
index 0000000000..828058f53d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-char-018.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of preserved white spaces to avoid the line overflow, honoring the overflow-wrap property.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<br><span>X</span>XX<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">XXXX XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-001.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-001.html
new file mode 100644
index 0000000000..733da5334b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists only after a ideographic space character.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>XXX<br></span>XX<span>X</span>X<br><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-002.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-002.html
new file mode 100644
index 0000000000..faa69b6b01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the overflow-wrap property, except when there are previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>XXX<br></span>XX<span>X</span>X<br><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-003.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-003.html
new file mode 100644
index 0000000000..71bb366668
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the overflow-wrap property, except when there are previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>XXX<br></span>XX<span>X</span>X<br><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-004.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-004.html
new file mode 100644
index 0000000000..9d8829b70e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-004.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists only after a ideographic space character, but it's possible to avoid the overflow honoring the 'word-break' property.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-all;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>X<span>X<br></span>X<span>X</span>X<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-005.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-005.html
new file mode 100644
index 0000000000..0bb0673fd8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-005.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists only after a ideographic space character, but it's possible to avoid the overflow honoring the 'word-break' property, hence the overflow-wrap property is not applied.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+  word-break: break-all;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>X<span>X<br></span>X<span>X</span>X<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-006.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-006.html
new file mode 100644
index 0000000000..acd6fa20c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-006.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists only after a ideographic space character, but it's possible to avoid the overflow honoring the 'word-break' property, hence the overflow-wrap property is not applied.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>X<span>X<br></span>X<span>X</span>X<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-007.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-007.html
new file mode 100644
index 0000000000..c8c53b5737
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-007.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the 'line-break' property.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-008.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-008.html
new file mode 100644
index 0000000000..f3ffdf28d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-008.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  overflow-wrap: break-word;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-009.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-009.html
new file mode 100644
index 0000000000..39118f4b4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-009.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-010.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-010.html
new file mode 100644
index 0000000000..0fb4dccd7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-010.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  word-break: break-all;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-011.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-011.html
new file mode 100644
index 0000000000..6aae96fd7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-011.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: ideographic space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-012.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-012.html
new file mode 100644
index 0000000000..bcc68e0385
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-012.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the overflow-wrap property.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<br><span>X</span>XX<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">XXXX&#x3000;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-013.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-013.html
new file mode 100644
index 0000000000..d888f6c9e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-013.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the overflow-wrap property.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<br><span>X</span>XX<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">XXXX&#x3000;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-014.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-014.html
new file mode 100644
index 0000000000..71bb366668
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-014.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the overflow-wrap property, except when there are previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>XXX<br></span>XX<span>X</span>X<br><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-015.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-015.html
new file mode 100644
index 0000000000..02ca9c2d1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-015.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists only after a ideographic space character, but it's possible to avoid the overflow honoring the 'word-break' property, hence the 'overflow-wrap' property is not applied.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>X<span>X<br></span>X<span>X</span>X<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-016.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-016.html
new file mode 100644
index 0000000000..39118f4b4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-016.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-017.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-017.html
new file mode 100644
index 0000000000..df8a8d58c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-017.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property " href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" title="5.3. Line Breaking Strictness: the line-break property" href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-line-break-anywhere">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the 'line-break' property, ignoring previous breaking opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  line-break: anywhere;
+  word-break: break-all;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">X<span>X</span>XX<br><span>X</span>X<span>XX<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">X&#x3000;XX&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-018.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-018.html
new file mode 100644
index 0000000000..d888f6c9e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-before-first-ideographic-char-018.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A breaking opportunity exists before the first character of a sequence of ideographic spaces to avoid the line overflow, honoring the overflow-wrap property.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<br><span>X</span>XX<span>X<br></span><span>XXXX<br></span><span>XXXX<br></span></div>
+  <div class="test">XXXX&#x3000;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-011.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-011.html
new file mode 100644
index 0000000000..4eb2d8742a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-011.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'white-space: break-spaces' with 4 white spaces and 4 line feeda</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="This test checks that when 'white-space' is set to 'break-spaces', then line feeds (&amp;NewLine; in the code) are preserved, just like with 'white-space: pre' or with 'white-space: pre-wrap'.">
+
+  <style>
+  div
+    {
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 4em;
+    }
+
+  div#overlapped-red-reference
+    {
+      background-color: red;
+      height: 4em;
+    }
+
+  div#overlapping-green-test
+    {
+      background-color: green;
+      bottom: 4em;
+      color: red;
+      position: relative;
+      white-space: break-spaces;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="overlapped-red-reference"></div>
+
+  <div id="overlapping-green-test">&NewLine;&NewLine;    &NewLine;&NewLine;</div>
+  <!--                                               ^  ^
+                         4 consecutive white spaces: 1234
+  -->
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-012.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-012.html
new file mode 100644
index 0000000000..50496200a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-012.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'white-space: break-spaces', 10 white spaces and 1 line feed</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="This test checks that when 'white-space' is set to 'break-spaces', then line feeds (&amp;NewLine; in the code) are preserved, just like with 'white-space: pre' or with 'white-space: pre-wrap'.">
+
+  <style>
+  div
+    {
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 4em;
+    }
+
+  div#overlapped-red-reference
+    {
+      background-color: red;
+      height: 4em;
+    }
+
+  div#overlapping-green-test
+    {
+      background-color: green;
+      bottom: 4em;
+      color: red;
+      position: relative;
+      white-space: break-spaces;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="overlapped-red-reference"></div>
+
+  <div id="overlapping-green-test"> &NewLine;         </div>
+  <!--                             ^         ^       ^
+                  10 white spaces: 1         234567890
+  -->
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-013.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-013.html
new file mode 100644
index 0000000000..af2d0df598
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-013.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'white-space: break-spaces', 7 white spaces and 2 line feeds</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="This test checks that when 'white-space' is set to 'break-spaces', then line feeds (&amp;NewLine; in the code) are preserved, just like with 'white-space: pre' or with 'white-space: pre-wrap'.">
+
+  <style>
+  div
+    {
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 4em;
+    }
+
+  div#overlapped-red-reference
+    {
+      background-color: red;
+      height: 4em;
+    }
+
+  div#overlapping-green-test
+    {
+      background-color: green;
+      bottom: 4em;
+      color: red;
+      position: relative;
+      white-space: break-spaces;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="overlapped-red-reference"></div>
+
+  <div id="overlapping-green-test"> &NewLine; &NewLine;     </div>
+  <!--                             ^         ^         ^   ^
+                   7 white spaces: 1         2         34567
+  -->
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-014.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-014.html
new file mode 100644
index 0000000000..424cb2a261
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-014.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'white-space: break-spaces', 4 white spaces and 3 line feeds</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="This test checks that when 'white-space' is set to 'break-spaces', then line feeds (&amp;NewLine; in the code) are preserved, just like with 'white-space: pre' or with 'white-space: pre-wrap'.">
+
+  <style>
+  div
+    {
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 4em;
+    }
+
+  div#overlapped-red-reference
+    {
+      background-color: red;
+      height: 4em;
+    }
+
+  div#overlapping-green-test
+    {
+      background-color: green;
+      bottom: 4em;
+      color: red;
+      position: relative;
+      white-space: break-spaces;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="overlapped-red-reference"></div>
+
+  <div id="overlapping-green-test"> &NewLine; &NewLine; &NewLine; </div>
+  <!--                             ^         ^         ^         ^
+                   4 white spaces: 1         2         3         4
+  -->
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-015.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-015.html
new file mode 100644
index 0000000000..bd33269143
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-015.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'white-space: break-spaces', 3 white spaces and 3 line feeds</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="This test checks that when 'white-space' is set to 'break-spaces', then line feeds (&amp;NewLine; in the code) are preserved, just like with 'white-space: pre' or with 'white-space: pre-wrap'.">
+
+  <style>
+  div
+    {
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 4em;
+    }
+
+  div#overlapped-red-reference
+    {
+      background-color: red;
+      height: 4em;
+    }
+
+  div#overlapping-green-test
+    {
+      background-color: green;
+      bottom: 4em;
+      color: red;
+      position: relative;
+      white-space: break-spaces;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="overlapped-red-reference"></div>
+
+  <div id="overlapping-green-test">&NewLine; &NewLine; &NewLine; </div>
+  <!--                                      ^         ^         ^
+                            3 white spaces: 1         2         3
+  -->
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-016.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-016.html
new file mode 100644
index 0000000000..b504983cc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-newline-016.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'white-space: break-spaces' and 4 consecutive line feeds</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="This test checks that when 'white-space' is set to 'break-spaces', then line feeds (&amp;NewLine; in the code) are preserved, just like with 'white-space: pre' or with 'white-space: pre-wrap'.">
+
+  <style>
+  div
+    {
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 4em;
+    }
+
+  div#overlapped-red-reference
+    {
+      background-color: red;
+      height: 4em;
+    }
+
+  div#overlapping-green-test
+    {
+      background-color: green;
+      bottom: 4em;
+      color: red;
+      position: relative;
+      white-space: break-spaces;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="overlapped-red-reference"></div>
+
+  <div id="overlapping-green-test">&NewLine;&NewLine;&NewLine;&NewLine;</div>
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-001.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-001.html
new file mode 100644
index 0000000000..4b01a60395
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: wrapping opportunity after break-spaces tabs</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs with white-space:break-spaces">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: break-spaces;
+  color: green;
+  width: 16ch;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div id=ref>XX<br>XX</div>
+<div id=test>XX&#x09;&#x09;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-002.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-002.html
new file mode 100644
index 0000000000..d86918b75f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: wrapping opportunity after break-spaces tabs and space</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs and spaces with white-space:break-spaces">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: break-spaces;
+  color: green;
+  width: 16ch;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div id=ref>XX<br>XX</div>
+<div id=test>XX &#x09; &#x09;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-003.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-003.html
new file mode 100644
index 0000000000..0d762a426a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: wrapping opportunity after each break-spaces tab</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
+<link rel="match" href="reference/break-spaces-tab-003-ref.html">
+<meta name="assert" content="There is a wrapping opportunity after each tab in a sequence with white-space:break-spaces.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: break-spaces;
+  color: green;
+  width: 1ch;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there are two <strong>filled green squares</strong> and <strong>no red</strong>.</p>
+<div id=ref>X<br><br><br><br><br>X</div>
+<div id=test>X&#x09;&#x09;&#x09;&#x09;&#x09;X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-004.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-004.html
new file mode 100644
index 0000000000..bee61597fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-004.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: wrapping opportunity after each break-spaces space and tab</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
+<link rel="match" href="reference/break-spaces-tab-003-ref.html">
+<meta name="assert" content="There is a wrapping opportunity after each tab and space in a sequence with white-space:break-spaces.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: break-spaces;
+  color: green;
+  width: 1ch;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there are two <strong>filled green squares</strong> and <strong>no red</strong>.</p>
+<div id=ref>X<br><br><br><br><br>X</div>
+<div id=test>X&#x09;  &#x09;&#x09;X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-005.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-005.html
new file mode 100644
index 0000000000..81c39aa27f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-005.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: break-space tabs don't hang</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/break-spaces-tab-005-ref.html">
+<meta name="assert" content="a sequence of break-spaces tabs at the end of a line does not hang.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: break-spaces;
+  color: green;
+  width: 2ch;
+}
+#ref {
+  white-space: pre;
+  width: 2ch;
+  background: red;
+  color: green;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there is a green rectangle and no red.
+<div id=ref> X<br> X<br>XX<br>XX<br>XX<br>XX<br>  </div>
+<div id=test>X<wbr>X&#x09;&#x09;&#x09;&#x09;&#x09;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-006.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-006.html
new file mode 100644
index 0000000000..34df3bfc1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-tab-006.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: break-spaces tabs and spaces don't hang</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/break-spaces-tab-005-ref.html">
+<meta name="assert" content="a sequence of break-spaces tabs and spaces at the end of a line does not hang, and can wrap after each tab or space.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: break-spaces;
+  color: green;
+  width: 2ch;
+}
+#ref {
+  white-space: pre;
+  width: 2ch;
+  background: red;
+  color: green;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there is a green rectangle and no red.
+<div id=ref> X<br> X<br>XX<br>XX<br>XX<br>XX<br>  </div>
+<div id=test>X<wbr>X&#x09;   &#x09;&#x09;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-001.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-001.html
new file mode 100644
index 0000000000..60e0dcae30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: ideographic space at the end of line and white-space is break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="ideographic space at the end of the line is wrapped when the white-space property is set to break-spaces.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: break-spaces;
+  color: green;
+
+  background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  margin-left: -1ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>&#x3000;XX&#x3000;&#x3000;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-002.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-002.html
new file mode 100644
index 0000000000..9d060e0904
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-002.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="break-word + break-spaces do not allow a break
+between the last character of a word and the first space of a sequence of ideographic spaces
+if there are other wrapping opportunities earlier in the line.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+   font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XX<span>XX</span><br>X<span>X</span>X<span>X<br>XXXX<br>XXXX</span></div>
+  <div class="test">XX&#x3000;X&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-003.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-003.html
new file mode 100644
index 0000000000..9d060e0904
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-003.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="break-word + break-spaces do not allow a break
+between the last character of a word and the first space of a sequence of ideographic spaces
+if there are other wrapping opportunities earlier in the line.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+   font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XX<span>XX</span><br>X<span>X</span>X<span>X<br>XXXX<br>XXXX</span></div>
+  <div class="test">XX&#x3000;X&#x3000;X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-004.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-004.html
new file mode 100644
index 0000000000..c61fcced0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-004.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the 'white-space: break-spaces' value.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 2ch;
+
+  white-space: break-spaces;
+  word-break: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>XX</span><br>XX</div>
+  <div class="test">&#x3000;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-005.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-005.html
new file mode 100644
index 0000000000..7df2f06eec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-005.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="If 'white-space' is set to 'break-spaces', collapsing preserved white-spaces' advance width is not allowed, so that they can be wrapped honoring the 'white-space' propery.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 10px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 100px;
+
+  white-space: break-spaces;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<span>XXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XXXXXXXXXX</span><br><span>XX</span>XXXX<span>XXXX</span></div>
+  <div class="test">XXXX&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;XXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-006.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-006.html
new file mode 100644
index 0000000000..a04970f984
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-006.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Ideographic spaces can be wrapped, honoring the 'white-space: break-spaces', but the words are broken, honring the 'word-beak: break-all' even though there are previous breaking opportunities in the white-spaces.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>X</span>XXX<br>X<span>X</span>XX<br>X<span>XXX</span><br><span>XXXX</span></div>
+  <div class="test">&#x3000;XXXX&#x3000;XXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-007.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-007.html
new file mode 100644
index 0000000000..44fb3d2fc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-007.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="A single leading ideographic space should be used as breaking opportunity, honoring white-space: break-spaces, to avoid overflow; however, a single ideographic space at the end of the line cannot be wrapped, hence it overflows when breaking after it to move the rest of the text to the next line.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>XXXX</span><br>XXXX<br>XXX<span>X</span><br><span>XXXX</span></div>
+  <div class="test">&#x3000;XXXX&#x3000;XXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-008.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-008.html
new file mode 100644
index 0000000000..7102439d46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-008.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Ideographic spaces can be wrapped, honoring the 'white-space: break-spaces', which may lead to overfow. However, we can break before the las letter in the word honoring the 'break-all' value.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXX<span>X</span><br>X<span>X</span>XX<br><span>XXXX</span><br><span>XXXX</span></div>
+  <div class="test">XXXX&#x3000;XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-009.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-009.html
new file mode 100644
index 0000000000..52bd181af6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-009.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break:break-word + white-space:break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="break-word + break-spaces do allow a break
+between the last character of a word and the first space of a sequence of ideographic spaces
+if there are no other wrapping opportunities earlier in the line">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.expected {
+  position: absolute;
+  color: green;
+  width: 100px;
+  height: 100px;
+  white-space: pre;
+}
+.test {
+  background: green;
+  color: red;
+  width: 4ch;
+
+  white-space: break-spaces;
+  word-break: break-word;
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="expected">XXXX<br> <br>XXXX<br></div>
+<div class="test">XXXX&#x3000;XXXX&#x3000;</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-010.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-010.html
new file mode 100644
index 0000000000..d59afcf56d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-ideographic-space-010.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="break-spaces only allows breaking after an ideographic space, hence, it may overflow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">XXXX<br><span>X</span>XX<span>X<br>XXXX<br>XXXX</span></div>
+<div class="test">XXXX&#x3000;&#x3000;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-001.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-001.html
new file mode 100644
index 0000000000..6912bafee9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="break-word + break-spaces do not allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are other wrapping opportunities earlier in the line.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+   font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XX<span>XX</span><br>X<span>X</span>X<span>X<br>XXXX<br>XXXX</span></div>
+  <div class="test">XX X X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-002.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-002.html
new file mode 100644
index 0000000000..caef57ec60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-002.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="anywhere + break-spaces do not allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are other wrapping opportunities earlier in the line.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+   font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XX<span>XX</span><br>X<span>X</span>X<span>X<br>XXXX<br>XXXX</span></div>
+  <div class="test">XX X X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-003.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-003.html
new file mode 100644
index 0000000000..9f91d085d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-003.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the 'white-space: break-spaces' value.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 2ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>XX</span><br>XX</div>
+  <div class="test"> XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-004.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-004.html
new file mode 100644
index 0000000000..911cff021a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-004.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the 'white-space: break-spaces' value.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 2ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>XX</span><br>XX</div>
+  <div class="test"> XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-005.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-005.html
new file mode 100644
index 0000000000..9f494da2aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-005.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', and the words aren't broken honring the 'overflow-wrap: break-word'.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>XXXX</span><br>XXXX<br><span>X</span>XXX<br><span>XXXX</span></div>
+  <div class="test"> XXXX XXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-006.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-006.html
new file mode 100644
index 0000000000..ef3471c16e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-006.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', and the words aren't broken honring the 'overflow-wrap: break-word'.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail"><span>XXXX</span><br>XXXX<br><span>X</span>XXX<br><span>XXXX</span></div>
+  <div class="test"> XXXX XXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-007.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-007.html
new file mode 100644
index 0000000000..3b2e7fb4d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-007.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: break-spaces and Overflow Wrapping</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', but we can break before the first space after a word honoring 'overflow-wrap: break-word'.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<br><span>X</span>XX<span>X</span><br><span>XXXX</span><br><span>XXXX</span></div>
+  <div class="test">XXXX XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-008.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-008.html
new file mode 100644
index 0000000000..9826449ecc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-008.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space - break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="White spaces are preserved, honoring the 'white-space: break-spaces', but we can break before the first space after a word honoring 'overflow-wrap: anywhere'.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.fail {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="fail">XXXX<br><span>X</span>XX<span>X</span><br><span>XXXX</span><br><span>XXXX</span></div>
+  <div class="test">XXXX XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-009.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-009.html
new file mode 100644
index 0000000000..3b6e764330
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-009.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break:break-word + white-space:break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="break-word + break-spaces do allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are no other wrapping opportunities earlier in the line">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.expected {
+  position: absolute;
+  color: green;
+  width: 100px;
+  height: 100px;
+  white-space: pre;
+}
+.test {
+  background: green;
+  color: red;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: break-word;
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="expected">XXXX<br> <br>XXXX<br></div>
+<div class="test">XXXX XXXX </div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-010.html b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-010.html
new file mode 100644
index 0000000000..d479c5e567
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/break-spaces-with-overflow-wrap-010.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break:break-word + white-space:break-spaces</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="anywhere + break-spaces do allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are no other wrapping opportunities earlier in the line">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.expected {
+  position: absolute;
+  color: green;
+  width: 100px;
+  height: 100px;
+  white-space: pre;
+}
+.test {
+  background: green;
+  color: red;
+  width: 4ch;
+
+  white-space: break-spaces;
+  overflow-wrap: anywhere;
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="expected">XXXX<br> <br>XXXX<br></div>
+<div class="test">XXXX XXXX </div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-000.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-000.html
new file mode 100644
index 0000000000..b038fe9a90
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-000.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0000</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0000, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0000" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-001.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-001.html
new file mode 100644
index 0000000000..e43fda5543
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-001.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0001</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0001, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0001" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-002.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-002.html
new file mode 100644
index 0000000000..a81a30723a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-002.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0002</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0002, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0002" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-003.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-003.html
new file mode 100644
index 0000000000..e0d156a979
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-003.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0003</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0003, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0003" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-004.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-004.html
new file mode 100644
index 0000000000..b33c4475ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-004.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0004</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0004, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0004" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-005.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-005.html
new file mode 100644
index 0000000000..d14e86b80b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-005.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0005</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0005, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0005" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-006.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-006.html
new file mode 100644
index 0000000000..2b05272fec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-006.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0006</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0006, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0006" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-007.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-007.html
new file mode 100644
index 0000000000..60587d9abd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-007.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0007</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0007, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0007" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-008.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-008.html
new file mode 100644
index 0000000000..fbe91aae05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-008.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0008</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0008, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0008" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-00B.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-00B.html
new file mode 100644
index 0000000000..6cdf0b35cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-00B.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+000B</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+000B, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\000B" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-00C.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-00C.html
new file mode 100644
index 0000000000..db20bc7205
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-00C.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+000C</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+000C, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\000C" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-00D.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-00D.html
new file mode 100644
index 0000000000..7a85cc8813
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-00D.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>U+000D must be treated the same as U+0020</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=match href="reference/control-chars-00D-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+000D must be treated as U+0020">
+<style>
+div {
+  font-size: 2em;
+  font-family: monospace;
+  color: blue;
+  width: 4ch;
+}
+#ref {
+    color: orange;
+}
+.p {white-space: pre;}
+.pw {white-space: pre-wrap;}
+.pl {white-space: pre-line;}
+.bs {white-space: break-spaces;}
+.nw {white-space: nowrap;}
+</style>
+
+<p>Test passes if blue charaters are arranged exactly in the same way as the orange ones.
+
+<div>A&#x0D;&#x0D;&#x0D;&#x0D;&#x0D;&#x0D;B&#x0D;C<span class=p>&#x0D;&#x0D;&#x0D;</span>D<span class=pw>&#x0D;&#x0D;&#x0D;</span>E<span class=pl>&#x0D;&#x0D;&#x0D;&#x0D;&#x0D;&#x0D;</span>F<span class=bs>&#x0D;&#x0D;&#x0D;</span>G<span class=nw>&#x0D;&#x0D;&#x0D;&#x0D;&#x0D;</span>H</div>
+
+<div id=ref>A      B C<span class=p>   </span>D<span class=pw>   </span>E<span class=pl>      </span>F<span class=bs>   </span>G<span class=nw>     </span>H</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-00E.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-00E.html
new file mode 100644
index 0000000000..826b4bb0d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-00E.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+000E</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+000E, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\000E" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-00F.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-00F.html
new file mode 100644
index 0000000000..53618a8b79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-00F.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+000F</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+000F, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\000F" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-010.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-010.html
new file mode 100644
index 0000000000..52c6638769
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-010.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0010</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0010, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0010" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-011.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-011.html
new file mode 100644
index 0000000000..8aa8d94b91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-011.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0011</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0011, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0011" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-012.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-012.html
new file mode 100644
index 0000000000..9300ae3a90
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-012.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0012</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0012, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0012" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-013.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-013.html
new file mode 100644
index 0000000000..f0e2b547ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-013.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0013</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0013, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0013" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-014.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-014.html
new file mode 100644
index 0000000000..e8c776a9d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-014.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0014</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0014, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0014" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-015.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-015.html
new file mode 100644
index 0000000000..718909dd47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-015.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0015</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0015, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0015" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-016.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-016.html
new file mode 100644
index 0000000000..2ba460c03c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-016.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0016</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0016, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0016" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-017.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-017.html
new file mode 100644
index 0000000000..b4c96ca652
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-017.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0017</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0017, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0017" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-018.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-018.html
new file mode 100644
index 0000000000..3a4c59e18a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-018.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0018</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0018, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0018" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-019.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-019.html
new file mode 100644
index 0000000000..9517e79e4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-019.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0019</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0019, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0019" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-01A.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-01A.html
new file mode 100644
index 0000000000..4f61bcb753
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-01A.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+001A</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+001A, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\001A" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-01B.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-01B.html
new file mode 100644
index 0000000000..fe9842b9ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-01B.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+001B</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+001B, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\001B" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-01C.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-01C.html
new file mode 100644
index 0000000000..aadc1a9138
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-01C.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+001C</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+001C, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\001C" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-01D.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-01D.html
new file mode 100644
index 0000000000..266d30084e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-01D.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+001D</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+001D, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\001D" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-01E.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-01E.html
new file mode 100644
index 0000000000..8cd3ddff51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-01E.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+001E</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+001E, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\001E" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-01F.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-01F.html
new file mode 100644
index 0000000000..61db980951
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-01F.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+001F</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+001F, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\001F" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-07F.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-07F.html
new file mode 100644
index 0000000000..27d5f02c4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-07F.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+007F</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+007F, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\007F" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-080.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-080.html
new file mode 100644
index 0000000000..ceedd01361
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-080.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0080</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0080, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0080" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-081.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-081.html
new file mode 100644
index 0000000000..0e16b01046
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-081.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0081</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0081, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0081" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-082.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-082.html
new file mode 100644
index 0000000000..c8461a7b2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-082.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0082</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0082, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0082" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-083.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-083.html
new file mode 100644
index 0000000000..ec723809ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-083.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0083</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0083, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0083" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-084.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-084.html
new file mode 100644
index 0000000000..2493681738
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-084.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0084</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0084, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0084" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-085.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-085.html
new file mode 100644
index 0000000000..52dba2a1b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-085.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0085</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0085, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0085" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-086.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-086.html
new file mode 100644
index 0000000000..39b132c588
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-086.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0086</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0086, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0086" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-087.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-087.html
new file mode 100644
index 0000000000..2320088a7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-087.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0087</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0087, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0087" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-088.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-088.html
new file mode 100644
index 0000000000..12acc23325
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-088.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0088</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0088, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0088" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-089.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-089.html
new file mode 100644
index 0000000000..367503c88c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-089.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0089</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0089, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0089" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-08A.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-08A.html
new file mode 100644
index 0000000000..1a21992d97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-08A.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+008A</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+008A, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\008A" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-08B.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-08B.html
new file mode 100644
index 0000000000..1ed441a455
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-08B.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+008B</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+008B, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\008B" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-08C.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-08C.html
new file mode 100644
index 0000000000..0c63ee54b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-08C.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+008C</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+008C, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\008C" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-08D.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-08D.html
new file mode 100644
index 0000000000..e908f8e1a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-08D.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+008D</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+008D, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\008D" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-08E.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-08E.html
new file mode 100644
index 0000000000..55e87a556b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-08E.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+008E</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+008E, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\008E" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-08F.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-08F.html
new file mode 100644
index 0000000000..2d9bac9730
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-08F.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+008F</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+008F, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\008F" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-090.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-090.html
new file mode 100644
index 0000000000..c93258878c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-090.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0090</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0090, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0090" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-091.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-091.html
new file mode 100644
index 0000000000..a21f8779ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-091.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0091</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0091, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0091" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-092.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-092.html
new file mode 100644
index 0000000000..5304eac57e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-092.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0092</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0092, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0092" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-093.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-093.html
new file mode 100644
index 0000000000..a092e87306
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-093.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0093</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0093, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0093" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-094.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-094.html
new file mode 100644
index 0000000000..9005e8d098
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-094.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0094</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0094, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0094" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-095.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-095.html
new file mode 100644
index 0000000000..6befbaa1bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-095.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0095</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0095, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0095" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-096.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-096.html
new file mode 100644
index 0000000000..75e69d976b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-096.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0096</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0096, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0096" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-097.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-097.html
new file mode 100644
index 0000000000..8a2c4467ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-097.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0097</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0097, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0097" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-098.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-098.html
new file mode 100644
index 0000000000..47e097789b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-098.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0098</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0098, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0098" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-099.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-099.html
new file mode 100644
index 0000000000..73a6ea6f22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-099.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+0099</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+0099, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\0099" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-09A.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-09A.html
new file mode 100644
index 0000000000..b34f9dc146
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-09A.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+009A</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+009A, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\009A" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-09B.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-09B.html
new file mode 100644
index 0000000000..4c5fcdd45a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-09B.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+009B</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+009B, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\009B" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-09C.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-09C.html
new file mode 100644
index 0000000000..6056a1c3de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-09C.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+009C</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+009C, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\009C" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-09D.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-09D.html
new file mode 100644
index 0000000000..850d2696c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-09D.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+009D</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+009D, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\009D" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-09E.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-09E.html
new file mode 100644
index 0000000000..9613f9d01e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-09E.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+009E</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+009E, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\009E" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/control-chars-09F.html b/testing/web-platform/tests/css/css-text/white-space/control-chars-09F.html
new file mode 100644
index 0000000000..44f6f83f2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/control-chars-09F.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Control charcters must be visible: U+009F</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-processing">
+<link rel=mismatch href="reference/control-chars-000-ref.html">
+<meta name=flags content="">
+<meta name=assert content="U+009F, which is in the unicode category CC, must be visible">
+<style>
+div {
+  font-size: 4em;
+}
+div::after { content: "\009F" } /* Injecting via CSS, to avoid any mangling by the html parser */
+</style>
+
+<p>Test passes if there is a visible character below.
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/display-contents-remove-whitespace-change.html b/testing/web-platform/tests/css/css-text/white-space/display-contents-remove-whitespace-change.html
new file mode 100644
index 0000000000..baf42aa3a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/display-contents-remove-whitespace-change.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Remove display:contents with block child and whitespace sibling</title>
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
+<link rel="match" href="../../reference/pass_if_two_words.html">
+<p>There should be a space between "two" and "words" below.</p>
+two<div id="rm" style="display:contents"><div></div></div> <span>words</span>
+<script>
+  rm.offsetTop;
+  rm.remove();
+</script>
diff --git a/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-001.html b/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-001.html
new file mode 100644
index 0000000000..570f22de7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-001.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text 3 test: trailing collapsible spaces and bidi</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/eol-spaces-bidi-001-ref.html">
+<meta name="assert" content="Space before a line break is removed even if reordered to the middle of line by bidi reordering">
+
+<style>
+@font-face {
+    font-family: "Hasubi Mono";
+    src: url("/fonts/hasubi-mono/HasubiMono-Regular.woff2");
+}
+
+div {
+    font-family: "Hasubi Mono", monospace;
+    border: solid blue;
+    font-size: 1.5em;
+}
+.ref {
+    border-color: orange;
+    white-space: pre;
+}
+.w5 { width: 5.01ch; } /* .01 to cover floating point errors */
+.w6 { width: 6.01ch; }
+.w7 { width: 7.01ch; }
+
+.blue { background: #aaaaff; }
+.red { background: #ffaaaa; }
+.green { background: #aaffaa; }
+.pink { background: #ffaaff; }
+.yellow { background: #ffffaa; }
+</style>
+
+<p>Test passes if each pair of blue / orange boxes are identical (except for the color of their border).
+
+<div class=w5><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span class=yellow> </span></div>
+
+<div class="w5 ref">A<span class=blue> </span>B<span class=red> </span>ا<br>ب</div>
+
+<hr>
+
+<div class=w6><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span class=yellow> </span></div>
+
+<div class="w6 ref">A<span class=blue> </span>B<span class=red> </span>ا<br>ب</div>
+
+<hr>
+
+<div class=w7><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span class=yellow> </span></div>
+
+<div class="w7 ref">A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-002.html b/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-002.html
new file mode 100644
index 0000000000..47a1952832
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-002.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text 3 test: trailing pre-wrap spaces and bidi</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes/#text-direction">
+<link rel="help" href="http://www.unicode.org/reports/tr9/#L1">
+<link rel="match" href="reference/eol-spaces-bidi-002-ref.html">
+<meta name="assert" content="Use UAX9L1 to determine which space is at the end of the line, taking into account that such spaces, when pre-wrap, must hang.">
+
+<style>
+@font-face {
+    font-family: "Hasubi Mono";
+    src: url("/fonts/hasubi-mono/HasubiMono-Regular.woff2");
+}
+
+div {
+    font-family: "Hasubi Mono", monospace;
+    border: solid blue;
+    font-size: 1.5em;
+    white-space: pre-wrap;
+}
+.ref {
+    border-color: orange;
+    white-space: pre;
+}
+.w6 { width: 6.01ch; } /* .01 to cover floating point errors */
+.w7 { width: 7.01ch; }
+.w8 { width: 8.01ch; }
+.w9 { width: 9.01ch; }
+
+.blue { background: #aaaaff; }
+.red { background: #ffaaaa; }
+.green { background: #aaffaa; }
+.pink { background: #ffaaff; }
+.yellow { background: #ffffaa; }
+</style>
+
+<p>Test passes if each pair of blue / orange boxes are identical (except for the color of their border).
+
+
+<!-- not coloring the space between ا and ب in this particular case,
+   because per UAX9 L1 and css-text-3 4.1.2 point 4 bullet 2:
+   this space MUST be at the end of the line and hang,
+   but also the UA MAY collapse it's advance width.
+   Not giving it a color lets the test pass either way.
+-->
+
+<div class="w6"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span> </span>ب<span class=yellow> </span></div>
+<div class="w6 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<br>ب<span class=yellow> </span></div>
+
+<hr>
+
+<div class="w7"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span class=yellow> </span></div>
+<div class="w7 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span><br>ب<span class=yellow> </span></div>
+
+<hr>
+
+<!-- not coloring the last space in this particular case,
+   because per 4.1.2 point 4 bullet 2:
+   this space MUST hang,
+   but also the UA MAY collapse it's advance width.
+   So we know for sure it won't cause a line break,
+   but it may or may not be visible at the end of the line.
+   Not giving it a color lets the test pass either way.
+-->
+
+<div class="w8"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span> </span></div>
+<div class="w8 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب</div>
+
+<hr>
+
+<div class="w9"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span class=yellow> </span></div>
+<div class="w9 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span class=yellow> </span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-003.html b/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-003.html
new file mode 100644
index 0000000000..4161c95514
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-003.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>CSS Text 3 test: trailing collapsible spaces and bidi</title>
+<link rel="author" title="Jose Dapena Paz" href="mailto:jdapena@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/eol-spaces-bidi-003-ref.html">
+<link rel="match" href="reference/eol-spaces-bidi-alt-003-ref.html">
+<meta name="assert" content="Hanging space between OP and D should take paragraph direction and show in the end of the line (blue box to the left)">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+  div {
+      direction: rtl;
+
+      font: 20px/1 Ahem;
+      margin-left: 20px;
+      background: green;
+
+      width: 4ch;
+      white-space: pre-wrap;
+  }
+  span {
+      background: blue;
+  }
+</style>
+<p>Test passes if a blue box (the white space) is visible at the left start in first line.</p>
+<div>ب <span>OP</span><span> </span>D</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-004.html b/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-004.html
new file mode 100644
index 0000000000..6d3ef99887
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/eol-spaces-bidi-004.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Text 3 test: trailing collapsible spaces and bidi</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/eol-spaces-bidi-004-ref.html">
+<link rel="match" href="reference/eol-spaces-bidi-alt-004-ref.html">
+<meta name="assert" content="Hanging space should take paragraph direction and show at the end of the line (blue box to the left)">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+  div#test {
+      direction: rtl;
+      text-align: left;
+
+      font: 20px/1 Ahem;
+      margin-left: 20px;
+      background: green;
+      color: red;
+
+      width: 4ch;
+      white-space: pre-wrap;
+  }
+  span {
+      background: blue;
+  }
+  #green-cover {
+    position: absolute;
+    margin-left: 20px;
+    width: 60px;
+    height: 40px;
+    background:
+        linear-gradient(green, green) 0 0 / 60px 20px no-repeat,
+        linear-gradient(green, green) 0 20px / 20px 20px no-repeat;
+    z-index: 1;
+  }
+</style>
+<p>Test passes if a blue box (the white space) is visible at the left start in first line and <strong>no red</strong> is shown.</p>
+<div id="green-cover"></div>
+<div id="test"><span>XXX </span>X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-001.html b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-001.html
new file mode 100644
index 0000000000..c23e4fdbc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/full-width-leading-spaces-001-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) sequence at the beginning of the line must not be collapsed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 20px/1 Ahem; }
+.test {
+    width: 5em;
+    color: green;
+    background: green;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    color: red;
+}
+</style>
+
+<p>Test passes if the characters below are arranged in a green rectangle and if there is no red.
+<div class="ref">XXXXX</div>
+<div class="test">&#x3000;&#x3000;&#x3000;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-002.html b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-002.html
new file mode 100644
index 0000000000..610e5ae463
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) sequence at the beginning of the line must not be collapsed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 50px/1 Ahem; }
+.test {
+    width: 2em;
+    color: green;
+    background: green;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    color: red;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div class="test">&#x3000;&#x3000;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-003.html b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-003.html
new file mode 100644
index 0000000000..610e5ae463
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) sequence at the beginning of the line must not be collapsed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 50px/1 Ahem; }
+.test {
+    width: 2em;
+    color: green;
+    background: green;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    color: red;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div class="test">&#x3000;&#x3000;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-004.html b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-004.html
new file mode 100644
index 0000000000..f52ae6254c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling trailing ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Ideographic space sequences at the end of line must hang, and therefore not be taken into account for min content sizing.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.ref {
+    width: 100px;
+    height: 100px;
+    background: green;
+}
+.test {
+    width: min-content;
+    font-size: 100px;
+    line-height: 1;
+    background: red;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref"><div class="test">&#x03000;</div></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-005.html b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-005.html
new file mode 100644
index 0000000000..8fd86a9002
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/full-width-leading-spaces-005.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="There is a breaking opportunity at the end of a leading ideographic space (U+3000) sequence.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 50px/1 Ahem; }
+.test {
+    width: 2em;
+    color: green;
+    background: green;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    color: red;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div class="test">&#x3000;&#x3000;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/line-edge-white-space-collapse-001.html b/testing/web-platform/tests/css/css-text/white-space/line-edge-white-space-collapse-001.html
new file mode 100644
index 0000000000..3c5e7052a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/line-edge-white-space-collapse-001.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<meta charset=utf-8>
+<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/line-edge-white-space-collapse-001-ref.html">
+<title>White space collapse at end of line collapses through an inline</title>
+<style>
+div { font: 30px/30px monospace; }
+span span { border-left: 30px solid green }
+aside {
+  font: 30px/30px monospace;
+  width: 30px;
+  background: red;
+  position: absolute;
+  z-index:-1;
+  height: 300px;
+
+  /* to avoid accidental bleeding at the edges by a pixel or a sub pixel*/
+  box-sizing: border-box;
+  border: solid white 5px;
+  margin-left: 1ch;
+}
+</style>
+
+<p>Test passes if there is a single green rectangle next to ABCDEFGHIJ, and no red.
+
+<aside></aside>
+<div><span>A   <span>  </span>   </span></div>
+<div><span>B  <span>  </span>  </span></div>
+<div><span>C  <span>  </span> </span></div>
+<div><span>D  <span>  </span></span></div>
+<div><span>E <span>  </span>  </span></div>
+<div><span>F <span>  </span> </span></div>
+<div><span>G <span>  </span></span></div>
+<div><span>H<span>  </span> </span></div>
+<div><span>I<span>  </span></span></div>
+<div><span>J<span></span></span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/line-edge-white-space-collapse-002.html b/testing/web-platform/tests/css/css-text/white-space/line-edge-white-space-collapse-002.html
new file mode 100644
index 0000000000..940d77abe2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/line-edge-white-space-collapse-002.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<meta charset=utf-8>
+<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/line-edge-white-space-collapse-002-ref.html">
+<title>White space collapse at start of line collapses through an inline</title>
+<style>
+div { font: 30px/30px monospace; }
+span span { border-left: 30px solid green }
+aside {
+  font: 30px/30px monospace;
+  width: 30px;
+  background: red;
+  position: absolute;
+  z-index:-1;
+  height: 300px;
+
+  /* to avoid accidental bleeding at the edges by a pixel or a sub pixel*/
+  box-sizing: border-box;
+  border: solid white 5px;
+}
+</style>
+
+<p>Test passes if there is a single green rectangle, and no red. The letters KLMNOPQRST must be immediately to its right, vertically aligned with each other.
+
+<aside></aside>
+<div><span>   <span>  </span>  K</span></div>
+<div><span>  <span>  </span>  L</span></div>
+<div><span> <span>  </span>  M</span></div>
+<div><span><span>  </span>  N</span></div>
+<div><span>  <span>  </span> O </span></div>
+<div><span> <span>  </span> P</span></div>
+<div><span><span>  </span> Q</span></div>
+<div><span> <span>  </span>R</span></div>
+<div><span><span>  </span>S</span></div>
+<div><span><span></span>T</span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/lone-cr-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/lone-cr-001-ref.html
new file mode 100644
index 0000000000..943daefee0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/lone-cr-001-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>A B</p>
diff --git a/testing/web-platform/tests/css/css-text/white-space/lone-cr-001.tentative.html b/testing/web-platform/tests/css/css-text/white-space/lone-cr-001.tentative.html
new file mode 100644
index 0000000000..ed5ff05a70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/lone-cr-001.tentative.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>Lone CR shouldn't cause previous spaces to collapse</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1657437">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/855#issuecomment-380435969">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5410">
+<link rel="match" href="lone-cr-001-ref.html">
+<p>A &#013;B</p>
diff --git a/testing/web-platform/tests/css/css-text/white-space/nowrap-wbr-and-space-crash.html b/testing/web-platform/tests/css/css-text/white-space/nowrap-wbr-and-space-crash.html
new file mode 100644
index 0000000000..6a58083e35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/nowrap-wbr-and-space-crash.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=950209">
+<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+  white-space: nowrap;
+  width: 3ch;
+}
+</style>
+<body>
+  <div>12345<wbr> 678</div>
+<script>
+test(() => {
+  document.body.offsetTop;
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/object-replacement-1.html b/testing/web-platform/tests/css/css-text/white-space/object-replacement-1.html
new file mode 100644
index 0000000000..0192dfef69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/object-replacement-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS Text: U+FFFC OBJECT REPLACEMENT CHARACTER presence</title>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/">
+<link rel="mismatch" href="reference/object-replacement-1-notref.html">
+</head>
+<body>
+This test makes sure that the U+FFFC OBJECT REPLACEMENT CHARACTER doesn't get deleted. The test passes if the letter below isn't at the left edge of the green box.
+<div style="background: green; font-size: 100px; height: 300px;">&#xFFFC;e&#x0301;<span style="display: inline-block; height: 200px; width: 1px;"></span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/object-replacement-2.html b/testing/web-platform/tests/css/css-text/white-space/object-replacement-2.html
new file mode 100644
index 0000000000..14c5e3ba35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/object-replacement-2.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS Text: U+FFFC OBJECT REPLACEMENT CHARACTER presence</title>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/">
+<link rel="mismatch" href="reference/object-replacement-2-notref.html">
+</head>
+<body>
+This test makes sure that the U+FFFC OBJECT REPLACEMENT CHARACTER doesn't get deleted. The test passes if the letter below isn't at the left edge of the green box.
+<div style="background: green; font-size: 100px; height: 300px;">&#xFFFC;e<span style="display: inline-block; height: 200px; width: 1px;"></span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-float-001.html b/testing/web-platform/tests/css/css-text/white-space/pre-float-001.html
new file mode 100644
index 0000000000..8dd08d8099
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-float-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSS test preserved spaces and floats interaction</title>
+<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
+<link rel="match" href="reference/pre-float-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html {
+  font-family: Ahem;
+  font-size: 20px;
+  line-height: 1;
+}
+.container {
+  white-space: pre;
+  width: 10ch;
+  margin-bottom: 1em;
+}
+.float {
+  float: left;
+  width: 3ch;
+  height: 2em;
+  background: orange;
+}
+</style>
+<body>
+  <div class="float"></div>
+  <div class="container">123456 <br>123456</div>
+  <div class="float"></div>
+  <div class="container">1234567 <br>1234567</div>
+  <div class="float"></div>
+  <div class="container">1234567  <br>1234567</div>
+  <div class="float"></div>
+  <div class="container">1234567   <br>1234567</div>
+  <div class="float"></div>
+  <div class="container">12345678 <br>12345678</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-line-051.html b/testing/web-platform/tests/css/css-text/white-space/pre-line-051.html
new file mode 100644
index 0000000000..2a918fc28e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-line-051.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: inline starting with a collapsible white space</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <style>
+  div
+    {
+      background-color: red;
+      color: green;
+      float: left;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+     }
+
+  span#pre-line
+    {
+      white-space: pre-line;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div><span id="pre-line">AB&NewLine;</span><span> CD</span></div>
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-line-052.html b/testing/web-platform/tests/css/css-text/white-space/pre-line-052.html
new file mode 100644
index 0000000000..76eea85972
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-line-052.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: inline starting with a collapsible white space</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <style>
+  div
+    {
+      background-color: red;
+      color: green;
+      display: inline-block;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+     }
+
+  span#pre-line
+    {
+      white-space: pre-line;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div><span id="pre-line">AB&NewLine;</span><span> CD</span></div>
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-line-br-with-whitespace-child-crash.html b/testing/web-platform/tests/css/css-text/white-space/pre-line-br-with-whitespace-child-crash.html
new file mode 100644
index 0000000000..c7e1855f97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-line-br-with-whitespace-child-crash.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>CSS Text Test: Chrome pre-line crash test</title>
+<link rel="help" href="https://crbug.com/989827">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  br { white-space: pre-line }
+</style>
+<script>
+  test(() => {
+    document.documentElement.remove();
+    const br = document.createElement("br");
+    br.appendChild(document.createTextNode(""));
+    document.appendChild(br);
+    br.offsetTop;
+    br.firstChild.data = " ";
+  }, "Modifying data of a text child of a root br element with pre-line should not crash.");
+</script>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-line-with-space-and-newline.html b/testing/web-platform/tests/css/css-text/white-space/pre-line-with-space-and-newline.html
new file mode 100644
index 0000000000..5d75597d83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-line-with-space-and-newline.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: 'white-space: pre-line' with space and newline</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text/#white-space-phase-1">
+<link rel="help" href="https://crbug.com/1136688">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="
+  Checks that collapsible spaces immediately preceding a sequent break are removed.
+  That still applies if they are separated into different inline elements.
+  Also, if some text is inserted dynamically, the browser should not crash.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+span {
+  font: 25px/1 Ahem;
+  background: red;
+  color: green;
+}
+i {
+  white-space: pre-line;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="static together">
+  <span>XXXXXXXX<i> &#10;</i>XXXXXXXX</span>
+</div>
+<div class="static separated">
+  <span>XXXXXXXX<i> </i><i>&#10;</i>XXXXXXXX</span>
+</div>
+<div class="dynamic together">
+  <span>XXXXXXXX<i> &#10;</i></span>
+</div>
+<div class="dynamic separated">
+  <span>XXXXXXXX<i> </i><i>&#10;</i></span>
+</div>
+<script>
+// Force layout
+document.body.offsetLeft;
+
+// Insert text, should not crash
+for (let span of document.querySelectorAll(".dynamic > span")) {
+  span.append("XXXXXXXX");
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-with-whitespace-crash.html b/testing/web-platform/tests/css/css-text/white-space/pre-with-whitespace-crash.html
new file mode 100644
index 0000000000..89e5c3a71f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-with-whitespace-crash.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+  <title>pre(white-space's one of values) crash if there is no available width</title>
+  <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=999863">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script>test(()=>{})</script>
+</head>
+<body>
+  abc<b style="margin-left: 100%; white-space: pre;">def</b>
+  <div>
+    <li>
+      <a href="dummy">success if does not crash</a>
+    </li>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-001.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-001.html
new file mode 100644
index 0000000000..87ffad9631
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap is not wrapped</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX    XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-002.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-002.html
new file mode 100644
index 0000000000..e35c65f300
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of the line and white-space:pre-wrap does not change based on word-break:break-all</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if word-break is break-all">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX    XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-003.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-003.html
new file mode 100644
index 0000000000..6c4524d4d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on word-break:keep-all</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if word-break is keep-all.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  word-break: keep-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX    XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-004.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-004.html
new file mode 100644
index 0000000000..cdaf900e3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on line-break:loose</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if line-break is loose.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  line-break: loose;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX    XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-005.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-005.html
new file mode 100644
index 0000000000..8c91a11c5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-005.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on line-break:normal</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if line-break is normal.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  line-break: normal;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX    XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-006.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-006.html
new file mode 100644
index 0000000000..8da2926819
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-006.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on line-break:strict</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if line-break is strict.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  line-break: strict;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX    XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-007.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-007.html
new file mode 100644
index 0000000000..32fe4f3354
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-007.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on overflow-wrap:break-word</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if overflow-wrap is break-word.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  word-wrap: break-word; /* deprecated alias */
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX    XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-008.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-008.html
new file mode 100644
index 0000000000..e2faf3671c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-008.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: pre-wrap</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="The word is not broken despite the 'word-break: break-word' if there are previous breaking opportunities, honoring the white-space: pre-wrap value.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+   font-size: 20px;
+   font-family: Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+  white-space: pre;
+}
+.test {
+  color: green;
+  line-height: 1em;
+  width: 5ch;
+
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"> XX  <br>XXX</div>
+  <div class="test"> XX XXX </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-009.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-009.html
new file mode 100644
index 0000000000..0912a2d3a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-009.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: pre-wrap</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="The word is not broken despite the 'word-break: break-word' if there are previous breaking opportunities, honoring the white-space: pre-wrap value.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+   font-size: 20px;
+   font-family: Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+  white-space: pre;
+}
+.test {
+  color: green;
+  line-height: 1em;
+  width: 5ch;
+
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"> XX  <br>XXX</div>
+  <div class="test"> XX XXX </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-010.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-010.html
new file mode 100644
index 0000000000..71d169c65c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-010.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: pre-wrap</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the white-space: pre-wrap value.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+   font-size: 20px;
+   font-family: Ahem;
+   line-height: 1em;
+}
+.red {
+  position: absolute;
+  white-space: pre;
+  background: green;
+  color: red;
+  width: 40px;
+  height: 40px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"><br>XX</div>
+  <div class="test"> XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-011.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-011.html
new file mode 100644
index 0000000000..9945e3ae2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-011.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not cause wrapping</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="When the white-space property is set to pre-wrap, preserved white space at the end of the line must hang or be collapsed, and must not cause preceeding content to be wrapped.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
+
+  width: 3ch;
+  margin-left: -1ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div> XX&#x20;
+ XX </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-012.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-012.html
new file mode 100644
index 0000000000..e844d97860
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-012.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of soft-wrapped lines and white-space:pre-wrap with right alignement</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-012-ref.html">
+<meta name="assert" content="When white-space is pre-wrap, spaces at the end of soft-wrapped lines hang, so they do not have any effect when right-aligning.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
+
+  width: 3ch;
+  text-align: right;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-013.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-013.html
new file mode 100644
index 0000000000..23c4b536cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-013.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of soft-wrapped lines and white-space:pre-wrap with center alignement</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-013-ref.html">
+<meta name="assert" content="When white-space is pre-wrap, spaces at the end of soft-wrapped lines hang, so they do not have any effect when centering.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0.5ch 0/2ch 2ch no-repeat;
+
+  width: 3ch;
+  text-align: center;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-014.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-014.html
new file mode 100644
index 0000000000..26423c1928
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-014.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of soft-wrapped lines and white-space:pre-wrap with justification</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-014-ref.html">
+<meta name="assert" content="When white-space is pre-wrap, spaces at the end of soft-wrapped lines hang, so they do not have any effect when justifying.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  height: 1em;
+  white-space: pre-wrap;
+
+  color: transparent;
+  background: red;
+
+  width: 4ch;
+  text-align: justify;
+}
+span {
+  color: green;
+  background: green;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
+  <div><span>X X</span> X</div>
+  <!-- invisible last line, because justification works on non-last lines-->
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-015.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-015.html
new file mode 100644
index 0000000000..3d03260eb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-015.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: pre-wrap</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="The text is broken at the end of the space between the two words, never before, so it hangs and cause an overflow">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 20px;
+
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="ref">X<span style="color: green">X</span><br>X<span style="color: green">X</span></div>
+  <div class="test">X X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-016.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-016.html
new file mode 100644
index 0000000000..0590f669e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-016.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: white-space: pre-wrap</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the white-space: pre-wrap value.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+   font-size: 20px;
+   font-family: Ahem;
+   line-height: 1em;
+}
+.red {
+  position: absolute;
+  white-space: pre;
+  background: green;
+  color: red;
+  width: 40px;
+  height: 40px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 2ch;
+
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"><br>XX</div>
+  <div class="test"> XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-017.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-017.html
new file mode 100644
index 0000000000..541e1abe57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-017.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: pre-wrap trailing spaces and max-content</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="When white-space is pre-wrap, trailing spaces spaces are taken into account for max-content">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#red {
+  position: absolute;
+  z-index:-1;
+  width: 40px;
+  height: 40px;
+  background: red;
+}
+#test {
+  margin-left: -1em;
+  font: 40px/1 Ahem;
+  color: white;
+  background: green;
+  width: max-content;
+  white-space: pre-wrap
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+<div id=red></div>
+<div id=test>X&#x0020;</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-018.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-018.html
new file mode 100644
index 0000000000..f911b2dcde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-018.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: pre-wrap spaces and centering</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-018-ref.html">
+<meta name="assert" content="conditionally hanging white space at the end of lines with forced breaks provides symmetry with the start of the line">
+<style>
+div {
+  font-size: 2rem;
+  margin: 1rem;
+}
+#test {
+  white-space: pre-wrap;
+  width: 5ch;
+  border: solid 1px;
+  font-family: monospace;
+  text-align: center;
+  text-decoration: underline;
+}
+
+#ref {
+  white-space: pre;
+  width: 5ch;
+  border: solid 1px;
+  font-family: monospace;
+}
+#ref span {
+  text-decoration: underline;
+}
+
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test> 0 </div>
+<div id=ref> <span> 0 </span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-019.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-019.html
new file mode 100644
index 0000000000..58dae9f500
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-019.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: trailing pre-wrap spaces and hanging</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-019-ref.html">
+<meta name="assert" content="trailing pre-wrap spaces hang at soft-wrapped lines, and hang conditionally before forced breaks.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 2rem;
+  font-family: Ahem;
+  width: 3ch;
+}
+#test1, #test2 {
+  white-space: pre-wrap;
+  color: green;
+}
+#test2 {
+  text-align: right;
+}
+
+.ref {
+  white-space: pre;
+  color: red;
+  position: absolute;
+  z-index: -1;
+}
+
+</style>
+
+<p>Test passes if there are green squares below and no red.
+
+<div class=ref> 0 <br>0 0 <br>0 </div>
+<div id=test1> 0 0 0 0 </div>
+
+<div class=ref>  0<br>0 0 <br> 0</div>
+<div id=test2> 0 0 0 0 </div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-020.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-020.html
new file mode 100644
index 0000000000..ec3e862115
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-020.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: trailing pre-wrap spaces and conditional hanging</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-020-ref.html">
+<meta name="assert" content="trailing pre-wrap spaces hang conditionally before forced breaks, which is different from not hanging at all, as it doesn't cause wrapping at earlier opportunities.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 2rem;
+  font-family: Ahem;
+  width: 3ch;
+}
+#test {
+  white-space: pre-wrap;
+  color: green;
+}
+
+.ref {
+  white-space: pre;
+  color: red;
+  position: absolute;
+  z-index: -1;
+}
+
+</style>
+
+<p>Test passes if there are green rectangles below and no red.
+
+<div class=ref>0 0<br>0 0</div>
+<div id=test>0 0 0 0 </div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-051.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-051.html
new file mode 100644
index 0000000000..19d7f4dbbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-051.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: inline starting with a collapsible white space</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <style>
+  div
+    {
+      background-color: red;
+      color: green;
+      float: left;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+     }
+
+  span#pre-wrap
+    {
+      white-space: pre-wrap;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div><span id="pre-wrap">AB&NewLine;</span><span> CD</span></div>
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-052.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-052.html
new file mode 100644
index 0000000000..4794f52e16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-052.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: inline starting with a collapsible white space</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <style>
+  div
+    {
+      background-color: red;
+      color: green;
+      display: inline-block;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+     }
+
+  span#pre-wrap
+    {
+      white-space: pre-wrap;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div><span id="pre-wrap">AB&NewLine;</span><span> CD</span></div>
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-center-001.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-center-001.html
new file mode 100644
index 0000000000..0d923665b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-center-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-center-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: center;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly centered:</p>
+
+<div class=test>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-center-002.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-center-002.html
new file mode 100644
index 0000000000..9e28158fdc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-center-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-center-002-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: center;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly centered:</p>
+
+<div class=test dir=rtl>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-center-003.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-center-003.html
new file mode 100644
index 0000000000..8225e80fe0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-center-003.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-center-003-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: center;
+  unicode-bidi: bidi-override;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly centered:</p>
+
+<div class=test dir=rtl>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-end-001.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-end-001.html
new file mode 100644
index 0000000000..3d002c20df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-end-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-right-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: end;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly right-aligned:</p>
+
+<div class=test>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-end-002.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-end-002.html
new file mode 100644
index 0000000000..c1bd5902d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-end-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-left-002-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: end;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly left-aligned:</p>
+
+<div class=test dir=rtl>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-end-003.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-end-003.html
new file mode 100644
index 0000000000..72530985f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-end-003.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-left-003-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: end;
+  unicode-bidi: bidi-override;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly left-aligned:</p>
+
+<div class=test dir=rtl>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-left-001.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-left-001.html
new file mode 100644
index 0000000000..a6a286b9c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-left-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-left-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: left;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly left-aligned:</p>
+
+<div class=test>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-left-002.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-left-002.html
new file mode 100644
index 0000000000..0671b0e7eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-left-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-left-002-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: left;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly left-aligned:</p>
+
+<div class=test dir=rtl>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-left-003.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-left-003.html
new file mode 100644
index 0000000000..bdef8ada0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-left-003.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-left-003-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: left;
+  unicode-bidi: bidi-override;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly left-aligned:</p>
+
+<div class=test dir=rtl>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-right-001.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-right-001.html
new file mode 100644
index 0000000000..878b297df4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-right-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-right-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: right;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly right-aligned:</p>
+
+<div class=test>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-right-002.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-right-002.html
new file mode 100644
index 0000000000..0c13f9ca18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-right-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-right-002-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: right;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly right-aligned:</p>
+
+<div class=test dir=rtl>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-right-003.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-right-003.html
new file mode 100644
index 0000000000..e3cae16720
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-right-003.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-right-003-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: right;
+  unicode-bidi: bidi-override;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly right-aligned:</p>
+
+<div class=test dir=rtl>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-start-001.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-start-001.html
new file mode 100644
index 0000000000..c9b884e892
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-start-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-left-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: start;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly left-aligned:</p>
+
+<div class=test>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-start-002.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-start-002.html
new file mode 100644
index 0000000000..e226a19c94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-start-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-right-002-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: start;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly right-aligned:</p>
+
+<div class=test dir=rtl>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-start-003.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-start-003.html
new file mode 100644
index 0000000000..f91b38c6ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-align-start-003.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text test: white-space:pre-wrap vs text-align</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<meta name="assert" content="white-space at end of line must hang">
+<link rel="match" href="reference/pre-wrap-align-right-003-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: pre-wrap;
+  text-align: start;
+  unicode-bidi: bidi-override;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly right-aligned:</p>
+
+<div class=test dir=rtl>one two three four five
+six seven eight nine ten.
+un deux trois quatre cinq
+six sept huit neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-float-001.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-float-001.html
new file mode 100644
index 0000000000..af29b0505e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-float-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSS test preserved spaces and floats interaction</title>
+<link rel="author" title="Koji Ishii" href="kojii@chromium.org">
+<link rel="match" href="reference/pre-wrap-float-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html {
+  font-family: Ahem;
+  font-size: 20px;
+  line-height: 1;
+}
+.container {
+  white-space: pre-wrap;
+  width: 10ch;
+  margin-bottom: 1em;
+}
+.float {
+  float: left;
+  width: 3ch;
+  height: 2em;
+  background: orange;
+}
+</style>
+<body>
+  <div class="float"></div>
+  <div class="container">123456 123456</div>
+  <div class="float"></div>
+  <div class="container">1234567 1234567</div>
+  <div class="float"></div>
+  <div class="container">1234567  1234567</div>
+  <div class="float"></div>
+  <div class="container">1234567   1234567</div>
+  <div class="float"></div>
+  <div class="container">12345678 12345678</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-001.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-001.html
new file mode 100644
index 0000000000..756a04dea5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-001.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: breaking opportunities at leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space at the beginning of the line are breaking opportunities when white-space is pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 50px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 2ch;
+  white-space: pre-wrap;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref"><span>XX</span><br>XX</div>
+<div class="test"> XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-002.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-002.html
new file mode 100644
index 0000000000..b3136f37fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-002.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: breaking opportunities at leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should be breaking opportunities when white-space is pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+  white-space: pre-wrap;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<span>XX<br>XXXX</span><br>XXXX<br><span>XXXX</span></div>
+<div class="test">XX&#x000a; XXXX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-003.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-003.html
new file mode 100644
index 0000000000..797eb25b39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-003.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: breaking opportunities at leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should be breaking opportunities when white-space is pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+  white-space: pre-wrap;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<span>XX<br>XXXX</span><br>XXXX<br><span>XXXX</span></div>
+<div class="test">XX<br> XXXX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-004.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-004.html
new file mode 100644
index 0000000000..882ffc610c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-004.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: forced breaks create preserverd leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should not be collapsed, honoring white-space: pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+  white-space: pre-wrap;
+}
+</style>
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XXX<span>XX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX<br>XXXXX</span></div>
+<div class="test">XXX<br>   XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-005.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-005.html
new file mode 100644
index 0000000000..a896a44dcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-005.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: forced breaks create preserverd leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should not be collapsed, honoring white-space: pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+  white-space: pre-wrap;
+}
+</style>
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XXX<span>XX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX<br>XXXXX</span></div>
+<div class="test">XXX  <br>   XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-006.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-006.html
new file mode 100644
index 0000000000..3d64853dcb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-006.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: forced breaks create preserverd leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should not be collapsed, honoring white-space: pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+  white-space: pre-wrap;
+}
+</style>
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XXX<span>XX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX<br>XXXXX</span></div>
+<div class="test">XXX <!--end of line space intentional-->
+   XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-007.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-007.html
new file mode 100644
index 0000000000..7ab8bca45c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-007.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: forced breaks create preserverd leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should not be collapsed, honoring white-space: pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+  white-space: pre-wrap;
+}
+</style>
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XXX<span>XX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX<br>XXXXX</span></div>
+<div class="test">XXX  <!--end of line spaces intentional-->
+   XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-008.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-008.html
new file mode 100644
index 0000000000..aa5ab5b408
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-008.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: forced breaks create preserverd leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should not be collapsed, honoring white-space: pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+  white-space: pre-wrap;
+}
+</style>
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<span>XXX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX<br>XXXXX</span></div>
+<div class="test">XX   <!--end of line spaces intentional-->
+   XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-009.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-009.html
new file mode 100644
index 0000000000..f49a8ee9ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-009.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: forced breaks create preserverd leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should not be collapsed, honoring white-space: pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+  white-space: pre-wrap;
+}
+</style>
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">X<span>XXXX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX<br>XXXXX</span></div>
+<div class="test">X    <!--end of line spaces intentional-->
+   XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-010.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-010.html
new file mode 100644
index 0000000000..64db374102
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-010.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: forced breaks create preserverd leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should not be collapsed, honoring white-space: pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+  white-space: pre-wrap;
+}
+</style>
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XXX<span>XX<br>XXXXX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX</span></div>
+<div class="test">XXX<br>
+   XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-011.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-011.html
new file mode 100644
index 0000000000..7a003fecb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-011.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: forced breaks create preserverd leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should not be collapsed, honoring white-space: pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+  white-space: pre-wrap;
+}
+</style>
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XXX<span>XX</span><br>XXX<span>XX<br>XXX</span>XX<br><span>XXXXX<br>XXXXX</span></div>
+<div class="test">XXX XXX
+   XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-012.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-012.html
new file mode 100644
index 0000000000..c9e8541300
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-012.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: breaking opportunities at leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should be breaking opportunities when white-space is pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+  white-space: pre-wrap;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref"><span>X</span>X<span>XX<br>XXXX</span><br>XXXX<br><span>XXXX</span></div>
+<div class="test"> <span>X </span>&#x000a; XXXX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-013.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-013.html
new file mode 100644
index 0000000000..d089902f34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-013.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: breaking opportunities at leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should be breaking opportunities when white-space is pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 4ch;
+  white-space: pre-wrap;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref"><span>XX</span>X<span>X<br>XXXX</span><br>XXXX<br><span>XXXX</span></div>
+<div class="test"> <span> </span>X&#x000a; XXXX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-014.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-014.html
new file mode 100644
index 0000000000..b3ad933f9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-014.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: breaking opportunities at leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Preserved white space after forced breaks become leading white-spaces and should be breaking opportunities when white-space is pre-wrap.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 5ch;
+  white-space: pre-wrap;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref"><span>X</span>X<span>XX</span>X<br><span>XXXXX</span><br>XXXXX<br><span>XXXXX<br>XXXXX</span></div>
+<div class="test"> X<span> </span> X&#x000a; XXXXX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-015.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-015.html
new file mode 100644
index 0000000000..9b9b3690e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-015.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: breaking opportunities at leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Empty line with preserved white spaces must account for box sizing.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.ref {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  font: 50px/1 Ahem;
+  width: 2ch;
+  background: green;
+  color: green;
+
+  white-space: pre-wrap;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref"></div>
+<div class="test">&#32;&#32;&#32;X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-016.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-016.html
new file mode 100644
index 0000000000..57a121815d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-016.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: breaking opportunities at leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Empty line with preserved white spaces must account for box sizing.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.ref {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  font: 25px/1 Ahem;
+  width: 4ch;
+  background: green;
+  color: green;
+
+  white-space: pre-wrap;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref"></div>
+<div class="test">&#32;&#32;&#32;&#32;&#32;XXXX<br>&#32;&#32;&#32;&#32;&#32;X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-017.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-017.html
new file mode 100644
index 0000000000..9aad17e9c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-leading-spaces-017.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: breaking opportunities at leading spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Empty line with preserved white spaces must account fpor box sizing.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.ref {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  font: 50px/1 Ahem;
+  width: 2ch;
+  background: green;
+  color: green;
+
+  white-space: pre-wrap;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref"></div>
+<div class="test">&#32;<span>&#32;&#32;</span>X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-001.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-001.html
new file mode 100644
index 0000000000..e57da83e9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: wrapping opportunity after pre-wrap tabs</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs with white-space:pre-wrap">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: pre-wrap;
+  color: green;
+  width: 16ch;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div id=ref>XX<br>XX</div>
+<div id=test>XX&#x09;&#x09;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-002.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-002.html
new file mode 100644
index 0000000000..11ec850940
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: wrapping opportunity after pre-wrap tabs and spaces</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs and spaces with white-space:pre-wrap">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: pre-wrap;
+  color: green;
+  width: 16ch;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div id=ref>XX<br>XX</div>
+<div id=test>XX &#x09; &#x09;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-003.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-003.html
new file mode 100644
index 0000000000..a54debe80a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: no wrapping opportunity between pre-wrap tabs</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs with white-space:pre-wrap, but not between or before each tab.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: pre-wrap;
+  color: green;
+  width: 2ch;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div id=ref>XX<br>XX</div>
+<div id=test>XX&#x09;&#x09;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-004.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-004.html
new file mode 100644
index 0000000000..22c3ec45c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-004.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: no wrapping opportunity between pre-wrap tabs and spaces</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-1">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="There is a wrapping opportunity at the end of a sequence of tabs and spaces with white-space:pre-wrap, but not between or before each.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: pre-wrap;
+  color: green;
+  width: 2ch;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div id=ref>XX<br>XX</div>
+<div id=test>XX &#x09; &#x09;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-005.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-005.html
new file mode 100644
index 0000000000..edbc5974c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-005.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: pre-wrap tabs hang</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="a sequence of pre-wrap tabs at the end of a line hangs.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: pre-wrap;
+  color: green;
+  width: 2ch;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div id=ref>XX<br>XX</div>
+<div id=test>X<wbr>X&#x09;&#x09;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-006.html b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-006.html
new file mode 100644
index 0000000000..4bdb7a21c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/pre-wrap-tab-006.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: pre-wrap tabs and spaces hang</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-001-ref.html">
+<meta name="assert" content="a sequence of pre-wrap tabs and spaces at the end of a line hangs.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+}
+#test {
+  white-space: pre-wrap;
+  color: green;
+  width: 2ch;
+}
+#ref {
+  color: red;
+  position: absolute;
+  z-index:-1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div id=ref>XX<br>XX</div>
+<div id=test>X<wbr>X&#x09;  &#x09;&#x09; XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/break-spaces-tab-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/break-spaces-tab-003-ref.html
new file mode 100644
index 0000000000..52a8c491cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/break-spaces-tab-003-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+  color: green;
+}
+</style>
+
+<p>Test passes if there are two <strong>filled green squares</strong> and <strong>no red</strong>.</p>
+<div>X<br><br><br><br><br>X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/break-spaces-tab-005-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/break-spaces-tab-005-ref.html
new file mode 100644
index 0000000000..798e35fd66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/break-spaces-tab-005-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+  white-space: break-spaces;
+  color: green;
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if there is a green rectangle and no red.
+<div>XX<br>XX<br>XX<br>XX<br>XX<br>XX<br>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/control-chars-000-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/control-chars-000-ref.html
new file mode 100644
index 0000000000..9d5fcb2714
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/control-chars-000-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test mismatch reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>Test passes if there is a visible character below.
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/control-chars-00D-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/control-chars-00D-ref.html
new file mode 100644
index 0000000000..ae214b7485
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/control-chars-00D-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Reference file</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+  font-size: 2em;
+  font-family: monospace;
+  color: blue;
+  width: 4ch;
+}
+#ref {
+    color: orange;
+}
+.p {white-space: pre;}
+.pw {white-space: pre-wrap;}
+.pl {white-space: pre-line;}
+.bs {white-space: break-spaces;}
+.nw {white-space: nowrap;}
+</style>
+
+<p>Test passes if blue charaters are arranged exactly in the same way as the orange ones.
+
+<div>A      B C<span class=p>   </span>D<span class=pw>   </span>E<span class=pl>      </span>F<span class=bs>   </span>G<span class=nw>     </span>H</div>
+
+<div id=ref>A      B C<span class=p>   </span>D<span class=pw>   </span>E<span class=pl>      </span>F<span class=bs>   </span>G<span class=nw>     </span>H</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-001-ref.html
new file mode 100644
index 0000000000..2aa8f4a83c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-001-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text 3 test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+
+<style>
+@font-face {
+    font-family: "Hasubi Mono";
+    src: url("/fonts/hasubi-mono/HasubiMono-Regular.woff2");
+}
+
+div {
+    font-family: "Hasubi Mono", monospace;
+    border: solid blue;
+    font-size: 1.5em;
+    white-space: pre;
+}
+.ref {
+    border-color: orange;
+}
+.w5 { width: 5.01ch; }
+.w6 { width: 6.01ch; }
+.w7 { width: 7.01ch; }
+
+.blue { background: #aaaaff; }
+.red { background: #ffaaaa; }
+.green { background: #aaffaa; }
+</style>
+
+<p>Test passes if each pair of blue / orange boxes are identical (except for the color of their border).
+
+<div class="w5">A<span class=blue> </span>B<span class=red> </span>ا<br>ب</div>
+<div class="w5 ref">A<span class=blue> </span>B<span class=red> </span>ا<br>ب</div>
+
+<hr>
+
+<div class="w6">A<span class=blue> </span>B<span class=red> </span>ا<br>ب</div>
+<div class="w6 ref">A<span class=blue> </span>B<span class=red> </span>ا<br>ب</div>
+
+<hr>
+
+<div class="w7">A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب</div>
+<div class="w7 ref">A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-002-ref.html
new file mode 100644
index 0000000000..05b5546397
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-002-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text 3 test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+
+<style>
+@font-face {
+    font-family: "Hasubi Mono";
+    src: url("/fonts/hasubi-mono/HasubiMono-Regular.woff2");
+}
+
+div {
+    font-family: "Hasubi Mono", monospace;
+    border: solid blue;
+    font-size: 1.5em;
+    white-space: pre;
+}
+.ref {
+    border-color: orange;
+}
+.w6 { width: 6.01ch; }
+.w7 { width: 7.01ch; }
+.w8 { width: 8.01ch; }
+.w9 { width: 9.01ch; }
+
+.blue { background: #aaaaff; }
+.red { background: #ffaaaa; }
+.green { background: #aaffaa; }
+.pink { background: #ffaaff; }
+.yellow { background: #ffffaa; }
+</style>
+
+<p>Test passes if each pair of blue / orange boxes are identical (except for the color of their border).
+
+
+<div class="w6"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<br>ب<span class=yellow> </span></div>
+<div class="w6 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<br>ب<span class=yellow> </span></div>
+
+<hr>
+
+<div class="w7"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span><br>ب<span class=yellow> </span></div>
+<div class="w7 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span><br>ب<span class=yellow> </span></div>
+
+<hr>
+
+<div class="w8"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب</div>
+<div class="w8 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب</div>
+
+<hr>
+
+<div class="w9"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span class=yellow> </span></div>
+<div class="w9 ref"><span class=pink> </span>A<span class=blue> </span>B<span class=red> </span>ا<span class=green> </span>ب<span class=yellow> </span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-003-ref.html
new file mode 100644
index 0000000000..57e23bdc10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-003-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text 3 test reference</title>
+<link rel="author" title="Jose Dapena Paz" href="mailto:jdapena@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+  div {
+      direction: rtl;
+
+      font: 20px/1 Ahem;
+      margin-left: 20px;
+      background: green;
+
+      width: 4ch;
+  }
+  .blue { color: blue; }
+  .space { color: transparent; }
+  .text { background: blue; }
+</style>
+<p>Test passes if a blue box (the white space) is visible at the left start in first line.</p>
+<div>ب<span class="blue">X</span><span class="text">OP</span><span class="space">X<br>XXX</span>D</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-004-ref.html
new file mode 100644
index 0000000000..d845f2ac95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-004-ref.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Text 3 test reference</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+  div#test {
+      text-align: right;
+
+      font: 20px/1 Ahem;
+      background: linear-gradient(green, green) 1ch 0 / cover no-repeat;
+
+      width: 5ch;
+      white-space: pre;
+
+      color: blue;
+  }
+</style>
+<p>Test passes if a blue box (the white space) is visible at the left start in first line and <strong>no red</strong> is shown.</p>
+<div id="test">X    <br> </div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-alt-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-alt-003-ref.html
new file mode 100644
index 0000000000..6861ec61de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-alt-003-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text 3 test reference</title>
+<link rel="author" title="Jose Dapena Paz" href="mailto:jdapena@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+  div {
+      direction: rtl;
+
+      font: 20px/1 Ahem;
+      margin-left: 20px;
+      background: green;
+
+      width: 4ch;
+      overflow: hidden;
+  }
+  .blue { color: blue; }
+  .space { color: transparent; }
+  .text { background: blue; }
+</style>
+<p>Test passes if a blue box (the white space) is visible at the left start in first line.</p>
+<div>ب<span class="blue">X</span><span class="text">OP</span><span class="space">X<br>XXX</span>D</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-alt-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-alt-004-ref.html
new file mode 100644
index 0000000000..4d068654a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/eol-spaces-bidi-alt-004-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Text 3 test reference</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+  div#test {
+      font: 20px/1 Ahem;
+      margin-left: 20px;
+      background: green;
+
+      width: 4ch;
+      white-space: pre;
+  }
+</style>
+<p>Test passes if a blue box (the white space) is visible at the left start in first line and <strong>no red</strong> is shown.</p>
+<div id="test"> <br> </div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/full-width-leading-spaces-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/full-width-leading-spaces-001-ref.html
new file mode 100644
index 0000000000..2b9cf1c3b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/full-width-leading-spaces-001-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<p>Test passes if the characters below are arranged in a green rectangle and if there is no red.
+<div style="width: 100px; height: 20px; background: green"></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/line-edge-white-space-collapse-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/line-edge-white-space-collapse-001-ref.html
new file mode 100644
index 0000000000..02fa594255
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/line-edge-white-space-collapse-001-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<meta charset=utf-8>
+<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<title>CSS test reference</title>
+<style>
+div { font: 30px/30px monospace; }
+span { border-left: 30px solid green }
+</style>
+
+<p>Test passes if there is a single green rectangle next to ABCDEFGHIJ, and no red.
+
+<div>A<span></span></div>
+<div>B<span></span></div>
+<div>C<span></span></div>
+<div>D<span></span></div>
+<div>E<span></span></div>
+<div>F<span></span></div>
+<div>G<span></span></div>
+<div>H<span></span></div>
+<div>I<span></span></div>
+<div>J<span></span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/line-edge-white-space-collapse-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/line-edge-white-space-collapse-002-ref.html
new file mode 100644
index 0000000000..ea1faa2ed1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/line-edge-white-space-collapse-002-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<meta charset=utf-8>
+<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<title>CSS test reference</title>
+<style>
+div { font: 30px/30px monospace; }
+span { border-left: 30px solid green }
+</style>
+
+<p>Test passes if there is a single green rectangle, and no red. The letters KLMNOPQRST must be immediately to its right, vertically aligned with each other.
+
+<div><span>K</span></div>
+<div><span>L</span></div>
+<div><span>M</span></div>
+<div><span>N</span></div>
+<div><span>O</span></div>
+<div><span>P</span></div>
+<div><span>Q</span></div>
+<div><span>R</span></div>
+<div><span>S</span></div>
+<div><span>T</span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/object-replacement-1-notref.html b/testing/web-platform/tests/css/css-text/white-space/reference/object-replacement-1-notref.html
new file mode 100644
index 0000000000..c4280f5fdd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/object-replacement-1-notref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS Text: U+FFFC OBJECT REPLACEMENT CHARACTER presence</title>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/">
+</head>
+<body>
+This test makes sure that the U+FFFC OBJECT REPLACEMENT CHARACTER doesn't get deleted. The test passes if the letter below isn't at the left edge of the green box.
+<div style="background: green; font-size: 100px; height: 300px;">e&#x0301;<span style="display: inline-block; height: 200px; width: 1px;"></span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/object-replacement-2-notref.html b/testing/web-platform/tests/css/css-text/white-space/reference/object-replacement-2-notref.html
new file mode 100644
index 0000000000..644dfc4b02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/object-replacement-2-notref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS Text: U+FFFC OBJECT REPLACEMENT CHARACTER presence</title>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/">
+</head>
+<body>
+This test makes sure that the U+FFFC OBJECT REPLACEMENT CHARACTER doesn't get deleted. The test passes if the letter below isn't at the left edge of the green box.
+<div style="background: green; font-size: 100px; height: 300px;">e<span style="display: inline-block; height: 200px; width: 1px;"></span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-float-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-float-001-ref.html
new file mode 100644
index 0000000000..9753cb37b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-float-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html {
+  font-family: Ahem;
+  font-size: 20px;
+  line-height: 1;
+}
+.container {
+  white-space: pre;
+  margin-bottom: 1em;
+}
+.float {
+  float: left;
+  width: 3ch;
+  height: 2em;
+  background: orange;
+}
+</style>
+<body>
+  <div class="float"></div>
+  <div class="container">123456<br>123456</div>
+  <div class="float"></div>
+  <div class="container">1234567<br>1234567</div>
+  <div class="float"></div>
+  <div class="container">1234567<br>1234567</div>
+  <div class="float"></div>
+  <div class="container">1234567<br>1234567</div>
+  <div class="float"></div>
+  <div class="container">12345678<br>12345678</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-001-ref.html
new file mode 100644
index 0000000000..c60a342a03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference file</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  color: green;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX<br>XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-012-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-012-ref.html
new file mode 100644
index 0000000000..a0aee138b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-012-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  color: green;
+
+  width: 2ch;
+  margin-left: 1ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX
+XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-013-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-013-ref.html
new file mode 100644
index 0000000000..b91fc8b6c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-013-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  color: green;
+
+  width: 2ch;
+  margin-left: 0.5ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div>XX
+XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-014-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-014-ref.html
new file mode 100644
index 0000000000..87d51f6067
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-014-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  color: green;
+
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p>
+  <div>XXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-018-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-018-ref.html
new file mode 100644
index 0000000000..a87649432f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-018-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2rem;
+  margin: 1rem;
+  white-space: pre;
+  width: 5ch;
+  border: solid 1px;
+  font-family: monospace;
+}
+span {
+  text-decoration: underline;
+}
+
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div> <span> 0 </span></div>
+<div> <span> 0 </span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-019-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-019-ref.html
new file mode 100644
index 0000000000..e3be478a35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-019-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 2rem;
+  font-family: Ahem;
+  width: 3ch;
+  white-space: pre;
+  color: green;
+}
+
+</style>
+
+<p>Test passes if there are green squares below and no red.
+
+<div class=ref> 0 <br>0 0 <br>0 </div>
+
+<div class=ref>  0<br>0 0 <br> 0</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-020-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-020-ref.html
new file mode 100644
index 0000000000..2ef5e7f408
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-020-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 2rem;
+  font-family: Ahem;
+  width: 3ch;
+  white-space: pre;
+  color: green;
+}
+
+</style>
+
+<p>Test passes if there are green rectangles below and no red.
+
+<div>0 0<br>0 0</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-center-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-center-001-ref.html
new file mode 100644
index 0000000000..c06d4ce4ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-center-001-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: normal;
+  text-align: center;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly centered:</p>
+
+<div class=test>one two three<br>
+four five<br>
+six seven eight<br>
+nine ten.<br>
+un deux trois<br>
+quatre cinq<br>
+six sept huit<br>
+neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-center-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-center-002-ref.html
new file mode 100644
index 0000000000..ea211e2fa0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-center-002-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: normal;
+  text-align: center;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly centered:</p>
+
+<!-- testcase has dir=rtl -->
+<div class=test>one two three<br>
+four five<br>
+six seven eight<br>
+.nine ten<br>
+un deux trois<br>
+quatre cinq<br>
+six sept huit<br>
+neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-center-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-center-003-ref.html
new file mode 100644
index 0000000000..1970d9045b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-center-003-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: normal;
+  text-align: center;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly centered:</p>
+
+<!-- testcase has dir=rtl and bidi-override -->
+<div class=test>eerht owt eno<br>
+evif ruof<br>
+thgie neves xis<br>
+.net enin<br>
+siort xued nu<br>
+qnic ertauq<br>
+tiuh tpes xis<br>
+xid fuen</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-left-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-left-001-ref.html
new file mode 100644
index 0000000000..ee7153726d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-left-001-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: normal;
+  text-align: left;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly left-aligned:</p>
+
+<div class=test>one two three<br>
+four five<br>
+six seven eight<br>
+nine ten.<br>
+un deux trois<br>
+quatre cinq<br>
+six sept huit<br>
+neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-left-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-left-002-ref.html
new file mode 100644
index 0000000000..ace8924065
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-left-002-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: normal;
+  text-align: left;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly left-aligned:</p>
+
+<!-- testcase has dir=rtl -->
+<div class=test>one two three<br>
+four five<br>
+six seven eight<br>
+.nine ten<br>
+un deux trois<br>
+quatre cinq<br>
+six sept huit<br>
+neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-left-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-left-003-ref.html
new file mode 100644
index 0000000000..d86c035115
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-left-003-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: normal;
+  text-align: left;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly left-aligned:</p>
+
+<!-- testcase has dir=rtl and bidi-override -->
+<div class=test>eerht owt eno<br>
+evif ruof<br>
+thgie neves xis<br>
+.net enin<br>
+siort xued nu<br>
+qnic ertauq<br>
+tiuh tpes xis<br>
+xid fuen</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-right-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-right-001-ref.html
new file mode 100644
index 0000000000..45782ddcea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-right-001-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: normal;
+  text-align: right;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly right-aligned:</p>
+
+<div class=test>one two three<br>
+four five<br>
+six seven eight<br>
+nine ten.<br>
+un deux trois<br>
+quatre cinq<br>
+six sept huit<br>
+neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-right-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-right-002-ref.html
new file mode 100644
index 0000000000..45f59e3b5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-right-002-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: normal;
+  text-align: right;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly right-aligned:</p>
+
+<!-- testcase has dir=rtl -->
+<div class=test>one two three<br>
+four five<br>
+six seven eight<br>
+.nine ten<br>
+un deux trois<br>
+quatre cinq<br>
+six sept huit<br>
+neuf dix</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-right-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-right-003-ref.html
new file mode 100644
index 0000000000..4d294b22d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-align-right-003-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.test {
+  font: 20px Ahem, monospace;
+  width: 15ch;
+  border: 1px solid gray;
+  padding: 5px;
+  white-space: normal;
+  text-align: right;
+}
+</style>
+</head>
+
+<p>The text on each line should be neatly right-aligned:</p>
+
+<!-- testcase has dir=rtl and bidi-override -->
+<div class=test>eerht owt eno<br>
+evif ruof<br>
+thgie neves xis<br>
+.net enin<br>
+siort xued nu<br>
+qnic ertauq<br>
+tiuh tpes xis<br>
+xid fuen</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-float-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-float-001-ref.html
new file mode 100644
index 0000000000..e72b3c94ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/pre-wrap-float-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+html {
+  font-family: Ahem;
+  font-size: 20px;
+  line-height: 1;
+}
+.container {
+  white-space: pre;
+  margin-bottom: 1em;
+}
+.float {
+  float: left;
+  width: 3ch;
+  height: 2em;
+  background: orange;
+}
+</style>
+<body>
+  <div class="float"></div>
+  <div class="container">123456<br>123456</div>
+  <div class="float"></div>
+  <div class="container">1234567<br>1234567</div>
+  <div class="float"></div>
+  <div class="container">1234567<br>1234567</div>
+  <div class="float"></div>
+  <div class="container">1234567<br>1234567</div>
+  <div class="float"></div>
+  <div class="container"><br><br>12345678<br>12345678</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/tab-bidi-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/tab-bidi-001-ref.html
new file mode 100644
index 0000000000..9f081f9103
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/tab-bidi-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference: Tabs vs. Bidi</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<style>
+body > div {
+  border: solid blue;
+  margin: 1em;
+}
+div > div {
+  white-space: pre;
+  font: 20px/1 monospace;
+  text-align: left;
+}
+div > span { /* measure bounds */
+  border: orange;
+  border-style: none solid;
+}
+</style>
+
+<p>Test passes if all three rows of each box are identical.
+
+<div>
+  <div style="unicode-bidi: bidi-override; direction: ltr"><span>A	B	C	D	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: ltr"><span>A	B	C	D	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: ltr"><span>A	B	C	D	</span></div>
+</div>
+<div>
+  <div style="unicode-bidi: bidi-override; direction: ltr"><span>א	בּ	ג	ד	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: ltr"><span>א	בּ	ג	ד	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: ltr"><span>א	בּ	ג	ד	</span></div>
+</div>
+<div>
+  <div style="unicode-bidi: bidi-override; direction: rtl"><span>A	B	C	D	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: rtl"><span>A	B	C	D	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: rtl"><span>A	B	C	D	</span></div>
+</div>
+<div>
+  <div style="unicode-bidi: bidi-override; direction: rtl"><span>א	בּ	ג	ד	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: rtl"><span>א	בּ	ג	ד	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: rtl"><span>א	בּ	ג	ד	</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/tab-stop-threshold-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/tab-stop-threshold-001-ref.html
new file mode 100644
index 0000000000..5694dd2f52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/tab-stop-threshold-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  white-space: pre;
+  font-family: monospace;
+}
+</style>
+
+<p>Test passes if the 4 letters bellow are vertically aligned.
+<div>        P</div>
+<div>        A</div>
+<div>        S</div>
+<div>        S</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/tab-stop-threshold-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/tab-stop-threshold-002-ref.html
new file mode 100644
index 0000000000..35c568bbca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/tab-stop-threshold-002-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  white-space: pre;
+  font-family: monospace;
+  tab-size: 8; /* the initial value, but since we're measuring against it, we might as well be sure */
+}
+</style>
+<p>Test passes if the 4 letters bellow are vertically aligned.
+<div>                P</div>
+<div>                A</div>
+<div>                S</div>
+<div>                S</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-002-ref.html
new file mode 100644
index 0000000000..d8c1834d95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-002-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  font-family: Ahem;
+  font-size: 20px;
+  width: 20ch;
+}
+</style>
+<div class="container">
+  123 567 901 345 789 123
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-align-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-align-001-ref.html
new file mode 100644
index 0000000000..e522e3711c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-align-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+.container {
+  font-family: monospace;
+  font-size: 20px;
+  width: 20ch;
+  border: solid 1px;
+}
+</style>
+<div class="container" style="text-align: right">
+  123456789 123 567
+  123456789 123 567
+</div>
+<div class="container" style="text-align: center">
+  123456789 123 567
+  123456789 123 567
+</div>
+<div class="container" style="text-align: justify">
+  123456789 123 567
+  123456789 123 567
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-dynamic-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-dynamic-001-ref.html
new file mode 100644
index 0000000000..43202e4d97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-dynamic-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+#container {
+  width: 20ch;
+  text-wrap: balance;
+}
+span:hover {
+  color: red;
+}
+</style>
+<div id="container">
+  123 567 901 345 789
+  123 567 901 345 789
+  123 567 901 345 789
+  999
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-001-ref.html
new file mode 100644
index 0000000000..0e3e5c7967
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+.container {
+  font: 20px/1.5 monospace;
+  width: 23.5ch;
+  border: solid 1px;
+}
+.float {
+  background: yellow;
+  padding: 0.2em 1ch;
+  line-height: 1.2;
+  float: left;
+}
+</style>
+
+<div class="container"><div class="float">FLOAT<br>FLOAT</div>abc de fg<br>hij klm<br>nop qrst uvw xyz!</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-002-ref.html
new file mode 100644
index 0000000000..fc068905f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-002-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+.container {
+  font: 20px/1.5 monospace;
+  width: 23.5ch;
+  border: solid 1px;
+}
+.float {
+  background: yellow;
+  padding: 0.2em 1ch;
+  line-height: 1.2;
+  float: right;
+}
+</style>
+
+<div class="container"><div class="float">FLOAT<br>FLOAT</div>abc de fg<br>hij klm<br>nop qrst uvw xyz!</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-005-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-005-ref.html
new file mode 100644
index 0000000000..b28426f575
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-float-005-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.container {
+  font: 20px/1.5 monospace;
+  width: 26.5ch;
+  border: solid 1px;
+}
+.float {
+  background: yellow;
+  padding: 0.2em 1ch;
+  line-height: 1.2;
+  float: left;
+}
+.float2 {
+  background: cyan;
+  padding: 0.2em 1ch;
+  line-height: 1.2;
+  float: right;
+}
+</style>
+
+<div class="container"><div class="float">FLOAT<br>FLOAT</div>abcde fghi<br>jklm nop<div class="float2">FLOAT<br>FLOAT</div><br>qrst uvw xyz!</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-line-clamp-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-line-clamp-001-ref.html
new file mode 100644
index 0000000000..4e465be7cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-line-clamp-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<style>
+.container {
+  font-family: monospace;
+  font-size: 20px;
+  width: 20ch;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+</style>
+<div class="container">
+  123 567 901 345 789
+  123 567 901 345 789
+  123
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-overflow-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-overflow-001-ref.html
new file mode 100644
index 0000000000..64a1cf3d8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-overflow-001-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+.container {
+  font-family: monospace;
+  font-size: 20px;
+  inline-size: 15ch;
+  border: 1px solid;
+}
+</style>
+<div class="container">CONTROLLING<br>YOUR BU</div>
+<div class="container">CONTROLLING<br>YOUR BU BU</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-overflow-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-overflow-002-ref.html
new file mode 100644
index 0000000000..6d49010185
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-overflow-002-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+#test {
+  border: 1px solid gray;
+  font: 15px monospace;
+  width: 20ch;
+}
+</style>
+
+<body>
+<div id=test>
+Interconnect<br>your build
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-text-indent-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-text-indent-001-ref.html
new file mode 100644
index 0000000000..401e35e2f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/text-wrap-balance-text-indent-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  border: 1px solid;
+  font-family: Ahem;
+  font-size: 10px;
+  text-indent: 5ch;
+  width: 10ch;
+}
+</style>
+<div>
+  01<br>
+  34 6 89<br>
+  12 3 56
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/textarea-pre-wrap-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/textarea-pre-wrap-001-ref.html
new file mode 100644
index 0000000000..31070ea928
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/textarea-pre-wrap-001-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference file</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<!-- pre-wrap-001-ref.html could probably be used instead,
+but since textarea is a form control that's not fully specified,
+using a separate reference just in case something is indeed different
+is safer. -->
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  color: green;
+  white-space: pre;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX
+XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/textarea-pre-wrap-014-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/textarea-pre-wrap-014-ref.html
new file mode 100644
index 0000000000..99a38bf88b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/textarea-pre-wrap-014-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<p>Test passes if there is <strong>no red</strong> below.</p>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-001-ref.html
new file mode 100644
index 0000000000..d9a040ae77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  line-height: 1;
+  color: transparent;
+  float: left;
+  clear: left;
+}
+span {
+  background: green;
+}
+</style>
+
+<p>Test passes if the shape below is green and if there is no red.
+
+<div><span>あああ</span></div>
+<div><span>ああ</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-002-ref.html
new file mode 100644
index 0000000000..a153844a97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-002-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  line-height: 1;
+  color: transparent;
+  float: left;
+  clear: left;
+}
+span {
+  background: green;
+}
+</style>
+
+<p>Test passes if the shape below is green and if there is no red.
+
+<div><span>ああああ あ あ</span></div>
+<div><span>ああ</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-003-ref.html
new file mode 100644
index 0000000000..7c59b1f6f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-003-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div { white-space: pre; }
+span { background: blue; }
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;</span><br>ああ</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-004-ref.html
new file mode 100644
index 0000000000..a72e050031
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-004-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div { white-space: pre; }
+span { background: blue; }
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;&#x3000; &#x3000; &#x3000;</span><br>ああ</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-011-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-011-ref.html
new file mode 100644
index 0000000000..a2efec2490
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-011-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 20px/1 Ahem;
+    white-space: pre;
+}
+span { background: blue; }
+</style>
+
+<p>Test passes if the characters below are arranged in a single line and if there is a blue square at the end of the first line.
+<div>X X<span> </span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-alt-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-alt-003-ref.html
new file mode 100644
index 0000000000..9f579f29e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-alt-003-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div { white-space: pre; }
+span {
+  background: blue;
+
+  /* to make the span go under the right border */
+  z-index:-1;
+  position: relative;
+}
+aside {
+  display: inline-block;
+  width: 0.5em;
+  border-right: 1em white solid;
+}
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<aside><span>&#x3000;</span></aside><br>ああ</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-alt-011-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-alt-011-ref.html
new file mode 100644
index 0000000000..03023f5359
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-alt-011-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 20px/1 Ahem; }
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>X X<span>X</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-break-spaces-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-break-spaces-001-ref.html
new file mode 100644
index 0000000000..293f752174
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ideographic-space-break-spaces-001-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<style>
+    div {
+        white-space: pre;
+        line-height: 1;
+    }
+</style>
+
+<p>Test passes if the characters below are arranged in pairs with a empty line in between.</p>
+<div>ああ<br><br>ああ</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ogham-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ogham-001-ref.html
new file mode 100644
index 0000000000..1b6fddd30e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-ogham-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+    border: solid;
+    width: min-content;
+}
+.soft-wrap { border-color: blue; }
+.hard-break { border-color: orange; }
+
+</style>
+
+<p>Test passes if the content of the blue and orange boxes is identical to that of the black box.
+
+<div class=soft-wrap>᚛ᚑᚌᚐᚋ᚜<br>᚛ᚑᚌᚐᚋ᚜</div>
+<div class=hard-break>᚛ᚑᚌᚐᚋ᚜<br>᚛ᚑᚌᚐᚋ᚜</div>
+<div class=ref>᚛ᚑᚌᚐᚋ᚜<br>᚛ᚑᚌᚐᚋ᚜</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-001-ref.html
new file mode 100644
index 0000000000..e406b86a3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  line-height: 1;
+  color: transparent;
+  background: green;
+  float: left;
+  clear: left;
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the shape below is green and if there is no red.
+
+<div>xx&#x1680;&#x2000; &#x2001;&#x2002;&#x2003; &#x2004;&#x2005;&#x2006; &#x2007;&#x2008;&#x2009;&#x200A; &#x202F;&#x205F; &#x3000;</div>
+<div>xx</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-002-ref.html
new file mode 100644
index 0000000000..3939dabe5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-002-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE 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 {
+  white-space: pre-wrap;
+  font-family: Ahem;
+  font-size: 10px;
+  line-height: 1;
+  color: green;
+}
+</style>
+
+<p>Test passes if there are two green tall boxes below and no red.
+
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
+<div>x x<br>x x</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-001-ref.html
new file mode 100644
index 0000000000..1be4e240bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE 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 {
+  white-space: pre;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<section class=ref>
+  <div>xx&#x1680;<br>あ<br>あ&#x1680;<br>あ<br>あ&#x1680;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x1680;<br>あ<br>あ&#x1680;<br>あ<br>あ&#x1680;<br>xx</div><!-- BA, tailorable -->
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-002-ref.html
new file mode 100644
index 0000000000..98115699a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-002-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE 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 {
+  white-space: pre;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<section class=ref>
+  <div>xx<br>あ<br>あ<br>あ<br>あ<br>xx</div>
+</section>
+<section>
+  <div>xx<br>あ<br>あ<br>あ<br>あ<br>xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-009-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-009-ref.html
new file mode 100644
index 0000000000..d62e758e2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-009-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE 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 {
+  white-space: pre;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<section class=ref>
+  <div>xx&#x2007;あ<br>あ&#x2007;あ<br>あ&#x2007;xx</div><!--GL, non tailorable after, tailorable before-->
+</section>
+<section>
+  <div>xx&#x2007;あ<br>あ&#x2007;あ<br>あ&#x2007;xx</div><!--GL, non tailorable after, tailorable before-->
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-013-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-013-ref.html
new file mode 100644
index 0000000000..07a78787cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-other-space-separators-break-spaces-013-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE 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 {
+  white-space: pre;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<section class=ref>
+  <div>xx&#x202F;あ<br>あ&#x202F;あ<br>あ&#x202F;xx</div>
+</section>
+<section>
+  <div>xx&#x202F;あ<br>あ&#x202F;あ<br>あ&#x202F;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-align-start-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-align-start-ref.html
new file mode 100644
index 0000000000..b65a8fe754
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-align-start-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<style>
+div {
+  font-family: monospace;
+  font-size: 30px;
+  width: 3ch;
+  overflow: auto;
+  white-space: pre;
+}
+</style>
+<body>
+  <div>0 00</div>
+  <div>0 0</div>
+  <div>0 0</div>
+  <div>0 0</div>
+  <div>0 0<br>0 0</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-001-ref.html
new file mode 100644
index 0000000000..3dbb85a711
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-001-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        display: inline-block;
+        width: 3ch;
+        height: 100px;
+        font: 40px/1 Ahem;
+        border: 1px solid black;
+        box-sizing: content-box;
+        overflow-y: hidden;
+        overflow-x: auto;
+    }
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+.start { text-align: start; }
+.end { text-align: end; }
+</style>
+<div class="left">XXX&#10;X</div>
+<div class="center">XXX&#10;X</div>
+<div class="right">XXX&#10;X</div>
+<div class="start">XXX&#10;X</div>
+<div class="end">XXX&#10;X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-002-ref.html
new file mode 100644
index 0000000000..a0811e61a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-002-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        display: inline-block;
+        width: 3ch;
+        height: 100px;
+        font: 40px/1 Ahem;
+        border: 1px solid black;
+        box-sizing: content-box;
+        overflow-y: hidden;
+        overflow-x: auto;
+    }
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+.start { text-align: start; }
+.end { text-align: end; }
+</style>
+<div class="left">XXXX&#10;X</div>
+<div class="center">XXXX&#10;X</div>
+<div class="right">XXXX&#10;X</div>
+<div class="start">XXXX&#10;X</div>
+<div class="end">XXXX&#10;X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-rtl-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-rtl-001-ref.html
new file mode 100644
index 0000000000..3de3f475b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-rtl-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        display: inline-block;
+        width: 3ch;
+        height: 100px;
+        font: 40px/1 Ahem;
+        border: 1px solid black;
+        box-sizing: content-box;
+        overflow-y: hidden;
+        overflow-x: auto;
+
+        direction: rtl;
+    }
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+.start { text-align: start; }
+.end { text-align: end; }
+</style>
+<div class="left">XXX&#10;X</div>
+<div class="center">XXX&#10;X</div>
+<div class="right">XXX&#10;X</div>
+<div class="start">XXX&#10;X</div>
+<div class="end">XXX&#10;X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-rtl-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-rtl-002-ref.html
new file mode 100644
index 0000000000..8b29f31dbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-rtl-002-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        display: inline-block;
+        width: 3ch;
+        height: 100px;
+        font: 40px/1 Ahem;
+        border: 1px solid black;
+        box-sizing: content-box;
+        overflow-y: hidden;
+        overflow-x: auto;
+
+        direction: rtl;
+    }
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+.start { text-align: start; }
+.end { text-align: end; }
+</style>
+<div class="left">XXXX&#10;X</div>
+<div class="center">XXXX&#10;X</div>
+<div class="right">XXXX&#10;X</div>
+<div class="start">XXXX&#10;X</div>
+<div class="end">XXXX&#10;X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-rtl-005-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-rtl-005-ref.html
new file mode 100644
index 0000000000..e93ee65281
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-and-text-alignment-rtl-005-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        display: inline-block;
+        width: 3ch;
+        height: 100px;
+        font: 40px/1 Ahem;
+        border: 1px solid black;
+        box-sizing: content-box;
+        overflow-y: hidden;
+        overflow-x: auto;
+
+        direction: rtl;
+    }
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+.start { text-align: start; }
+.end { text-align: end; }
+</style>
+<div class="left">&nbsp;XXX&#10;X</div>
+<div class="center">&nbsp;XXX&#10;X</div>
+<div class="right">&nbsp;XXX&#10;X</div>
+<div class="start">&nbsp;XXX&#10;X</div>
+<div class="end">&nbsp;XXX&#10;X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-rtl-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-rtl-001-ref.html
new file mode 100644
index 0000000000..25094d539d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/trailing-space-rtl-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<style>
+body {
+  direction: rtl;
+  white-space: pre-wrap;
+}
+.bg {
+  background: orange;
+}
+.override {
+  unicode-bidi: bidi-override;
+}
+</style>
+<body>
+<div>אבג <span class="bg">אבגד</span> אבגדה</div>
+<div>אבג <span class="bg">אבגד</span> אבגדה</div>
+<div class="override">123 <span class="bg override">12345</span> 1234567</div>
+<div class="override">123 <span class="bg override">12345</span> 1234567</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-applies-to-text-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-applies-to-text-001-ref.html
new file mode 100644
index 0000000000..d9d8336365
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-applies-to-text-001-ref.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  section
+    {
+      border: black solid 2px;
+      float: left;
+      font-family: monospace;
+      font-size: 14px;
+      line-height: 1; /* computes to 14px */
+      margin-bottom: 10px;
+      width: 16ch;
+    }
+
+  section.odds
+    {
+      clear: both;
+    }
+
+  section.even
+    {
+      margin-left: 10em;
+    }
+
+  div.first-subtest
+    {
+      white-space: normal;
+    }
+
+  div.second-subtest
+    {
+      white-space: nowrap;
+    }
+
+  div.third-subtest
+    {
+      white-space: pre;
+    }
+
+  div.fourth-subtest
+    {
+      white-space: pre-wrap;
+    }
+
+  div.fifth-subtest
+    {
+      white-space: break-spaces;
+    }
+
+  div.sixth-subtest
+    {
+      white-space: pre-line;
+    }
+
+  hr
+    {
+      clear: both;
+      margin: 4em auto 1.5em 0em;
+      width: 480px;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black bordered rectangles on the lefthand side are laid out identically to their counterparts on the righthand side.
+
+  <section class="odds">
+    <div class="first-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="even">
+    <div class="first-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <hr>
+
+  <section class="odds">
+    <div class="second-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="even">
+    <div class="second-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <hr>
+
+  <section class="odds">
+    <div class="third-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="even">
+    <div class="third-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <hr>
+
+  <section class="odds">
+    <div class="fourth-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="even">
+    <div class="fourth-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <hr>
+
+  <section class="odds">
+    <div class="fifth-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="even">
+    <div class="fifth-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <hr>
+
+  <section class="odds">
+    <div class="sixth-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="even">
+    <div class="sixth-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-break-spaces-005-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-break-spaces-005-ref.html
new file mode 100644
index 0000000000..dece5f7394
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-break-spaces-005-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-collapse-discard-001-ref.xht b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-collapse-discard-001-ref.xht
new file mode 100644
index 0000000000..02649bebce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-collapse-discard-001-ref.xht
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: white-space-collapse - discard - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first sentence matches the second one.
+		</p>
+		<div>
+			<span>AllWhiteSpaceInTheElementShouldBeDiscarded.</span>
+		</div>
+		<div>
+			<span>AllWhiteSpaceInTheElementShouldBeDiscarded.</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-collapse-preserve-breaks-001-ref.xht b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-collapse-preserve-breaks-001-ref.xht
new file mode 100644
index 0000000000..462c2fc426
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-collapse-preserve-breaks-001-ref.xht
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: white-space-collapse - preserve-breaks - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first two sentences matches the second one.
+		</p>
+		<p>
+			<span>
+				Sequences of white space should collapse into a single character.<br />
+				But segment breaks as forced line breaks are preserved.
+			</span>
+		</p>
+		<p>
+			<span>
+				Sequences of white space should collapse into a single character.<br />
+				But segment breaks as forced line breaks are preserved.
+			</span>
+		</p>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-001-ref.html
new file mode 100644
index 0000000000..3fbc32b1b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE 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-family: Ahem;
+  color: transparent;
+  font-size: 50px;
+  background: green;
+  width: 2em;
+}
+</style>
+
+<p>Test passes if there is a green rectangle below and no red.
+<div>XS<br>S<br>XS<br>S</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-002-ref.html
new file mode 100644
index 0000000000..dfc2690923
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-002-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE 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 {
+  color: transparent;
+  background: blue;
+  font-family: Ahem;
+  font-size: 50px;
+  width: 3ch;
+}
+</style>
+
+<p>Test passes if there is a single blue rectangle below.
+<div>
+XXX<br>
+XXX
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-003-ref.html
new file mode 100644
index 0000000000..0047109982
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-003-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE 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-family: Ahem;
+  color: transparent;
+  font-size: 50px;
+  background: green;
+  width: 1em;
+}
+</style>
+
+<p>Test passes if there is a green rectangle below and no red.
+<div>X<br>X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-004-ref.html
new file mode 100644
index 0000000000..93b8b913cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-intrinsic-size-004-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  color: transparent;
+  font-family: monospace;
+  font-size: 50px;
+  width: 3ch;
+  height: 2em;
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a single green rectangle below and no red.
+<div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-letter-spacing-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-letter-spacing-001-ref.html
new file mode 100644
index 0000000000..2324661d08
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-letter-spacing-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS Test reference</title>
+<style>
+div {
+  font: 16px monospace;
+  float: left;
+  clear: left;
+  border: 1px solid silver;
+  margin: 1em;
+  letter-spacing: .5em;
+}
+</style>
+<p>The five boxes below should all look the same:</p>
+<div>Two lines<br>of text</div>
+<div>Two lines<br>of text</div>
+<div>Two lines<br>of text</div>
+<div>Two lines<br>of text</div>
+<div>Two lines<br>of text</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-normal-011-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-normal-011-ref.html
new file mode 100644
index 0000000000..ac1f95f623
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-normal-011-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      white-space: pre;
+      width: 16ch;
+    }
+  </style>
+
+  <body>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="reference">Lorem ipsum.
+Dolor sit amet.
+consectetur</div>
+
+  <div id="reference">Lorem ipsum.
+Dolor sit amet.
+consectetur</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-nowrap-011-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-nowrap-011-ref.html
new file mode 100644
index 0000000000..b70f993c80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-nowrap-011-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+  </style>
+
+  <body>
+
+    <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "or sit amet." should be outside of black-bordered rectangles.
+
+  <div id="reference">Lorem&nbsp;ipsum.&nbsp;Dolor&nbsp;sit&nbsp;amet.<br>
+consectetur</div>
+
+  <div id="reference">Lorem&nbsp;ipsum.&nbsp;Dolor&nbsp;sit&nbsp;amet.<br>
+consectetur</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-011-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-011-ref.html
new file mode 100644
index 0000000000..c3aecc8dfb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-011-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+  </style>
+
+  <body>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "Dolor" should be outside of black-bordered rectangles.
+
+    <div id="reference">Lorem&nbsp;ipsum.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.&nbsp;<br>
+consectetur</div>
+
+    <div id="reference">Lorem&nbsp;ipsum.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.&nbsp;<br>
+consectetur</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-031-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-031-ref.html
new file mode 100644
index 0000000000..93181354ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-031-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+  </style>
+
+  <body>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div>Lorem ipsum. <br>
+Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.</div>
+
+  <div>Lorem ipsum. <br>
+Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-034-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-034-ref.html
new file mode 100644
index 0000000000..b920bdb111
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-034-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+  </style>
+
+  <body>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div>Lorem ipsum.&nbsp;&nbsp;&nbsp;&nbsp;<br>
+&nbsp;&nbsp;Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.</div>
+
+  <div>Lorem ipsum.&nbsp;&nbsp;&nbsp;&nbsp;<br>
+&nbsp;&nbsp;Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-001-ref.html
new file mode 100644
index 0000000000..82b10ac6a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-001-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text reference</title>
+
+<style>
+div {
+  border: 1px solid gray;
+  font: 22px monospace;
+  width: 22ch;
+  margin: 1em;
+}
+.ref {
+  white-space: normal;
+  text-align: justify;
+}
+</style>
+
+<p>Test passes if the two blocks are rendered identically</p>
+
+<div class=ref>one two three four five six seven eight nine ten</div>
+
+<div class=ref>one two three four five six seven eight nine ten</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-002-ref.html
new file mode 100644
index 0000000000..cd228e234c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-002-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text reference</title>
+
+<style>
+div {
+  border: 1px solid gray;
+  font: 22px monospace;
+  width: 22ch;
+  margin: 1em;
+}
+.ref {
+  white-space: normal;
+  text-align: justify;
+}
+</style>
+
+<p>Test passes if the two blocks are rendered identically</p>
+
+<div class=ref>one two&nbsp; three &nbsp; four five six seven eight nine &nbsp; ten</div>
+
+<div class=ref>one two&nbsp; three &nbsp; four five six seven eight nine &nbsp; ten</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-003-ref.html
new file mode 100644
index 0000000000..d72988230e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-003-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text reference</title>
+
+<style>
+div {
+  border: 1px solid gray;
+  font: 22px monospace;
+  width: 22ch;
+  margin: 1em;
+}
+.ref {
+  white-space: normal;
+  text-align: justify;
+}
+</style>
+
+<p>Test passes if the two blocks are rendered identically</p>
+
+<div class=ref>one two&nbsp; three<br>&nbsp; &nbsp;four&nbsp; five&nbsp; six seven &nbsp; eight &nbsp; nine ten</div>
+
+<div class=ref>one two&nbsp; three<br>&nbsp; &nbsp;four&nbsp; five&nbsp; six seven &nbsp; eight &nbsp; nine ten</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-004-ref.html
new file mode 100644
index 0000000000..be487e6f3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-justify-004-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text reference</title>
+
+<style>
+div {
+  border: 1px solid gray;
+  font: 22px monospace;
+  width: 22ch;
+  margin: 1em;
+}
+.ref {
+  white-space: normal;
+  text-align: justify;
+  text-align-last: right;
+}
+</style>
+
+<p>Test passes if the two blocks are rendered identically</p>
+
+<div class=ref>,one, two, three<br>four, five, six, !seven, eight, nine</div>
+
+<div class=ref>,one, two, three<br>four, five, six, !seven, eight, nine</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-001-ref.html
new file mode 100644
index 0000000000..8db147766b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-001-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+
+<style>
+div {
+  white-space: pre-wrap;
+  font-family: monospace;
+}
+</style>
+
+<p>This test passes if the 4 letters below are verticaly aligned.
+
+<div>    P</div>
+<div>    A</div>
+<div>    S</div>
+<div>    S</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-002-ref.html
new file mode 100644
index 0000000000..0971868116
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-002-ref.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS 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-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+}
+#test { color: orange; }
+#ref { color: blue; }
+</style>
+
+<p>This test passes if the orange blocks below are vertically aligned with the blue ones.
+
+<div id=test>X  X  X  X</div>
+<div id=ref>X  X  X  X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-003-ref.html
new file mode 100644
index 0000000000..1b50b667c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-003-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS 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: 25px/1 Ahem;
+  color: green;
+}
+</style>
+
+<p>This test passes if there is a green rectangle and no red.
+
+<div>X<br>X<br>X<br>X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-004-ref.html
new file mode 100644
index 0000000000..de92f22e62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-004-ref.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+}
+span { color: blue; }
+</style>
+
+<p>This test passes if there is a green square and no red.
+
+<div>XX<span>X</span><br>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-012-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-012-ref.html
new file mode 100644
index 0000000000..c4751fa5ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-012-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        font: 20px/1 Ahem;
+        white-space: pre;
+    }
+    span { background: blue; }
+</style>
+
+<p>This test passes if the line is broken after the 2nd white space, which hangs (blue).
+<div>XX&#x0020;X<span>&#x0020;<br>X</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-013-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-013-ref.html
new file mode 100644
index 0000000000..af1f6bf268
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-013-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<meta charset=utf-8>
+<meta http-equiv="content-language" content="en, ja" />
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+    div { white-space: pre;  }
+    span { background: blue; }
+</style>
+
+<p>This test passes if the line is after the white space, which hangs (blue).
+
+<div>ああ<span>&#x0020;<br>X</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-014-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-014-ref.html
new file mode 100644
index 0000000000..29f69dc142
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-014-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        font: 20px/1 Ahem;
+        white-space: pre;
+    }
+    span { background: blue; }
+</style>
+
+<p>This test passes if the line is broken after the 2nd white space, which hangs (blue).
+<div>XX&#x0020;<span>X&#x0020;<br>XXXX&#x0020;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-015-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-015-ref.html
new file mode 100644
index 0000000000..ffcabadeb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-015-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        font: 20px/1 Ahem;
+        white-space: pre;
+    }
+    span { background: blue; }
+</style>
+
+<p>This test passes if the line is broken after the 2nd white space, which hangs (blue).
+<div>XX&#x0020;X<span>X&#x0020;<br>X</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-021-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-021-ref.html
new file mode 100644
index 0000000000..02c25f4d1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-021-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+      margin-bottom: 0.25em;
+      width: 16ch;
+      overflow: hidden;
+    }
+
+  span
+    {
+      background-color: yellow;
+    }
+  </style>
+
+  <p>Test passes if the characters inside each black-bordered rectangle are laid out identically and if each black-bordered rectangle does not generate a horizontal scrollbar.
+
+    <div>Lorem&nbsp;ipsum.<span>&nbsp;&nbsp;&nbsp;&nbsp;</span><br>
+Dolor<br>
+&nbsp;&nbsp;&nbsp;sit amet. <br>
+consectetur</div>
+
+    <div>Lorem&nbsp;ipsum.<span>&nbsp;&nbsp;&nbsp;&nbsp;</span><br>
+Dolor<br>
+&nbsp;&nbsp;&nbsp;sit amet. <br>
+consectetur</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html
new file mode 100644
index 0000000000..0cbc7b231f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+}
+</style>
+
+<p>This test passes if there is a green square and no red.
+
+<div>XX<br>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-012-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-012-ref.html
new file mode 100644
index 0000000000..fc485c42b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-012-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        font: 20px/1 Ahem;
+        white-space: pre;
+    }
+    span { background: blue; }
+</style>
+
+<p>This test passes if the line is broken after the 2nd white space, which hangs (blue).
+<div>XX&#x0020;X<span><br>X</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-013-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-013-ref.html
new file mode 100644
index 0000000000..ca5032540b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-013-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<meta charset=utf-8>
+<meta http-equiv="content-language" content="en, ja" />
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+    div { white-space: pre;  }
+    span { background: blue; }
+</style>
+
+<p>This test passes if the line is after the white space, which hangs (blue).
+
+<div>ああ<span><br>X</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-014-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-014-ref.html
new file mode 100644
index 0000000000..0df3b9f738
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-014-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        font: 20px/1 Ahem;
+        white-space: pre;
+    }
+    span { background: blue; }
+</style>
+
+<p>This test passes if the line is broken after the 2nd white space, which hangs (blue).
+<div>XX&#x0020;<span>X<br>XXXX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-015-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-015-ref.html
new file mode 100644
index 0000000000..0faae57a3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-pre-wrap-trailing-spaces-alt-015-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS test Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        font: 20px/1 Ahem;
+        white-space: pre;
+    }
+    span { background: blue; }
+</style>
+
+<p>This test passes if the line is broken after the 2nd white space, which hangs (blue).
+<div>XX&#x0020;X<span>X<br>X</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-trim-discard-inner-001-ref.xht b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-trim-discard-inner-001-ref.xht
new file mode 100644
index 0000000000..64be70b5f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-trim-discard-inner-001-ref.xht
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: white-space-trim - discard-inner - basic cases Reftest Reference</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<style type="text/css">
+			<![CDATA[
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if each text positions in the first line match the corresponding positions in the second line.
+		</p>
+			<div>
+				[<span>1        2</span>]
+				[<span>　　3　　4　　</span>]
+				[<span>5				6</span>]
+				[<span>7
+
+8</span>]
+			</div>
+			<div>
+				[<span>1        2</span>]
+				[<span>　　3　　4　　</span>]
+				[<span>5				6</span>]
+				[<span>7
+
+8</span>]
+			</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-vs-joiners-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-vs-joiners-001-ref.html
new file mode 100644
index 0000000000..cab5556406
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-vs-joiners-001-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+
+<title>CSS Text reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+p {
+  width: fit-content;
+  border: 2px solid green;
+  font: 24px monospace;
+}
+</style>
+
+<body>
+</body>
+
+<script>
+for (i = 0x200b; i <= 0x200f; ++i) {
+  txt = "This should have no leading or trailing ["
+    + i.toString(16)
+    + "]";
+  p = document.createElement("p");
+  p.textContent = txt;
+  document.body.appendChild(p);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-vs-joiners-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-vs-joiners-002-ref.html
new file mode 100644
index 0000000000..63bbe7ac02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-vs-joiners-002-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+
+<title>CSS Text reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+p {
+  width: min-content;
+  border: 2px solid green;
+  font: 24px monospace;
+}
+</style>
+
+<body>
+  <p>
+    This
+    is
+    a
+    simple
+    test
+  </p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-wrap-after-nowrap-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-wrap-after-nowrap-001-ref.html
new file mode 100644
index 0000000000..71e1c82465
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-wrap-after-nowrap-001-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+div {
+  width: 10ch;
+  border: 2px solid blue;
+  line-height: 1;
+}
+.ideo > div {
+  width: 1em;
+}
+</style>
+<body>
+  <section>
+    <div>12345<br>67890</div>
+    <div>12345<br>67890</div>
+    <div>12345<br>67890</div>
+    <div>12345<br>67890</div>
+
+    <div>12345<br>67890</div>
+    <div>12345<br>67890</div>
+  </section>
+
+  <section class="ideo">
+    <div>国<br>国</div>
+    <div>国<br>国</div>
+  </section>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-zero-fontsize-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-zero-fontsize-001-ref.html
new file mode 100644
index 0000000000..3c27ed25be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-zero-fontsize-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text test reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+pre {
+  font-size: 12px;
+  float: left;
+  border: 1px solid black;
+  margin: 12px;
+}
+</style>
+<pre>
+foo
+bar
+</pre>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/white-space-zero-fontsize-002-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-zero-fontsize-002-ref.html
new file mode 100644
index 0000000000..6d2134ac4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/white-space-zero-fontsize-002-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text test reference</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+pre {
+  font-size: 12px;
+  float: left;
+  border: 1px solid black;
+  margin: 12px;
+  -moz-tab-size: 100px;
+  tab-size: 100px;
+}
+</style>
+<pre>
+<span>foo</span>&#x9;<span>bar</span>
+</pre>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-001-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-001-ref.html
new file mode 100644
index 0000000000..842f46913d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      white-space: pre;
+      width: 4ch;
+    }
+  </style>
+
+  <body>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div>123
+   8</div>
+
+  <div>123
+   8</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-003-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-003-ref.html
new file mode 100644
index 0000000000..3bb3617760
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-003-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  li
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      white-space: pre;
+      width: 4ch;
+    }
+  </style>
+
+  <body>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles (both preceded with a small filled disc) are laid out identically.
+
+  <ul><li>123
+   8</ul>
+
+  <ul><li>123
+   8</ul>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-006-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-006-ref.html
new file mode 100644
index 0000000000..d8a5b90638
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-006-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  table
+    {
+      border: black solid 2px;
+      border-spacing: 0px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      white-space: pre;
+      width: 4ch;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+  </style>
+
+  <body>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <table><tr><td>123
+   8</table>
+
+  <table><tr><td>123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-012-ref.html b/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-012-ref.html
new file mode 100644
index 0000000000..942bd8fe92
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/reference/ws-break-spaces-applies-to-012-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  table
+    {
+      border: black solid 2px;
+      border-spacing: 0px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+    }
+
+  td
+    {
+      padding: 0px;
+      width: 4ch;
+      white-space: normal;
+    }
+  </style>
+
+  <body>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <table><tr><td>123
+   8</table>
+
+  <table><tr><td>123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/remove-slotted-with-whitespace-sibling.html b/testing/web-platform/tests/css/css-text/white-space/remove-slotted-with-whitespace-sibling.html
new file mode 100644
index 0000000000..806bf05eac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/remove-slotted-with-whitespace-sibling.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
+<link rel="match" href="../../reference/pass_if_two_words.html">
+<p>There should be a space between "two" and "words" below.</p>
+<div id="host">two<div id="rm"></div> <span>words</span></div>
+<script>
+  let root = host.attachShadow({mode:"open"});
+  root.innerHTML = "<slot></slot>";
+  host.offsetTop;
+  rm.slot = "unknown";
+</script>
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-000.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-000.tentative.html
new file mode 100644
index 0000000000..cb7b0f30b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-000.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Whitespace and line break transformation</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="All spaces and tabs immediately preceding or following a segment break are removed. If no F, H, W or ZWSP characters involved, the segment break is converted to a space.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color:#2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color:#270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>hello
+there</span></div>
+<div id='test2' class="test"><span>hello&#x20;&#x20;&#x20;
+there</span></div>
+<div id='test3' class="test"><span>hello
+&#x20;&#x20;&#x20;&#x20;&#x20;there</span></div>
+<div id='test4' class="test"><span>hello&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;there</span></div>
+<div id='test5' class="test"><span>hello
+
+
+there</span></div>
+<div id='test6' class="test"><span>hello&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;there</span></div>
+<div id="ref" class="ref"><span>hello there</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if more than one space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-001.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-001.tentative.html
new file mode 100644
index 0000000000..1640878a00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-001.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Wide characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is W and neither side is Hangul, then the segment break is removed.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color:#2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color:#270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>日本語
+中国话</span></div>
+<div id='test2' class="test"><span>日本語&#x20;&#x20;&#x20;
+中国话</span></div>
+<div id='test3' class="test"><span>日本語
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;中国话</span></div>
+<div id='test4' class="test"><span>日本語&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;中国话</span></div>
+<div id='test5' class="test"><span>日本語
+
+
+中国话</span></div>
+<div id='test6' class="test"><span>日本語&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;中国话</span></div>
+<div id="ref" class="ref"><span>日本語中国话</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-002.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-002.tentative.html
new file mode 100644
index 0000000000..de51bf6f81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-002.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Fullwidth characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is F and neither side is Hangul, then the segment break is removed.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>ＦＵＬＬ
+ＷＩＤＴＨ</span></div>
+<div id='test2' class="test"><span>ＦＵＬＬ&#x20;&#x20;&#x20;
+ＷＩＤＴＨ</span></div>
+<div id='test3' class="test"><span>ＦＵＬＬ
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ＷＩＤＴＨ</span></div>
+<div id='test4' class="test"><span>ＦＵＬＬ&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;ＷＩＤＴＨ</span></div>
+<div id='test5' class="test"><span>ＦＵＬＬ
+
+
+ＷＩＤＴＨ</span></div>
+<div id='test6' class="test"><span>ＦＵＬＬ&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;ＷＩＤＴＨ</span></div>
+<div id="ref" class="ref"><span>ＦＵＬＬＷＩＤＴＨ</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-003.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-003.tentative.html
new file mode 100644
index 0000000000..15b98b6917
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-003.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Halfwidth characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is H and neither side is Hangul, then the segment break is removed.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>ﾊﾝ
+ｶｸ</span></div>
+<div id='test2' class="test"><span>ﾊﾝ&#x20;&#x20;&#x20;
+ｶｸ</span></div>
+<div id='test3' class="test"><span>ﾊﾝ
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ｶｸ</span></div>
+<div id='test4' class="test"><span>ﾊﾝ&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;ｶｸ</span></div>
+<div id='test5' class="test"><span>ﾊﾝ
+
+
+ｶｸ</span></div>
+<div id='test6' class="test"><span>ﾊﾝ&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;ｶｸ</span></div>
+<div id="ref" class="ref"><span>ﾊﾝｶｸ</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-004.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-004.tentative.html
new file mode 100644
index 0000000000..e7a12b1337
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-004.tentative.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Won and halfwidth characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is F or H and neither side is Hangul, then the segment break is removed.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>₩
+２４</span></div>
+<div id='test2' class="test"><span>₩&#x20;&#x20;&#x20;
+２４</span></div>
+<div id='test3' class="test"><span>₩
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;２４</span></div>
+<div id='test4' class="test"><span>₩&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;２４</span></div>
+<div id='test5' class="test"><span>₩
+
+
+２４</span></div>
+<div id='test6' class="test"><span>₩&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;２４</span></div>
+<div id="ref1" class="ref"><span>₩２４</span></div>
+<div id='test7' class="test"><span>２４
+₩</span></div>
+<div id='test8' class="test"><span>２４&#x20;&#x20;&#x20;
+₩</span></div>
+<div id='test9' class="test"><span>２４
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;₩</span></div>
+<div id='test10' class="test"><span>２４&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;₩</span></div>
+<div id='test11' class="test"><span>２４
+
+
+₩</span></div>
+<div id='test12' class="test"><span>２４&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;₩</span></div>
+<div id="ref2" class="ref"><span>２４₩</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "linebreak only ₩２４");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "spaces linebreak ₩２４");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "linebreak spaces ₩２４");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "spaces linebreak spaces ₩２４");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "multiple linebreaks ₩２４");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces ₩２４");
+test(function() {
+assert_equals(document.getElementById('test7').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "linebreak only ２４₩");
+test(function() {
+assert_equals(document.getElementById('test8').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "spaces linebreak ２４₩");
+test(function() {
+assert_equals(document.getElementById('test9').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "linebreak spaces ２４₩");
+test(function() {
+assert_equals(document.getElementById('test10').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "spaces linebreak spaces ２４₩");
+test(function() {
+assert_equals(document.getElementById('test11').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "multiple linebreaks ２４₩");
+test(function() {
+assert_equals(document.getElementById('test12').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces ２４₩");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-005.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-005.tentative.html
new file mode 100644
index 0000000000..92f91c3bf8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-005.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Wide character and non-wide character around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of only one character before and after the line feed is F, W or H and neither side is Hangul, then the segment break is converted to a space.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>漢字
+kanji</span></div>
+<div id='test2' class="test"><span>漢字&#x20;&#x20;&#x20;
+kanji</span></div>
+<div id='test3' class="test"><span>漢字
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;kanji</span></div>
+<div id='test4' class="test"><span>漢字&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;kanji</span></div>
+<div id='test5' class="test"><span>漢字
+
+
+kanji</span></div>
+<div id='test6' class="test"><span>漢字&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;kanji</span></div>
+<div id="ref" class="ref"><span>漢字&#x20;kanji</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if more or less than one space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-006.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-006.tentative.html
new file mode 100644
index 0000000000..c4fed83d3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-006.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Fullwidth character and non-fullwidth character around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of only one character before and after the line feed is F, W or H and neither side is Hangul, then the segment break is converted to a space.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>ＦＵＬＬ
+width</span></div>
+<div id='test2' class="test"><span>ＦＵＬＬ&#x20;&#x20;&#x20;
+width</span></div>
+<div id='test3' class="test"><span>ＦＵＬＬ
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;width</span></div>
+<div id='test4' class="test"><span>ＦＵＬＬ&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;width</span></div>
+<div id='test5' class="test"><span>ＦＵＬＬ
+
+
+width</span></div>
+<div id='test6' class="test"><span>ＦＵＬＬ&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;width</span></div>
+<div id="ref" class="ref"><span>ＦＵＬＬ&#x20;width</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if more or less than one space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-007.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-007.tentative.html
new file mode 100644
index 0000000000..4f4f4ab7a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-007.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Halfwidth character and non-halfwidth character around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of only one character before and after the line feed is F, W or H and neither side is Hangul, then the segment break is converted to a space.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>han
+ｶｸ</span></div>
+<div id='test2' class="test"><span>han&#x20;&#x20;&#x20;
+ｶｸ</span></div>
+<div id='test3' class="test"><span>han
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ｶｸ</span></div>
+<div id='test4' class="test"><span>han&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;ｶｸ</span></div>
+<div id='test5' class="test"><span>han
+
+
+ｶｸ</span></div>
+<div id='test6' class="test"><span>han&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;ｶｸ</span></div>
+<div id="ref" class="ref"><span>han&#x20;ｶｸ</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if more or less than one space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-008.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-008.tentative.html
new file mode 100644
index 0000000000..6d04366bb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-008.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Wide and fullwidth characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is F, W or H  and neither side is Hangul, then the segment break is removed.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>日本語
+ＷＩＤＴＨ</span></div>
+<div id='test2' class="test"><span>日本語&#x20;&#x20;&#x20;
+ＷＩＤＴＨ</span></div>
+<div id='test3' class="test"><span>日本語
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ＷＩＤＴＨ</span></div>
+<div id='test4' class="test"><span>日本語&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;ＷＩＤＴＨ</span></div>
+<div id='test5' class="test"><span>日本語
+
+
+ＷＩＤＴＨ</span></div>
+<div id='test6' class="test"><span>日本語&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;ＷＩＤＴＨ</span></div>
+<div id="ref" class="ref"><span>日本語ＷＩＤＴＨ</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-009.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-009.tentative.html
new file mode 100644
index 0000000000..c7a79cecac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-009.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Fullwidth and halfwidth characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is F, W or H  and neither side is Hangul, then the segment break is removed.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>ＦＵＬＬ
+ｶｸ</span></div>
+<div id='test2' class="test"><span>ＦＵＬＬ&#x20;&#x20;&#x20;
+ｶｸ</span></div>
+<div id='test3' class="test"><span>ＦＵＬＬ
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ｶｸ</span></div>
+<div id='test4' class="test"><span>ＦＵＬＬ&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;ｶｸ</span></div>
+<div id='test5' class="test"><span>ＦＵＬＬ
+
+
+ｶｸ</span></div>
+<div id='test6' class="test"><span>ＦＵＬＬ&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;ｶｸ</span></div>
+<div id="ref" class="ref"><span>ＦＵＬＬｶｸ</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-010.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-010.tentative.html
new file mode 100644
index 0000000000..43b4218df3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-010.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Hangul characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is F, W or H  and neither side is Hangul, then the segment break is removed. Otherwise, the segment break is converted to a space.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>한글
+쓰기</span></div>
+<div id='test2' class="test"><span>한글&#x20;&#x20;&#x20;
+쓰기</span></div>
+<div id='test3' class="test"><span>한글
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;쓰기</span></div>
+<div id='test4' class="test"><span>한글&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;쓰기</span></div>
+<div id='test5' class="test"><span>한글
+
+
+쓰기</span></div>
+<div id='test6' class="test"><span>한글&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;쓰기</span></div>
+<div id="ref" class="ref"><span>한글&#x20;쓰기</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if more or less than one space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-011.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-011.tentative.html
new file mode 100644
index 0000000000..d88a8efd34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-011.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Hangul jamo characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is F, W or H  and neither side is Hangul, then the segment break is removed. Otherwise, the segment break is converted to a space.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>하ᄂ
+그ᄅ</span></div>
+<div id='test2' class="test"><span>하ᄂ&#x20;&#x20;&#x20;
+그ᄅ</span></div>
+<div id='test3' class="test"><span>하ᄂ
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;그ᄅ</span></div>
+<div id='test4' class="test"><span>하ᄂ&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;그ᄅ</span></div>
+<div id='test5' class="test"><span>하ᄂ
+
+
+그ᄅ</span></div>
+<div id='test6' class="test"><span>하ᄂ&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;그ᄅ</span></div>
+<div id="ref" class="ref"><span>하ᄂ&#x20;그ᄅ</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-012.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-012.tentative.html
new file mode 100644
index 0000000000..2c8b186c3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-012.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Hangul halfwidth jamo characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is F, W or H  and neither side is Hangul, then the segment break is removed. Otherwise, the segment break is converted to a space.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>ﾾￂﾤ
+ﾡￚﾩ</span></div>
+<div id='test2' class="test"><span>ﾾￂﾤ&#x20;&#x20;&#x20;
+ﾡￚﾩ</span></div>
+<div id='test3' class="test"><span>ﾾￂﾤ
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ﾡￚﾩ</span></div>
+<div id='test4' class="test"><span>ﾾￂﾤ&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;ﾡￚﾩ</span></div>
+<div id='test5' class="test"><span>ﾾￂﾤ
+
+
+ﾡￚﾩ</span></div>
+<div id='test6' class="test"><span>ﾾￂﾤ&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;ﾡￚﾩ</span></div>
+<div id="ref" class="ref"><span>ﾾￂﾤ&#x20;ﾡￚﾩ</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-014.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-014.tentative.html
new file mode 100644
index 0000000000..93dc18a8c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-014.tentative.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Thai characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is F, W or H  and neither side is Hangul, then the segment break is removed. Otherwise, the segment break is converted to a space.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>ภาษา
+ไทย</span></div>
+<div id='test2' class="test"><span>ภาษา&#x20;&#x20;&#x20;
+ไทย</span></div>
+<div id='test3' class="test"><span>ภาษา
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ไทย</span></div>
+<div id='test4' class="test"><span>ภาษา&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;ไทย</span></div>
+<div id='test5' class="test"><span>ภาษา
+
+
+ไทย</span></div>
+<div id='test6' class="test"><span>ภาษา&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;ไทย</span></div>
+<div id="ref" class="ref"><span>ภาษา&#x20;ไทย</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+</script>
+<!-- Notes:
+The assertion will fail if more or less than one space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-015.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-015.tentative.html
new file mode 100644
index 0000000000..095fcd0dd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-015.tentative.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Thai and Latin characters around line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the East Asian Width property of both the character before and after the line feed is F, W or H  and neither side is Hangul, then the segment break is removed. Otherwise, the segment break is converted to a space.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>ภาษา
+latin</span></div>
+<div id='test2' class="test"><span>ภาษา&#x20;&#x20;&#x20;
+latin</span></div>
+<div id='test3' class="test"><span>ภาษา
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;latin</span></div>
+<div id='test4' class="test"><span>ภาษา&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;latin</span></div>
+<div id='test5' class="test"><span>ภาษา
+
+
+latin</span></div>
+<div id='test6' class="test"><span>ภาษา&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;latin</span></div>
+<div id="ref1" class="ref"><span>ภาษา&#x20;latin</span></div>
+
+<div id='test7' class="test"><span>latin
+ภาษา</span></div>
+<div id='test8' class="test"><span>latin&#x20;&#x20;&#x20;
+ภาษา</span></div>
+<div id='test9' class="test"><span>latin
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ภาษา</span></div>
+<div id='test10' class="test"><span>latin&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;ภาษา</span></div>
+<div id='test11' class="test"><span>latin
+
+
+ภาษา</span></div>
+<div id='test12' class="test"><span>latin&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;ภาษา</span></div>
+<div id="ref2" class="ref"><span>latin&#x20;ภาษา</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "linebreak only thai latin");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "spaces linebreak thai latin");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "linebreak spaces thai latin");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "spaces linebreak spaces thai latin");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "multiple linebreaks thai latin");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref1').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces thai latin");
+test(function() {
+assert_equals(document.getElementById('test7').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "linebreak only latin thai");
+test(function() {
+assert_equals(document.getElementById('test8').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "spaces linebreak latin thai");
+test(function() {
+assert_equals(document.getElementById('test9').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "linebreak spaces latin thai");
+test(function() {
+assert_equals(document.getElementById('test10').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "spaces linebreak spaces latin thai");
+test(function() {
+assert_equals(document.getElementById('test11').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "multiple linebreaks latin thai");
+test(function() {
+assert_equals(document.getElementById('test12').firstChild.offsetWidth, document.getElementById('ref2').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces latin thai");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-016.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-016.tentative.html
new file mode 100644
index 0000000000..2cb36a5b1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-016.tentative.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Thai with ZWSP before line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the character immediately before or immediately after the segment break is the zero-width space character (U+200B), then the break is removed, leaving behind the zero-width space.">
+<style type='text/css'>
+/* the CSS below is not part of the test */
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>ภาษา&#x200B;
+ไทย</span></div>
+<div id='test2' class="test"><span>ภาษา&#x200B;&#x20;&#x20;&#x20;
+ไทย</span></div>
+<div id='test3' class="test"><span>ภาษา&#x200B;
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ไทย</span></div>
+<div id='test4' class="test"><span>ภาษา&#x200B;&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;ไทย</span></div>
+<div id='test5' class="test"><span>ภาษา&#x200B;
+
+
+ไทย</span></div>
+<div id='test6' class="test"><span>ภาษา&#x200B;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;ไทย</span></div>
+<div id="ref" class="ref"><span>ภาษาไทย</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+var matches = document.getElementById('test1').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 1");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+var matches = document.getElementById('test2').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 2");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+var matches = document.getElementById('test3').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 3");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+var matches = document.getElementById('test4').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 4");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+var matches = document.getElementById('test5').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 5");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+var matches = document.getElementById('test6').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 6");
+</script>
+<!-- Notes:
+The assertion will fail if a normal space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-017.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-017.tentative.html
new file mode 100644
index 0000000000..52b7ce1f6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-017.tentative.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Thai with ZWSP after line break</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="If the character immediately before or immediately after the segment break is the zero-width space character (U+200B), then the break is removed, leaving behind the zero-width space.">
+<style type='text/css'>
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test1' class="test"><span>ภาษา
+&#x200B;ไทย</span></div>
+<div id='test2' class="test"><span>ภาษา
+&#x20;&#x20;&#x20;&#x200B;ไทย</span></div>
+<div id='test3' class="test"><span>ภาษา&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;
+&#x200B;ไทย</span></div>
+<div id='test4' class="test"><span>ภาษา&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;&#x200B;ไทย</span></div>
+<div id='test5' class="test"><span>ภาษา
+
+
+&#x200B;ไทย</span></div>
+<div id='test6' class="test"><span>ภาษา&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x200B;ไทย</span></div>
+<div id="ref" class="ref"><span>ภาษาไทย</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak only");
+var matches = document.getElementById('test1').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 1");
+test(function() {
+assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak");
+var matches = document.getElementById('test2').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 2");
+test(function() {
+assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "linebreak spaces");
+var matches = document.getElementById('test3').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 3");
+test(function() {
+assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces linebreak spaces");
+var matches = document.getElementById('test4').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 4");
+test(function() {
+assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks");
+var matches = document.getElementById('test5').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 5");
+test(function() {
+assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "multiple linebreaks + spaces");
+var matches = document.getElementById('test6').firstChild.textContent.match(/\u200B/g)
+test(function() {
+assert_equals(matches.length, 1);
+}, "zwsp retained 6");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-018.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-018.tentative.html
new file mode 100644
index 0000000000..2faf185856
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-018.tentative.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: inline element boundary and segment break transformations</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel=match href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="intervening inline box boundaries must be ignored for segment break transformations">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+  color: green;
+}
+#b { border-right: solid 20px green; }
+#p { padding-right: 20px; background: green; }
+#m { margin-right: 20px; }
+#m2 { margin-right: -20px; }
+
+#red {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: absolute;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div id=red></div>
+
+<div>aa&#x200b;
+bbb</div>
+
+<div>aa<span>&#x200b;</span>
+bbb</div>
+
+<div>aa<span id=b>&#x200b;</span>
+bb</div>
+
+<div>aa<span id=p>&#x200b;</span>
+bb</div>
+
+<div>aa<span id=m>&#x200b;</span><span id=m2></span>
+bbb</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-019.tentative.html b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-019.tentative.html
new file mode 100644
index 0000000000..afbba26425
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/seg-break-transformation-019.tentative.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: out of flow elements and segment break transformations</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-encoding">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel=match href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Out-of-flow elements must be ignored for segment break transformations">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 20px/1 Ahem;
+  color: green;
+}
+aside {
+  color: transparent;
+}
+#abs { position: absolute; }
+#fixed { position: fixed; }
+#float-r { float: right; }
+#float-l { float: left; margin-left: -3em; }
+#red {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: absolute;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+<div id=red></div>
+
+<div>aa&#x200b;
+bbb</div>
+
+<div>aa&#x200b;<aside id=abs>foo</aside>
+bbb</div>
+
+<div>aa&#x200b;<aside id=fixed>foo</aside>
+bbb</div>
+
+<div>aa&#x200b;<aside id=float-r>foo</aside>
+bbb</div>
+
+<div>aa&#x200b;<aside id=float-l>foo</aside>
+bbb</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/support/trailing-space-and-text-alignment.css b/testing/web-platform/tests/css/css-text/white-space/support/trailing-space-and-text-alignment.css
new file mode 100644
index 0000000000..3bb9b369fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/support/trailing-space-and-text-alignment.css
@@ -0,0 +1,24 @@
+textarea {
+    /* Reset user-agent style */
+    margin: initial;
+    padding: initial;
+    border: initial;
+    border-radius: initial;
+    outline: initial;
+    resize: initial;
+    overflow-wrap: initial;
+
+    height: 100px;
+    font: 40px/1 Ahem;
+    border: 1px solid black;
+    overflow-y: hidden;
+    overflow-x: auto;
+
+    /* testing */
+    width: 3ch;
+}
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+.start { text-align: start; }
+.end { text-align: end; }
diff --git a/testing/web-platform/tests/css/css-text/white-space/tab-bidi-001.html b/testing/web-platform/tests/css/css-text/white-space/tab-bidi-001.html
new file mode 100644
index 0000000000..cf3190ff9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/tab-bidi-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: Tabs vs. Bidi</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/tab-bidi-001-ref.html">
+<meta name="assert" content="Tabs segment bidi reordering per UAX9.">
+<style>
+body > div {
+  border: solid blue;
+  margin: 1em;
+}
+div > div {
+  white-space: pre;
+  font: 20px/1 monospace;
+  text-align: left;
+}
+div > span { /* measure bounds */
+  border: orange;
+  border-style: none solid;
+}
+</style>
+
+<p>Test passes if all three rows of each box are identical.
+
+<div>
+  <div dir=ltr><span>A	<span dir="rtl">B	C</span>	D	</span></div>
+  <div dir=ltr><span><bdo dir=rtl>A	B	C</bdo>	D	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: ltr"><span>A	B	C	D	</span></div>
+</div>
+<div>
+  <div dir=ltr><span>א	<span dir="rtl">בּ	ג</span>	ד	</span></div>
+  <div dir=ltr><span><bdo dir=rtl>א	בּ	ג</bdo>	ד	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: ltr"><span>א	בּ	ג	ד	</span></div>
+</div>
+<div>
+  <div dir=rtl><span>A	<span dir="ltr">B	C</span>	D	</span></div>
+  <div dir=rtl><span><bdo dir=ltr>A	B	C</bdo>	D	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: rtl"><span>A	B	C	D	</span></div>
+</div>
+<div>
+  <div dir=rtl><span>א	<span dir="ltr">בּ	ג</span>	ד	</span></div>
+  <div dir=rtl><span><bdo dir=ltr>א	בּ	ג</bdo>	ד	</span></div>
+  <div style="unicode-bidi: bidi-override; direction: rtl"><span>א	בּ	ג	ד	</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-001.html b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-001.html
new file mode 100644
index 0000000000..dae6012bf7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: the nearest tab stop is more than 0.5 ch away</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="match" href="reference/tab-stop-threshold-001-ref.html">
+<meta name="assert" content="A preserved tab pushes to the nearest tap stop as long as we're not closer to it than 0.5ch.">
+<style>
+div {
+  white-space: pre;
+  font-family: monospace;
+  tab-size: 8; /* the initial value, but since we're measuring against it, we might as well be sure */
+}
+span { display: inline-block; }
+#s1 { width: 6ch; }
+#s2 { width: 7ch; }
+#s3 { width: 7.3ch; }
+</style>
+
+<p>Test passes if the 4 letters bellow are vertically aligned.
+<div><span id=s1></span>&#9;P</div>
+<div><span id=s2></span>&#9;A</div>
+<div><span id=s3></span>&#9;S</div>
+<div>        S</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-002.html b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-002.html
new file mode 100644
index 0000000000..1147e4b041
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: the nearest tab stop is less than 0.5 ch away</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="match" href="reference/tab-stop-threshold-002-ref.html">
+<meta name="assert" content="A preserved tab pushes to the tab stop after the nearest one as long as we're closer to the nearest one than 0.5ch.">
+<style>
+div {
+  white-space: pre;
+  font-family: monospace;
+  tab-size: 8; /* the initial value, but since we're measuring against it, we might as well be sure */
+}
+span { display: inline-block; }
+#s1 { width: 7.6ch; }
+#s2 { width: 7.8ch; }
+#s3 { width: 7.9ch; }
+</style>
+
+<p>Test passes if the 4 letters bellow are vertically aligned.
+<div><span id=s1></span>&#9;P</div>
+<div><span id=s2></span>&#9;A</div>
+<div><span id=s3></span>&#9;S</div>
+<div>                S</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-003.html b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-003.html
new file mode 100644
index 0000000000..24cf10defc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: the nearest tab stop is more than 0.5 ch away, white-space:pre-wrap</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="match" href="reference/tab-stop-threshold-001-ref.html">
+<meta name="assert" content="A preserved tab pushes to the nearest tap stop as long as we're not closer to it than 0.5ch, under white-space:pre-wrap">
+<style>
+div {
+  white-space: pre-wrap;
+  font-family: monospace;
+  tab-size: 8; /* the initial value, but since we're measuring against it, we might as well be sure */
+}
+span { display: inline-block; }
+#s1 { width: 6ch; }
+#s2 { width: 7ch; }
+#s3 { width: 7.3ch; }
+</style>
+
+<p>Test passes if the 4 letters bellow are vertically aligned.
+<div><span id=s1></span>&#9;P</div>
+<div><span id=s2></span>&#9;A</div>
+<div><span id=s3></span>&#9;S</div>
+<div>        S</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-004.html b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-004.html
new file mode 100644
index 0000000000..3949c55a44
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-004.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: the nearest tab stop is less than 0.5 ch away, white-space:pre-wrap</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="match" href="reference/tab-stop-threshold-002-ref.html">
+<meta name="assert" content="A preserved tab pushes to the tab stop after the nearest one as long as we're closer to the nearest one than 0.5ch, under white-space:pre-wrap.">
+<style>
+div {
+  white-space: pre-wrap;
+  font-family: monospace;
+  tab-size: 8; /* the initial value, but since we're measuring against it, we might as well be sure */
+}
+span { display: inline-block; }
+#s1 { width: 7.6ch; }
+#s2 { width: 7.8ch; }
+#s3 { width: 7.9ch; }
+</style>
+
+<p>Test passes if the 4 letters bellow are vertically aligned.
+<div><span id=s1></span>&#9;P</div>
+<div><span id=s2></span>&#9;A</div>
+<div><span id=s3></span>&#9;S</div>
+<div>                S</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-005.html b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-005.html
new file mode 100644
index 0000000000..f82e5e5174
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-005.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: the nearest tab stop is more than 0.5 ch away, white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="match" href="reference/tab-stop-threshold-001-ref.html">
+<meta name="assert" content="A preserved tab pushes to the nearest tap stop as long as we're not closer to it than 0.5ch, under white-space:break-spaces">
+<style>
+div {
+  white-space: break-spaces;
+  font-family: monospace;
+  tab-size: 8; /* the initial value, but since we're measuring against it, we might as well be sure */
+}
+span { display: inline-block; }
+#s1 { width: 6ch; }
+#s2 { width: 7ch; }
+#s3 { width: 7.3ch; }
+</style>
+
+<p>Test passes if the 4 letters bellow are vertically aligned.
+<div><span id=s1></span>&#9;P</div>
+<div><span id=s2></span>&#9;A</div>
+<div><span id=s3></span>&#9;S</div>
+<div>        S</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-006.html b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-006.html
new file mode 100644
index 0000000000..7d1299124d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/tab-stop-threshold-006.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: the nearest tab stop is less than 0.5 ch away, white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
+<link rel="match" href="reference/tab-stop-threshold-002-ref.html">
+<meta name="assert" content="A preserved tab pushes to the tab stop after the nearest one as long as we're closer to the nearest one than 0.5ch, under white-space:break-spaces.">
+<style>
+div {
+  white-space: break-spaces;
+  font-family: monospace;
+  tab-size: 8; /* the initial value, but since we're measuring against it, we might as well be sure */
+}
+span { display: inline-block; }
+#s1 { width: 7.6ch; }
+#s2 { width: 7.8ch; }
+#s3 { width: 7.9ch; }
+</style>
+
+<p>Test passes if the 4 letters bellow are vertically aligned.
+<div><span id=s1></span>&#9;P</div>
+<div><span id=s2></span>&#9;A</div>
+<div><span id=s3></span>&#9;S</div>
+<div>                S</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-001.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-001.html
new file mode 100644
index 0000000000..4e1829f499
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-001.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#container {
+  width: 20ch;
+}
+.balance {
+  text-wrap: balance;
+}
+</style>
+<div id="container"></div>
+<script>
+const container = document.getElementById('container');
+for (const text of [
+    'Balancing should',
+    'Balancing should not change',
+    'Balancing should not change the number of lines.',
+  ]) {
+  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-002.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-002.html
new file mode 100644
index 0000000000..cae9d54de0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-002.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="mismatch" href="reference/text-wrap-balance-002-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+  font-family: Ahem;
+  font-size: 20px;
+  width: 20ch;
+  text-wrap: balance;
+}
+</style>
+<div class="container">
+  123 567 901 345 789 123
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-align-001.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-align-001.html
new file mode 100644
index 0000000000..b27823b72a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-align-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="match" href="reference/text-wrap-balance-align-001-ref.html">
+<style>
+.container {
+  font-family: monospace;
+  font-size: 20px;
+  width: 20ch;
+  border: solid 1px;
+  text-wrap: balance;
+}
+</style>
+<div class="container" style="text-align: right">
+  123456789 123 567
+  123456789 123 567
+</div>
+<div class="container" style="text-align: center">
+  123456789 123 567
+  123456789 123 567
+</div>
+<div class="container" style="text-align: justify">
+  123456789 123 567
+  123456789 123 567
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-dynamic-001.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-dynamic-001.html
new file mode 100644
index 0000000000..76b4cbbb43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-dynamic-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="match" href="reference/text-wrap-balance-dynamic-001-ref.html">
+<style>
+#container {
+  width: 20ch;
+  text-wrap: balance;
+}
+span:hover {
+  color: red;
+}
+</style>
+<div id="container">
+  123 567 901 345 789
+  123 567 901 345 789
+  123 567 901 345 789
+</div>
+<script>
+document.body.offsetTop;
+container.appendChild(document.createTextNode('999'));
+</script>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-001.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-001.html
new file mode 100644
index 0000000000..3f00fdfbf4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="match" href="reference/text-wrap-balance-float-001-ref.html">
+<style>
+.container {
+  font: 20px/1.5 monospace;
+  width: 23.5ch;
+  border: solid 1px;
+  text-wrap: balance;
+}
+.float {
+  background: yellow;
+  padding: 0.2em 1ch;
+  line-height: 1.2;
+  float: left;
+}
+</style>
+
+<div class="container"><div class="float">FLOAT<br>FLOAT</div>abc de fg hij klm nop qrst uvw xyz!</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-002.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-002.html
new file mode 100644
index 0000000000..b611b8d796
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="match" href="reference/text-wrap-balance-float-002-ref.html">
+<style>
+.container {
+  font: 20px/1.5 monospace;
+  width: 23.5ch;
+  border: solid 1px;
+  text-wrap: balance;
+}
+.float {
+  background: yellow;
+  padding: 0.2em 1ch;
+  line-height: 1.2;
+  float: right;
+}
+</style>
+
+<div class="container"><div class="float">FLOAT<br>FLOAT</div>abc de fg hij klm nop qrst uvw xyz!</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-003.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-003.html
new file mode 100644
index 0000000000..b2a4c7a43b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-003.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="match" href="reference/text-wrap-balance-float-001-ref.html">
+<style>
+.container {
+  font: 20px/1.5 monospace;
+  width: 23.5ch;
+  border: solid 1px;
+  text-wrap: balance;
+}
+.float {
+  background: yellow;
+  padding: 0.2em 1ch;
+  line-height: 1.2;
+  float: left;
+}
+</style>
+
+<div class="container">abc de<div class="float">FLOAT<br>FLOAT</div> fg hij klm nop qrst uvw xyz!</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-004.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-004.html
new file mode 100644
index 0000000000..b39f329255
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-004.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="match" href="reference/text-wrap-balance-float-002-ref.html">
+<style>
+.container {
+  font: 20px/1.5 monospace;
+  width: 23.5ch;
+  border: solid 1px;
+  text-wrap: balance;
+}
+.float {
+  background: yellow;
+  padding: 0.2em 1ch;
+  line-height: 1.2;
+  float: right;
+}
+</style>
+
+<div class="container">abc de <div class="float">FLOAT<br>FLOAT</div>fg hij klm nop qrst uvw xyz!</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-005.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-005.html
new file mode 100644
index 0000000000..177be0e10a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-float-005.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="match" href="reference/text-wrap-balance-float-005-ref.html">
+<style>
+.container {
+  font: 20px/1.5 monospace;
+  width: 26.5ch;
+  border: solid 1px;
+  text-wrap: balance;
+}
+.float {
+  background: yellow;
+  padding: 0.2em 1ch;
+  line-height: 1.2;
+  float: left;
+}
+.float2 {
+  background: cyan;
+  padding: 0.2em 1ch;
+  line-height: 1.2;
+  float: right;
+}
+</style>
+
+<!--
+The floats (inc. padding) are 7ch wide, and occupy ~2 lines,
+so without balancing, layout would be
+    +--------------------------+
+    | FLOAT abcde fghi jklm nop|
+    | FLOAT qrst uvw     FLOAT |
+    |xyx!                FLOAT |
+    +--------------------------+
+
+Applying text-wrap:balance results in
+    +--------------------------+
+    | FLOAT abcde fghi         |
+    | FLOAT jklm nop     FLOAT |
+    |qrst uvw xyx!       FLOAT |
+    +--------------------------+
+-->
+<div class="container"><div class="float">FLOAT<br>FLOAT</div>abcde fghi jklm nop<div class="float2">FLOAT<br>FLOAT</div> qrst uvw xyz!</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-line-clamp-001.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-line-clamp-001.html
new file mode 100644
index 0000000000..f104a5261b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-line-clamp-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="match" href="reference/text-wrap-balance-line-clamp-001-ref.html">
+<style>
+.container {
+  font-family: monospace;
+  font-size: 20px;
+  width: 20ch;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-wrap: balance;
+}
+</style>
+<div class="container">
+  123 567 901 345 789
+  123 567 901 345 789
+  123
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-narrow-crash.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-narrow-crash.html
new file mode 100644
index 0000000000..dcc0d8773d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-narrow-crash.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 1px; text-wrap: balance">A</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-overflow-001.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-overflow-001.html
new file mode 100644
index 0000000000..5f79832549
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-overflow-001.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="match" href="reference/text-wrap-balance-overflow-001-ref.html">
+<style>
+.container {
+  font-family: monospace;
+  font-size: 20px;
+  inline-size: 15ch;
+  border: 1px solid;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+</style>
+<div class="container">CONTROLLING YOUR BU</div>
+<div class="container">CONTROLLING YOUR BU BU</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-overflow-002.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-overflow-002.html
new file mode 100644
index 0000000000..0eee3bdbc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-overflow-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE 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=1878865">
+<link rel="match" href="reference/text-wrap-balance-overflow-002-ref.html">
+
+<style>
+#test {
+  border: 1px solid gray;
+  font: 15px monospace;
+  width: 20ch;
+  text-wrap: balance;
+}
+</style>
+
+<body onload="test.style.overflowWrap='anywhere'">
+<div id=test>
+Interconnect your build
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-text-indent-001.html b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-text-indent-001.html
new file mode 100644
index 0000000000..0fe4447acf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/text-wrap-balance-text-indent-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#valdef-text-wrap-balance">
+<link rel="match" href="reference/text-wrap-balance-text-indent-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  border: 1px solid;
+  font-family: Ahem;
+  font-size: 10px;
+  text-indent: 5ch;
+  text-wrap: balance;
+  width: 10ch;
+}
+</style>
+<div>
+  01
+  34 6 89
+  12 3 56
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-break-spaces-001.html b/testing/web-platform/tests/css/css-text/white-space/textarea-break-spaces-001.html
new file mode 100644
index 0000000000..ad81e99768
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-break-spaces-001.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of line is wrapped when white-space is break-spaces in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is wrapped when the white-space property is set to break-spaces in a textarea.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: break-spaces;
+  color: green;
+
+  background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  margin-left: -1ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea> XX  XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-break-spaces-002.html b/testing/web-platform/tests/css/css-text/white-space/textarea-break-spaces-002.html
new file mode 100644
index 0000000000..f9c2f50b32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-break-spaces-002.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: single preserved white space at the end of with white-space:break-spaces in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
+<meta name="assert" content="a single preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap and overflow-wrap is break-spaces in a textarea.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: break-spaces;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 2ch;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-001.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-001.html
new file mode 100644
index 0000000000..19d8735790
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap is not wrapped in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap in a textarea">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX    XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-002.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-002.html
new file mode 100644
index 0000000000..de16f5b951
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-002.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on word-break:break-all in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if word-break is break-all in a textarea">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX    XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-003.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-003.html
new file mode 100644
index 0000000000..204f626a78
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-003.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on word-break:keep-all in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if word-break is keep-all in a textarea.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  word-break: keep-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX    XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-004.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-004.html
new file mode 100644
index 0000000000..82d53bc7be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on line-break:loose in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if line-break is loose in a textarea.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  line-break: loose;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX    XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-005.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-005.html
new file mode 100644
index 0000000000..49797372c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-005.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on line-break:normal in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if line-break is normal in a textarea.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  line-break: normal;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX    XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-006.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-006.html
new file mode 100644
index 0000000000..8711a71de6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-006.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on line-break:strict in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if line-break is strict in a textarea.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  line-break: strict;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX    XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-007.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-007.html
new file mode 100644
index 0000000000..5d6b57b14b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-007.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not change based on overflow-wrap:break-word in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
+<meta name="assert" content="preserved white space at the end of the line is not wrapped when the white-space property is set to pre-wrap, even if overflow-wrap is break-word in a textarea.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0 0/2ch 2ch no-repeat;
+
+  width: 4ch;
+  word-wrap: break-word; /* deprecated alias */
+  overflow-wrap: break-word;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX    XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-011.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-011.html
new file mode 100644
index 0000000000..ef4a84d3be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-011.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of and white-space:pre-wrap does not cause wrapping in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="match" href="reference/textarea-pre-wrap-001-ref.html">
+<meta name="assert" content="When the white-space property is set to pre-wrap, preserved white space at the end of the line must hang or be collapsed, and must not cause preceeding content to be wrapped in a textarea.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
+
+  width: 3ch;
+  margin-left: -1ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea> XX&#x20;
+ XX </textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-012.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-012.html
new file mode 100644
index 0000000000..5ca1281128
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-012.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of soft-wrapped lines and white-space:pre-wrap with right alignement in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-012-ref.html">
+<meta name="assert" content="When white-space is pre-wrap, only spaces at the end of soft-wrapped lines get collapsed or hanged, so they do not have any effect when right aligning.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 1ch 0/2ch 2ch no-repeat;
+
+  width: 3ch;
+  text-align: right;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX&#x20;
+XX </textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-013.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-013.html
new file mode 100644
index 0000000000..3aa1360856
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-013.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of soft-wrapped line and white-space:pre-wrap with center alignement in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/pre-wrap-013-ref.html">
+<meta name="assert" content="When white-space is pre-wrap, spaces at the end of soft-wrapped lines get collapsed or hanged, so they do not have any effect when centering.">
+<meta name="fuzzy" content="maxDifference=0-36; totalPixels=0-12">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: green;
+
+  background: linear-gradient(red, red) 0.5ch 0/2ch 2ch no-repeat;
+
+  width: 3ch;
+  text-align: center;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <textarea>XX XX</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-014.html b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-014.html
new file mode 100644
index 0000000000..f2812af2fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/textarea-pre-wrap-014.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved white space at the end of soft-wrapped lines and white-space:pre-wrap with justification in a textarea</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/textarea-pre-wrap-014-ref.html">
+<meta name="assert" content="When white-space is pre-wrap, spaces at the end of a soft-wrapped line get collapsed or hanged, and don't influence justification.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+textarea {
+  word-wrap: initial; /*deprecated alias*/
+  overflow-wrap: initial;
+  line-break: initial;
+  word-break: initial;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: hidden; /* I don't want scrollbars, and overflow:visible isn't typically supported on textarea */
+
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+  color: white;
+
+  background: linear-gradient(red, red) 3ch 0/2ch 1ch no-repeat;
+
+  width: 4ch;
+  text-align: justify;
+}
+</style>
+<body>
+  <p>Test passes if there is <strong>no red</strong> below.</p>
+  <textarea>X X X</textarea>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-001.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-001.html
new file mode 100644
index 0000000000..96fd312176
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: ideographic space at the end of line must hang</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-ideographic-space-001-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) at the end of the line must hang.">
+<style>
+div {
+  position: absolute;
+  width: max-content;
+  line-height: 1;
+  color: transparent;
+}
+.red { background: red; }
+.green { background: green; }
+</style>
+
+<p>Test passes if the shape below is green and if there is no red.
+
+<div class=red>あああ</div>
+<div class=red>ああ<span class=green>&#x3000;</span><br>ああ</div>
+<div><span class=green>ああ<br>ああ</span></div>
+<!-- the ideographic space must not be removed,
+  so it should hide the third red あ of the first div.
+  However, it should hang and therefore not extend the width of its parent div,
+  which would be visible as red on the second line if it were expanded.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-002.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-002.html
new file mode 100644
index 0000000000..864a8f87b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequence of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-ideographic-space-002-ref.html">
+<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must hang.">
+<style>
+div {
+  position: absolute;
+  width: max-content;
+  line-height: 1;
+  color: transparent;
+}
+.red { background: red; }
+.green { background: green; }
+</style>
+
+<p>Test passes if the shape below is green and if there is no red.
+<div class=red>ああああ あ あ</div>
+<div class=red>ああ<span class=green>&#x3000;&#x3000; &#x3000; &#x3000;</span><br>ああ</div>
+<div><span class=green>ああ<br>ああ</span></div>
+<!-- the trailing sequence of spaces must not be removed,
+  so it should hide all of the first (red) div.
+  However, it should hang and therefore not extend the width of its parent div,
+  which would be visible as red on the second line if it were expanded.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-003.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-003.html
new file mode 100644
index 0000000000..f5ad8cb871
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved ideographic space at the end of line must hang</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-ideographic-space-003-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) at the end of the line must hang if white-space preserves spaces.">
+<style>
+div {
+  width: 2.5em;
+  white-space: pre-wrap;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;</span>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole sequence of preserved spaces will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-004.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-004.html
new file mode 100644
index 0000000000..af3187ae8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-ideographic-space-004-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must hang if white-space preserves spaces.">
+<style>
+div {
+  width: 2.5em;
+  white-space: pre-wrap;
+}
+span { background: blue; } /* If the spaces are removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;&#x3000; &#x3000; &#x3000;</span>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole space will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-005.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-005.html
new file mode 100644
index 0000000000..b33531bff9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-005.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="match" href="reference/trailing-ideographic-space-004-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must hang unconditionally .">
+<style>
+div {
+  width: 2.5em;
+  white-space: normal;
+}
+span { background: blue; } /* If the spaces are removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;&#x3000; &#x3000; &#x3000;</span>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole space will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-006.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-006.html
new file mode 100644
index 0000000000..f5a8ab1dfb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-006.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="match" href="reference/trailing-ideographic-space-003-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) at the end of the line must unconditionally hang.">
+<style>
+div {
+  width: 2.5em;
+  white-space: normal;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;</span>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole sequence of preserved spaces will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-007.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-007.html
new file mode 100644
index 0000000000..d58d5ba9cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-007.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-nowrap">
+<link rel="match" href="reference/trailing-ideographic-space-003-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) at the end of the line must unconditionally hang.">
+<style>
+div {
+  width: 2.5em;
+  white-space: nowrap;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;</span><br>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole sequence of preserved spaces will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-008.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-008.html
new file mode 100644
index 0000000000..50de162540
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-008.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-line">
+<link rel="match" href="reference/trailing-ideographic-space-003-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An ideographic space (U+3000) at the end of the line must unconditionally hang.">
+<style>
+div {
+  width: 2.5em;
+  white-space: pre-line;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;</span>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole sequence of preserved spaces will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-009.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-009.html
new file mode 100644
index 0000000000..2a642bbc6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-009.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequences of spaces and ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-nowrap">
+<link rel="match" href="reference/trailing-ideographic-space-004-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must hang unconditionally .">
+<style>
+div {
+  width: 2.5em;
+  white-space: nowrap;
+}
+span { background: blue; } /* If the spaces are removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;&#x3000; &#x3000; &#x3000;</span><br>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole space will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-010.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-010.html
new file mode 100644
index 0000000000..eef3613edd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-010.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequence of ideographic spaces at the end of line must hang</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-line">
+<link rel="match" href="reference/trailing-ideographic-space-004-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
+<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must hang unconditionally .">
+<style>
+div {
+  width: 2.5em;
+  white-space: pre-line;
+}
+span { background: blue; } /* If the spaces are removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
+<div>ああ<span>&#x3000;&#x3000; &#x3000; &#x3000;</span>ああ</div>
+
+<!--
+We're using a 2.5em width and two references, instead of 2em and just the first one,
+because in addition to requiring the spaces to hang,
+the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
+In browsers that don't do that, the whole space will be visible, and the first ref will be matched.
+In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-011.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-011.html
new file mode 100644
index 0000000000..381d7a41b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-011.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-ideographic-space-011-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-011-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 20px/1 Ahem;
+    width: 3ch;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a single line and if there is a blue square at the end of the first line.
+<div>X&#x03000;<span>X&#x03000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-012.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-012.html
new file mode 100644
index 0000000000..2b73db1820
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-012.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+  background: red;
+
+  width: 2ch;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div>XX<span>&#x03000;</span>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-013.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-013.html
new file mode 100644
index 0000000000..fa8195e4a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-013.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang, despite the use of overflow-wrap: break-word.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+  background: red;
+
+  width: 2ch;
+  overflow-wrap: break-word;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div>XX<span>&#x03000;</span>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-014.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-014.html
new file mode 100644
index 0000000000..8eab5924c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-014.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang, despite the use of overflow-wrap: anywhere.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+  background: red;
+
+  width: 2ch;
+  overflow-wrap: anywhere;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div>XX<span>&#x03000;</span>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-015.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-015.html
new file mode 100644
index 0000000000..efcb2c8a05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-015.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/trailing-ideographic-space-011-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-011-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang, despite the use of overflow-wrap: anywhere.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 20px/1 Ahem;
+    width: 3ch;
+
+    overflow-wrap: anywhere;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a single line and if there is a blue square at the end of the first line.
+<div>X&#x03000;<span>X&#x03000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-016.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-016.html
new file mode 100644
index 0000000000..3e65785f39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-016.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling leading ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/trailing-ideographic-space-011-ref.html">
+<link rel="match" href="reference/trailing-ideographic-space-alt-011-ref.html">
+<meta name="assert" content="Trailing ideographic spaces should hang, despite the use of overflow-wrap: break-word.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 20px/1 Ahem;
+    width: 3ch;
+
+    overflow-wrap: break-word;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>Test passes if the characters below are arranged in a single line and if there is a blue square at the end of the first line.
+<div>X&#x03000;<span>X&#x03000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-017.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-017.html
new file mode 100644
index 0000000000..742e389950
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-017.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling trailing ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-none">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Disabled hypenation and unicode-bidi 'plaintext' should not affect, hence the trailing ideographic spaces must hang; however, the rest of the sequence is wrapped due to the forced break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 50px/1 Ahem;
+    width: 1ch;
+}
+span {
+    background: green;
+    color: transparent;
+
+    unicode-bidi: plaintext;
+    hyphens: none;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div><span>X&#x3000;<br>&#x3000;&#x3000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-018.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-018.html
new file mode 100644
index 0000000000..16bb876751
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-018.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling trailing ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-none">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Disabled hypenation and unicode-bidi 'plaintext' should not affect, hence the trailing ideographic spaces must hang; however, the rest of the sequence is wrapped due to the forced break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 50px/1 Ahem;
+    width: 1ch;
+}
+span {
+    background: green;
+    color: transparent;
+
+    unicode-bidi: plaintext;
+    hyphens: none;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div><span>X&#x3000;<br>XX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-019.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-019.html
new file mode 100644
index 0000000000..0707000512
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-019.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling trailing ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-none">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Disabled hypenation and unicode-bidi 'plaintext' should not affect, hence the trailing ideographic spaces must hang; however, the rest of the sequence is wrapped due to the forced break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 50px/1 Ahem;
+    width: 1ch;
+}
+span {
+    background: green;
+    color: transparent;
+
+    unicode-bidi: plaintext;
+    hyphens: none;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div><span>X&#x3000;<br>X&#x3000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-020.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-020.html
new file mode 100644
index 0000000000..97ae007898
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-020.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling trailing ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-isolate">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-none">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Disabled hypenation and unicode-bidi 'isolate' should not affect, hence the trailing ideographic spaces must hang; however, the rest of the sequence is wrapped due to the forced break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 50px/1 Ahem;
+    width: 1ch;
+}
+span {
+    background: green;
+    color: transparent;
+
+    unicode-bidi: isolate;
+    hyphens: none;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div><span>X&#x3000;<br>&#x3000;&#x3000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-021.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-021.html
new file mode 100644
index 0000000000..b75327a64b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-021.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling trailing ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-isolate">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-none">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Disabled hypenation and unicode-bidi 'isolate' should not affect, hence the trailing ideographic spaces must hang; however, the rest of the sequence is wrapped due to the forced break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 50px/1 Ahem;
+    width: 1ch;
+}
+span {
+    background: green;
+    color: transparent;
+
+    unicode-bidi: isolate;
+    hyphens: none;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div><span>X&#x3000;<br>XX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-022.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-022.html
new file mode 100644
index 0000000000..71720c2b2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-022.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling trailing ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-isolate">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-none">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Disabled hypenation and unicode-bidi 'isolate' should not affect, hence the trailing ideographic spaces must hang; however, the rest of the sequence is wrapped due to the forced break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 50px/1 Ahem;
+    width: 1ch;
+}
+span {
+    background: green;
+    color: transparent;
+
+    unicode-bidi: isolate;
+    hyphens: none;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div><span>X&#x3000;<br>X&#x3000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-023.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-023.html
new file mode 100644
index 0000000000..ea95ab1e0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-023.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling trailing ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Auto hypenation and unicode-bidi 'plaintext' should not affect, hence the trailing ideographic spaces must hang; however, the rest of the sequence is wrapped due to the forced break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 50px/1 Ahem;
+    width: 1ch;
+}
+span {
+    background: green;
+    color: transparent;
+
+    unicode-bidi: plaintext;
+    hyphens: auto;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div><span>X&#x3000;<br>&#x3000;&#x3000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-024.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-024.html
new file mode 100644
index 0000000000..2a65400c60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-024.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling trailing ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Auto hypenation and unicode-bidi 'plaintext' should not affect, hence the trailing ideographic spaces must hang; however, the rest of the sequence is wrapped due to the forced break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 50px/1 Ahem;
+    width: 1ch;
+}
+span {
+    background: green;
+    color: transparent;
+
+    unicode-bidi: plaintext;
+    hyphens: auto;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div><span>X&#x3000;<br>XX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-025.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-025.html
new file mode 100644
index 0000000000..5123e10524
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-025.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: handling trailing ideographic space sequence</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#valdef-unicode-bidi-plaintext">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-hyphens-auto">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Auto hypenation and unicode-bidi 'plaintext' should not affect, hence the trailing ideographic spaces must hang; however, the rest of the sequence is wrapped due to the forced break.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 50px/1 Ahem;
+    width: 1ch;
+}
+span {
+    background: green;
+    color: transparent;
+
+    unicode-bidi: plaintext;
+    hyphens: auto;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<br>XX</div>
+<div><span>X&#x3000;<br>X&#x3000;</span></div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-001.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-001.html
new file mode 100644
index 0000000000..9ecfdb3eac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Breaking sequences of trailing ideograohic spaces </title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/trailing-ideographic-space-break-spaces-001-ref.html">
+<meta name="assert" content="If white-space is set to 'break-spaces', the overflowing idegraphic spaces must wrap to the next line.">
+<style>
+div {
+    width: 3em;
+    white-space: break-spaces;
+    line-height: 1;
+}
+</style>
+
+<p>Test passes if the characters below are arranged in pairs with a empty line in between.</p>
+<div>ああ&#x3000;&#x3000;&#x3000;&#x3000;ああ</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-002.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-002.html
new file mode 100644
index 0000000000..587f4e04b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Breaking sequences of trailing ideograohic spaces </title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/trailing-ideographic-space-break-spaces-001-ref.html">
+<meta name="assert" content="If white-space is set to 'break-spaces', the overflowing idegraphic spaces must wrap to the next line.">
+<style>
+div {
+    width: 3em;
+    white-space: break-spaces;
+    line-height: 1;
+}
+</style>
+
+<p>Test passes if the characters below are arranged in pairs with a empty line in between.</p>
+<div>ああ<span>&#x3000;&#x3000;&#x3000;&#x3000;</span>ああ</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-003.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-003.html
new file mode 100644
index 0000000000..08eacdd2cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-003.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Breaking sequences of trailing ideograohic spaces </title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/trailing-ideographic-space-break-spaces-001-ref.html">
+<meta name="assert" content="If white-space is set to 'break-spaces', the overflowing idegraphic spaces must wrap to the next line.">
+<style>
+div {
+    width: 3em;
+    white-space: break-spaces;
+    line-height: 1;
+}
+</style>
+
+<p>Test passes if the characters below are arranged in pairs with a empty line in between.</p>
+<div contenteditable="true">ああ&#x3000;&#x3000;&#x3000;&#x3000;ああ</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-004.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-004.html
new file mode 100644
index 0000000000..e9c32cfabb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-004.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Breaking sequences of trailing ideograohic spaces </title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/trailing-ideographic-space-break-spaces-001-ref.html">
+<meta name="assert" content="If white-space is set to 'break-spaces', the overflowing idegraphic spaces must wrap to the next line.">
+<style>
+div {
+    width: 3em;
+    white-space: break-spaces;
+    line-height: 1;
+}
+</style>
+
+<p>Test passes if the characters below are arranged in pairs with a empty line in between.</p>
+<div contenteditable="true">ああ<span>&#x3000;&#x3000;&#x3000;&#x3000;<span>ああ</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-005.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-005.html
new file mode 100644
index 0000000000..a8c68aa2a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-005.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Breaking sequences of trailing ideograohic spaces </title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/trailing-ideographic-space-break-spaces-001-ref.html">
+<meta name="assert" content="If white-space is set to 'break-spaces', the overflowing idegraphic spaces must wrap to the next line.">
+<style>
+div {
+    width: 3em;
+    white-space: break-spaces;
+    line-height: 1;
+}
+</style>
+
+<p>Test passes if the characters below are arranged in pairs with a empty line in between.</p>
+<div>ああ&#x3000;<span>&#x3000;&#x3000;&#x3000;</span>ああ</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-006.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-006.html
new file mode 100644
index 0000000000..e43d7c8774
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-006.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Breaking sequences of trailing ideograohic spaces </title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/trailing-ideographic-space-break-spaces-001-ref.html">
+<meta name="assert" content="If white-space is set to 'break-spaces', the overflowing idegraphic spaces must wrap to the next line.">
+<style>
+div {
+    width: 3em;
+    white-space: break-spaces;
+    line-height: 1;
+}
+</style>
+
+<p>Test passes if the characters below are arranged in pairs with a empty line in between.</p>
+<div contenteditable="true">ああ&#x3000;<span>&#x3000;&#x3000;&#x3000;</span>ああ</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-007.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-007.html
new file mode 100644
index 0000000000..79c23acba9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-007.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Breaking sequences of trailing ideograohic spaces </title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Setting white-space to 'break-spaces', hanging or collapsing the advance width of the spaces is not allowed.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div { font: 25px/1 Ahem; }
+.test {
+    z-index: -1;
+    color: green;
+
+    width: 4ch;
+    white-space: break-spaces;
+}
+.test > span { background: red; }
+.ref {
+    color: transparent;
+    background: green;
+    position: absolute;
+}
+.ref > span { color: transparent; }
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XX<span>XX<br>XXXX<br>XXXX</br>XX</span>XX</div>
+<div class="test">XX<span>&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;</span>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-008.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-008.html
new file mode 100644
index 0000000000..386083f100
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ideographic-space-break-spaces-008.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: Breaking sequences of trailing ideograohic spaces </title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="Setting white-space to 'break-spaces' doesn't prevent overflow if the first ideographic space of the sequence doesn't fit, which must hang.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+    font: 25px/1 Ahem;
+    color: transparent;
+    height: 100px;
+}
+.test {
+    width: 3ch;
+    white-space: break-spaces;
+}
+.test > span { background: green; }
+.ref {
+    width: 100px;
+    background: green;
+    position: absolute;
+    z-index: -1;
+}
+.ref > span { color: red; }
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="ref">XXX<span>X</span></div>
+<div class="test">XXX<span>&#x3000;</span>X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ogham-001.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ogham-001.html
new file mode 100644
index 0000000000..f687c7cdc3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ogham-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: trailing ogham spaces</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-ogham-001-ref.html">
+<meta name="assert" content="tailing collaspible ogham spaces are removed">
+<style>
+div {
+    border: solid;
+    width: min-content;
+}
+.soft-wrap { border-color: blue; }
+.hard-break { border-color: orange; }
+
+</style>
+
+<p>Test passes if the content of the blue and orange boxes is identical to that of the black box.
+
+<div class=soft-wrap>᚛ᚑᚌᚐᚋ᚜&#x1680;᚛ᚑᚌᚐᚋ᚜</div>
+<div class=hard-break>᚛ᚑᚌᚐᚋ᚜&#x1680;<br>᚛ᚑᚌᚐᚋ᚜</div>
+<div class=ref>᚛ᚑᚌᚐᚋ᚜<br>᚛ᚑᚌᚐᚋ᚜</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ogham-002.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ogham-002.html
new file mode 100644
index 0000000000..7bf1775078
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ogham-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: trailing pre-line ogham spaces</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-ogham-001-ref.html">
+<meta name="assert" content="tailing collaspible (with pre-line) ogham spaces are removed">
+<style>
+div {
+    border: solid;
+    width: min-content;
+    white-space: pre-line;
+}
+.soft-wrap { border-color: blue; }
+.hard-break { border-color: orange; }
+
+</style>
+
+<p>Test passes if the content of the blue and orange boxes is identical to that of the black box.
+
+<div class=soft-wrap>᚛ᚑᚌᚐᚋ᚜&#x1680;᚛ᚑᚌᚐᚋ᚜</div>
+<div class=hard-break>᚛ᚑᚌᚐᚋ᚜&#x1680;<br>᚛ᚑᚌᚐᚋ᚜</div>
+<div class=ref>᚛ᚑᚌᚐᚋ᚜<br>᚛ᚑᚌᚐᚋ᚜</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-ogham-003.html b/testing/web-platform/tests/css/css-text/white-space/trailing-ogham-003.html
new file mode 100644
index 0000000000..2cc1203da3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-ogham-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: trailing nowrap ogham spaces</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-ogham-001-ref.html">
+<meta name="assert" content="tailing collaspible (nowrap) ogham spaces are removed">
+<style>
+div {
+    border: solid;
+    width: min-content;
+    white-space: nowrap;
+}
+.br { border-color: blue; }
+.end-of-element { border-color: orange; }
+
+</style>
+
+<p>Test passes if the content of the blue and orange boxes is identical to that of the black box.
+
+<div class=br>᚛ᚑᚌᚐᚋ᚜&#x1680;<br>᚛ᚑᚌᚐᚋ᚜</div>
+<div class=end-of-element>᚛ᚑᚌᚐᚋ᚜<br>᚛ᚑᚌᚐᚋ᚜&#x1680;</div>
+<div class=ref>᚛ᚑᚌᚐᚋ᚜<br>᚛ᚑᚌᚐᚋ᚜</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-001.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-001.html
new file mode 100644
index 0000000000..ce5740bd0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequence of spaces and other space separators at the end of line must hang</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-001-ref.html">
+<meta name="assert" content="An sequence of regular spaces and other space separators at the end of the line must hang.">
+<style>
+div {
+  position: absolute;
+  width: max-content;
+  line-height: 1;
+  color: transparent;
+}
+.red { background: red; }
+.green { background: green; }
+#pre { white-space:pre; }
+</style>
+<p>Test passes if the shape below is green and if there is no red.
+
+<div class=red id=pre>xx&#x1680;&#x2000; &#x2001;&#x2002;&#x2003; &#x2004;&#x2005;&#x2006; &#x2007;&#x2008;&#x2009;&#x200A; &#x202F;&#x205F; &#x3000;</div>
+<div class=red>xx<span class=green>&#x1680;&#x2000; &#x2001;&#x2002;&#x2003; &#x2004;&#x2005;&#x2006; &#x2007;&#x2008;&#x2009;&#x200A;  &#x202F;&#x205F; &#x3000;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x1680;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2000;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2001;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2002;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2003;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2004;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2005;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2006;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2007;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2008;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2009;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x200A;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x202F;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x205F;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x3000;</span><br>xx</div>
+<div class=green>xx<br>xx</div>
+<!-- the trailing sequence of spaces must not be removed,
+  so it should hide all of the first (red) div.
+  However, it should hang and therefore not extend the width of its parent div,
+  which would be visible as red on the second line if it were expanded.
+  The extra red divs with one character each are for ease of debugging:
+  if the first one is fine, they will all be fine,
+  but if it is not, they should help find which one is wrong.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-002.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-002.html
new file mode 100644
index 0000000000..269b691b61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-002.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequence of spaces and other space separators at the end of line with white-space:pre-wrap</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-002-ref.html">
+<meta name="assert" content="An sequence of regular spaces and other space separators at the end of the line must hang if white-space is pre-wrap.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: pre-wrap;
+  font-family: Ahem;
+  font-size: 10px;
+  line-height: 1;
+  width: 3ch;
+  color: green;
+}
+.red {
+  position: absolute;
+  z-index: -1;
+}
+.red div {
+  color: red;
+}
+span { color: transparent; } /* because ogham space is otherwise visible*/
+</style>
+
+<p>Test passes if there are two green tall boxes below and no red.
+
+<section class=red>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+  <div>x x<br>x x</div>
+</section>
+<section>
+  <div>x x<span>&#x1680;</span>&#x2000; &#x2001;&#x2002;&#x2003; &#x2004;&#x2005;&#x2006; &#x2007;&#x2008;&#x2009;&#x200A;  &#x202F;&#x205F; &#x3000;x x</div>
+  <div>x x<span>&#x1680;</span>x x</div>
+  <div>x x&#x2000;x x</div>
+  <div>x x&#x2001;x x</div>
+  <div>x x&#x2002;x x</div>
+  <div>x x&#x2003;x x</div>
+  <div>x x&#x2004;x x</div>
+  <div>x x&#x2005;x x</div>
+  <div>x x&#x2006;x x</div>
+  <div>x x&#x2007;<wbr>x x</div>
+  <div>x x&#x2008;x x</div>
+  <div>x x&#x2009;x x</div>
+  <div>x x&#x200A;x x</div>
+  <div>x x&#x202F;<wbr>x x</div>
+  <div>x x&#x205F;x x</div>
+  <div>x x&#x3000;x x</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-003.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-003.html
new file mode 100644
index 0000000000..dad554e98d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-003.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequence of spaces and other space separators at the end of line, white-space:pre-line</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-001-ref.html">
+<meta name="assert" content="An sequence of regular spaces and other space separators at the end of the line must hang, with white-space:pre-line.">
+<style>
+div {
+  position: absolute;
+  width: max-content;
+  line-height: 1;
+  color: transparent;
+  white-space: pre-line;
+}
+.red { background: red; }
+.green { background: green; }
+#pre { white-space:pre; }
+</style>
+
+<p>Test passes if the shape below is green and if there is no red.
+
+<div class=red id=pre>xx&#x1680;&#x2000; &#x2001;&#x2002;&#x2003; &#x2004;&#x2005;&#x2006; &#x2007;&#x2008;&#x2009;&#x200A; &#x202F;&#x205F; &#x3000;</div>
+<div class=red>xx<span class=green>&#x1680;&#x2000; &#x2001;&#x2002;&#x2003; &#x2004;&#x2005;&#x2006; &#x2007;&#x2008;&#x2009;&#x200A;  &#x202F;&#x205F; &#x3000;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x1680;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2000;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2001;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2002;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2003;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2004;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2005;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2006;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2007;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2008;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2009;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x200A;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x202F;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x205F;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x3000;</span><br>xx</div>
+<div class=green>xx<br>xx</div>
+<!-- the trailing sequence of spaces must not be removed,
+  so it should hide all of the first (red) div.
+  However, it should hang and therefore not extend the width of its parent div,
+  which would be visible as red on the second line if it were expanded.
+  The extra red divs with one character each are for ease of debugging:
+  if the first one is fine, they will all be fine,
+  but if it is not, they should help find which one is wrong.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-004.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-004.html
new file mode 100644
index 0000000000..0fce061b45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-004.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: sequence of spaces and other space separators at the end of line, white-space:nowrap</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-001-ref.html">
+<meta name="assert" content="An sequence of regular spaces and other space separators at the end of the line must hang, with white-space:nowrap.">
+<style>
+div {
+  position: absolute;
+  width: max-content;
+  line-height: 1;
+  color: transparent;
+  white-space: nowrap;
+}
+.red { background: red; }
+.green { background: green; }
+#pre { white-space:pre; }
+</style>
+<p>Test passes if the shape below is green and if there is no red.
+
+<div class=red id=pre>xx&#x1680;&#x2000; &#x2001;&#x2002;&#x2003; &#x2004;&#x2005;&#x2006; &#x2007;&#x2008;&#x2009;&#x200A; &#x202F;&#x205F; &#x3000;</div>
+<div class=red>xx<span class=green>&#x1680;&#x2000; &#x2001;&#x2002;&#x2003; &#x2004;&#x2005;&#x2006; &#x2007;&#x2008;&#x2009;&#x200A;  &#x202F;&#x205F; &#x3000;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x1680;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2000;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2001;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2002;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2003;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2004;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2005;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2006;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2007;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2008;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x2009;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x200A;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x202F;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x205F;</span><br>xx</div>
+<div class=red>xx<span class=green>&#x3000;</span><br>xx</div>
+<div class=green>xx<br>xx</div>
+<!-- the trailing sequence of spaces must not be removed,
+  so it should hide all of the first (red) div.
+  However, it should hang and therefore not extend the width of its parent div,
+  which would be visible as red on the second line if it were expanded.
+  The extra red divs with one character each are for ease of debugging:
+  if the first one is fine, they will all be fine,
+  but if it is not, they should help find which one is wrong.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-001.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-001.html
new file mode 100644
index 0000000000..bf1ef08d57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+1680 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-001-ref.html">
+<meta name="assert" content="U+1680 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x1680;<br>あ<br>あ&#x1680;<br>あ<br>あ&#x1680;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x1680;ああ&#x1680;ああ&#x1680;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-002.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-002.html
new file mode 100644
index 0000000000..156d54650a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+2000 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+2000 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x2000;<br>あ<br>あ&#x2000;<br>あ<br>あ&#x2000;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x2000;ああ&#x2000;ああ&#x2000;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-003.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-003.html
new file mode 100644
index 0000000000..06a5817bea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+2001 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+2001 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x2001;<br>あ<br>あ&#x2001;<br>あ<br>あ&#x2001;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x2001;ああ&#x2001;ああ&#x2001;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-004.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-004.html
new file mode 100644
index 0000000000..66460d9ede
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-004.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+2002 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+2002 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x2002;<br>あ<br>あ&#x2002;<br>あ<br>あ&#x2002;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x2002;ああ&#x2002;ああ&#x2002;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-005.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-005.html
new file mode 100644
index 0000000000..96d5b53224
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-005.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+2003 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+2003 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x2003;<br>あ<br>あ&#x2003;<br>あ<br>あ&#x2003;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x2003;ああ&#x2003;ああ&#x2003;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-006.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-006.html
new file mode 100644
index 0000000000..50b0645dbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-006.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+2004 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+2004 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x2004;<br>あ<br>あ&#x2004;<br>あ<br>あ&#x2004;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x2004;ああ&#x2004;ああ&#x2004;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-007.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-007.html
new file mode 100644
index 0000000000..ea21144175
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-007.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+2005 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+2005 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x2005;<br>あ<br>あ&#x2005;<br>あ<br>あ&#x2005;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x2005;ああ&#x2005;ああ&#x2005;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-008.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-008.html
new file mode 100644
index 0000000000..60712e787c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-008.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+2006 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+2006 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x2006;<br>あ<br>あ&#x2006;<br>あ<br>あ&#x2006;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x2006;ああ&#x2006;ああ&#x2006;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-009.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-009.html
new file mode 100644
index 0000000000..6b4e9fa509
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-009.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+2007 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-009-ref.html">
+<meta name="assert" content="U+2007 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x2007;あ<br>あ&#x2007;あ<br>あ&#x2007;xx</div><!--GL, non tailorable after, tailorable before-->
+</section>
+<section>
+  <div>xx&#x2007;ああ&#x2007;ああ&#x2007;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-010.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-010.html
new file mode 100644
index 0000000000..158b6303f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+2008 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+2008 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x2008;<br>あ<br>あ&#x2008;<br>あ<br>あ&#x2008;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x2008;ああ&#x2008;ああ&#x2008;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-011.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-011.html
new file mode 100644
index 0000000000..e1de3fe016
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-011.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+2009 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+2009 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x2009;<br>あ<br>あ&#x2009;<br>あ<br>あ&#x2009;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x2009;ああ&#x2009;ああ&#x2009;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-012.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-012.html
new file mode 100644
index 0000000000..303a453bdd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-012.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+200A at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+200A at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x200A;<br>あ<br>あ&#x200A;<br>あ<br>あ&#x200A;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x200A;ああ&#x200A;ああ&#x200A;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-013.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-013.html
new file mode 100644
index 0000000000..becdee10fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-013.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+202F at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-013-ref.html">
+<meta name="assert" content="U+202F at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x202F;あ<br>あ&#x202F;あ<br>あ&#x202F;xx</div><!--GL, non-tailorable after, tailorable before-->
+</section>
+<section>
+  <div>xx&#x202F;ああ&#x202F;ああ&#x202F;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-014.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-014.html
new file mode 100644
index 0000000000..418bbfb431
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-014.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+205F at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+205F at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x205F;<br>あ<br>あ&#x205F;<br>あ<br>あ&#x205F;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x205F;ああ&#x205F;ああ&#x205F;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-015.html b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-015.html
new file mode 100644
index 0000000000..8ac39cf663
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-other-space-separators-break-spaces-015.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: U+3000 at the end of line with white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/trailing-other-space-separators-break-spaces-002-ref.html">
+<meta name="assert" content="U+3000 at the end of the line must not hang or be discarded if white-space is break-spaces. It thus keeps its usual line breaking properties, as defined in UAX14.">
+<meta name="flags" content="should">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  white-space: break-spaces;
+  font-size: 10px;
+  line-height: 1;
+  width: 2em;
+}
+section {
+  font-family: Ahem;
+  float: left;
+  margin: 0 1em;
+  color: blue;
+}
+.ref {
+  color: orange;
+}
+.ref div {
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the orange and blue parts of this page are identical.
+
+<!--
+ * There is no line breaking opportunity between two "x"
+ * There is a line breaking opportunity between two "あ"
+ * There is a line breaking opportunity after "x" or "あ"
+   unless suppressed by the next character (BA, GL).
+ * There is a line breaking opportunity before "x" or "あ"
+   unless suppressed by the previous character (BB, GL).
+-->
+<section class=ref>
+  <div>xx&#x3000;<br>あ<br>あ&#x3000;<br>あ<br>あ&#x3000;<br>xx</div><!-- BA, tailorable -->
+</section>
+<section>
+  <div>xx&#x3000;ああ&#x3000;ああ&#x3000;xx</div>
+</section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-align-start.tentative.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-align-start.tentative.html
new file mode 100644
index 0000000000..7908de12ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-align-start.tentative.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>Preserved trailing spaces when `text-align: left`</title>
+<link rel="help" href="http://crbug.com/966773">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="match" href="reference/trailing-space-align-start-ref.html">
+<style>
+div {
+  font-family: monospace;
+  font-size: 30px;
+  width: 3ch;
+  overflow: auto;
+}
+.pre { white-space: pre; }
+.pre-wrap { white-space: pre-wrap; }
+</style>
+<body>
+  <div class="pre">0 0 </div>
+  <div class="pre">0 0</div>
+  <div class="pre-wrap">0 0</div>
+  <div class="pre-wrap">0 0 </div>
+  <div class="pre-wrap">0 0 0 0 </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-001.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-001.html
new file mode 100644
index 0000000000..2165e7fe4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="match" href="reference/trailing-space-and-text-alignment-001-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: normal' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/trailing-space-and-text-alignment.css">
+<style>
+textarea {
+    white-space: normal;
+}
+</style>
+<textarea class="left">XXX   X</textarea>
+<textarea class="center">XXX   X</textarea>
+<textarea class="right">XXX   X</textarea>
+<textarea class="start">XXX   X</textarea>
+<textarea class="end">XXX   X</textarea>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-002.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-002.html
new file mode 100644
index 0000000000..30e37908a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre">
+<link rel="match" href="reference/trailing-space-and-text-alignment-002-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: pre' shouldn't hang and may cause overflow and activate the scrollbars.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/trailing-space-and-text-alignment.css">
+<style>
+textarea {
+    white-space: pre;
+}
+</style>
+<textarea class="left">XXX &#10;X</textarea>
+<textarea class="center">XXX &#10;X</textarea>
+<textarea class="right">XXX &#10;X</textarea>
+<textarea class="start">XXX &#10;X</textarea>
+<textarea class="end">XXX &#10;X</textarea>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-003.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-003.html
new file mode 100644
index 0000000000..9995e24058
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/trailing-space-and-text-alignment-001-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: pre-wrap' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/trailing-space-and-text-alignment.css">
+<style>
+textarea {
+    white-space: pre-wrap;
+}
+</style>
+<textarea class="left">XXX X</textarea>
+<textarea class="center">XXX X</textarea>
+<textarea class="right">XXX X</textarea>
+<textarea class="start">XXX X</textarea>
+<textarea class="end">XXX X</textarea>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-004.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-004.html
new file mode 100644
index 0000000000..3d7aad0541
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-004.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/trailing-space-and-text-alignment-002-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: break-spaces' shouldn't hang and may cause overflow and activate the horizontal scrollbar.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/trailing-space-and-text-alignment.css">
+<style>
+textarea {
+    white-space: break-spaces;
+}
+</style>
+<textarea class="left">XXX X</textarea>
+<textarea class="center">XXX X</textarea>
+<textarea class="right">XXX X</textarea>
+<textarea class="start">XXX X</textarea>
+<textarea class="end">XXX X</textarea>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-005.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-005.html
new file mode 100644
index 0000000000..76348aaf21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-005.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-line">
+<link rel="match" href="reference/trailing-space-and-text-alignment-001-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: pre-line' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/trailing-space-and-text-alignment.css">
+<style>
+textarea {
+    white-space: pre-line;
+}
+</style>
+<textarea class="left">XXX   X</textarea>
+<textarea class="center">XXX   X</textarea>
+<textarea class="right">XXX   X</textarea>
+<textarea class="start">XXX   X</textarea>
+<textarea class="end">XXX   X</textarea>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-001.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-001.html
new file mode 100644
index 0000000000..6e70740cdd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved trailing RTL white space that hang in a textarea</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-normal">
+<link rel="match" href="reference/trailing-space-and-text-alignment-rtl-001-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: normal' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/trailing-space-and-text-alignment.css">
+<style>
+textarea {
+    white-space: normal;
+    direction: rtl;
+}
+</style>
+<textarea class="left">XXX   X</textarea>
+<textarea class="center">XXX   X</textarea>
+<textarea class="right">XXX   X</textarea>
+<textarea class="start">XXX   X</textarea>
+<textarea class="end">XXX   X</textarea>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-002.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-002.html
new file mode 100644
index 0000000000..0422506b51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved trailing RTL white space that hang in a textarea</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre">
+<link rel="match" href="reference/trailing-space-and-text-alignment-rtl-002-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: pre' shouldn't hang and may cause overflow and activate the scrollbars.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/trailing-space-and-text-alignment.css">
+<style>
+textarea {
+    white-space: pre;
+    direction: rtl;
+}
+</style>
+<textarea class="left">XXX &#10;X</textarea>
+<textarea class="center">XXX &#10;X</textarea>
+<textarea class="right">XXX &#10;X</textarea>
+<textarea class="start">XXX &#10;X</textarea>
+<textarea class="end">XXX &#10;X</textarea>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-003.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-003.html
new file mode 100644
index 0000000000..70fc786924
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-003.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved trailing white space that hang in a textarea</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/trailing-space-and-text-alignment-rtl-001-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: pre-wrap' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/trailing-space-and-text-alignment.css">
+<style>
+textarea {
+    white-space: pre-wrap;
+    direction: rtl;
+}
+</style>
+<textarea class="left">XXX X</textarea>
+<textarea class="center">XXX X</textarea>
+<textarea class="right">XXX X</textarea>
+<textarea class="start">XXX X</textarea>
+<textarea class="end">XXX X</textarea>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-004.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-004.html
new file mode 100644
index 0000000000..7705d6dfb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved trailing RTL white space that hang in a textarea</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="match" href="reference/trailing-space-and-text-alignment-rtl-005-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: break-spaces' shouldn't hang and may cause overflow and activate the horizontal scrollbar.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/trailing-space-and-text-alignment.css">
+<style>
+textarea {
+    white-space: break-spaces;
+    direction: rtl;
+}
+</style>
+<textarea class="left">XXX X</textarea>
+<textarea class="center">XXX X</textarea>
+<textarea class="right">XXX X</textarea>
+<textarea class="start">XXX X</textarea>
+<textarea class="end">XXX X</textarea>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-005.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-005.html
new file mode 100644
index 0000000000..31afbe4b3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-and-text-alignment-rtl-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: preserved trailing RTL white space that hang in a textarea</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="6.1. Text Alignment: the text-align shorthand" href="https://drafts.csswg.org/css-text-3/#text-align-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-line">
+<link rel="match" href="reference/trailing-space-and-text-alignment-rtl-001-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: pre-line' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/trailing-space-and-text-alignment.css">
+<style>
+textarea {
+    white-space: pre-line;
+    direction: rtl;
+}
+</style>
+<textarea class="left">XXX   X</textarea>
+<textarea class="center">XXX   X</textarea>
+<textarea class="right">XXX   X</textarea>
+<textarea class="start">XXX   X</textarea>
+<textarea class="end">XXX   X</textarea>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-before-br-001.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-before-br-001.html
new file mode 100644
index 0000000000..fcc2bdfa43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-before-br-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<title>CSS Text: A sequence of collapsible spaces at the end of a line is removed</title>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#white-space-phase-2'>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container > div {
+  display: inline-block;
+  -font-family: Ahem;
+  font-size: 10px;
+}
+</style>
+<body>
+<div id=log></div>
+<div id=container>
+  <div>1111</div>
+  <div>1111 </div>
+  <div> 1111</div>
+  <div> 1111 </div>
+  <div>1111<br></div>
+  <div>1111<br> </div>
+  <div>1111 <br></div>
+  <div>1111 <br> </div>
+</div>
+<script>
+(function () {
+  const epsilon = 1;
+  let elements = Array.from(container.children);
+  let reference = elements[0];
+  let reference_width = reference.offsetWidth;
+  for (let element of elements) {
+    test(() => {
+      assert_approx_equals(element.offsetWidth, reference_width, epsilon);
+    }, escapeSpaces(element.innerHTML));
+  }
+})();
+
+function escapeSpaces(text) {
+  return text
+    .replace(/ /g, '&#x20;')
+    .replace(/\n/g, '&#x0A;')
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-in-inline-box.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-in-inline-box.html
new file mode 100644
index 0000000000..fee5101879
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-in-inline-box.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Preserved trailing spaces in inline boxes should hang</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
+<link rel="help" href="http://crbug.com/1130310">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+.target {
+  font-family: Consolas, 'Courier New', Courier, monospace;
+  font-size: 20px;
+  width: 5ch;
+  white-space: pre-wrap;
+  overflow: auto visible;
+  border: 1px solid blue;
+}
+.not-culled span {
+  background: orange;
+}
+</style>
+<body>
+  <div class="target">12345 678</div>
+  <div class="target"><span>12345 678</span></div>
+  <div class="target not-culled"><span>12345 678</span></div>
+<script>
+for (let target of document.getElementsByClassName('target')) {
+  test(() => {
+    let width = target.offsetWidth;
+    let scroll_width = target.scrollWidth;
+    assert_less_than_equal(scroll_width, width);
+  });
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-position-001.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-position-001.html
new file mode 100644
index 0000000000..648ae23dcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-position-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>CSS Test: Positions of trailing collapsible spaces</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+.container > div {
+  font-family: Ahem;
+  font-size: 10px;
+  line-height: 1;
+  color: gray;
+  width: 5ch;
+  outline: 2px solid orange;
+  margin-bottom: 6px;
+  position: relative;
+}
+.pre-wrap {
+  white-space: pre-wrap;
+}
+.bg { background: purple; }
+.h { outline: 4px red solid; }
+</style>
+<body>
+  <section class="container">
+    <div>1234<span data-line="0" class="h"> </span>567</div>
+    <div>1234 <span data-line="0" class="h"> </span>567</div>
+    <div>1234567<span data-line="0" class="h"> </span>567</div>
+    <div>1234567 <span data-line="0" class="h"> </span>567</div>
+    <div class="pre-wrap">1234<span data-line="0" class="bg"> </span>567</div>
+  </section>
+<script>
+for (let e of document.querySelectorAll('[data-line]')) {
+  test(() => {
+    let y = e.offsetTop;
+    assert_equals(Math.round(y / 10), parseInt(e.dataset.line));
+  });
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/trailing-space-rtl-001.html b/testing/web-platform/tests/css/css-text/white-space/trailing-space-rtl-001.html
new file mode 100644
index 0000000000..0550f7279f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/trailing-space-rtl-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Test: Preserved trailing spaces in RTL</title>
+<link rel="match" href="reference/trailing-space-rtl-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<style>
+body {
+  direction: rtl;
+  white-space: pre-wrap;
+}
+.bg {
+  background: orange;
+}
+.override {
+  unicode-bidi: bidi-override;
+}
+</style>
+<body>
+<div>אבג <span class="bg">אבגד</span> אבגדה</div>
+<div>אבג <span class="bg">אבגד</span> אבגדה </div>
+<div class="override">123 <span class="bg override">12345</span> 1234567</div>
+<div class="override">123 <span class="bg override">12345</span> 1234567 </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-applies-to-text-001.html b/testing/web-platform/tests/css/css-text/white-space/white-space-applies-to-text-001.html
new file mode 100644
index 0000000000..1a9a62a220
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-applies-to-text-001.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: white-space property applies to text</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-processing">
+  <link rel="help" href="https://www.w3.org/TR/css-display-3/#box-generation">
+  <link rel="match" href="reference/white-space-applies-to-text-001-ref.html">
+
+  <meta content="This test checks that 'white-space', which applies to inlines, also applies to text. In this test, we verify that 'white-space: normal', 'white-space: nowrap', 'white-space: pre', 'white-space: pre-wrap', 'white-space: break-spaces' and 'white-space: pre-line' apply to text." name="assert">
+
+  <style>
+  section
+    {
+      border: black solid 2px;
+      float: left;
+      font-family: monospace;
+      font-size: 14px;
+      line-height: 1; /* computes to 14px */
+      margin-bottom: 10px;
+      width: 16ch;
+    }
+
+  section.applies-to-text
+    {
+      clear: both;
+    }
+
+  section.applies-to-inline
+    {
+      margin-left: 10em;
+    }
+
+  div
+    {
+      display: contents;
+    }
+
+  div.first-subtest
+    {
+      white-space: normal;
+    }
+
+  div.second-subtest
+    {
+      white-space: nowrap;
+    }
+
+  div.third-subtest
+    {
+      white-space: pre;
+    }
+
+  div.fourth-subtest
+    {
+      white-space: pre-wrap;
+    }
+
+  div.fifth-subtest
+    {
+      white-space: break-spaces;
+    }
+
+  div.sixth-subtest
+    {
+      white-space: pre-line;
+    }
+
+  hr
+    {
+      clear: both;
+      margin: 4em auto 1.5em 0em;
+      width: 480px;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black bordered rectangles on the lefthand side are laid out identically to their counterparts on the righthand side.
+
+  <section class="applies-to-text">
+    <div class="first-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="applies-to-inline">
+    <div class="first-subtest"><span>Lorem ipsum.      Dolor&NewLine;
+   sit.</span></div>
+  </section>
+
+  <hr>
+
+  <section class="applies-to-text">
+    <div class="second-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="applies-to-inline">
+    <div class="second-subtest"><span>Lorem ipsum.      Dolor&NewLine;
+   sit.</span></div>
+  </section>
+
+  <hr>
+
+  <section class="applies-to-text">
+    <div class="third-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="applies-to-inline">
+    <div class="third-subtest"><span>Lorem ipsum.      Dolor&NewLine;
+   sit.</span></div>
+  </section>
+
+  <hr>
+
+  <section class="applies-to-text">
+    <div class="fourth-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="applies-to-inline">
+    <div class="fourth-subtest"><span>Lorem ipsum.      Dolor&NewLine;
+   sit.</span></div>
+  </section>
+
+  <hr>
+
+  <section class="applies-to-text">
+    <div class="fifth-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="applies-to-inline">
+    <div class="fifth-subtest"><span>Lorem ipsum.      Dolor&NewLine;
+   sit.</span></div>
+  </section>
+
+  <hr>
+
+  <section class="applies-to-text">
+    <div class="sixth-subtest">Lorem ipsum.      Dolor&NewLine;
+   sit.</div>
+  </section>
+
+  <section class="applies-to-inline">
+    <div class="sixth-subtest"><span>Lorem ipsum.      Dolor&NewLine;
+   sit.</span></div>
+  </section>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-000.html b/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-000.html
new file mode 100644
index 0000000000..224a350cc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-000.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>White space collapse</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="Every tab is converted to a space. Any space immediately following another collapsible space is collapsed to have zero advance width.">
+<style type='text/css'>
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='test' class="test"><span>hello&#x20;&#x20;&#x20;&#x0009;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;there</span></div>
+<div id="ref" class="ref"><span>hello&#x20;there</span></div>
+<div id='testW' class="test"><span>缔造真正全球通行&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x0009;&#x20;&#x20;&#x20;的万维网</span></div>
+<div id="refW" class="ref"><span>缔造真正全球通行&#x20;的万维网</span></div>
+<div id='testF' class="test"><span>ＦＵＬＬ&#x20;&#x20;&#x20;&#x0009;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ＷＩＤＴＨ</span></div>
+<div id="refF" class="ref"><span>ＦＵＬＬ&#x20;&#x20;ＷＩＤＴＨ</span></div>
+<div id='testH' class="test"><span>ﾊﾝ&#x20;&#x20;&#x20;&#x0009;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;ｶｸ</span></div>
+<div id="refH" class="ref"><span>ﾊﾝ&#x20;&#x20;&#x20;ｶｸ</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('test').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
+}, "spaces removed");
+test(function() {
+assert_equals(document.getElementById('testW').firstChild.offsetWidth, document.getElementById('refW').firstChild.offsetWidth);
+}, "spaces removed between Wide characters");
+test(function() {
+assert_equals(document.getElementById('testF').firstChild.offsetWidth, document.getElementById('refF').firstChild.offsetWidth);
+}, "spaces removed between Fullwidth characters");
+test(function() {
+assert_equals(document.getElementById('testH').firstChild.offsetWidth, document.getElementById('refH').firstChild.offsetWidth);
+}, "spaces removed between Halfwidth characters");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-001.html b/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-001.html
new file mode 100644
index 0000000000..7b4f2333d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-001.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>White space and non-ASCII spaces</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="Any space immediately following another collapsible space is collapsed to have zero advance width. Only refers to U+0020, not other Unicode spaces.">
+<style type='text/css'>
+.test span { font-size: 24px; font-family: sans-serif; background-color: #2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color: #270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='testNB' class="test"><span>hello&#x20;&#x20;&#x20;&#x00A0;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;there</span></div>
+<div id="refNB" class="ref"><span>hello&#x20;&#x00A0;&#x20;there</span></div>
+<div id='testEN' class="test"><span>hello&#x20;&#x20;&#x20;&#x2002;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;there</span></div>
+<div id="refEN" class="ref"><span>hello&#x20;&#x2002;&#x20;there</span></div>
+<div id='testEM' class="test"><span>hello&#x20;&#x20;&#x20;&#x2003;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;there</span></div>
+<div id="refEM" class="ref"><span>hello&#x20;&#x2003;&#x20;there</span></div>
+<div id='testTS' class="test"><span>hello&#x20;&#x20;&#x20;&#x2009;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;there</span></div>
+<div id="refTS" class="ref"><span>hello&#x20;&#x2009;&#x20;there</span></div>
+<div id='testZW' class="test"><span>hello&#x20;&#x20;&#x20;&#x200B;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;there</span></div>
+<div id="refZW" class="ref"><span>hello&#x20;&#x200B;&#x20;there</span></div>
+<div id='testNNB' class="test"><span>hello&#x20;&#x20;&#x20;&#x202F;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;there</span></div>
+<div id="refNNB" class="ref"><span>hello&#x20;&#x202F;&#x20;there</span></div>
+<div id='testIS' class="test"><span>hello&#x20;&#x20;&#x20;&#x00A0;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;there</span></div>
+<div id="refIS" class="ref"><span>hello&#x20;&#x00A0;&#x20;there</span></div>
+<div id='testIS2' class="test"><span>缔造真正全球通行&#x20;&#x20;&#x20;&#x00A0;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;的万维网</span></div>
+<div id="refIS2" class="ref"><span>缔造真正全球通行&#x20;&#x00A0;&#x20;的万维网</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('testNB').firstChild.offsetWidth, document.getElementById('refNB').firstChild.offsetWidth);
+}, "no-break space");
+test(function() {
+assert_equals(document.getElementById('testEN').firstChild.offsetWidth, document.getElementById('refEN').firstChild.offsetWidth);
+}, "en space");
+test(function() {
+assert_equals(document.getElementById('testEM').firstChild.offsetWidth, document.getElementById('refEM').firstChild.offsetWidth);
+}, "em space");
+test(function() {
+assert_equals(document.getElementById('testTS').firstChild.offsetWidth, document.getElementById('refTS').firstChild.offsetWidth);
+}, "thin space");
+test(function() {
+assert_equals(document.getElementById('testZW').firstChild.offsetWidth, document.getElementById('refZW').firstChild.offsetWidth);
+}, "zero width space");
+test(function() {
+assert_equals(document.getElementById('testZW').firstChild.offsetWidth, document.getElementById('refZW').firstChild.offsetWidth);
+}, "narrow no-break space");
+test(function() {
+assert_equals(document.getElementById('testIS').firstChild.offsetWidth, document.getElementById('refIS').firstChild.offsetWidth);
+}, "ideographic space");
+test(function() {
+assert_equals(document.getElementById('testIS2').firstChild.offsetWidth, document.getElementById('refIS2').firstChild.offsetWidth);
+}, "ideographic space inside ideographic text");
+</script>
+<!-- Notes:
+The assertion will fail if space is produced for any line in the test paragraph.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-002.html b/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-002.html
new file mode 100644
index 0000000000..22f914ad60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-002.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>Whitespace and bidi control characters</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'>
+<meta name="assert" content="All spaces and tabs immediately preceding or following a segment break are removed, ignoring bidi formatting characters as if they were not there.">
+<style type='text/css'>
+.test span { font-size: 24px; font-family: sans-serif; background-color:#2AA5F7; color: white; }
+.ref span { font-size: 24px; font-family: sans-serif; background-color:#270CEF; color: white; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id='log'></div>
+<div id='testRLO1' class="test"><span>RLO&#x202E;
+level&#x202C;here</span></div>
+<div id="refRLO1" class="ref"><span>RLOlevel&#x20;here</span></div>
+<div id='testRLO2' class="test"><span>RLO&#x20;&#x20;&#x202E;&#x20;
+level&#x202C;</span></div>
+<div id="refRLO2" class="ref"><span>RLO&#x20;level</span></div>
+<div id='testRLO3' class="test"><span>RLO
+&#x20;&#x20;&#x20;&#x202E;&#x20;&#x20;&#x20;&#x20;&#x20;level&#x202C;</span></div>
+<div id="refRLO3" class="ref"><span>RLO&#x20;level</span></div>
+<div id='testRLO4' class="test"><span>RLO&#x20;&#x202E;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;level&#x202C;</span></div>
+<div id="refRLO4" class="ref"><span>RLO&#x20;level</span></div>
+<div id='testRLO5' class="test"><span>RLO
+
+&#x202E;
+
+level&#x202C;</span></div>
+<div id="refRLO5" class="ref"><span>RLO&#x20;level</span></div>
+<div id='testRLE1' class="test"><span>RLE&#x202B;
+level&#x202C;here</span></div>
+<div id="refRLE1" class="ref"><span>RLElevel&#x20;here</span></div>
+<div id='testRLE2' class="test"><span>RLE&#x20;&#x20;&#x202B;&#x20;
+level&#x202C;</span></div>
+<div id="refRLE2" class="ref"><span>RLE&#x20;level</span></div>
+<div id='testRLE3' class="test"><span>RLE
+&#x20;&#x20;&#x20;&#x202B;&#x20;&#x20;&#x20;&#x20;&#x20;level&#x202C;</span></div>
+<div id="refRLE3" class="ref"><span>RLE&#x20;level</span></div>
+<div id='testRLE4' class="test"><span>RLE&#x20;&#x202B;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;level&#x202C;</span></div>
+<div id="refRLE4" class="ref"><span>RLE&#x20;level</span></div>
+<div id='testRLE5' class="test"><span>RLE
+
+&#x202B;
+
+level&#x202C;</span></div>
+<div id="refRLE5" class="ref"><span>RLE&#x20;level</span></div>
+<div id='testRLI1' class="test"><span>RLI&#x2067;
+level&#x2069;here</span></div>
+<div id="refRLI1" class="ref"><span>RLIlevel&#x20;here</span></div>
+<div id='testRLI2' class="test"><span>RLI&#x20;&#x20;&#x2067;&#x20;
+level&#x2069;</span></div>
+<div id="refRLI2" class="ref"><span>RLI&#x20;level</span></div>
+<div id='testRLI3' class="test"><span>RLI
+&#x20;&#x20;&#x20;&#x2067;&#x20;&#x20;&#x20;&#x20;&#x20;level&#x2069;</span></div>
+<div id="refRLI3" class="ref"><span>RLI&#x20;level</span></div>
+<div id='testRLI4' class="test"><span>RLI&#x20;&#x2067;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;level&#x2069;</span></div>
+<div id="refRLI4" class="ref"><span>RLI&#x20;level</span></div>
+<div id='testRLI5' class="test"><span>RLI
+
+&#x2067;
+
+level&#x2069;</span></div>
+<div id="refRLI5" class="ref"><span>RLI&#x20;level</span></div>
+<div id='testRLM1' class="test"><span>RLM&#x200F;
+mark</span></div>
+<div id="refRLM1" class="ref"><span>RLM&#x20;mark</span></div>
+<div id='testRLM2' class="test"><span>RLM&#x20;&#x20;&#x200F;&#x20;
+mark</span></div>
+<div id="refRLM2" class="ref"><span>RLM&#x20;mark</span></div>
+<div id='testRLM3' class="test"><span>RLM
+&#x20;&#x20;&#x20;&#x200F;&#x20;&#x20;&#x20;&#x20;&#x20;mark</span></div>
+<div id="refRLM3" class="ref"><span>RLM&#x20;mark</span></div>
+<div id='testRLM4' class="test"><span>RLM&#x20;&#x200F;&#x20;&#x20;
+&#x20;&#x20;&#x20;&#x20;&#x20;mark</span></div>
+<div id="refRLM4" class="ref"><span>RLM&#x20;mark</span></div>
+<div id='testRLM5' class="test"><span>RLM
+
+&#x200F;
+
+mark</span></div>
+<div id="refRLM5" class="ref"><span>RLM&#x20;mark</span></div>
+<script>
+test(function() {
+assert_equals(document.getElementById('testRLO1').firstChild.offsetWidth, document.getElementById('refRLO1').firstChild.offsetWidth);
+}, "RLO 1");
+test(function() {
+assert_equals(document.getElementById('testRLO2').firstChild.offsetWidth, document.getElementById('refRLO2').firstChild.offsetWidth);
+}, "RLO 2");
+test(function() {
+assert_equals(document.getElementById('testRLO3').firstChild.offsetWidth, document.getElementById('refRLO3').firstChild.offsetWidth);
+}, "RLO 3");
+test(function() {
+assert_equals(document.getElementById('testRLO4').firstChild.offsetWidth, document.getElementById('refRLO4').firstChild.offsetWidth);
+}, "RLO 4");
+test(function() {
+assert_equals(document.getElementById('testRLO5').firstChild.offsetWidth, document.getElementById('refRLO5').firstChild.offsetWidth);
+}, "RLO 5");
+
+test(function() {
+assert_equals(document.getElementById('testRLE1').firstChild.offsetWidth, document.getElementById('refRLE1').firstChild.offsetWidth);
+}, "RLE 1");
+test(function() {
+assert_equals(document.getElementById('testRLE2').firstChild.offsetWidth, document.getElementById('refRLE2').firstChild.offsetWidth);
+}, "RLE 2");
+test(function() {
+assert_equals(document.getElementById('testRLE3').firstChild.offsetWidth, document.getElementById('refRLE3').firstChild.offsetWidth);
+}, "RLE 3");
+test(function() {
+assert_equals(document.getElementById('testRLE4').firstChild.offsetWidth, document.getElementById('refRLE4').firstChild.offsetWidth);
+}, "RLE 4");
+test(function() {
+assert_equals(document.getElementById('testRLE5').firstChild.offsetWidth, document.getElementById('refRLE5').firstChild.offsetWidth);
+}, "RLE 5");
+
+test(function() {
+assert_equals(document.getElementById('testRLI1').firstChild.offsetWidth, document.getElementById('refRLI1').firstChild.offsetWidth);
+}, "RLI 1");
+test(function() {
+assert_equals(document.getElementById('testRLI2').firstChild.offsetWidth, document.getElementById('refRLI2').firstChild.offsetWidth);
+}, "RLI 2");
+test(function() {
+assert_equals(document.getElementById('testRLI3').firstChild.offsetWidth, document.getElementById('refRLI3').firstChild.offsetWidth);
+}, "RLI 3");
+test(function() {
+assert_equals(document.getElementById('testRLI4').firstChild.offsetWidth, document.getElementById('refRLI4').firstChild.offsetWidth);
+}, "RLI 4");
+test(function() {
+assert_equals(document.getElementById('testRLI5').firstChild.offsetWidth, document.getElementById('refRLI5').firstChild.offsetWidth);
+}, "RLI 5");
+
+test(function() {
+assert_equals(document.getElementById('testRLM1').firstChild.offsetWidth, document.getElementById('refRLM1').firstChild.offsetWidth);
+}, "RLM 1");
+test(function() {
+assert_equals(document.getElementById('testRLM2').firstChild.offsetWidth, document.getElementById('refRLM2').firstChild.offsetWidth);
+}, "RLM 2");
+test(function() {
+assert_equals(document.getElementById('testRLM3').firstChild.offsetWidth, document.getElementById('refRLM3').firstChild.offsetWidth);
+}, "RLM 3");
+test(function() {
+assert_equals(document.getElementById('testRLM4').firstChild.offsetWidth, document.getElementById('refRLM4').firstChild.offsetWidth);
+}, "RLM 4");
+test(function() {
+assert_equals(document.getElementById('testRLM5').firstChild.offsetWidth, document.getElementById('refRLM5').firstChild.offsetWidth);
+}, "RLM 5");
+</script>
+<!-- Notes:
+The first test has an extra word to make the reference easier to create, given that the space ends up at the end of the sequence.
+-->
+</body>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-discard-001.xht b/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-discard-001.xht
new file mode 100644
index 0000000000..dc7e5e5708
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-discard-001.xht
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: white-space-collapse - discard - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 4: 3.1. White Space Collapsing: the ‘white-space-collapse’ property" href="https://drafts.csswg.org/css-text-4/#white-space-collapsing" />
+		<link rel="match" href="reference/white-space-collapse-discard-001-ref.xht"/>
+		<meta name="assert" content="The UA should discard all white space in the element when white-space-collapse is set to discard." />
+		<style type="text/css">
+			<![CDATA[
+				.test span {
+					white-space-collapse: discard;
+				}
+				/* the CSS below is not part of the test */
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first sentence matches the second one.
+		</p>
+		<div class="test">
+			<span>All White Space In The Element Should Be Discarded.</span>
+		</div>
+		<div class="control">
+			<span>AllWhiteSpaceInTheElementShouldBeDiscarded.</span>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-preserve-breaks-001.xht b/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-preserve-breaks-001.xht
new file mode 100644
index 0000000000..50113eade1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-collapse-preserve-breaks-001.xht
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: white-space-collapse - preserve-breaks - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 4: 3.1. White Space Collapsing: the ‘white-space-collapse’ property" href="https://drafts.csswg.org/css-text-4/#white-space-collapsing" />
+		<link rel="match" href="reference/white-space-collapse-preserve-breaks-001-ref.xht"/>
+		<meta name="assert" content="The UA should collapse sequences of white space into a single character but preserve segment breaks as forced line breaks when white-space-collapse is set to preserve-breaks." />
+		<style type="text/css">
+			<![CDATA[
+				.test span {
+					white-space-collapse: preserve-breaks;
+				}
+				/* the CSS below is not part of the test */
+				span {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if the first two sentences matches the second one.
+		</p>
+		<p class="test">
+			<span>
+				Sequences of  white   space    should     collapse      into       a        single         character.
+				But segment  breaks   as    forced     line      breaks       are        preserved.
+			</span>
+		</p>
+		<p>
+			<span>
+				Sequences of white space should collapse into a single character.<br />
+				But segment breaks as forced line breaks are preserved.
+			</span>
+		</p>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-empty-text-sibling.html b/testing/web-platform/tests/css/css-text/white-space/white-space-empty-text-sibling.html
new file mode 100644
index 0000000000..50439df433
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-empty-text-sibling.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
+<link rel="match" href="../../reference/pass_if_two_words.html">
+<p>There should be a space between "two" and "words" below.</p>
+<div id="block"> <span>words</span></div>
+<script>
+  block.insertBefore(document.createTextNode(""), block.firstChild);
+  block.insertBefore(document.createTextNode(""), block.firstChild);
+  block.offsetTop;
+  block.firstChild.data = "two";
+</script>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-001.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-001.html
new file mode 100644
index 0000000000..e4c306358d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: min-content sizing and white-space: break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-intrinsic-size-001-ref.html">
+<meta name="assert" content="When white-space is break-spaces, preserved spaces at the end of the line do affect the intrinsic min-content size. Overflow-wrap makes no difference.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+aside {
+  float: left;
+  white-space: break-spaces;
+  background: green;
+}
+aside:last-of-type { overflow-wrap: break-word; }
+div {
+  font-family: Ahem;
+  color: transparent;
+  font-size: 50px;
+  width: 0ch;
+}
+
+#red {
+  position: absolute;
+  background: red;
+  width: auto;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a green rectangle below and no red.
+<div id=red>XS<br>S<br>XS<br>S</div>
+<div>
+  <aside>X  </aside>
+  <aside>X  </aside>
+</div>
+<!-- Note: the space immediately following the X does not get wrapped,
+even under break-spaces+break-word:
+The parent of the flow is 0-width,
+so the float is min-content sized,
+which should leave enough room for both the X and one space.
+break-space+break-word would allow for an emergency wrap before the space
+if the float itself was sized too small,
+but it isn't.
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-002.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-002.html
new file mode 100644
index 0000000000..f4f3fb688d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-002.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: max-content sizing and white-space:break-spaces</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-intrinsic-size-002-ref.html">
+<meta name="assert" content="If white-space is break-spaces, preserved spaces at the end of the line do affect the intrinsic max-content size. The value of overflow-wrap makes no difference.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+aside {
+  float: left;
+  white-space: break-spaces;
+  background: blue;
+}
+aside:last-of-type {
+  float:right;
+  overflow-wrap: break-word;
+}
+div {
+  color: transparent;
+  font-family: Ahem;
+  font-size: 50px;
+  width: 3ch;
+  /* both floats should take the full 3ch,
+     one on each line
+     and therefore line up to look like a single large box.
+
+     If the spaces are not taken into account for min-content sizing,
+     the floats will leave a gap between them */
+}
+.owbw { overflow-wrap: break-word; }
+</style>
+
+<p>Test passes if there is a single blue rectangle below.
+<div>
+  <aside>X  </aside>
+  <aside>X  </aside>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-003.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-003.html
new file mode 100644
index 0000000000..02341f2eae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-003.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: min-content sizing and white-space:pre-wrap</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-intrinsic-size-003-ref.html">
+<meta name="assert" content="Preserved spaces at the end of the line do not affect the intrinsic min-content size when white-space is pre-wrap. The value of overflow-wrap makes no difference.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+aside {
+  float: left;
+  white-space: pre-wrap;
+  background: red;
+}
+div {
+  color: transparent;
+  font-family: Ahem;
+  font-size: 50px;
+  width: 0ch;
+}
+.own { overflow-wrap: normal; }
+.owbw{ overflow-wrap: break-word; }
+
+#green {
+  position: absolute;
+  background: green;
+  z-index: 1;
+  width: auto;
+}
+</style>
+
+<p>Test passes if there is a green rectangle below and no red.
+<div id=green>X<br>X</div>
+<div>
+  <aside class=own>X   </aside>
+  <aside class=owbw>X   </aside>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-004.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-004.html
new file mode 100644
index 0000000000..69de5f3428
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-004.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: max-content sizing and white-space: pre-wrap</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-intrinsic-size-004-ref.html">
+<meta name="assert" content="Preserved spaces at the end of the line do affect the intrinsic max-content size when white-space is pre-wrap, as spaces before a forced break, at the end of un unwrapped line, only hanging conditionally, which does not prevent contributing to the max-content size. The value of overflow-wrap makes no difference.">
+<style>
+aside {
+  float: left;
+  white-space: pre-wrap;
+  background: green;
+}
+aside:last-of-type { overflow-wrap: break-word; }
+div {
+  background: red;
+  color: transparent;
+  font-family: monospace;
+  font-size: 50px;
+  width: 3ch;
+  line-height: 1;
+}
+</style>
+
+<p>Test passes if there is a single green rectangle below and no red.
+<div>
+  <aside>X  </aside>
+  <aside>X  </aside>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-005.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-005.html
new file mode 100644
index 0000000000..89dddf0408
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-005.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: min-content sizing and white-space: pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Preserved spaces at the end of the line unconditioanlly hang, hence they do not affect the intrinsic min-content size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 25px/1 Ahem;
+    color: green;
+    background: red;
+
+    width: min-content;
+    white-space: pre-wrap;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if there is a green square and no red.
+
+<div>XX<span>&#x0020;</span>XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-006.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-006.html
new file mode 100644
index 0000000000..572b744234
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-006.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: min-content sizing and white-space: pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Preserved spaces unconditionally hang if they might overflow otherwise, hence they do not affect the intrinsic min-content size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 25px/1 Ahem;
+    color: green;
+    background: red;
+
+    width: min-content;
+    white-space: pre-wrap;
+}
+</style>
+
+<p>This test passes if there is a green square and no red.
+
+<div>XX&#x0020;XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-013.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-013.html
new file mode 100644
index 0000000000..0c4f28b2cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-013.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: min-content sizing and 'white-space: pre-wrap'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hanging">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="When 'white-space' is 'pre-wrap', white spaces at the end of the line are preserved. In this test, the overflowing end-of-line white spaces following the 'A', the 'GH', the 'MNO' and the 'WXYZ' conditionally 'hang' while they do not affect the intrinsic min-content size." name="assert">
+
+  <style>
+  div
+    {
+      color: transparent;
+      /*
+      so that background-color can
+      shine through the "A", the "GH",
+      the "MNO" and the "WXYZ" glyphs
+      */
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 0;
+      /*
+      'width: 0' will trigger
+      min-content size
+      for div#min-sized-parent
+      */
+    }
+
+  div#test-overlapped-red
+    {
+      background-color: red;
+      float: left;
+      white-space: pre-wrap;
+      width: auto;
+    }
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      position: absolute;
+      width: auto;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="min-sized-parent">
+
+    <div id="test-overlapped-red">A       &NewLine;GH      &NewLine;MNO     &NewLine;WXYZ    </div>
+
+  </div>
+
+  <!--
+
+  The sequences of white spaces following
+  the "A", the "GH", the "MNO" and the
+  "WXYZ" do not get collapsed. That is by
+  definition of 'white-space: pre-wrap'.
+  They 'hang': they behave like 'ink
+  overflow' while not contributing to
+  min-content sizing.
+
+  The line feeds (&NewLine;) wrap
+  content to the next line box.
+
+  Since div#test-overlapped-red
+  is floated and since its parent in
+  the flow is 0-width, then the float
+  is min-content sized.
+  Since the widest line box
+  is created by the 4th line box
+  (due to "WXYZ" content), then
+  div#test-overlapped-red
+  must not be wider than 100px.
+
+  -->
+
+  <div id="reference-overlapping-green">1234<br>5678<br>90AB<br>CDEF</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-014.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-014.html
new file mode 100644
index 0000000000..b28f6a5468
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-014.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: min-content sizing and 'white-space: pre-wrap'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hanging">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="When 'white-space' is 'pre-wrap', white spaces at the end of the line are preserved. In this test, the 4 overflowing white spaces following the 'ABCD', following the 'GHIJ', following the 'MNOP' and following the 'WXYZ' conditionally 'hang' while they do not affect the intrinsic min-content size." name="assert">
+
+  <style>
+  div
+    {
+      color: transparent;
+      /*
+      so that background-color can
+      shine through the ABCD, GHIJ,
+      MNOP, WXYZ glyphs
+      */
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 0;
+      /*
+      'width: 0' will trigger
+      min-content size
+      for div#min-sized-parent
+      */
+    }
+
+  div.test-overlapped-red
+    {
+      background-color: red;
+      float: left;
+      white-space: pre-wrap;
+      width: auto;
+    }
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      position: absolute;
+      width: auto;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="min-sized-parent">
+
+    <div class="test-overlapped-red">ABCD    </div>
+
+    <div class="test-overlapped-red">GHIJ    </div>
+
+    <div class="test-overlapped-red">MNOP    </div>
+
+    <div class="test-overlapped-red">WXYZ    </div>
+
+  </div>
+
+  <!--
+
+  The sequences of 4 white spaces following
+  the "ABCD", following the "GHIJ", following
+  the "MNOP" and following the "WXYZ" do not
+  get collapsed due to
+  'white-space: pre-wrap': they hang. Such
+  sequences of 4 hanging-overflowing end-of-line
+  white spaces are not considered with regards
+  to the line box content for fit.
+
+  Since the 4 div.test-overlapped-red
+  are floated and since its parent in
+  the flow is 0-width, then these 4 floats
+  are min-content sized.
+
+  -->
+
+  <div id="reference-overlapping-green">1234<br>5678<br>90AB<br>CDEF</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-015.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-015.html
new file mode 100644
index 0000000000..7c11c6dfa0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-015.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: min-content sizing and 'white-space: pre'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="When 'white-space' is 'pre', preserved white spaces at the end of the line affect the intrinsic min-content size." name="assert">
+
+  <style>
+  div
+    {
+      color: transparent;
+      /*
+      so that background-color can
+      shine through the A, G, M, Z glyphs
+      */
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 0;
+      /*
+      This will trigger
+      min-content size
+      for div#min-sized-parent
+      */
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      position: absolute;
+      width: auto;
+      z-index: -1;
+    }
+
+  div#test-overlapping-green
+    {
+      background-color: green;
+      float: left;
+      white-space: pre;
+      width: auto;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="reference-overlapped-red">1234<br>567<br>89<br>0</div>
+
+  <div id="min-sized-parent">
+
+    <div id="test-overlapping-green">A&NewLine;G &NewLine; M&NewLine; Z  </div>
+
+  </div>
+
+  <!--
+
+  The white spaces preceding or following
+  the "G", "M" and "Z" do not get
+  wrapped. That is by definition of
+  'white-space: pre'.
+
+  The line feeds (&NewLine;) wrap
+  content to the next line box.
+
+  Since div#test-overlapping-green
+  is floated and since its parent in
+  the flow is 0-width, then the float
+  is min-content sized.
+
+  -->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-016.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-016.html
new file mode 100644
index 0000000000..ac5695b9fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-016.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: min-content sizing and 'white-space: pre'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="When 'white-space' is 'pre', preserved white spaces at the end of the line affect the intrinsic min-content size. Overflow-wrap makes no difference." name="assert">
+
+  <style>
+  div
+    {
+      color: transparent;
+      /*
+      so that background-color can
+      shine through the A, G, M, Z glyphs
+      */
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 0;
+      /*
+      This will trigger
+      min-content size
+      for div#min-sized-parent
+      */
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      position: absolute;
+      width: auto;
+      z-index: -1;
+    }
+
+  div.test-overlapping-green
+    {
+      background-color: green;
+      float: left;
+      white-space: pre;
+      width: auto;
+    }
+
+  div#last
+    {
+      overflow-wrap: break-word;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="reference-overlapped-red">1234<br>567<br>89<br>0</div>
+
+  <div id="min-sized-parent">
+
+    <div class="test-overlapping-green">A   </div>
+
+    <div class="test-overlapping-green"> G  </div>
+
+    <div class="test-overlapping-green">  M </div>
+
+    <div class="test-overlapping-green" id="last">   Z</div>
+
+  </div>
+
+  <!--
+
+  The 3 white spaces following or preceding
+  the "A", "G", "M" and "Z" do not
+  get wrapped. That is by definition of
+  'white-space: pre'.
+
+  Since the div.test-overlapping-green
+  are floated and since their parent in
+  the flow is 0-width, then these floats
+  are min-content sized.
+
+  -->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-017.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-017.html
new file mode 100644
index 0000000000..978dfb8ba4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-017.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: max-content sizing and 'white-space: pre-wrap'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#auto-box-sizes">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400">
+  <meta content="When 'white-space' is 'pre-wrap', preserved white spaces at the beginning and at the end of the line affect the intrinsic max-content size." name="assert">
+
+  <style>
+  div#wrapper
+    {
+      color: transparent;
+      /*
+      so that background colors can
+      shine through the A, G, M, Z glyphs
+      */
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 7em;
+      /*
+      'width: 7em' gives more inline-size
+      than needed or required by each
+      overlapping-test-green <div>s.
+      If an implementation goes wrong
+      and makes one of
+      overlapping-test-green <div>s
+      wider than 4em, then we will see
+      red.
+      */
+    }
+
+  div#overlapped-reference-red
+    {
+      background-color: red;
+      height: 4em;
+      position: absolute;
+      width: 4em;
+      z-index: -1;
+    }
+
+  div.overlapping-test-green
+    {
+      background: linear-gradient(to right, green 4em, red 3em);
+      /*
+      If one of the overlapping-test-green <div>s become wider
+      than 4em, then we will see the part beyond 4em of this
+      linear-gradient background which is red.
+      https://www.w3.org/TR/css-images-3/#linear-gradients
+      */
+      float: left;
+      /*
+      [
+      max-content inline size:
+      The box's "ideal" size in the inline axis. Usually
+      the narrowest inline size it could take while fitting
+      around its contents if none of the soft wrap
+      opportunities within the box were taken.
+      ]
+      https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+      */
+      white-space: pre-wrap;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="wrapper">
+
+    <div id="overlapped-reference-red"></div>
+
+    <div class="overlapping-test-green">A   </div>
+
+    <div class="overlapping-test-green"> G  </div>
+
+    <div class="overlapping-test-green">  M </div>
+
+    <div class="overlapping-test-green">   Z</div>
+
+  </div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-018.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-018.html
new file mode 100644
index 0000000000..707e19adc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-018.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: max-content sizing and 'white-space: pre'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#auto-box-sizes">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400">
+  <meta content="When 'white-space' is 'pre', preserved white spaces at the beginning and at the end of the line affect the intrinsic max-content size." name="assert">
+
+  <style>
+  div#wrapper
+    {
+      color: transparent;
+      /*
+      so that background colors can
+      shine through the A, G, M, Z glyphs
+      */
+      font-family: Ahem;
+      font-size: 25px;
+      line-height: 1;
+      width: 7em;
+      /*
+      'width: 7em' gives more inline-size
+      than needed or required by each
+      overlapping-test-green <div>s.
+      If an implementation goes wrong
+      and makes one of
+      overlapping-test-green <div>s
+      wider than 4em, then we will see
+      red.
+      */
+    }
+
+  div#overlapped-reference-red
+    {
+      background-color: red;
+      height: 4em;
+      position: absolute;
+      width: 4em;
+      z-index: -1;
+    }
+
+  div.overlapping-test-green
+    {
+      background: linear-gradient(to right, green 4em, red 3em);
+      /*
+      If one of the overlapping-test-green <div>s become wider
+      than 4em, then we will see the part beyond 4em of this
+      linear-gradient background which is red.
+      https://www.w3.org/TR/css-images-3/#linear-gradients
+      */
+      float: left;
+      /*
+      [
+      max-content inline size:
+      The box's "ideal" size in the inline axis. Usually
+      the narrowest inline size it could take while fitting
+      around its contents if none of the soft wrap
+      opportunities within the box were taken.
+      ]
+      https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
+      */
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="wrapper">
+
+    <div id="overlapped-reference-red"></div>
+
+    <div class="overlapping-test-green">A   </div>
+
+    <div class="overlapping-test-green"> G  </div>
+
+    <div class="overlapping-test-green">  M </div>
+
+    <div class="overlapping-test-green">   Z</div>
+
+  </div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-019.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-019.html
new file mode 100644
index 0000000000..d7b9edf812
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-019.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: min-content sizing and 'white-space: pre-line'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="When 'white-space' is 'pre-line', sequence of white spaces are collapsed into 1 white space, the tabs are converted into a single white space and then the white spaces at the end of the line are removed." name="assert">
+
+  <style>
+  div
+    {
+      color: transparent;
+      /*
+      so that background-color can
+      shine through the A, G, M glyphs
+      */
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+      width: 0;
+      /*
+      This will trigger
+      min-content size
+      for div#min-sized-parent
+      */
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      position: absolute;
+      width: auto;
+      z-index: -1;
+    }
+
+  div#test-overlapping-green
+    {
+      background-color: green;
+      float: left;
+      white-space: pre-line;  /* spaces and tabs collapse */
+      width: auto;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="reference-overlapped-red">12<br>3</div>
+
+  <div id="min-sized-parent">
+
+    <div id="test-overlapping-green">A &Tab; &Tab; GM   &Tab;</div>
+
+  </div>
+
+  <!--
+
+  The sequence of white spaces
+  are collapsed. The tabs are
+  converted into a single
+  white space character. Then
+  the spaces at the end-of-line
+  are removed. That
+  is by definition of
+  'white-space: pre-line'.
+
+  The end result is
+  [A
+   GM]
+
+  Since div#test-overlapping-green
+  is floated and since its parent in
+  the flow is 0-width, then the float
+  is min-content sized.
+
+  -->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-020.html b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-020.html
new file mode 100644
index 0000000000..e809db3176
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-intrinsic-size-020.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: min-content sizing and 'white-space: pre-line'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="When 'white-space' is 'pre-line', sequence of white spaces are collapsed into 1 white space, the tabs are converted into a single white space and then the white spaces at the end of the line are removed." name="assert">
+
+  <style>
+  div
+    {
+      color: transparent;
+      /*
+      so that background-color can
+      shine through the A, G, M, Z glyphs
+      */
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+      width: 0;
+      /*
+      This will trigger
+      min-content size
+      for div#min-sized-parent
+      */
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      position: absolute;
+      width: auto;
+      z-index: -1;
+    }
+
+  div.test-overlapping-green
+    {
+      background-color: green;
+      float: left;
+      white-space: pre-line;  /* spaces and tabs collapse */
+      width: auto;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="reference-overlapped-red">12<br>3</div>
+
+  <div id="min-sized-parent">
+
+    <div class="test-overlapping-green"> &Tab; &Tab; AG </div>
+
+    <div class="test-overlapping-green"> MZ &Tab; &Tab; </div>
+
+  </div>
+
+  <!--
+
+  The sequence of white spaces
+  are collapsed. The tabs are
+  converted into a single
+  white space character. Then
+  the spaces at the end-of-line
+  are removed. That
+  is by definition of
+  'white-space: pre-line'.
+
+  The end result is
+  [AG
+   MZ]
+
+  Since div#test-overlapping-green
+  is floated and since its parent in
+  the flow is 0-width, then the float
+  is min-content sized.
+
+  -->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-letter-spacing-001.html b/testing/web-platform/tests/css/css-text/white-space/white-space-letter-spacing-001.html
new file mode 100644
index 0000000000..8d8ab401e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-letter-spacing-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>CSS Test: letter-spacing is not applied to preserved line-breaks</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"/>
+<link rel="match" href="reference/white-space-letter-spacing-001-ref.html"/>
+<style>
+div {
+  font: 16px monospace;
+  float: left;
+  clear: left;
+  border: 1px solid silver;
+  margin: 1em;
+  letter-spacing: .5em;
+}
+.test1 {
+  white-space: pre;
+}
+.test2 {
+  white-space: pre-line;
+}
+.test3 {
+  white-space: pre-wrap;
+}
+.test4 {
+  white-space: break-spaces;
+}
+</style>
+<p>The five boxes below should all look the same:</p>
+<div>Two lines<br>of text</div>
+<div class=test1>Two lines
+of text</div>
+<div class=test2>Two lines
+of text</div>
+<div class=test3>Two lines
+of text</div>
+<div class=test4>Two lines
+of text</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-normal-011.html b/testing/web-platform/tests/css/css-text/white-space/white-space-normal-011.html
new file mode 100644
index 0000000000..1743f58f14
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-normal-011.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'white-space: normal' (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/white-space-normal-011-ref.html">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+
+  div#test
+    {
+      white-space: normal;
+    }
+
+  div#reference
+    {
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="test">Lorem ipsum.        Dolor
+   sit&Tab;amet. <br>consectetur</div>
+
+  <div id="reference">Lorem ipsum.
+Dolor sit amet.
+consectetur</div>
+
+<!--
+
+  <div id="test">Lorem ipsum.        Dolor
+                             ^^^^^^^^
+                             12345678
+
+   sit&Tab;amet. <br>consectetur</div>
+^^^
+123
+
+
+
+  &Tab; == Horizontal tabulation == &#x0009; == &#09;
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-nowrap-011.html b/testing/web-platform/tests/css/css-text/white-space/white-space-nowrap-011.html
new file mode 100644
index 0000000000..1c11d97093
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-nowrap-011.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'white-space: nowrap' (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/white-space-nowrap-011-ref.html">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+
+  div#test
+    {
+      white-space: nowrap;
+    }
+
+  div#reference
+    {
+      white-space: normal;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "or sit amet." should be outside of black-bordered rectangles.
+
+  <div id="test">Lorem ipsum.        Dolor
+   sit&Tab;amet. <br>consectetur</div>
+
+  <div id="reference">Lorem&nbsp;ipsum.&nbsp;Dolor&nbsp;sit&nbsp;amet.<br>
+consectetur</div>
+
+<!--
+
+
+  <div id="test">Lorem ipsum.        Dolor
+                             ^^^^^^^^
+                             12345678
+
+   sit&Tab;amet. <br>consectetur</div>
+^^^
+123
+
+  &Tab; == Horizontal tabulation == &#x0009; == &#09;
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-011.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-011.html
new file mode 100644
index 0000000000..88b9894d13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-011.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'white-space: pre' (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/white-space-pre-011-ref.html">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+
+  div#test
+    {
+      white-space: pre;
+    }
+
+  div#reference
+    {
+      white-space: normal;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "Dolor" should be outside of black-bordered rectangles.
+
+  <div id="test">Lorem ipsum.        Dolor
+   sit&Tab;amet. <br>consectetur</div>
+
+  <div id="reference">Lorem&nbsp;ipsum.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.&nbsp;<br>
+consectetur</div>
+
+<!--
+
+  <div id="test">Lorem ipsum.        Dolor
+                             ^^^^^^^^
+                             12345678
+
+   sit&Tab;amet. <br>consectetur</div>
+^^^
+123
+
+Since 'tab-size' is by default 8,
+since "sit" uses 3 characters
+and since there are 3 white space characters
+before "sit", then
+
+  8
+-
+  3
+-
+  3
+=====
+  2
+
+then the horizontal tabulation will be use as much space
+as a sequence of 2 preserved white space characters.
+
+
+  &Tab; == Horizontal tabulation == &#x0009; == &#09;
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-031.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-031.html
new file mode 100644
index 0000000000..c96f51eefa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-031.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: wrappable ('normal') inline inside a 'white-space: pre' block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/white-space-pre-031-ref.html">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+
+  div#test
+    {
+      white-space: pre;
+    }
+
+  span
+    {
+      white-space: normal;
+    }
+
+  div#reference
+    {
+      white-space: normal;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="test">Lorem ips<span>um. Dolo</span>r
+   sit&Tab;amet.</div>
+
+  <div id="reference">Lorem ipsum. <br>
+Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.</div>
+
+<!--
+
+  <div id="test">Lorem ipsum. Dolor
+                             ^
+                             1
+
+   sit&Tab;amet.</div>
+^^^
+123
+
+Since 'tab-size' is by default 8,
+since "sit" uses 3 characters
+and since there are 3 preserved
+white space characters before "sit",
+
+  8
+-
+  3
+-
+  3
+=====
+  2
+
+then the horizontal tabulation will use as much space
+as a sequence of 2 preserved white space characters.
+
+
+  &Tab; == Horizontal tabulation == &#x0009; == &#09;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-032.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-032.html
new file mode 100644
index 0000000000..7c066b7670
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-032.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: wrappable ('pre-wrap') inline inside a 'white-space: pre' block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/white-space-pre-031-ref.html">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+
+  div#test
+    {
+      white-space: pre;
+    }
+
+  span
+    {
+      white-space: pre-wrap;
+    }
+
+  div#reference
+    {
+      white-space: normal;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="test">Lorem ips<span>um. Dolo</span>r
+   sit&Tab;amet.</div>
+
+  <div id="reference">Lorem ipsum. <br>
+Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.</div>
+
+<!--
+
+  <div id="test">Lorem ipsum. Dolor
+                             ^
+                             1
+
+   sit&Tab;amet.</div>
+^^^
+123
+
+
+Since 'tab-size' is by default 8,
+since "sit" uses 3 characters
+and since there are 3 preserved
+white space characters before "sit",
+
+  8
+-
+  3
+-
+  3
+=====
+  2
+
+then the horizontal tabulation will be converted
+into a sequence of 2 preserved white space characters.
+
+
+  &Tab; == Horizontal tabulation == &#x0009; == &#09;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-034.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-034.html
new file mode 100644
index 0000000000..29bf8a53a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-034.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: wrappable ('break-spaces') inline inside a 'white-space: pre' block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/white-space-pre-034-ref.html">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+
+  div#test
+    {
+      white-space: pre;
+    }
+
+  span
+    {
+      white-space: break-spaces;
+    }
+
+  div#reference
+    {
+      white-space: normal;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="test">Lorem ips<span>um.      Dolo</span>r
+   sit&Tab;amet.</div>
+
+  <div id="reference">Lorem ipsum.&nbsp;&nbsp;&nbsp;&nbsp;<br>
+&nbsp;&nbsp;Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.</div>
+
+<!--
+
+  <div id="test">Lorem ipsum.      Dolor
+                             ^^^^^^
+                             123456
+
+   sit&Tab;amet.</div>
+^^^
+123
+
+
+Since 'tab-size' is by default 8,
+since "sit" uses 3 characters
+and since there are 3 preserved
+white space characters before "sit",
+
+  8
+-
+  3
+-
+  3
+=====
+  2
+
+then the horizontal tabulation will use as much space
+as a sequence of 2 preserved white space characters.
+
+
+  &Tab; == Horizontal tabulation == &#x0009; == &#09;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-035.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-035.html
new file mode 100644
index 0000000000..2723c5ce67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-035.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: wrappable ('pre-line') inline inside a 'white-space: pre' block</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/white-space-pre-031-ref.html">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+
+  div#test
+    {
+      white-space: pre;
+    }
+
+  span
+    {
+      white-space: pre-line;
+    }
+
+  div#reference
+    {
+      white-space: normal;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="test">Lorem ips<span>um.      Dolo</span>r
+   sit&Tab;amet.</div>
+
+  <div id="reference">Lorem ipsum. <br>
+Dolor<br>
+&nbsp;&nbsp;&nbsp;sit&nbsp;&nbsp;amet.</div>
+
+<!--
+
+  <div id="test">Lorem ipsum.      Dolor
+                             ^^^^^^
+                             123456
+
+   sit&Tab;amet.</div>
+^^^
+123
+
+
+Since 'tab-size' is by default 8,
+since "sit" uses 3 characters
+and since there are 3 preserved
+white space characters before "sit",
+
+  8
+-
+  3
+-
+  3
+=====
+  2
+
+then the horizontal tabulation will be converted
+into a sequence of 2 preserved white space characters.
+
+
+  &Tab; == Horizontal tabulation == &#x0009; == &#09;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-051.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-051.html
new file mode 100644
index 0000000000..b6879133cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-051.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: inline starting with a collapsible white space</title>
+
+  <!--
+  Same as
+
+  http://test.csswg.org/suites/css-text-3_dev/nightly-unstable/html/white-space-mixed-003.htm
+
+  but more compact
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <style>
+  div
+    {
+      background-color: red;
+      color: green;
+      float: left;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+     }
+
+  span#pre
+    {
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div><span id="pre">AB&NewLine;</span><span> CD</span></div>
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-052.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-052.html
new file mode 100644
index 0000000000..a2f03ef50c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-052.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: inline starting with a collapsible white space</title>
+
+  <!--
+  Same as
+
+  http://test.csswg.org/suites/css-text-3_dev/nightly-unstable/html/white-space-mixed-003.htm
+
+  but more compact
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
+  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <style>
+  div
+    {
+      background-color: red;
+      color: green;
+      display: inline-block;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+     }
+
+  span#pre
+    {
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div><span id="pre">AB&NewLine;</span><span> CD</span></div>
+
+<!--
+
+  &NewLine; == Line feed == &#x000A; == &#0010;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-001.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-001.html
new file mode 100644
index 0000000000..2ceb8d7293
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-001.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: justification with white-space:pre-wrap</title>
+<link rel="author" title="Jonathan Kew" href="jkew@mozilla.com">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-align-property">
+<link rel="match" href="reference/white-space-pre-wrap-justify-001-ref.html">
+
+<style>
+div {
+  border: 1px solid gray;
+  font: 22px monospace;
+  width: 22ch;
+  margin: 1em;
+}
+.test {
+  white-space: pre-wrap;
+  text-align: justify;
+}
+.ref {
+  white-space: normal;
+  text-align: justify;
+}
+</style>
+
+<p>Test passes if the two blocks are rendered identically</p>
+
+<div class=test>one two three four five six seven eight nine ten</div>
+
+<div class=ref>one two three four five six seven eight nine ten</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-002.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-002.html
new file mode 100644
index 0000000000..785ebef227
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-002.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: justification with white-space:pre-wrap</title>
+<link rel="author" title="Jonathan Kew" href="jkew@mozilla.com">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-align-property">
+<link rel="match" href="reference/white-space-pre-wrap-justify-002-ref.html">
+
+<style>
+div {
+  border: 1px solid gray;
+  font: 22px monospace;
+  width: 22ch;
+  margin: 1em;
+}
+.test {
+  white-space: pre-wrap;
+  text-align: justify;
+}
+.ref {
+  white-space: normal;
+  text-align: justify;
+}
+</style>
+
+<p>Test passes if the two blocks are rendered identically</p>
+
+<div class=test>one two  three   four five six seven eight nine   ten</div>
+
+<div class=ref>one two&nbsp; three &nbsp; four five six seven eight nine &nbsp; ten</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-003.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-003.html
new file mode 100644
index 0000000000..a00f9c3818
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-003.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: justification with white-space:pre-wrap</title>
+<link rel="author" title="Jonathan Kew" href="jkew@mozilla.com">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-align-property">
+<link rel="match" href="reference/white-space-pre-wrap-justify-003-ref.html">
+
+<style>
+div {
+  border: 1px solid gray;
+  font: 22px monospace;
+  width: 22ch;
+  margin: 1em;
+}
+.test {
+  white-space: pre-wrap;
+  text-align: justify;
+}
+.ref {
+  white-space: normal;
+  text-align: justify;
+}
+</style>
+
+<p>Test passes if the two blocks are rendered identically</p>
+
+<div class=test>one two  three
+   four  five  six  seven  eight  nine  ten</div>
+
+<div class=ref>one two&nbsp; three<br>&nbsp; &nbsp;four&nbsp; five&nbsp; six seven &nbsp; eight &nbsp; nine ten</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-004.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-004.html
new file mode 100644
index 0000000000..e1611a3143
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-justify-004.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: justification with white-space:pre-wrap</title>
+<link rel="author" title="Jonathan Kew" href="jkew@mozilla.com">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#text-align-property">
+<link rel="match" href="reference/white-space-pre-wrap-justify-004-ref.html">
+
+<style>
+div {
+  border: 1px solid gray;
+  font: 22px monospace;
+  width: 22ch;
+  margin: 1em;
+}
+.test {
+  white-space: pre-wrap;
+  text-align: justify;
+}
+.ref {
+  white-space: normal;
+  text-align: justify;
+  text-align-last: right;
+}
+</style>
+
+<p>Test passes if the two blocks are rendered identically</p>
+
+<div dir=rtl class=test>one, two, three,
+four, five, six, seven, eight, nine!</div>
+
+<div class=ref>,one, two, three<br>four, five, six, !seven, eight, nine</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-001.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-001.html
new file mode 100644
index 0000000000..82fbfbc976
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-001.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: alignement and trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-001-ref.html">
+<meta name="assert" content="Preserved white space with pre-wrap at the end of a line ending with a forced line break conditionally hangs, so it does affect alignment.">
+
+<style>
+div {
+  white-space: pre-wrap;
+  font-family: monospace;
+}
+div:nth-of-type(2) {
+  width: 7ch;
+  text-align: right;
+}
+div:nth-of-type(3),
+div:nth-of-type(4) {
+  width: 9ch;
+  text-align: center;
+}
+</style>
+
+<p>This test passes if the 4 letters below are verticaly aligned.
+
+<div>    P</div>
+<div>A  </div>
+<div>    S                                </div>
+<div> S </div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-002.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-002.html
new file mode 100644
index 0000000000..f7e0f21f45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-002.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: intrinsic maximum sizing and alignment of trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-002-ref.html">
+<meta name="assert" content="Preserved white space with white-space is pre-wrap at the end of the line before a forced-break only hangs conditionally, and therefore is included in the max-content size, and taken into account for alignemnt (since it doesn't actually hang in this situation).">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+  white-space: pre-wrap;
+}
+span {
+  display: inline-block;
+}
+#s1 { text-align: right; }
+#s2 { text-align: center; }
+#test { color: orange; }
+#ref { color: blue; }
+</style>
+
+<p>This test passes if the orange blocks below are vertically aligned with the blue ones.
+
+<div id=test><span id=s1>X </span><span id=s2> X </span> X  X</div>
+<div id=ref>X  X  X  X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-003.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-003.html
new file mode 100644
index 0000000000..def9bcaee3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-003.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: intrinsic minimum sizing of trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-003-ref.html">
+<meta name="assert" content="Preserved white space at the end of soft-wrapped lines is hanged when white-space is pre-wrap, and therefore does not count when computing the (minimum) intrinsic size.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+  white-space: pre-wrap;
+  width: min-content;
+  color: green;
+  background: red;
+}
+</style>
+
+<p>This test passes if there is a green rectangle and no red.
+
+<div>X    X X X</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-004.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-004.html
new file mode 100644
index 0000000000..d2fda889bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-004.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+  background: red;
+
+  width: 2ch;
+  white-space: pre-wrap;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div>XX<span> </span>XX</div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-005.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-005.html
new file mode 100644
index 0000000000..2985233517
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-005.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 10px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+.ref span { color: green; }
+.test {
+  color: green;
+
+  width: 5ch;
+  white-space: pre-wrap;
+}
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div class="ref">XX<span>XXX</span><br>X<span>XX</span>X<span>X</span><br><span>XXXXX</span><br><span>XXXXX</span><br><span>XXXXX</span></div>
+<div class="test">XX<span>    </span><span>X  X  </span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-006.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-006.html
new file mode 100644
index 0000000000..07a26151a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-006.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+  background: red;
+
+  width: 2ch;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+span {
+  background: blue;
+}
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div>XX<span> </span>XX</div>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-007.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-007.html
new file mode 100644
index 0000000000..ce38da9ca0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-007.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 10px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+.ref span { color: green; }
+.test {
+  color: green;
+
+  width: 5ch;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div class="ref">XX<span>XXX</span><br>X<span>XX</span>X<span>X</span><br><span>XXXXX</span><br><span>XXXXX</span><br><span>XXXXX</span></div>
+<div class="test">XX<span>    </span><span>X  X  </span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-008.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-008.html
new file mode 100644
index 0000000000..68f1162249
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-008.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 10px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+.ref span { color: green; }
+.test {
+  color: green;
+
+  width: 5ch;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div class="ref">XX<span>XXX</span><br>X<span>XX</span>X<span>X</span><br><span>XXXXX</span><br><span>XXXXX</span><br><span>XXXXX</span></div>
+<div class="test">XX<span>    </span><span>X  X  </span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-010.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-010.html
new file mode 100644
index 0000000000..c8825cfa6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-010.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 25px/1 Ahem;
+  color: green;
+  background: red;
+
+  width: 2ch;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div>XX<span> </span>XX</div>
+
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-011.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-011.html
new file mode 100644
index 0000000000..5e3f5dbdcb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-011.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
+<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 10px/1 Ahem;
+}
+.ref {
+  position: absolute;
+  color: red;
+  z-index: -1;
+}
+.ref span { color: green; }
+.test {
+  color: green;
+
+  width: 5ch;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
+
+<p>This test passes if there is a green square and no red.
+<div class="ref">XX<span>XXX</span><br>X<span>XX</span>X<span>X</span><br><span>XXXXX</span><br><span>XXXXX</span><br><span>XXXXX</span></div>
+<div class="test">XX<span>    </span><span>X  X  </span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-012.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-012.html
new file mode 100644
index 0000000000..4235cf6e2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-012.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-normal">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-012-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-012-ref.html">
+<meta name="assert" content="Previous breaking opportunities are not considered if the overflow is caused by hanging trailing spaces.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 20px/1 Ahem;
+  width: 4ch;
+  white-space: pre-wrap;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if the line is broken after the 2nd white space, which hangs (blue).
+<div>XX X<span> X</span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-013.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-013.html
new file mode 100644
index 0000000000..df4818c69c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-013.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset=utf-8>
+<meta http-equiv="content-language" content="en, ja" />
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-normal">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-013-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-013-ref.html">
+<meta name="assert" content="Previous breaking opportunities are not considered if the overflow is caused by hanging trailing spaces.">
+<style>
+div {
+  width: 2em;
+  white-space: pre-wrap;
+}
+span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
+</style>
+
+<p>This test passes if the line is after the white space, which hangs (blue).
+
+<div>ああ<span>&#x0020;X<span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-014.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-014.html
new file mode 100644
index 0000000000..02e776b82e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-014.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-normal">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-014-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-014-ref.html">
+<meta name="assert" content="Previous breaking opportunities are not considered if the overflow is caused by hanging trailing spaces.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 20px/1 Ahem;
+  width: 4ch;
+  white-space: pre-wrap;
+}
+span { background: blue; }  /* If the space is removed instead of hanging, there will be no blue box */
+
+</style>
+
+<p>This test passes if the line is broken after the 2nd white space, which hangs (blue).
+<div>XX <span>X </span>X<span>XXX </span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-015.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-015.html
new file mode 100644
index 0000000000..326dcb143e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-015.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-normal">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-015-ref.html">
+<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-015-ref.html">
+<meta name="assert" content="Previous breaking opportunities are not considered if the overflow is caused by hanging trailing spaces.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+  font: 20px/1 Ahem;
+  width: 5ch;
+  white-space: pre-wrap;
+}
+span { background: blue; }  /* If the space is removed instead of hanging, there will be no blue box */
+</style>
+
+<p>This test passes if the line is broken after the 2nd white space, which hangs (blue).
+<div>XX X<span>X X</span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-021.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-021.html
new file mode 100644
index 0000000000..1a506540ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-021.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: Overflowing hanging spaces should be ink overflow</title>
+
+  <!--
+
+  Issue 4297: [css-text-3] Hanging spaces can't be scrollable overflow
+  https://github.com/w3c/csswg-drafts/issues/4297
+
+  Resolution:
+  Hanging spaces are ink overflow by default.
+  UAs may make them scrollable overflow when
+  they think that would be useful.
+
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#hanging">
+  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink">
+  <link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-021-ref.html">
+
+  <meta content="should" name="flags">
+  <meta content="This test checks that overflowing hanging spaces at end of line are treated as ink overflow. The overflowing hanging spaces at end of line should not extend the scrollable overflow area of the tested box. Therefore the no horizontal scrollbar condition of the test." name="assert">
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      line-height: 1.25; /* computes to 40px */
+      margin-bottom: 0.25em;
+      width: 16ch;
+    }
+
+  span
+    {
+      background-color: yellow;
+    }
+
+  div#test
+    {
+      overflow: auto;
+      white-space: pre-wrap;
+    }
+
+  div#reference
+    {
+      white-space: normal;
+    }
+  </style>
+
+  <p>Test passes if the characters inside each black-bordered rectangle are laid out identically and if each black-bordered rectangle does not generate a horizontal scrollbar.
+
+  <div id="test">Lorem ipsum.<span>        </span>Dolor
+   sit amet. <br>consectetur</div>
+
+  <div id="reference">Lorem&nbsp;ipsum.<span>&nbsp;&nbsp;&nbsp;&nbsp;</span><br>
+Dolor<br>
+&nbsp;&nbsp;&nbsp;sit amet. <br>
+consectetur</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-022.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-022.html
new file mode 100644
index 0000000000..95f4361e83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-022.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="preserved trailing spaces under 'white-space: pre-wrap' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        width: 2ch;
+        height: 100px;
+        font: 50px/1 Ahem;
+        color: green;
+
+        overflow-y: hidden;
+        overflow-x: auto;
+        white-space: pre-wrap;
+    }
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div>XX XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-023.html b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-023.html
new file mode 100644
index 0000000000..3986079e62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-pre-wrap-trailing-spaces-023.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text test: hanging trailing spaces with white-space:pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="4.1.2. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
+<meta name="assert" content="preserved RTL trailing spaces under 'white-space: pre-wrap' hang and shouldn't cause overflow and activate the horizontal scrollbar.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    div {
+        width: 2ch;
+        height: 100px;
+        font: 50px/1 Ahem;
+        color: green;
+
+        overflow-y: hidden;
+        overflow-x: auto;
+        white-space: pre-wrap;
+
+        direction: rtl;
+    }
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div>XX XX</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-trim-discard-inner-001.xht b/testing/web-platform/tests/css/css-text/white-space/white-space-trim-discard-inner-001.xht
new file mode 100644
index 0000000000..e8e53074a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-trim-discard-inner-001.xht
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS Test: white-space-trim - discard-inner - basic cases</title>
+		<link rel="author" title="Satoshi Umehara" href="mailto:umehara@est.co.jp" />
+		<link rel="help" title="CSS Text Level 4: 3.2. White Space Trimming: the ‘white-space-trim’ property" href="https://drafts.csswg.org/css-text-4/#white-space-trim" />
+		<link rel="match" href="reference/white-space-trim-discard-inner-001-ref.xht"/>
+		<meta name="assert" content="The UA should discard all white space at the beginning of a block and all white space at the end of a block when white-space-trim is set to discard-inner." />
+		<style type="text/css">
+			<![CDATA[
+				.test span {
+					white-space-trim: discard-inner;
+				}
+				/* the CSS below is not part of the test */
+				div {
+					color: Blue;
+				}
+			]]>
+		</style>
+	</head>
+	<body>
+		<p>
+			Test passes if each text positions in the first line match the corresponding positions in the second line.
+		</p>
+		<div>
+			<div class="test">
+				[<span>        1        2        </span>]
+				[<span>　　3　　4　　</span>]
+				[<span>				5				6				</span>]
+				[<span>
+
+7
+
+8
+
+</span>]
+			</div>
+			<div>
+				[<span>1        2</span>]
+				[<span>　　3　　4　　</span>]
+				[<span>5				6</span>]
+				[<span>7
+
+8</span>]
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-vs-joiners-001.html b/testing/web-platform/tests/css/css-text/white-space/white-space-vs-joiners-001.html
new file mode 100644
index 0000000000..88c11f1154
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-vs-joiners-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+
+<title>CSS Text Test: join controls do not disrupt white-space processing</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
+<!-- NB: The spec doesn't explicitly discuss join controls in this context,
+     but it is self-evident that they should not have any effect on the white-space processing.
+     Their only effect should be on the shaping (if any) of the adjacent characters. -->
+<link rel="match" href="reference/white-space-vs-joiners-001-ref.html">
+<meta name="assert" content="The presence of join controls (ZWJ/ZWNJ) at word edges should not affect white-space processing">
+
+<style>
+p {
+  width: fit-content;
+  border: 2px solid green;
+  font: 24px monospace;
+}
+</style>
+
+<body>
+</body>
+
+<script>
+for (i = 0x200b; i <= 0x200f; ++i) {
+  txt = "  "
+    + String.fromCharCode(i)
+    + "This should have no leading or trailing ["
+    + i.toString(16)
+    + "]"
+    + String.fromCharCode(i)
+    + "  ";
+  p = document.createElement("p");
+  p.textContent = txt;
+  document.body.appendChild(p);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-vs-joiners-002.html b/testing/web-platform/tests/css/css-text/white-space/white-space-vs-joiners-002.html
new file mode 100644
index 0000000000..25470f02f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-vs-joiners-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+
+<title>CSS Text Test: join controls do not disrupt white-space processing</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
+<!-- NB: The spec doesn't explicitly discuss join controls in this context,
+     but it is self-evident that they should not have any effect on the white-space processing.
+     Their only effect should be on the shaping (if any) of the adjacent characters. -->
+<link rel="match" href="reference/white-space-vs-joiners-002-ref.html">
+<meta name="assert" content="The presence of join controls (ZWJ/ZWNJ) at word edges should not affect white-space processing">
+
+<style>
+p {
+  width: min-content;
+  border: 2px solid green;
+  font: 24px monospace;
+}
+</style>
+
+<body>
+  <p>
+    &#x200d;This&#x200d;
+    &#x200d;is&#x200d;
+    &#x200d;a&#x200d;
+    &#x200d;simple&#x200d;
+    &#x200d;test&#x200d;
+  </p>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-wrap-after-nowrap-001.html b/testing/web-platform/tests/css/css-text/white-space/white-space-wrap-after-nowrap-001.html
new file mode 100644
index 0000000000..5947c289e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-wrap-after-nowrap-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Break opportunities after nowrap</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="match" href="reference/white-space-wrap-after-nowrap-001-ref.html">
+<meta name="assert" content="This test ensures that break opportunities after nowrap can break lines.">
+<style>
+div {
+  width: 10ch;
+  border: 2px solid blue;
+  line-height: 1;
+}
+.ideo > div {
+  width: 1em;
+}
+.normal {
+  white-space: normal;
+}
+.nowrap {
+  white-space: nowrap;
+}
+</style>
+<body>
+  <section>
+    <div><span class="nowrap">12345</span> 67890</div>
+    <div><span class="nowrap">12345</span><span class="normal"> 67890</span></div>
+    <div><span class="nowrap">12345<span class="normal"> 67890</span></span></div>
+    <div class="nowrap">12345<span class="normal"> 67890</span></div>
+
+    <div class="nowrap"><span class="normal"><span class="nowrap">12345</span> </span>67890</div>
+    <div class="nowrap"><span class="normal"><span class="nowrap">12345 </span> </span>67890</div>
+  </section>
+
+  <section class="ideo">
+    <div><span class="nowrap">国</span>国</div>
+    <div><span class="nowrap">国</span><span class="normal">国</span></div>
+  </section>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-zero-fontsize-001.html b/testing/web-platform/tests/css/css-text/white-space/white-space-zero-fontsize-001.html
new file mode 100644
index 0000000000..900e1143f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-zero-fontsize-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text Test: preserved white space with zero font-size</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="match" href="reference/white-space-zero-fontsize-001-ref.html">
+<meta name="assert" content="Forced line break in preserved white space is respected even when font-size is zero">
+<style>
+pre {
+  font-size: 0;
+  float: left;
+  border: 1px solid black;
+  margin: 12px;
+}
+span { font-size: 12px; }
+</style>
+<pre>
+<span>foo</span>
+<span>bar</span>
+</pre>
diff --git a/testing/web-platform/tests/css/css-text/white-space/white-space-zero-fontsize-002.html b/testing/web-platform/tests/css/css-text/white-space/white-space-zero-fontsize-002.html
new file mode 100644
index 0000000000..1b8d3b7eb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/white-space-zero-fontsize-002.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Text Test: preserved white space with zero font-size</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="match" href="reference/white-space-zero-fontsize-002-ref.html">
+<meta name="assert" content="Tab in preserved white space is respected even when font-size is zero">
+<style>
+pre {
+  font-size: 0;
+  float: left;
+  border: 1px solid black;
+  margin: 12px;
+  -moz-tab-size: 100px;
+  tab-size: 100px;
+}
+span { font-size: 12px; }
+</style>
+<pre>
+<span>foo</span>&#x9;<span>bar</span>
+</pre>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-001.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-001.html
new file mode 100644
index 0000000000..c1ba7a4d8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-001.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test:  'white-space: break-spaces' applies to 'display: inline' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-001-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: inline' is tested." name="assert">
+
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#wrapper, div#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 4ch;
+    }
+
+  div#test
+    {
+      display: inline;
+      white-space: break-spaces;
+    }
+
+  div#reference
+    {
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="wrapper"><div id="test">123    8</div></div>
+  <!--                   45678     -->
+  <!--     will wrap here ^        -->
+
+  <div id="reference">123
+   8</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-002.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-002.html
new file mode 100644
index 0000000000..5af3c8187d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-002.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: block' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-001-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: block' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 4ch;
+    }
+
+  div#test
+    {
+      display: block;
+      white-space: break-spaces;
+    }
+
+  div#reference
+    {
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="test">123    8</div>
+  <!--              45678      -->
+ <!-- will wrap here ^         -->
+
+  <div id="reference">123
+   8</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-003.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-003.html
new file mode 100644
index 0000000000..738d7f646f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-003.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: list-item' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-003-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: list-item' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#test, li#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 4ch;
+    }
+
+  div#test
+    {
+      display: list-item;
+      margin-left: 40px;
+      white-space: break-spaces;
+    }
+
+  li#reference
+    {
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles (both preceded with a small filled disc) are laid out identically.
+
+  <div id="test">123    8</div>
+    <!--              45678      -->
+   <!-- will wrap here ^         -->
+
+  <ul><li id="reference">123
+   8</ul>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-005.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-005.html
new file mode 100644
index 0000000000..d8f13d3181
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-005.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: inline-block' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-001-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: inline-block' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 4ch;
+    }
+
+  div#test
+    {
+      display: inline-block;
+      white-space: break-spaces;
+    }
+
+  div#reference
+    {
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="test">123    8</div>
+  <!--              45678      -->
+ <!-- will wrap here ^         -->
+
+  <div id="reference">123
+   8</div>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-006.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-006.html
new file mode 100644
index 0000000000..a022698683
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-006.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: table' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-006-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: table' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#test, table#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 4ch;
+    }
+
+  div#test
+    {
+      display: table;
+      white-space: break-spaces;
+    }
+
+  div#row
+    {
+      display: table-row;
+    }
+
+  div#cell
+    {
+      display: table-cell;
+    }
+
+  table#reference
+    {
+      border-spacing: 0px;
+      white-space: pre;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="test">
+    <div id="row">
+      <div id="cell">123    8</div>
+      <!--              45678      -->
+     <!-- will wrap here ^         -->
+    </div>
+  </div>
+
+  <table id="reference"><tr><td>123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-007.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-007.html
new file mode 100644
index 0000000000..e51e6c908e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-007.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: inline-table' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-006-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: inline-table' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#test, table
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      margin-bottom: 0.25em;
+      width: 4ch;
+    }
+
+  div#test
+    {
+      display: inline-table;
+      white-space: break-spaces;
+    }
+
+  div#row
+    {
+      display: table-row;
+    }
+
+  div#cell
+    {
+      display: table-cell;
+    }
+
+  table#reference
+    {
+      border-spacing: 0px;
+      white-space: pre;
+    }
+
+  td
+    {
+      padding: 0px;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="test">
+    <div id="row">
+      <div id="cell">123    8</div>
+      <!--              45678      -->
+     <!-- will wrap here ^         -->
+    </div>
+  </div>
+
+  <table id="reference"><tr><td>123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-008.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-008.html
new file mode 100644
index 0000000000..1901516990
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-008.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: table-row-group' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-006-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: table-row-group' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#cell, td#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 4ch;
+    }
+
+  div#table
+    {
+      display: table;
+    }
+
+  div#test
+    {
+      display: table-row-group;
+      white-space: break-spaces;
+    }
+
+  div#row
+    {
+      display: table-row;
+    }
+
+  div#cell
+    {
+      display: table-cell;
+      width: 4ch;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      margin-top: 0.5em;
+    }
+
+  td#reference
+    {
+      padding: 0px;
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="table">
+    <div id="test">
+      <div id="row">
+        <div id="cell">123    8</div>
+        <!--              45678      -->
+       <!-- will wrap here ^         -->
+      </div>
+    </div>
+  </div>
+
+  <table><tbody><tr><td id="reference">123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-009.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-009.html
new file mode 100644
index 0000000000..248c56a683
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-009.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: table-header-group' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-006-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: table-header-group' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#cell, td#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 4ch;
+    }
+
+  div#table
+    {
+      display: table;
+    }
+
+  div#test
+    {
+      display: table-header-group;
+      white-space: break-spaces;
+    }
+
+  div#row
+    {
+      display: table-row;
+    }
+
+  div#cell
+    {
+      display: table-cell;
+      width: 4ch;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      margin-top: 0.5em;
+    }
+
+  td#reference
+    {
+      padding: 0px;
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="table">
+    <div id="test">
+      <div id="row">
+        <div id="cell">123    8</div>
+        <!--              45678      -->
+       <!-- will wrap here ^         -->
+      </div>
+    </div>
+  </div>
+
+  <table><thead><tr><td id="reference">123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-010.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-010.html
new file mode 100644
index 0000000000..ae88b706e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-010.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: table-footer-group' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-006-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: table-footer-group' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#cell, td#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 4ch;
+    }
+
+  div#table
+    {
+      display: table;
+    }
+
+  div#test
+    {
+      display: table-footer-group;
+      white-space: break-spaces;
+    }
+
+  div#row
+    {
+      display: table-row;
+    }
+
+  div#cell
+    {
+      display: table-cell;
+      width: 4ch;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      margin-top: 0.5em;
+    }
+
+  td#reference
+    {
+      padding: 0px;
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="table">
+    <div id="test">
+      <div id="row">
+        <div id="cell">123    8</div>
+        <!--              45678      -->
+       <!-- will wrap here ^         -->
+      </div>
+    </div>
+  </div>
+
+  <table><tfoot><tr><td id="reference">123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-011.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-011.html
new file mode 100644
index 0000000000..f68b57825a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-011.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: table-row' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-006-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: table-row' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#cell, td#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 4ch;
+    }
+
+  div#table
+    {
+      display: table;
+    }
+
+  div#test
+    {
+      display: table-row;
+      white-space: break-spaces;
+    }
+
+  div#cell
+    {
+      display: table-cell;
+      width: 4ch;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      margin-top: 0.5em;
+    }
+
+  td#reference
+    {
+      padding: 0px;
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="table">
+    <div id="test">
+      <div id="cell">123    8</div>
+      <!--              45678      -->
+     <!-- will wrap here ^         -->
+    </div>
+  </div>
+
+  <table><tr><td id="reference">123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-012.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-012.html
new file mode 100644
index 0000000000..2e708727f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-012.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' does not apply to 'display: table-column-group' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-012-ref.html">
+
+  <meta content="In this test, we verify that 'white-space: break-spaces' does not apply to element with 'display: table-column-group'." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#cell, td#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 4ch;
+    }
+
+  div#table
+    {
+      display: table;
+    }
+
+  div#test
+    {
+      display: table-column-group;
+      white-space: break-spaces;
+    }
+
+  div#row
+    {
+      display: table-row;
+    }
+
+  div#cell
+    {
+      display: table-cell;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      margin-top: 0.5em;
+    }
+
+  td#reference
+    {
+      padding: 0px;
+      white-space: normal;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="table">
+    <div id="test"></div>
+    <div id="row">
+      <div id="cell">123    8</div>
+      <!--              45678      -->
+     <!-- will wrap here ^         -->
+    </div>
+  </div>
+
+  <table><tr><td id="reference">123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-013.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-013.html
new file mode 100644
index 0000000000..1c2cf9fc0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-013.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' does not apply to 'display: table-column' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-012-ref.html">
+
+  <meta content="In this test, we verify that 'white-space: break-spaces' does not apply to element with 'display: table-column'." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#cell, td#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 4ch;
+    }
+
+  div#table
+    {
+      display: table;
+    }
+
+  div#test
+    {
+      display: table-column;
+      white-space: break-spaces;
+    }
+
+  div#row
+    {
+      display: table-row;
+    }
+
+  div#cell
+    {
+      display: table-cell;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      margin-top: 0.5em;
+    }
+
+  td#reference
+    {
+      padding: 0px;
+      white-space: normal;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="table">
+    <div id="test"></div>
+    <div id="row">
+      <div id="cell">123    8</div>
+      <!--              45678      -->
+     <!-- will wrap here ^         -->
+    </div>
+  </div>
+
+  <table><tr><td id="reference">123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-014.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-014.html
new file mode 100644
index 0000000000..6a4858487f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-014.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: table-cell' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-006-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: table-cell' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#test, td#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 4ch;
+    }
+
+  div#table
+    {
+      display: table;
+    }
+
+  div#row
+    {
+      display: table-row;
+    }
+
+  div#test
+    {
+      display: table-cell;
+      white-space: break-spaces;
+    }
+
+  table
+    {
+      border-spacing: 0px;
+      margin-top: 0.5em;
+    }
+
+  td#reference
+    {
+      padding: 0px;
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="table">
+    <div id="row">
+      <div id="test">123    8</div>
+      <!--              45678      -->
+     <!-- will wrap here ^         -->
+    </div>
+  </div>
+
+  <table><tr><td id="reference">123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-015.html b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-015.html
new file mode 100644
index 0000000000..fbcca34a22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/white-space/ws-break-spaces-applies-to-015.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: table-caption' element</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+  <link rel="match" href="reference/ws-break-spaces-applies-to-001-ref.html">
+
+  <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: table-caption' is tested." name="assert">
+
+  <!--
+
+  Testing of 'white-space: break-spaces':
+
+  ws-break-spaces-applies-to-001: display: inline
+
+  ws-break-spaces-applies-to-002: display: block
+
+  ws-break-spaces-applies-to-003: display: list-item
+
+  ws-break-spaces-applies-to-005: display: inline-block
+
+  ws-break-spaces-applies-to-006: display: table
+
+  ws-break-spaces-applies-to-007: display: inline-table
+
+  ws-break-spaces-applies-to-008: display: table-row-group
+
+  ws-break-spaces-applies-to-009: display: table-header-group
+
+  ws-break-spaces-applies-to-010: display: table-footer-group
+
+  ws-break-spaces-applies-to-011: display: table-row
+
+  ws-break-spaces-applies-to-012: display: table-column-group
+
+  ws-break-spaces-applies-to-013: display: table-column
+
+  ws-break-spaces-applies-to-014: display: table-cell
+
+  ws-break-spaces-applies-to-015: display: table-caption
+
+  -->
+
+  <style>
+  div#test, caption#reference
+    {
+      border: black solid 2px;
+      font-family: monospace;
+      font-size: 32px;
+      width: 4ch;
+    }
+
+  div#table
+    {
+      display: table;
+    }
+
+  div#test
+    {
+      display: table-caption;
+      white-space: break-spaces;
+    }
+
+  table
+    {
+      margin-top: 0.5em;
+    }
+
+  caption#reference
+    {
+      text-align: left;
+      white-space: pre;
+    }
+  </style>
+
+  <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically.
+
+  <div id="table">
+    <div id="test">123    8</div>
+      <!--            45678      -->
+   <!-- will wrap here ^         -->
+  </div>
+
+  <table><caption id="reference">123
+   8</table>
diff --git a/testing/web-platform/tests/css/css-text/whitespace-followed-by-cham-symbol-crash.html b/testing/web-platform/tests/css/css-text/whitespace-followed-by-cham-symbol-crash.html
new file mode 100644
index 0000000000..b07a802ecd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/whitespace-followed-by-cham-symbol-crash.html
@@ -0,0 +1,7 @@
+<title>CSS Text Test: Under quirks mode, a white space, followed by a Cham symbol, makes chrome to crash</title>
+<link rel="help" href="https://crbug.com/1130288">
+<style>
+    body { margin: 40 91 18446744073709551526px 5307% }
+    #tCF9 { line-break: anywhere; }
+</style>
+s	a<custom-element-middle id=tCF9> <highlight>&#xaa2c;</highlight>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-001-ref.html
new file mode 100644
index 0000000000..51f96868f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content; /*not 0, to avoid falling into overflow fallback behavior */
+  word-break: keep-all;
+}
+#ref {
+  border-color: blue;
+}
+</style>
+
+<p>Test passes if the black box is identical to the blue one.
+
+<div id=test lang=ja>
+  東京へ<wbr>行きましょう。
+</div>
+<div id=ref lang=ja>
+  東京へ<wbr>行きましょう。
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-002-ref.html
new file mode 100644
index 0000000000..9f63cc951f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-002-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content;
+  word-break: keep-all;
+}
+#ref {
+  border-color: blue;
+}
+</style>
+
+<p>Test passes if the black box is identical to either the blue one.
+
+<div id=test lang=th>
+  กรุงเทพ<wbr>คือ<wbr>สวยงาม
+</div>
+<div id=ref lang=th>
+  กรุงเทพ<wbr>คือ<wbr>สวยงาม
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-003-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-003-ref.html
new file mode 100644
index 0000000000..5868eed30a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-003-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: max-content;
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京&nbsp;へ&nbsp;行きましょう。</div>
+<div id=ref lang=ja>東京&nbsp;へ&nbsp;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-004-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-004-ref.html
new file mode 100644
index 0000000000..81d075dc11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-004-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: max-content;
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京&#x2060;へ&#x2060;行きましょう。</div>
+<div id=ref lang=ja>東京&#x2060;へ&#x2060;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-005-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-005-ref.html
new file mode 100644
index 0000000000..cecc070637
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-005-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: max-content;
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京&#x200D;へ&#x200D;行きましょう。</div>
+<div id=ref lang=ja>東京&#x200D;へ&#x200D;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-006-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-006-ref.html
new file mode 100644
index 0000000000..662351aa8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-006-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content;
+  hyphens: none;
+}
+</style>
+
+<p>Test passes if all boxes below are identical.
+
+<div lang=en>consideration</div>
+<div lang=en>consideration</div>
+<div lang=en>consideration</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-007-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-007-ref.html
new file mode 100644
index 0000000000..4a55533207
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-007-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  border: solid black;
+  margin: 5px;
+  width: min-content;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東<wbr>京<wbr>へ<wbr>行<wbr>き<wbr>ま&#x200B;し&#x200B;ょ&#x200B;う&#x200B;。</div>
+<div id=ref lang=ja>東<wbr>京<wbr>へ<wbr>行<wbr>き<wbr>ま&#x200B;し&#x200B;ょ&#x200B;う&#x200B;。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-008-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-008-ref.html
new file mode 100644
index 0000000000..24f54429de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-008-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border-left: solid black;
+  margin: 15px;
+  width: 0;
+  hyphens: manual;
+}
+</style>
+
+<p>Test passes if both words bellow are hyphenated.
+
+<div id=test lang=en>con&shy;sid&shy;era&shy;tion</div>
+<div id=ref lang=en>con&shy;sid&shy;era&shy;tion</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-009-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-009-ref.html
new file mode 100644
index 0000000000..31f344c6c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-009-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  border: solid black;
+  margin: 5px;
+  width: 1em;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>一生懸命働きます</div>
+<div id=ref lang=ja>一生懸命働きます</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-001-ref.html
new file mode 100644
index 0000000000..5e65b27e2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid orange;
+  margin: 5px;
+  width: min-content; /*not 0, to avoid falling into overflow fallback behavior */
+  word-break: normal;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>กรุงเทพคือสวยงาม</div>
+
+<!-- keeping the lang=ja because it may affects font selection-->
+<div id=ref lang=ja>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-002-ref.html
new file mode 100644
index 0000000000..9010ebb5d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  margin: 5px;
+  width: min-content; /*not 0, to avoid falling into overflow fallback behavior */
+  word-break: normal;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test>กรุงเทพคือสวยงาม</div>
+<div id=ref>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-003-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-003-ref.html
new file mode 100644
index 0000000000..bd29d09cad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-fallback-003-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  margin: 5px;
+  width: min-content;
+}
+#test {
+  word-break: auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test>東京へ行きましょう。</div>
+<div id=ref>東京へ行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-intrinsic-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-intrinsic-001-ref.html
new file mode 100644
index 0000000000..52a743910a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-intrinsic-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+.container > div {
+  white-space: nowrap;
+  font-size: 10px;
+  border: 1px solid;
+}
+</style>
+<div class="container" lang="ja">
+  <div style="width: max-content">
+    楽しいドライブ。</div>
+  <div style="width: min-content">
+    楽しい<br>ドライブ。</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-overflow-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-overflow-001-ref.html
new file mode 100644
index 0000000000..07bbb230c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-overflow-001-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: mplus;
+  src: url(/fonts/mplus-1p-regular.woff);
+}
+.container > div {
+  font-family: mplus;
+  white-space: nowrap;
+  font-size: 10px;
+  border: 1px solid;
+}
+</style>
+<div class="container" lang="ja">
+  <div style="width: 7em">
+    楽しい<br>ドライブ。</div>
+  <div style="width: 4em">
+    楽しい<br>ドライ<br>ブ。</div>
+  <div style="width: 1em">
+    楽<br>し<br>い<br>ド<br>ラ<br>イ<br>ブ。</div>
+  <div style="width: 1em; overflow-wrap: anywhere">
+    楽<br>し<br>い<br>ド<br>ラ<br>イ<br>ブ<br>。</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-001-ref.html
new file mode 100644
index 0000000000..4edf83be94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: mplus;
+  src: url(/fonts/mplus-1p-regular.woff);
+}
+.container > div {
+  font-family: mplus;
+  width: 3em;
+  font-size: 10px;
+  border: 1px solid;
+}
+</style>
+<div class="container" lang="ja">
+  <div>ドライ<br>ブ</div>
+  <div>ドラ<br>イブ</div>
+  <div>ドラ<br>イブ</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-002-ref.html
new file mode 100644
index 0000000000..8760565c1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/reference/word-break-auto-phrase-wbr-nobr-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: mplus;
+  src: url(/fonts/mplus-1p-regular.woff);
+}
+.container > div {
+  font-family: mplus;
+  width: 10em;
+  font-size: 10px;
+  border: 1px solid;
+}
+</style>
+<div class="container" lang="ja">
+  <div>楽しいドライブ、<br>楽しいドライブ。</div>
+  <div>楽しい<br>ドライブ、楽しい<br>ドライブ。</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-001.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-001.html
new file mode 100644
index 0000000000..ce837a1d5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break:auto-phrase in Japanese</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-001-ref.html">
+<meta name="assert" content="word-break:auto-phrase inserts virtual word boundaries at reasonable points.">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content; /*not 0, to avoid falling into overflow fallback behavior */
+  word-break: normal
+}
+#test {
+  word-break: auto-phrase;
+}
+#ref {
+  border-color: blue;
+  word-break: keep-all;
+}
+</style>
+
+<p>Test passes if the black box is identical to the blue one.
+
+<div id=test lang=ja>
+  東京へ行きましょう。
+</div>
+<div id=ref lang=ja>
+  東京へ<wbr>行きましょう。
+</div>
+<!-- As phrase detection is up to the UA,
+    arguably an alternative decomposition
+    with wbr before AND after へ
+    might be OK,
+    but the last phrase is longer anyway,
+    so the difference is not visible.
+-->
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-002.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-002.html
new file mode 100644
index 0000000000..c4f437e99d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-002.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break: auto-phrase</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-002-ref.html">
+<meta name="assert" content="word-break: auto-phrase inserts virtual word boundaries at reasonable points, creating soft wrapping opportunities">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content; /*not 0, to avoid falling into overflow fallback behavior */
+  word-break: normal;
+}
+#test {
+  word-break: auto-phrase;
+}
+#ref {
+  border-color: blue;
+}
+</style>
+
+<p>Test passes if the black box is identical to either the blue one.
+
+<div id=test lang=th>
+  กรุงเทพคือสวยงาม
+</div>
+<div id=ref lang=th>
+  กรุงเทพ<wbr>คือ<wbr>สวยงาม
+</div>
+
+<!--
+    In this particular example,
+    the expected results is one word phrases.
+    Therefore, even if auto-phrase for thai isn't specifically supported,
+    this ought to work.
+    But if it is supported,
+    gluing everything together would be mistaken:
+    this is auto-phrase,
+    not auto-sentence.
+-->
+
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-003.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-003.html
new file mode 100644
index 0000000000..6ff8d959f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-break-auto-phrase-003-ref.html">
+<meta name="assert" content="The UA must not insert a virtual word boundary between a typographic letter unit and an adjacent typographic character unit from the [UAX14] GL line breaking class">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content;
+}
+#test {
+  word-break: auto-phrase;
+}
+#ref {
+  word-break: keep-all;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京&nbsp;へ&nbsp;行きましょう。</div>
+<div id=ref lang=ja>東京&nbsp;へ&nbsp;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-004.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-004.html
new file mode 100644
index 0000000000..4e455091de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-004.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break: auto-phrase- forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-break-auto-phrase-004-ref.html">
+<meta name="assert" content="The UA must not insert a virtual word boundary between a typographic letter unit and an adjacent typographic character unit from the [UAX14] WJ line breaking class">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content;
+}
+#test {
+  word-break: auto-phrase;
+}
+#ref {
+  word-break: keep-all;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京&#x2060;へ&#x2060;行きましょう。</div>
+<div id=ref lang=ja>東京&#x2060;へ&#x2060;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-005.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-005.html
new file mode 100644
index 0000000000..5183d3bc13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-005.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break: auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-break-auto-phrase-005-ref.html">
+<meta name="assert" content="The UA must not insert a virtual word boundary between a typographic letter unit and an adjacent typographic character unit from the [UAX14] ZWJ line breaking class">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content;
+}
+#test {
+  word-break: auto-phrase;
+}
+#ref {
+  word-break: keep-all;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京&#x200D;へ&#x200D;行きましょう。</div>
+<div id=ref lang=ja>東京&#x200D;へ&#x200D;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-006.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-006.html
new file mode 100644
index 0000000000..9fca535a7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-006.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break: auto-phrase hyphenation</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-006-ref.html">
+<meta name="assert" content="auto-phrase word breaking must suppress hyphenation">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content;
+}
+#test1 {
+  word-break: auto-phrase;
+  hyphens: manual;
+}
+#test2 {
+  word-break: auto-phrase;
+  hyphens: auto;
+}
+#ref {
+  hyphens: none;
+}
+</style>
+
+<p>Test passes if all boxes below are identical.
+
+<div id=test1 lang=en>con&shy;sid&shy;era&shy;tion</div>
+<div id=test2 lang=en>consideration</div>
+<div id=ref lang=en>consideration</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-007.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-007.html
new file mode 100644
index 0000000000..154fb8c447
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-007.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break: auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-break-auto-phrase-007-ref.html">
+<meta name="assert" content="UAs must not suppress wrapping opportunities introduced by wbr or ZWSP">
+<style>
+div {
+  border: solid black;
+  margin: 5px;
+  width: min-content;
+}
+#test {
+  word-break: auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東<wbr>京<wbr>へ<wbr>行<wbr>き<wbr>ま&#x200B;し&#x200B;ょ&#x200B;う&#x200B;。</div>
+<div id=ref lang=ja>東<wbr>京<wbr>へ<wbr>行<wbr>き<wbr>ま&#x200B;し&#x200B;ょ&#x200B;う&#x200B;。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-008.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-008.html
new file mode 100644
index 0000000000..68af0f5f19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-008.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break: auto-phrase hyphenation</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-008-ref.html">
+<meta name="assert" content="auto-phrase must give up on suppressing hyphenation when that would lead to overflow">
+<style>
+div {
+  font-size: 2em;
+  border-left: solid black;
+  margin: 15px;
+  width: 0;
+  hyphens: manual;
+}
+#test {
+  word-break: auto-phrase;
+  overflow-wrap: normal;
+}
+</style>
+
+<p>Test passes if both words bellow are hyphenated.
+
+<div id=test lang=en>con&shy;sid&shy;era&shy;tion</div>
+<div id=ref lang=en>con&shy;sid&shy;era&shy;tion</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-009.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-009.html
new file mode 100644
index 0000000000..6f0c736183
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-009.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break: auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-break-auto-phrase-009-ref.html">
+<meta name="assert" content="auto-phrase's must give up on suppressing wrapping opportunities when that would lead to overflow.">
+<style>
+div {
+  border: solid black;
+  margin: 5px;
+  width: 1em;
+}
+#test {
+  word-break: auto-phrase;
+  overflow-wrap: normal;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>一生懸命働きます</div>
+<div id=ref lang=ja>一生懸命働きます</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-001.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-001.html
new file mode 100644
index 0000000000..02a33734e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break:auto-phrase mistagged</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-fallback-001-ref.html">
+<meta name="assert" content="word-break:auto-phrase, does the same as normal (insert soft wraps for south east asian) on SA content tagged with the wrong language: soft wrap opportunities within each phrase are to be suppressed, but a run of Thai characters is not a phrase in Japanese.">
+<style>
+div {
+  font-size: 2em;
+  border: solid orange;
+  margin: 5px;
+  width: min-content; /*not 0, to avoid falling into overflow fallback behavior */
+  word-break: normal;
+}
+#test {
+  word-break: auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>กรุงเทพคือสวยงาม</div>
+
+<!-- keeping the lang=ja because it may affects font selection-->
+<div id=ref lang=ja>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-002.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-002.html
new file mode 100644
index 0000000000..e2905f1d5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break:auto-phrase untagged</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-fallback-002-ref.html">
+<meta name="assert" content="word-break:auto-phrase, if supported, does the same as normal (insert soft wraps for south east asian) on content not language tagged.">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  margin: 5px;
+  width: min-content; /*not 0, to avoid falling into overflow fallback behavior */
+  word-break: normal;
+}
+#test {
+  word-break: auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test>กรุงเทพคือสวยงาม</div>
+<div id=ref>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-003.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-003.html
new file mode 100644
index 0000000000..cea15820bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-fallback-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break:auto-phrase untagged</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-fallback-003-ref.html">
+<meta name="assert" content="word-break:auto-phrase, if supported, does not affect (i.e. same as normal) content not language tagged.">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  margin: 5px;
+  width: min-content; /* not 0, otherwise it would trigger the overflow fallback behavior */
+}
+#test {
+  word-break: auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test>東京へ行きましょう。</div>
+<div id=ref>東京へ行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-intrinsic-001.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-intrinsic-001.html
new file mode 100644
index 0000000000..ebb07cf3b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-intrinsic-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-intrinsic-001-ref.html">
+<!--
+  This test assumes that all engines segment a Japanese text:
+    楽しいドライブ
+  to the following phrases:
+    楽しい / ドライブ
+
+  While assuming all engines segment this way looks fairly reasonable,
+  segmenting differently doesn't necessarily mean a failure because the
+  algorithm is UA dependent. Please add references if different.
+-->
+<style>
+.container > div {
+  word-break: auto-phrase;
+  font-size: 10px;
+  border: 1px solid;
+}
+</style>
+<div class="container" lang="ja">
+  <div style="width: max-content">
+    楽しいドライブ。</div>
+  <div style="width: min-content">
+    楽しいドライブ。</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001.html
new file mode 100644
index 0000000000..fcd17528ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-overflow-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-overflow-001-ref.html">
+<!--
+  This test assumes that all engines segment a Japanese text:
+    楽しいドライブ
+  to the following phrases:
+    楽しい / ドライブ
+
+  While assuming all engines segment this way looks fairly reasonable,
+  segmenting differently doesn't necessarily mean a failure because the
+  algorithm is UA dependent. Please add references if different.
+-->
+<style>
+@font-face {
+  font-family: mplus;
+  src: url(/fonts/mplus-1p-regular.woff);
+}
+.container > div {
+  font-family: mplus;
+  word-break: auto-phrase;
+  font-size: 10px;
+  border: 1px solid;
+}
+</style>
+<div class="container" lang="ja">
+  <!-- Both phrases can fit to 7em, but the whole sentence doesn't. -->
+  <div style="width: 7em">
+    楽しいドライブ。</div>
+  <!-- The 2nd phrase doesn't fit to `4em`, hence fallback to normal. -->
+  <div style="width: 4em">
+    楽しいドライブ。</div>
+  <!-- Only one character can fit to `1em`, but no break before the period. -->
+  <div style="width: 1em">
+    楽しいドライブ。</div>
+  <!-- Breaks even before the period if `overflow-wrap`. -->
+  <div style="width: 1em; overflow-wrap: anywhere">
+    楽しいドライブ。</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-001.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-001.html
new file mode 100644
index 0000000000..b8e5520046
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-wbr-nobr-001-ref.html">
+<!--
+  This test assumes that all engines segment a Japanese text:
+    ドライブ
+  as a single phrase.
+
+  While assuming all engines segment this way looks fairly reasonable,
+  segmenting differently doesn't necessarily mean a failure because the
+  algorithm is UA dependent. Please add references if different.
+-->
+<style>
+@font-face {
+  font-family: mplus;
+  src: url(/fonts/mplus-1p-regular.woff);
+}
+.container > div {
+  font-family: mplus;
+  word-break: auto-phrase;
+  width: 3em;
+  font-size: 10px;
+  border: 1px solid;
+}
+</style>
+<div class="container" lang="ja">
+  <!-- A phrase that doesn't fit should fall back to `normal`. -->
+  <div>ドライブ</div>
+  <!-- `<wbr>` in a phrase should allow breaking there. -->
+  <div>ドラ<wbr>イブ</div>
+  <!-- `&ZeroWidthSpace;` in a phrase should allow breaking there too. -->
+  <div>ドラ&ZeroWidthSpace;イブ</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-002.html b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-002.html
new file mode 100644
index 0000000000..85061923ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-002.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="match" href="reference/word-break-auto-phrase-wbr-nobr-002-ref.html">
+<!--
+  This test assumes that all engines segment a Japanese text:
+    楽しいドライブ
+  to the following phrases:
+    楽しい / ドライブ
+
+  While assuming all engines segment this way looks fairly reasonable,
+  segmenting differently doesn't necessarily mean a failure because the
+  algorithm is UA dependent. Please add references if different.
+-->
+<style>
+@font-face {
+  font-family: mplus;
+  src: url(/fonts/mplus-1p-regular.woff);
+}
+.container > div {
+  font-family: mplus;
+  word-break: auto-phrase;
+  width: 10em;
+  font-size: 10px;
+  border: 1px solid;
+}
+nobr {
+  white-space: nowrap;
+}
+</style>
+<div class="container" lang="ja">
+  <!-- `<nobr>` can turn 4 phrases to 3 phrases. -->
+  <div>楽しいドライブ、楽しいドライブ。</div>
+  <div>楽しい<nobr>ドライブ、楽しい</nobr>ドライブ。</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-001.html b/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-001.html
new file mode 100644
index 0000000000..f270766034
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-001.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: soft wrap opportunity at boundary between two characters</title>
+
+  <!--
+
+  CSS3 Text, §5.1 Line breaking details, 7th bullet, 2nd sentence
+  https://www.w3.org/TR/css-text-3/#line-break-details
+
+  "
+  For soft wrap opportunities defined by the boundary between
+  two characters, the white-space property on the nearest
+  common ancestor of the two characters controls breaking
+  "
+
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-property">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#line-break-details">
+  <link rel="match" href="reference/break-boundary-2-chars-001-ref.html">
+
+  <meta content="This test checks that the word-break property does not apply to a run of text that is styled with 'white-space: pre' because the word-break property has no rendering effect in cases where lines of text are not allowed to break. Between the 'c' and 'x' and between the 'z' and 'd', there must be a line break because the 'white-space' declaration in effect in the nearest common ancestor of each of these pairs of two characters allows text wrapping." name="assert">
+
+  <style>
+  div
+    {
+      display: inline-block;
+      font-size: 32px;
+      margin-right: 5ch;
+      width: 0;
+      word-break: break-all;
+    }
+
+  span
+    {
+      white-space: pre;
+    }
+
+  div#first-sub-test
+    {
+      white-space: normal;
+    }
+
+  div#second-sub-test
+    {
+      white-space: pre-wrap;
+    }
+
+  div#third-sub-test
+    {
+      white-space: break-spaces;
+    }
+
+  div#fourth-sub-test
+    {
+      white-space: pre-line;
+    }
+  </style>
+
+  <div id="first-sub-test">abc<span>xyz</span>def</div><div id="second-sub-test">abc<span>xyz</span>def</div><div id="third-sub-test">abc<span>xyz</span>def</div><div id="fourth-sub-test">abc<span>xyz</span>def</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-002.html b/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-002.html
new file mode 100644
index 0000000000..334219570b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/break-boundary-2-chars-002.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: soft wrap opportunity at boundary between two characters</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-property">
+  <link rel="match" href="reference/break-boundary-2-chars-002-ref.html">
+
+  <meta content="The word-break property can only apply when the 'white-space' value allow text wrapping, when line breaking opportunities are preserved. Therefore, 'word-break: break-all' must not cause any text wrapping in both cases of this test. There must be no wrapping between the 'c' and the 'x' and there must be no wrapping between the 'z' and the 'd'." name="assert">
+
+  <!--
+
+  white-space values that DISallow text wrapping:
+  { pre , nowrap }
+
+  -->
+
+  <style>
+  div
+    {
+      display: inline-block;
+      font-size: 32px;
+      margin-right: 10ch;
+      width: 0;
+      word-break: normal;
+    }
+
+  span
+    {
+      word-break: break-all;
+    }
+
+  div#first-sub-test
+    {
+      white-space: pre;
+    }
+
+  div#second-sub-test
+    {
+      white-space: nowrap;
+    }
+  </style>
+
+  <div id="first-sub-test">abc<span>xyz</span>def</div>
+
+  <div id="second-sub-test">abc<span>xyz</span>def</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-001-ref.html
new file mode 100644
index 0000000000..e0702afce5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      display: inline-block;
+      font-size: 32px;
+      margin-right: 5ch;
+      white-space: pre;
+      width: 0;
+    }
+  </style>
+
+  <div>a<br>b<br>c<br>xyz<br>d<br>e<br>f</div><div>a<br>b<br>c<br>xyz<br>d<br>e<br>f</div><div>a<br>b<br>c<br>xyz<br>d<br>e<br>f</div><div>a<br>b<br>c<br>xyz<br>d<br>e<br>f</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-002-ref.html
new file mode 100644
index 0000000000..cd3ed338f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/break-boundary-2-chars-002-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      display: inline-block;
+      font-size: 32px;
+      margin-right: 10ch;
+      white-space: normal;
+      width: 0;
+    }
+
+  </style>
+
+  <div>abcxyzdef</div>
+
+  <div>abcxyzdef</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-010-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-010-ref.html
new file mode 100644
index 0000000000..0e0300a72d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-010-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-014-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-014-ref.html
new file mode 100644
index 0000000000..044ea40dd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-014-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<p>Test passes if 2 (different) heart emojis are rendered below each other.</p>
+<div>💖<br>💔</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-020-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-020-ref.html
new file mode 100644
index 0000000000..32b85542a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-020-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+div {
+  border: 5px solid;
+  width: 2em;
+}
+
+div:nth-of-type(1) { border-color: blue; }
+div:nth-of-type(2) { border-color: green; }
+div:nth-of-type(3) { border-color: orange; }
+
+</style>
+
+<p>Test passes if the text in each of the following 3 boxes is broken into separate lines at the same points.
+
+<div lang=ja>あ<br>い）<br>あ<br>（い</div>
+<div lang=ja>あ<br>い）<br>あ<br>（い</div>
+<div lang=ja>あ<br>い）<br>あ<br>（い</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-062-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-062-ref.html
new file mode 100644
index 0000000000..c44f82d7b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-062-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: orange solid;
+      font: 24px monospace;
+      margin-bottom: 4px;
+      width: 15ch;
+    }
+  </style>
+
+  <p>Test passes if the glyphs in the 5 orange rectangles are laid out <strong>identically</strong>.
+
+  <div>A simple senten<br>ce in english.</div>
+
+  <div>A simple senten<br>ce in english.</div>
+
+  <div>A simple senten<br>ce in english.</div>
+
+  <div>A simple senten<br>ce in english.</div>
+
+  <div>A simple senten<br>ce in english.</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ethiopic-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ethiopic-ref.html
new file mode 100644
index 0000000000..71d6b11521
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ethiopic-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>break-all Ethiopic word breaking</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div {
+    color: blue;
+    white-space: pre;
+}
+.ref {
+    color: orange;
+}
+</style>
+
+<p> Test passes if the blue and orange text are identical.
+
+<div lang=am>በ፡
+በ፡
+በ፡
+በ</div>
+<div lang=am class=ref>በ፡
+በ፡
+በ፡
+በ</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-001-ref.html
new file mode 100644
index 0000000000..4eab639ac3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-001-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element - reference</title>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">bbbbbb<br>bbbb</div>
+<div class="testdiv">bbbbbb<br>bbbb</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-002-ref.html
new file mode 100644
index 0000000000..5f7f01df94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-002-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element - reference</title>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">aaa bb<br>bbbb</div>
+<div class="testdiv">aaa bb<br>bbbb</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-003-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-003-ref.html
new file mode 100644
index 0000000000..0c8caaee46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-003-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element - reference</title>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">aaaabb<br>bbbb</div>
+<div class="testdiv">aaaabb<br>bbbb</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-004-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-004-ref.html
new file mode 100644
index 0000000000..f9229e998a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-004-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element - reference</title>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">aaaaaaa<br>bbb</div>
+<div class="testdiv">aaaaaaa<br>bbb</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-005-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-005-ref.html
new file mode 100644
index 0000000000..662f35112f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-005-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element - reference</title>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">aaa bb<br>bbbbbb<br>bbb<br>ccc</div>
+<div class="testdiv">aaa bb<br>bbbbbb<br>bbb<br>ccc</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-a-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-a-ref.html
new file mode 100644
index 0000000000..e2776669f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-a-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<style>
+div {
+  border: solid 5px;
+  margin: 5px;
+  font-family: monospace;
+  width: 6.1ch;
+  padding: 1px;
+}
+.test { word-break: break-all; }
+.blue { border-color: blue; }
+.orange { border-color: orange; }
+</style>
+<p>Test passes if the black box is identical to either the blue or the orange one.
+<div class="blue">aaaabb<br>bbbbbb<br>bbb<br>ccccc</div>
+<div>aaaabb<br>bbbbbb<br>bbb<br>ccccc</div>
+<div class="orange">aaaabb<br>bbbbbb<br>bb<br>bccccc</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-b-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-b-ref.html
new file mode 100644
index 0000000000..c9384aace9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-006-b-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<style>
+div {
+  border: solid 5px;
+  margin: 5px;
+  font-family: monospace;
+  width: 6.1ch;
+  padding: 1px;
+}
+.test { word-break: break-all; }
+.blue { border-color: blue; }
+.orange { border-color: orange; }
+</style>
+<p>Test passes if the black box is identical to either the blue or the orange one.
+<div class="blue">aaaabb<br>bbbbbb<br>bbb<br>ccccc</div>
+<div>aaaabb<br>bbbbbb<br>bb<br>bccccc</div>
+<div class="orange">aaaabb<br>bbbbbb<br>bb<br>bccccc</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-007-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-007-ref.html
new file mode 100644
index 0000000000..80bdb406b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-inline-007-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element - reference</title>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">aaaaaaa<br>bbbbbb<br>bcccccc</div>
+<div class="testdiv">aaaaaaa<br>bbbbbb<br>bcccccc</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-000.html
new file mode 100644
index 0000000000..579c2dc6a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, japanese</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
+<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-001.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-001.html
new file mode 100644
index 0000000000..ceec198d03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, latin</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref"><span>Latin latin latin lati<br/>n</span></div>
+<div class="ref"><span>Latin latin latin lati<br/>n</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-002.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-002.html
new file mode 100644
index 0000000000..50e1e9c431
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, korean</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
+<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-003.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-003.html
new file mode 100644
index 0000000000..e88df3820b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-003.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, thai</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="th"><span>ภาษาไทยภาษาไท<br/>ย</span></div>
+<div class="ref" lang="th"><span>ภาษาไทยภาษาไท<br/>ย</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-004.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-004.html
new file mode 100644
index 0000000000..e28e571ae4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-004.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, arabic</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" dir="rtl" lang="ar"><span>التدويل نشاط التدوي&#x200D;<br/>&#x200D;ل</span></div>
+<div class="ref" dir="rtl" lang="ar"><span>التدويل نشاط التدوي&#x200D;<br/>&#x200D;ل</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-005.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-005.html
new file mode 100644
index 0000000000..151aecb752
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-005.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, subjoined tibetan</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.5 Arial; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="bo"><span>ལྷ་སའི་སྐད་ད་<br/>ལྟ</span></div>
+<div class="ref" lang="bo"><span>ལྷ་སའི་སྐད་ད་<br/>ལྟ</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-006.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-006.html
new file mode 100644
index 0000000000..f0b83d14d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-006.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, spacing vowel sign</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="hi"><span>हिंदी हिंदी हिं<br/>दी</span></div>
+<div class="ref" lang="hi"><span>हिंदी हिंदी हिं<br/>दी</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-007.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-007.html
new file mode 100644
index 0000000000..8d715556b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-007.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, combining diacritic</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာမြ<br/>န်</span></div>
+<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာမြ<br/>န်</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-008.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-008.html
new file mode 100644
index 0000000000..0499f82e79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-008.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, syllabic cluster</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="hi"><span>हिन्दी हिन्दी हि<br/>न्दी</span></div>
+<div class="ref" lang="hi"><span>हिन्दी हिन्दी हि<br/>न्दी</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-031.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-031.html
new file mode 100644
index 0000000000..1e28e2d358
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-031.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, ID and CJ</title>
+<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ja"><span>フォ フ<br/>ォ</span></div>
+<div class="ref" lang="ja"><span>フォ フ<br/>ォ</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-032.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-032.html
new file mode 100644
index 0000000000..8b7b3b6c39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-break-all-ref-032.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, korean (Hangul Jamos)</title>
+<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ko"><span>&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161; &#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;<br/>&#x1103;&#x1161;</span></div>
+<div class="ref" lang="ko"><span>&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161; &#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;<br/>&#x1103;&#x1161;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-005-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-005-ref.html
new file mode 100644
index 0000000000..2a33ce75e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-005-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS-Text reference file</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>This test passes if the four characters below are arranged in a two-by-two square.
+<div>字字<br>字字</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-063-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-063-ref.html
new file mode 100644
index 0000000000..5ab3f5ff0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-063-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      border: orange solid;
+      font: 24px monospace;
+      margin-bottom: 4px;
+      width: 15ch;
+    }
+  </style>
+
+  <p>Test passes if the glyphs in the 5 orange rectangles are laid out <strong>identically</strong>.
+
+  <div>A simple<br>sentence in eng<br>lish.</div>
+
+  <div>A simple<br>sentence in eng<br>lish.</div>
+
+  <div>A simple<br>sentence in eng<br>lish.</div>
+
+  <div>A simple<br>sentence in eng<br>lish.</div>
+
+  <div>A simple<br>sentence in eng<br>lish.</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-000.html
new file mode 100644
index 0000000000..d11db046b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, latin</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref"><span>Latin latin latin<br/>latin</span></div>
+<div class="ref"><span>Latin latin latin<br/>latin</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-001.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-001.html
new file mode 100644
index 0000000000..bc05bc3b47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, japanese</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ja"><span>日本語 日本語<br/>日本語</span></div>
+<div class="ref" lang="ja"><span>日本語 日本語<br/>日本語</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-002.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-002.html
new file mode 100644
index 0000000000..1567534d9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, korean</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ko"><span>한글이 한글이<br/>한글이</span></div>
+<div class="ref" lang="ko"><span>한글이 한글이<br/>한글이</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-003.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-003.html
new file mode 100644
index 0000000000..5aba6783f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-003.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, thai</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="th"><span>และ และ<br/>และ</span></div>
+<div class="ref" lang="th"><span>และ และ<br/>และ</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-009.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-009.html
new file mode 100644
index 0000000000..4dcdf2dd2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-009.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, ID and CJ</title>
+<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ja"><span>フォ<br/>フォ</span></div>
+<div class="ref" lang="ja"><span>フォ<br/>フォ</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-010.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-010.html
new file mode 100644
index 0000000000..cbfd347608
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-keep-all-ref-010.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, korean (Hangul Jamos)</title>
+<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ko"><span>&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161;<br/>&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161;</span></div>
+<div class="ref" lang="ko"><span>&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161;<br/>&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161;</span></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-manual-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-manual-001-ref.html
new file mode 100644
index 0000000000..f51208ab95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-manual-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div lang=th>กรุงเทพคือสวยงาม</div>
+<div lang=th>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-002-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-002-ref.html
new file mode 100644
index 0000000000..64f2b231c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-002-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid orange;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are <em>different</em>.
+
+<div lang=de>กรุงเทพคือสวยงาม</div>
+<div lang=de>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-003-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-003-ref.html
new file mode 100644
index 0000000000..15843b7296
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-003-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid orange;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are <em>different</em>.
+
+<div>กรุงเทพคือสวยงาม</div>
+<div>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ar-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ar-ref-000.html
new file mode 100644
index 0000000000..f7479d6917
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ar-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, arabic</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ar" dir="rtl"><span>العَرَبِيةُ العَرَبِيةُ<br/>العَرَبِيةُ</span></div>
+<div class="ref" lang="ar" dir="rtl"><span>العَرَبِيةُ العَرَبِيةُ<br/>العَرَبِيةُ</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-bo-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-bo-ref-000.html
new file mode 100644
index 0000000000..b421a6316c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-bo-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, tibetan</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.4 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="tdd"><span>ལྷ་སའི་སྐད་ལྷ་སའི་<br/>སྐད་</span></div>
+<div class="ref" lang="tdd"><span>ལྷ་སའི་སྐད་ལྷ་སའི་<br/>སྐད་</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-en-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-en-ref-000.html
new file mode 100644
index 0000000000..2592fafa0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-en-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, latin</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref"><span>Latin latin latin<br/>latin</span></div>
+<div class="ref"><span>Latin latin latin<br/>latin</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ethiopic-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ethiopic-ref.html
new file mode 100644
index 0000000000..f6b1ce4984
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ethiopic-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>Normal Ethiopic word breaking</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div {
+    color: blue;
+    white-space: pre;
+}
+.ref {
+    color: orange;
+}
+</style>
+
+<p> Test passes if the blue and orange text are identical.
+
+<div lang=am>ተወልዱ፡
+ኵሉ፡
+ሰብእ፡
+ግዑዛን፡
+ወዕሩያን፡
+በማዕረግ፡
+ወብሕግ።</div>
+<div lang=am class=ref>ተወልዱ፡
+ኵሉ፡
+ሰብእ፡
+ግዑዛን፡
+ወዕሩያን፡
+በማዕረግ፡
+ወብሕግ።</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-hi-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-hi-ref-000.html
new file mode 100644
index 0000000000..ac2e0faab1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-hi-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, hindi</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.4 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="hi"><span>हिंदी हिंदी हिंदी<br/>हिंदी</span></div>
+<div class="ref" lang="hi"><span>हिंदी हिंदी हिंदी<br/>हिंदी</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-000.html
new file mode 100644
index 0000000000..deb651f8e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, japanese</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
+<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-001.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-001.html
new file mode 100644
index 0000000000..241ab488e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, japanese hiragana</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ja"><span>にほんごにほん<br/>ご</span></div>
+<div class="ref" lang="ja"><span>にほんごにほん<br/>ご</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-002.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-002.html
new file mode 100644
index 0000000000..813e04586e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, japanese katakana</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ja"><span>ニホンゴニホン<br/>ゴ</span></div>
+<div class="ref" lang="ja"><span>ニホンゴニホン<br/>ゴ</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-004.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-004.html
new file mode 100644
index 0000000000..bb73af4f1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ja-ref-004.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, japanese</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ja"><span>日本語日本語日本<br/>語。</span></div>
+<div class="ref" lang="ja"><span>日本語日本語日本<br/>語。</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-km-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-km-ref-000.html
new file mode 100644
index 0000000000..9d61b3239f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-km-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, khmer</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="km"><span>ភាសាខ្មែរភាសាខ្មែរ<br/>ភាសាខ្មែរ</span></div>
+<div class="ref" lang="km"><span>ភាសាខ្មែរភាសាខ្មែរ<br/>ភាសាខ្មែរ</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ko-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ko-ref-000.html
new file mode 100644
index 0000000000..b4dc700194
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ko-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, korean</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
+<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-lo-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-lo-ref-000.html
new file mode 100644
index 0000000000..68b8457dc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-lo-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, lao</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="lo"><span>ພາສາລາວພາສາລາວພາສາ<br/>ລາວ</span></div>
+<div class="ref" lang="lo"><span>ພາສາລາວພາສາລາວພາສາ<br/>ລາວ</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-my-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-my-ref-000.html
new file mode 100644
index 0000000000..fef7efd182
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-my-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, myanmar</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာ<br/>မြန်မာစာ</span></div>
+<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာ<br/>မြန်မာစာ</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ref-001.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ref-001.html
new file mode 100644
index 0000000000..352ff3f0cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-ref-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, zwsp</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="en"><span>latinlatinlatin<br/>latin</span></div>
+<div class="ref" lang="en"><span>latinlatinlatin<br/>latin</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-tdd-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-tdd-ref-000.html
new file mode 100644
index 0000000000..7b7c2b6591
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-tdd-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, tai nüa</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="tdd"><span>ᥖᥭᥰᥖᥬᥳ<br/>ᥑᥨᥒᥰ</span></div>
+<div class="ref" lang="tdd"><span>ᥖᥭᥰᥖᥬᥳ<br/>ᥑᥨᥒᥰ</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-001-ref.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-001-ref.html
new file mode 100644
index 0000000000..df308cee75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid orange;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are <em>different</em>.
+
+<div lang=th>กรุงเทพคือสวยงาม</div>
+<div lang=th>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-ref-000.html
new file mode 100644
index 0000000000..51cfe2fb40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-th-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, thai</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="th"><span>ภาษาไทยภาษา<br/>ไทย</span></div>
+<div class="ref" lang="th"><span>ภาษาไทยภาษา<br/>ไทย</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-zh-ref-000.html b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-zh-ref-000.html
new file mode 100644
index 0000000000..afdd82454c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/reference/word-break-normal-zh-ref-000.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, chinese</title>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="ref" lang="zh"><span>中國話中國話中國<br/>語</span></div>
+<div class="ref" lang="zh"><span>中國話中國話中國<br/>語</span></div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-000.html
new file mode 100644
index 0000000000..af21bedf4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, japanese</title>
+<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語日本語日本語</span></div></div>
+<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-001.html
new file mode 100644
index 0000000000..b3611de74b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, latin</title>
+<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-001.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div>
+<div class="ref"><span>Latin latin latin lati<br/>n</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-002.html
new file mode 100644
index 0000000000..7688742b9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, korean</title>
+<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-002.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ko"><div id="testdiv"><span id="testspan">한글이 한글이 한글이</span></div></div>
+<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-003.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-003.html
new file mode 100644
index 0000000000..705c1f1327
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, thai</title>
+<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-003.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="th"><div id="testdiv"><span id="testspan">ภาษาไทยภาษาไทย</span></div></div>
+<div class="ref" lang="th"><span>ภาษาไทยภาษาไท<br/>ย</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-004.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-004.html
new file mode 100644
index 0000000000..537ec73218
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-004.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, arabic</title>
+<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. When shaping scripts such as Arabic are allowed to break within words due to break-all, the characters must still be shaped as if the word were not broken.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-004.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" dir="rtl" lang="ar"><div id="testdiv"><span id="testspan">التدويل نشاط التدويل</span></div></div>
+<div class="ref" dir="rtl" lang="ar"><span>التدويل نشاط التدوي&#x200D;<br/>&#x200D;ل</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-005.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-005.html
new file mode 100644
index 0000000000..02f233587b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-005.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, subjoined tibetan</title>
+<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-005.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.5 Arial; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="bo"><div id="testdiv"><span id="testspan">ལྷ་སའི་སྐད་ད་ལྟ</span></div></div>
+<div class="ref" lang="bo"><span>ལྷ་སའི་སྐད་ད་<br/>ལྟ</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-006.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-006.html
new file mode 100644
index 0000000000..6c79e4cd99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-006.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, spacing vowel sign</title>
+<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. A spacing vowel sign should be wrapped to the next line with its base character.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-006.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="hi"><div id="testdiv"><span id="testspan">हिंदी हिंदी हिंदी</span></div></div>
+<div class="ref" lang="hi"><span>हिंदी हिंदी हिं<br/>दी</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+<!--
+Notes:
+A typographic unit based on extended grapheme clusters groups base characters and combining characters together.
+-->
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-007.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-007.html
new file mode 100644
index 0000000000..f68369b4b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-007.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, combining diacritic</title>
+<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. An combining diacritic plus base character should be wrapped as a unit to the next line.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-007.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="my"><div id="testdiv"><span id="testspan">မြန်မာစာမြန်မာစာမြန်</span></div></div>
+<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာမြ<br/>န်</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+<!--
+Notes:
+A typographic unit based on extended grapheme clusters groups base characters and combining characters together.
+-->
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-008.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-008.html
new file mode 100644
index 0000000000..85e91b56aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-008.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, syllabic cluster</title>
+<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units. An indic syllable cluster should be wrapped as a unit to the next line.">
+<meta name="flags" content="should">
+<!--
+  Marking as "should"
+  because while the spec requires this behavior
+  about typographic letter units,
+  it is handwavy about what constitutes one,
+  and appeals to the UA's knowledge of "the right thing to do" for that language.
+-->
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-008.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.5 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="hi"><div id="testdiv"><span id="testspan">हिन्दी हिन्दी हिन्दी</span></div></div>
+<div class="ref" lang="hi"><span>हिन्दी हिन्दी हि<br/>न्दी</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-010.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-010.html
new file mode 100644
index 0000000000..5fdf7f3f9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-010.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="The word is broken even if pre-wrap provides a former breaking opportunity in leading white-space.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  white-space: pre;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 5ch;
+
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"> XXXX<br>X</div>
+  <div class="test"> XXXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-011.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-011.html
new file mode 100644
index 0000000000..384563195c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-011.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="A single leading white-space should account as soft breaking opportunity, honoring the 'white-space: pre-wrap', on top to the ones provided by 'word-break: break-all'.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+  white-space: pre;
+}
+span { color: green; }
+.test {
+  color: green;
+  width: 1ch;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"> <br>X<br>X</div>
+  <div class="test"> XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-012.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-012.html
new file mode 100644
index 0000000000..f6f0b13823
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-012.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="The word is broken even if white-space: break-spaces provides a former breaking opportunity in leading white-space.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+  white-space: pre;
+}
+.test {
+  color: green;
+  width: 5ch;
+
+  white-space: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"> XXXX<br>X</div>
+  <div class="test"> XXXXX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-013.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-013.html
new file mode 100644
index 0000000000..caa15554c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-013.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="A single leading white-space should account as soft breaking opportunity, honoring the 'white-space: break-spaces', on top to the ones provided by 'word-break: break-all'.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+  white-space: pre;
+}
+.test {
+  color: green;
+  width: 1ch;
+  white-space: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"> <br>X<br>X</div>
+  <div class="test"> XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-014.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-014.html
new file mode 100644
index 0000000000..c331670aa4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-014.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: overflow-wrap: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-014-ref.html">
+<meta name="assert" content="The text is wrapped after the first character and no unicode unit is broken.">
+<style>
+div {
+  width: 1px;
+  word-break: break-all;
+}
+</style>
+<p>Test passes if 2 (different) heart emojis are rendered below each other.</p>
+<div>💖💔</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-015.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-015.html
new file mode 100644
index 0000000000..8b10947909
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-015.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="The word is broken even if white-space: pre-wrap provides a former breaking opportunity in leading white-space.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+   position: relative;
+   font-size: 20px;
+   font-family: Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+  white-space: pre;
+}
+.test {
+  color: green;
+  line-height: 1em;
+  width: 5ch;
+
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red"> XX X<br>XX</div>
+  <div class="test"> XX XXX </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-016.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-016.html
new file mode 100644
index 0000000000..8bd6fcf432
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-016.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="break-all breaks between the last two letters, because breaking opportunities between the punctuaction characters are forbidden.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 8ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX XX<br>XXXX</div>
+  <div class="test">XX XXX...</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-017.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-017.html
new file mode 100644
index 0000000000..e4cc3506da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-017.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="break-all + break-spaces do not allow a break
+between the last character of a word and the first space of a sequence of preserved spaces
+if there are other wrapping opportunities earlier in the line.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font: 25px/1 Ahem;
+  width: 4ch;
+}
+.red {
+  position: absolute;
+  white-space: pre;
+  color: red;
+  background: green;
+  z-index: -1;
+}
+.test {
+  white-space: break-spaces;
+  word-break: break-all;
+  color: green;
+}
+</style>
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="red">X X <br>X X <br>X X <br>XX X</div>
+<div class="test">X XX XX X XX X</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-018.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-018.html
new file mode 100644
index 0000000000..1314e5976a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-018.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="word-break: break-all' must honors line breaking behavior introduced by characters with the GL character class">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 25px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXX <br>X XX<br>XX X<br>X</div>
+  <div class="test">XXXX&nbsp;XXXX X X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-019.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-019.html
new file mode 100644
index 0000000000..a3242340fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-019.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="break-all breaks between the last two letters, because breaking opportunities between the punctuaction characters are forbidden.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 8ch;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX XX<br>XXXX</div>
+  <div class="test">XX XXX...</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-020.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-020.html
new file mode 100644
index 0000000000..ac1840131c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-020.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test: break-all and punctuation</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="match" href="reference/word-break-break-all-020-ref.html">
+<meta name="assert" content="work-break:break-all does not affect rules governing the soft wrap opportunities created by punctuation.">
+<style>
+div {
+  border: 5px solid;
+  width: 2em;
+}
+
+div:nth-of-type(1) { border-color: blue; }
+div:nth-of-type(2) { border-color: green; }
+div:nth-of-type(3) { border-color: orange; }
+
+div:nth-of-type(3) { word-break: break-all; }
+</style>
+
+<p>Test passes if the text in each of the following 3 boxes is broken into separate lines at the same points.
+<div lang=ja>あい）あ（い</div>
+<div lang=ja>あ<br>い）<br>あ<br>（い</div>
+<div lang=ja>あい）あ（い</div>
+
+<!--
+If the first box (blue) is wrong,
+customary rules for line breaking japanese are not implemented (or not correctly).
+
+If the third box (orange) is wrong,
+customary rules for line breaking japanese are discarded
+when applying 'word-break: break-all', which is a spec violation.
+-->
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-021.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-021.html
new file mode 100644
index 0000000000..ada6391920
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-021.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="word-break: break-all' must honor line breaking behavior introduced by characters with the GL character class">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 25px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXX <br>X XX<br>XX X<br>X</div>
+  <div class="test">XXXX&nbsp;XXXX X X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-022.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-022.html
new file mode 100644
index 0000000000..0c5286df11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-022.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://www.w3.org/TR/css-text-3/#white-space-property">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="word-break: break-all' must honor line breaking behavior introduced by characters with the GL character class">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 25px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  white-space: break-spaces;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXX <br>X XX<br>XX  <br>X X</div>
+  <div class="test">XXXX&nbsp;XXXX X X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-023.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-023.html
new file mode 100644
index 0000000000..900be07357
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-023.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="break-all breaks before the first backslash character because UAX14 rules forbid to break after PR class.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 7ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX XX<br>XXX</div>
+  <div class="test">XX XX\\\</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-024.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-024.html
new file mode 100644
index 0000000000..c2678e350f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-024.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="break-all breaks before the first backslash character because UAX14 rules forbid to break after PR class.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXX<br>XX</div>
+  <div class="test">XXX\X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-025.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-025.html
new file mode 100644
index 0000000000..985484831d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-025.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="break-all breaks before the first backslash character following UAX14 rules about PR class symbols.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXX<br>XX</div>
+  <div class="test">XXX\X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-026.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-026.html
new file mode 100644
index 0000000000..96ecfea8df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-026.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="break-all breaks before the last letter before the slash, because UAX14 rules forbid to break before SY class symbols.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 8ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX XX<br>XXXX</div>
+  <div class="test">XX XXX///</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-027.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-027.html
new file mode 100644
index 0000000000..6c7cce5ff8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-027.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="break-all breaks before the last letter before the slash, because UAX14 rules forbid to break before SY class symbols.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XX<br>XXX</div>
+  <div class="test">XXX/X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-028.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-028.html
new file mode 100644
index 0000000000..d9a474ebaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-028.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="break-all breaks after the slash, honoring the UAX14 rules that allow break after SY class symbols.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  position: relative;
+  font-size: 20px;
+  font-family: Ahem;
+  line-height: 1em;
+}
+.red {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  color: red;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 4ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXXX<br>X</div>
+  <div class="test">XXX/X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-029.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-029.html
new file mode 100644
index 0000000000..3e0a1e14e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-029.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="The text is wrapped into two lines, since there is no need to break the second line using the space in the middle.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.red {
+  position: absolute;
+  background: green;
+  color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: green;
+  width: 3ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="red">XXX<br>X X</div>
+  <div class="test">XXXX<span> </span>X</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-030.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-030.html
new file mode 100644
index 0000000000..e6a8a0076d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-030.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-all</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<meta name="assert" content="word-break: break-all applies correctly when there is styled text using 'span' elemetns.">
+<style>
+div {
+  position: relative;
+  font: 25px / 1 Ahem;
+}
+.ref {
+  position: absolute;
+  background: green;
+  color: red;
+  height: 100px;
+  z-index: -1;
+}
+.test {
+  color: transparent;
+  width: 4ch;
+  word-break: break-all;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div class="ref"><span style="color: green">XX</span>XX<br>XX</div>
+  <div class="test">XX<span style="color: green">XXXX</span>XX</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-031.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-031.html
new file mode 100644
index 0000000000..d60a677f58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-031.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, ID and CJ</title>
+<meta name="assert" content="word-break: break-all means lines may break between ID and CJ.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-031.html'>
+<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ja"><div id="testdiv"><span id="testspan">フォ フォ</span></div></div>
+<div class="ref" lang="ja"><span>フォ フ<br/>ォ</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth;
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px';
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-032.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-032.html
new file mode 100644
index 0000000000..08c89d94cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-032.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>word-break: break-all, korean (Hangul Jamos)</title>
+<meta name="assert" content="word-break: break-all means lines may break between any two typographic letter units.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ref-032.html'>
+<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'>
+<style type='text/css'>
+.test { word-break: break-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ko"><div id="testdiv"><span id="testspan">&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161; &#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161;</span></div></div>
+<div class="ref" lang="ko"><span>&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161; &#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;<br/>&#x1103;&#x1161;</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth;
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px';
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-062.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-062.html
new file mode 100644
index 0000000000..6d2f25abc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-062.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+
+ <html lang="en">
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'word-break: break-all' applied to an inline in latin</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-property">
+  <link rel="match" href="reference/word-break-break-all-062-ref.html">
+
+  <style>
+  div
+    {
+      border: orange solid;
+      font: 24px monospace;
+      margin-bottom: 4px;
+      width: 15ch;
+      /*
+      15 in 15ch is an entirely arbitrary number.
+      The test only aims at checking if a word
+      will break.
+      */
+    }
+
+  div#ws-normal
+    {
+      white-space: normal;
+    }
+
+  div#ws-prewrap
+    {
+      white-space: pre-wrap;
+    }
+
+  div#ws-breakspaces
+    {
+      white-space: break-spaces;
+    }
+
+  div#ws-preline
+    {
+      white-space: pre-line;
+    }
+
+  span.test
+    {
+      word-break: break-all;
+    }
+  </style>
+
+  <p>Test passes if the glyphs in the 5 orange rectangles are laid out <strong>identically</strong>.
+
+  <div id="ws-normal"><span class="test">A simple sentence in english.</span></div>
+  <!--                                   123456789012345             -->
+
+  <div id="ws-prewrap"><span class="test">A simple sentence in english.</span></div>
+  <!--                                    123456789012345             -->
+
+  <div id="ws-breakspaces"><span class="test">A simple sentence in english.</span></div>
+  <!--                                        123456789012345             -->
+
+  <div id="ws-preline"><span class="test">A simple sentence in english.</span></div>
+  <!--                                    123456789012345             -->
+
+  <div id="reference">A simple senten<br>ce in english.</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-ethiopic.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-ethiopic.html
new file mode 100644
index 0000000000..1fa7f9054a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-ethiopic.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>break-all Ethiopic word breaking</title>
+<meta name="assert" content="word-break: break-all means Ethiopid words break according to the older rules (letter by letter).
+Nevertheless, the breaking prohibition before the Ethiopic word space (U+1361)
+which belongs the the BA line breaking class,
+is honored.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-ethiopic-ref.html'>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div {
+    width: 0;
+    color: blue;
+    word-break: break-all;
+}
+.ref {
+    color: orange;
+    width: auto;
+    white-space: pre;
+}
+</style>
+
+<p> Test passes if the blue and orange text are identical.
+
+<div lang=am>በ፡በ፡በ፡በ</div>
+<div lang=am class=ref>በ፡
+በ፡
+በ፡
+በ</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-001.html
new file mode 100644
index 0000000000..a0c7c4958b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-001.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<meta name="assert" content="word-break: break-all works when specified on inline element">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-inline-001-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+.test { word-break: break-all; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv"><span class="test">bbbbbbbbbb</span></div>
+<div class="testdiv">bbbbbb<br>bbbb</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-002.html
new file mode 100644
index 0000000000..66036f1e5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-002.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<meta name="assert" content="word-break: break-all works when specified on inline element">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-inline-002-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+.test { word-break: break-all; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">aaa <span class="test">bbbbbb</span></div>
+<div class="testdiv">aaa bb<br>bbbb</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-003.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-003.html
new file mode 100644
index 0000000000..f4a86bc645
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-003.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<meta name="assert" content="word-break: break-all works when specified on inline element">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-inline-003-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+.test { word-break: break-all; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">aaaa<span class="test">bbbbbb</span></div>
+<div class="testdiv">aaaabb<br>bbbb</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-004.tentative.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-004.tentative.html
new file mode 100644
index 0000000000..2fad813661
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-004.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<meta name="assert" content="word-break: break-all works when specified on inline element">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-inline-004-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+.test { word-break: break-all; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">aaaaaaa<span class="test">bbb</span></div>
+<div class="testdiv">aaaaaaa<br>bbb</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-005.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-005.html
new file mode 100644
index 0000000000..f3ebe129e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-005.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<meta name="assert" content="word-break: break-all works when specified on inline element">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-inline-005-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+.test { word-break: break-all; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">aaa <span class="test">bbbbbbbbbbb</span> ccc</div>
+<div class="testdiv">aaa bb<br>bbbbbb<br>bbb<br>ccc</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-006.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-006.html
new file mode 100644
index 0000000000..caf25d9429
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<meta name="assert" content="word-break: break-all works when specified on inline element">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-inline-006-a-ref.html'>
+<link rel='match' href='reference/word-break-break-all-inline-006-b-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<style>
+div {
+  border: solid 5px;
+  margin: 5px;
+  font-family: monospace;
+  width: 6.1ch;
+  padding: 1px;
+}
+.test { word-break: break-all; }
+.blue { border-color: blue; }
+.orange { border-color: orange; }
+</style>
+<p>Test passes if the black box is identical to either the blue or the orange one.
+<div class="blue">aaaabb<br>bbbbbb<br>bbb<br>ccccc</div>
+<div>aaaa<span class="test">bbbbbbbbbbb</span>ccccc</div>
+<div class="orange">aaaabb<br>bbbbbb<br>bb<br>bccccc</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-007.tentative.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-007.tentative.html
new file mode 100644
index 0000000000..bc5a08d38a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-007.tentative.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<meta name="assert" content="word-break: break-all works when specified on inline element">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-break-all-inline-007-ref.html'>
+<link rel='author' title='Jonathan Kew' href='mailto:jkew@mozilla.com'>
+<style>
+.testdiv { font-family: monospace; width: 6.1ch; padding: 1px; margin: 10px; border: 1px solid silver; }
+.test { word-break: break-all; }
+</style>
+<div>Test passes if the two boxes are the same.</div>
+<div class="testdiv">aaaaaaa<span class="test">bbbbbbb</span>cccccc</div>
+<div class="testdiv">aaaaaaa<br>bbbbbb<br>bcccccc</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-008.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-008.html
new file mode 100644
index 0000000000..930ae436fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-008.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<meta name="flags" content="Ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="break-all doesn't allow breaking around punctuation characters">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+    font: 50px / 1 Ahem;
+}
+.fail {
+    background: green;
+    position: absolute;
+    color: red;
+    height: 100px;
+    z-index: -1;
+}
+.test {
+    color: green;
+    width: 1em;
+
+    word-break: break-all;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">XX</div>
+<div class="test"><span>X</span><span>.</span></div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-009.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-009.html
new file mode 100644
index 0000000000..e1914f5f4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-009.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<meta name="flags" content="Ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="'overflow-wrap: anywhere' works when specified on inline element">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div, span {
+    font: 10px / 1 Ahem;
+    color: green;
+}
+.fail {
+    position: absolute;
+    background: green;
+    color: red;
+    height: 100px;
+    z-index: -1;
+}
+.testdiv {
+    width: 5ch;
+}
+.test {
+    word-break: break-all;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">XXXXXXXXXX<br>XXXXX<br>XXXX<br>XXX</div>
+<div class="testdiv">XXXXXXXXXX<span class="test">XXXXXXXXX</span>XXX</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-010.tentative.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-010.tentative.html
new file mode 100644
index 0000000000..36c9e47ff5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-all-inline-010.tentative.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>word-break: break-all on inline element</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-all">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<meta name="flags" content="Ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="'word-break: break-all' allows to break before the first character of the inline-block it applies to">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div, span {
+    font: 50px / 1 Ahem;
+    color: green;
+}
+.fail {
+    position: absolute;
+    color: red;
+    z-index: -1;
+}
+.testdiv {
+    width: 2ch;
+}
+.test {
+    word-break: break-all;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">XX<br>XX</div>
+<div class="testdiv">XX<span class="test">XX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-crash-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-crash-001.html
new file mode 100644
index 0000000000..894a6f3aa0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-crash-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>Test float + nbsp + break-word does not freeze</title>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=972421">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+  font-size: 10px;
+  width: 10ch;
+  border: 2px solid blue;
+}
+float {
+  float: left;
+}
+.nowrap > div {
+  white-space: nowrap;
+}
+.break-word {
+  word-break: break-word;
+}
+</style>
+<body>
+  <section>
+    <div>123456<float></float>654321</div>
+    <div>123456<float></float>&nbsp;654321</div>
+  </section>
+  <section class="nowrap">
+    <div>123456<float></float>654321</div>
+    <div>123456<float></float>&nbsp;654321</div>
+  </section>
+  <section class="break-word">
+    <div>123456<float></float>654321</div>
+    <div>123456<float></float>&nbsp;654321</div>
+  </section>
+<script>test(() => {
+    document.body.offsetTop;  // layout should not freeze.
+});</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions-ref.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions-ref.html
new file mode 100644
index 0000000000..3c6ab3863f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>CSS Test: word-break: break-word and overflow-wrap interaction</title>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1296042">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<style>
+  div {
+    float: left;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    margin: 10px;
+    overflow-wrap: anywhere;
+  }
+</style>
+<p>The boxes below should look the same.</p>
+<div>FillerFillerFillerFiller</div>
+<div>FillerFillerFillerFiller</div>
+<div>FillerFillerFillerFiller</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions.html b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions.html
new file mode 100644
index 0000000000..b4d3720e23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-break-word-overflow-wrap-interactions.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>CSS Test: word-break: break-word and overflow-wrap interaction</title>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1296042">
+<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-word-break">
+<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-overflow-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-text/#valdef-overflow-wrap-anywhere">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="match" href="word-break-break-word-overflow-wrap-interactions-ref.html">
+<style>
+  div {
+    float: left;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    margin: 10px;
+  }
+</style>
+<p>The boxes below should look the same.</p>
+<div style="word-break: break-word; overflow-wrap: anywhere;">FillerFillerFillerFiller</div>
+<div style="word-break: break-word; overflow-wrap: break-word;">FillerFillerFillerFiller</div>
+<div style="word-break: break-word; overflow-wrap: normal;">FillerFillerFillerFiller</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-000.html
new file mode 100644
index 0000000000..fce7487c33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, latin</title>
+<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-keep-all-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div>
+<div class="ref"><span>Latin latin latin<br/>latin</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-001.html
new file mode 100644
index 0000000000..3af7fedf04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, japanese</title>
+<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'.  In this style, sequences of CJK characters do not break.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-keep-all-ref-001.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語 日本語 日本語</span></div></div>
+<div class="ref" lang="ja"><span>日本語 日本語<br/>日本語</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-002.html
new file mode 100644
index 0000000000..db9ea4c155
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, korean</title>
+<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'.  In this style, sequences of CJK characters do not break.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-keep-all-ref-002.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ko"><div id="testdiv"><span id="testspan">한글이 한글이 한글이</span></div></div>
+<div class="ref" lang="ko"><span>한글이 한글이<br/>한글이</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-003.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-003.html
new file mode 100644
index 0000000000..776d56d828
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, thai</title>
+<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words',  except where opportunities exist due to dictionary-based breaking (such as in Thai).">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-keep-all-ref-003.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="th"><div id="testdiv"><span id="testspan">และ และและ</span></div></div>
+<div class="ref" lang="th"><span>และ และ<br/>และ</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-005.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-005.html
new file mode 100644
index 0000000000..1e71ec7111
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-005.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS-Text test: word-break keep-all does not affect U+3000</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<meta name=flags content="">
+<meta name=assert content="U+3000, despite being called Ideographic Space, does not belong to the ID line breaking class, or any other class whose wrapping opportunities are suppressed by word-break:keep-all. A break after it should still be allowed.">
+<link rel="match" href="reference/word-break-keep-all-005-ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
+<style>
+div {
+  width: 4em;
+  word-break: keep-all;
+}
+</style>
+
+<p>This test passes if the four characters below are arranged in a two-by-two square.
+<div>字字　字字</div>
+<!--
+If keep-all has no effect at all, breaks are allowed everywhere,
+and the result will be:
+  字字　字
+  字
+
+If keep-all correctly suppresses wrapping opportunities between CJK ideographs
+but also incorrectly suppresses the wrapping opportunity after U+3000,
+no wrapping is possible, and the result will be:
+  字字　字字
+-->
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-006.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-006.html
new file mode 100644
index 0000000000..7bf9a15a9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-006.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS-Text test: word-break keep-all does not affect punctuation</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<meta name=flags content="">
+<meta name=assert content="word-break:keep-all does not affect rules governing the soft wrap opportunities created by punctuation">
+<link rel="match" href="reference/word-break-keep-all-005-ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-word-break">
+<style>
+div {
+  width: 4em;
+  word-break: keep-all;
+}
+span { color: transparent }
+</style>
+
+<p>This test passes if the four characters below are arranged in a two-by-two square.
+<div>字字<span>、</span>字字</div>
+<!--
+U+3001 : IDEOGRAPHIC COMMA is made transparent for visual simplicity,
+the change in color has no effect on layout.
+
+If keep-all has no effect at all, breaks are allowed everywhere
+(except before U+3001, but this has no incidence in this case)
+and the result will be:
+  字字、字
+  字
+
+If keep-all correctly suppresses wrapping opportunities between CJK ideographs
+but also incorrectly suppresses the wrapping opportunity after U+3001,
+no wrapping is possible, and the result will be:
+  字字、字字
+-->
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-007.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-007.html
new file mode 100644
index 0000000000..443cccbc9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-007.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS-Text test: word-break keep-all + pre-wrap does not affect U+3000</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<meta name=flags content="">
+<meta name=assert content="U+3000, despite being called Ideographic Space, does not belong to the ID line breaking class, or any other class whose wrapping opportunities are suppressed by word-break:keep-all. A break after it should still be allowed. white-space:pre-wrap doesn't change that.">
+<link rel="match" href="reference/word-break-keep-all-005-ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<style>
+div {
+  width: 4em;
+  word-break: keep-all;
+  white-space: pre-wrap;
+}
+</style>
+
+<p>This test passes if the four characters below are arranged in a two-by-two square.
+<div>字字　字字</div>
+<!--
+If keep-all has no effect at all, breaks are allowed everywhere,
+and the result will be:
+  字字　字
+  字
+
+If keep-all correctly suppresses wrapping opportunities between CJK ideographs
+but also incorrectly suppresses the wrapping opportunity after U+3000,
+no wrapping is possible, and the result will be:
+  字字　字字
+-->
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-008.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-008.html
new file mode 100644
index 0000000000..6532e41609
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-008.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>CSS-Text test: word-break keep-all + break-spaces does not affect U+3000</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<meta name=flags content="">
+<meta name=assert content="U+3000, despite being called Ideographic Space, does not belong to the ID line breaking class, or any other class whose wrapping opportunities are suppressed by word-break:keep-all. A break after it should still be allowed. white-space:break-spaces doesn't change that.">
+<link rel="match" href="reference/word-break-keep-all-005-ref.html">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<style>
+div {
+  width: 4em;
+  word-break: keep-all;
+  white-space: break-spaces;
+}
+</style>
+
+<p>This test passes if the four characters below are arranged in a two-by-two square.
+<div>字字　字字</div>
+<!--
+If keep-all has no effect at all, breaks are allowed everywhere,
+and the result will be:
+  字字　字
+  字
+
+If keep-all correctly suppresses wrapping opportunities between CJK ideographs
+but also incorrectly suppresses the wrapping opportunity after U+3000,
+no wrapping is possible, and the result will be:
+  字字　字字
+-->
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-009.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-009.html
new file mode 100644
index 0000000000..d6df63f4e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-009.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, ID and CJ</title>
+<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'.  In this style, sequences of CJK characters do not break.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-keep-all-ref-009.html'>
+<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ja"><div id="testdiv"><span id="testspan">フォ フォ</span></div></div>
+<div class="ref" lang="ja"><span>フォ<br/>フォ</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth;
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px';
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-010.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-010.html
new file mode 100644
index 0000000000..c288f943a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-010.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: keep-all, korean (Hangul Jamos)</title>
+<meta name="assert" content="word-break: keep-all means breaking is forbidden within 'words'.  In this style, sequences of CJK characters do not break.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-keep-all-ref-010.html'>
+<link rel='author' title='Makoto Kato' href='mailto:m_kato@ga2.so-net.ne.jp'>
+<style type='text/css'>
+.test { word-break: keep-all; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ko"><div id="testdiv"><span id="testspan">&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161; &#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161;</span></div></div>
+<div class="ref" lang="ko"><span>&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161;<br/>&#x110B;&#x1162;&#x1100;&#x1175;&#x1111;&#x1161;&#x11AB;&#x1103;&#x1161;</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth;
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px';
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-063.html b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-063.html
new file mode 100644
index 0000000000..3fa827b487
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-keep-all-063.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+
+ <html lang="en">
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text: 'word-break: keep-all' applied to an inline in latin</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#word-break-property">
+  <link rel="match" href="reference/word-break-keep-all-063-ref.html">
+
+  <style>
+  div
+    {
+      border: orange solid;
+      font: 24px monospace;
+      margin-bottom: 4px;
+      width: 15ch;
+      /*
+      15 in 15ch is an entirely arbitrary number.
+      */
+      word-break: break-all;
+      /*
+      'word-break: break-all' applied on the
+      wrapping block is necessary to verify
+      that 'word-break: keep-all' is
+      implemented
+      */
+    }
+
+  div#ws-normal
+    {
+      white-space: normal;
+    }
+
+  div#ws-prewrap
+    {
+      white-space: pre-wrap;
+    }
+
+  div#ws-breakspaces
+    {
+      white-space: break-spaces;
+    }
+
+  div#ws-preline
+    {
+      white-space: pre-line;
+    }
+
+  span.test
+    {
+      word-break: keep-all;
+    }
+
+  div#reference
+    {
+      word-break: normal;
+    }
+  </style>
+
+  <p>Test passes if the glyphs in the 5 orange rectangles are laid out <strong>identically</strong>.
+
+  <div id="ws-normal">A simple <span class="test">sentence</span> in english.</div>
+
+  <div id="ws-prewrap">A simple <span class="test">sentence</span> in english.</div>
+
+  <div id="ws-breakspaces">A simple <span class="test">sentence</span> in english.</div>
+
+  <div id="ws-preline">A simple <span class="test">sentence</span> in english.</div>
+
+  <div id="reference">A simple<br>sentence in eng<br>lish.</div>
+                <!--              123456789012345        -->
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-manual-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-manual-001.html
new file mode 100644
index 0000000000..09d803b0fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-manual-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break:manual </title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-boundary-detection">
+<link rel="match" href="reference/word-break-manual-001-ref.html">
+<meta name="assert" content="word-break: manual turns off detection of word boundaries in south east asian scripts">
+<style>
+#wrap, #ref {
+  font-size: 2em;
+  border: solid blue;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  width: 0;
+  word-break: manual;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=wrap lang=th>
+  <div id=test>กรุงเทพคือสวยงาม</div>
+</div>
+<div id=ref lang=th>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-001.html
new file mode 100644
index 0000000000..c314c4a5c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-001-ref.html">
+<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaking opportunities **are** considered when calculating min-content intrinsic sizes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div { font: 20px/1 Ahem; }
+table {
+  font: 20px/1 Ahem;
+  word-break: break-word;
+  max-width: 0;
+  border: 0;
+  border-collapse: collapse;
+}
+td {
+  padding: 0;
+  background: green;
+  color: transparent;
+}
+#red {
+  position: absolute;
+  z-index: -1;
+  background: red;
+  color: transparent;
+}
+</style>
+
+<p>Test passes if there is a green box below and no red.
+<div id=red>X<br>X<br>X<br>X</div>
+<table><tr><td>XXXX</table>
+
+<!--
+  width:min-content on the div directly without using a table
+  would achieve the goal of this test, and be a lot simpler.
+
+  However, width:min-content is not yet widely supported.
+
+  Using a table, and forcing it to be as small as possible
+  will achieve min-content sizing of the div in all browsers.
+-->
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-002.html
new file mode 100644
index 0000000000..0f5d18ff4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html">
+<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaks at edge of inline elements.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#wrapper {
+  width: 0px;
+  font: 16px / 1 Ahem;
+  word-break: break-word;
+  color: green;
+}
+#test {
+  float: left;
+}
+#reference {
+  position: absolute;
+  width: 16px;
+  height: 128px;
+  background: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a vertical green bar below.
+<div id="wrapper">
+  <div id="reference"></div>
+  <div id="test"><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-003.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-003.html
new file mode 100644
index 0000000000..84e7cfe872
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-003.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="word-break: break-all shouldn't allow breaking before punctuation characters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+    font: 50px / 1 Ahem;
+}
+.fail {
+    background: red;
+    position: absolute;
+    color: green;
+    z-index: -1;
+}
+.test {
+    color: green;
+    width: min-content;
+    word-break: break-all;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail"><br>XX</div>
+<div class="test"><span>X</span><span>.</span></div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-004.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-004.html
new file mode 100644
index 0000000000..89b30027c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-004.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="reference/word-break-break-all-010-ref.html">
+<meta name="assert" content="'word-break: break-word' allows breaking before punctuation characters and it should be considered when computing the min-content size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+    font: 50px / 1 Ahem;
+}
+.fail {
+    background: green;
+    position: absolute;
+    color: red;
+    width: 100px;
+    z-index: -1;
+}
+.test {
+    color: green;
+    width: min-content;
+    word-break: break-word;
+}
+</style>
+
+<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+<div class="fail">X<br>X</div>
+<div class="test"><span>X</span><span>.</span></div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-005.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-005.html
new file mode 100644
index 0000000000..ccbf988705
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-005.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<meta name="flags" content="ahem">
+<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-003-ref.html">
+<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaks at edge of inline elements.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#wrapper {
+  width: 0px;
+  font: 16px / 1 Ahem;
+  word-break: break-word;
+  color: green;
+}
+#test {
+  float: left;
+}
+#reference {
+  position: absolute;
+  width: 16px;
+  height: 128px;
+  background: red;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a vertical green bar below.
+<div id="wrapper">
+  <div id="reference"></div>
+  <div id="test"><span>XX</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span><span>X</span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-006.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-006.html
new file mode 100644
index 0000000000..7b88136934
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-006.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
+<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-002-ref.html">
+<meta name="assert" content="'word-break: break-word' doesn't break grapheme cluster and min-content intrinsic size should take that into account.">
+<style>
+#wrapper {
+  width: 0px;
+  word-break: break-word;
+}
+#test {
+  float: left;
+  border: 2px solid blue;
+}
+</style>
+
+<p>Test passes if the glyphs are completely inside the blue box.
+<div id="wrapper">
+  <div id="test">&#x0ba8;&#x0bbf;&#x0bbf;&#x0bbf;&#x0bbf;&#x0ba8;&#x0bbf;&#x0bbf;&#x0bbf;&#x0bbf;</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-007.html b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-007.html
new file mode 100644
index 0000000000..7886b13d73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-min-content-007.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test: min-content sizing and white-space: pre-wrap</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
+<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-009-ref.html">
+<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaking opportunities **are not** considered when calculating min-content intrinsic sizes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+div {
+    font: 20px/1 Ahem;
+}
+.test {
+    color: green;
+    background: red;
+    z-index: -1;
+
+    width: min-content;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+.ref {
+    position: absolute;
+    background: green;
+    color: transparent;
+}
+</style>
+
+<p>Test passes if there is a green box below and no red.
+<div class="ref"><br><br>X</div>
+<div class="test">&#9;&#9;<span>XX</span></div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-001.html
new file mode 100644
index 0000000000..61ccba2465
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, zwsp</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules. A ZWSP character should provide a break point.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-ref-001.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="en"><div id="testdiv"><span id="testspan">latinlatinlatin&#x200B;latin</span></div></div>
+<div class="ref" lang="en"><span>latinlatinlatin<br/>latin</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-002.html
new file mode 100644
index 0000000000..c988928eb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break:normal mistagged</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#lexical-breaking">
+<link rel="mismatch" href="reference/word-break-normal-002-ref.html">
+<meta name="assert" content="word-break:normal turns on detection of word boundaries in south east asian scripts, even if the language tagging is incorrect">
+<style>
+#wrap, #ref {
+  font-size: 2em;
+  border: solid orange;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  width: 0;
+  word-break: normal;
+}
+</style>
+
+<p>Test passes if the two boxes below are <em>different</em>.
+
+<div id=wrap lang=de>
+  <div id=test>กรุงเทพคือสวยงาม</div>
+</div>
+<div id=ref lang=de>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-003.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-003.html
new file mode 100644
index 0000000000..bb6c2b477a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break:normal untagged</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#lexical-breaking">
+<link rel="mismatch" href="reference/word-break-normal-003-ref.html">
+<meta name="assert" content="word-boundary-break:normal turns on detection of word boundaries in south east asian scripts, even if the language tagging is missing">
+<style>
+#wrap, #ref {
+  font-size: 2em;
+  border: solid orange;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  width: 0;
+  word-break: normal;
+}
+</style>
+
+<p>Test passes if the two boxes below are <em>different</em>.
+
+<div id=wrap>
+  <div id=test>กรุงเทพคือสวยงาม</div>
+</div>
+<div id=ref>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ar-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ar-000.html
new file mode 100644
index 0000000000..9faf32525c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ar-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, arabic</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-ar-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ar" dir="rtl"><div id="testdiv"><span id="testspan">العَرَبِيةُ العَرَبِيةُ العَرَبِيةُ</span></div></div>
+<div class="ref" lang="ar" dir="rtl"><span>العَرَبِيةُ العَرَبِيةُ<br/>العَرَبِيةُ</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-bo-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-bo-000.html
new file mode 100644
index 0000000000..7518238504
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-bo-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, tibetan</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-bo-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.4 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="tdd"><div id="testdiv"><span id="testspan">ལྷ་སའི་སྐད་ལྷ་སའི་སྐད་</span></div></div>
+<div class="ref" lang="tdd"><span>ལྷ་སའི་སྐད་ལྷ་སའི་<br/>སྐད་</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-en-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-en-000.html
new file mode 100644
index 0000000000..a8e4952e3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-en-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, latin</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-en-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test"><div id="testdiv"><span id="testspan">Latin latin latin latin</span></div></div>
+<div class="ref"><span>Latin latin latin<br/>latin</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ethiopic.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ethiopic.html
new file mode 100644
index 0000000000..90a27ecdad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ethiopic.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>Normal Ethiopic word breaking</title>
+<meta name="assert" content="word-break: normal means Ethiopid words break according to their customary rules (word by word)">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-ethiopic-ref.html'>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div {
+    width: 0;
+    color: blue;
+}
+.ref {
+    color: orange;
+    width: auto;
+    white-space: pre;
+}
+</style>
+
+<p> Test passes if the blue and orange text are identical.
+
+<div lang=am>ተወልዱ፡ኵሉ፡ሰብእ፡ግዑዛን፡ወዕሩያን፡በማዕረግ፡ወብሕግ።</div>
+<div lang=am class=ref>ተወልዱ፡
+ኵሉ፡
+ሰብእ፡
+ግዑዛን፡
+ወዕሩያን፡
+በማዕረግ፡
+ወብሕግ።</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-hi-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-hi-000.html
new file mode 100644
index 0000000000..62966d6c7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-hi-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, hindi</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-hi-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1.4 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="hi"><div id="testdiv"><span id="testspan">हिंदी हिंदी हिंदी हिंदी</span></div></div>
+<div class="ref" lang="hi"><span>हिंदी हिंदी हिंदी<br/>हिंदी</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-000.html
new file mode 100644
index 0000000000..33a3acd491
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, japanese</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-ja-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語日本語日本語</span></div></div>
+<div class="ref" lang="ja"><span>日本語日本語日本<br/>語</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-001.html
new file mode 100644
index 0000000000..aa13890e21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, japanese hiragana</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-ja-ref-001.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ja"><div id="testdiv"><span id="testspan">にほんごにほんご</span></div></div>
+<div class="ref" lang="ja"><span>にほんごにほん<br/>ご</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-002.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-002.html
new file mode 100644
index 0000000000..f190a46943
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, japanese katakana</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-ja-ref-002.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ja"><div id="testdiv"><span id="testspan">ニホンゴニホンゴ</span></div></div>
+<div class="ref" lang="ja"><span>ニホンゴニホン<br/>ゴ</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-004.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-004.html
new file mode 100644
index 0000000000..e010562702
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ja-004.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, japanese</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-ja-ref-004.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ja"><div id="testdiv"><span id="testspan">日本語日本語日本語。</span></div></div>
+<div class="ref" lang="ja"><span>日本語日本語日本<br/>語。</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-km-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-km-000.html
new file mode 100644
index 0000000000..ed12ad1103
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-km-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, khmer</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-km-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="km"><div id="testdiv"><span id="testspan">ភាសាខ្មែរភាសាខ្មែរភាសាខ្មែរ</span></div></div>
+<div class="ref" lang="km"><span>ភាសាខ្មែរភាសាខ្មែរ<br/>ភាសាខ្មែរ</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ko-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ko-000.html
new file mode 100644
index 0000000000..605a67c169
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-ko-000.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, korean</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules. Korean, which commonly exhibits two different behaviors, allows breaks between any two consecutive Hangul/Hanja.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-ko-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="ko"><div id="testdiv"><span id="testspan">한글이 한글이 한글이</span></div></div>
+<div class="ref" lang="ko"><span>한글이 한글이 한글<br/>이</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+<!--
+Notes:
+It is possible to break Korean at character or word boundaries, depending on author preference. Breaking at character boundaries tends to be more common in modern Korean text, so that has been chosen as the reference here.  If the word breaks at word boundaries, that is not necessarily an error, but it is not what the spec describes for word-break: normal.
+-->
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-lo-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-lo-000.html
new file mode 100644
index 0000000000..ccde0aff38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-lo-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, lao</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-lo-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="lo"><div id="testdiv"><span id="testspan">ພາສາລາວພາສາລາວພາສາລາວ</span></div></div>
+<div class="ref" lang="lo"><span>ພາສາລາວພາສາລາວພາສາ<br/>ລາວ</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-my-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-my-000.html
new file mode 100644
index 0000000000..d867f5f63f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-my-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, myanmar</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-my-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="my"><div id="testdiv"><span id="testspan">မြန်မာစာမြန်မာစာမြန်မာစာ</span></div></div>
+<div class="ref" lang="my"><span>မြန်မာစာမြန်မာစာ<br/>မြန်မာစာ</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-tdd-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-tdd-000.html
new file mode 100644
index 0000000000..3aa143221c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-tdd-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, tai nüa</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-tdd-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="tdd"><div id="testdiv"><span id="testspan">ᥖᥭᥰᥖᥬᥳᥑᥨᥒᥰ</span></div></div>
+<div class="ref" lang="tdd"><span>ᥖᥭᥰᥖᥬᥳ<br/>ᥑᥨᥒᥰ</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-000.html
new file mode 100644
index 0000000000..b3f611986a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, thai</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-th-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="th"><div id="testdiv"><span id="testspan">ภาษาไทยภาษาไทย</span></div></div>
+<div class="ref" lang="th"><span>ภาษาไทยภาษา<br/>ไทย</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-001.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-001.html
new file mode 100644
index 0000000000..919dcc22a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-th-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-break: normal</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#lexical-breaking">
+<link rel="mismatch" href="reference/word-break-normal-th-001-ref.html">
+<meta name="assert" content="word-break:normal turns on detection of word boundaries in south east asian scripts. Preferably in a smart, word-by-word basis, but if the UA doesn't support that, on a per character basis. Eitherway, lines should wrap">
+<style>
+#wrap, #ref {
+  font-size: 2em;
+  border: solid orange;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  width: 0;
+  word-break: normal;
+}
+</style>
+
+<p>Test passes if the two boxes below are <em>different</em>.
+
+<div id=wrap lang=th>
+  <div id=test>กรุงเทพคือสวยงาม</div>
+</div>
+<div id=ref lang=th>กรุงเทพคือสวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-break/word-break-normal-zh-000.html b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-zh-000.html
new file mode 100644
index 0000000000..e1a67bb1dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-break/word-break-normal-zh-000.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html  lang="en" >
+<head>
+<meta charset="utf-8">
+<title>word-break: normal, chinese</title>
+<meta name="assert" content="word-break: normal means words break according to their customary rules.">
+<link rel='help' href='https://drafts.csswg.org/css-text-3/#word-break-property'>
+<link rel='match' href='reference/word-break-normal-zh-ref-000.html'>
+<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
+<style type='text/css'>
+.test { word-break: normal; }
+/* the CSS below is not part of the test */
+.test, .ref { border: 1px solid orange;  margin: 20px;  padding: 10px; width: 390px; font: 36px/1 sans-serif; }
+</style>
+</head>
+<body>
+<div id='instructions'>Test passes if the two orange boxes are the same.</div>
+<div class="test" lang="zh"><div id="testdiv"><span id="testspan">中國話中國話中國語</span></div></div>
+<div class="ref" lang="zh"><span>中國話中國話中國<br/>語</span></div>
+<script>
+var sentenceWidth = document.getElementById('testspan').offsetWidth
+document.getElementById('testdiv').style.width = String(sentenceWidth - 5)+'px'
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-001-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-001-ref.html
new file mode 100644
index 0000000000..620079f6ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div>あ　い　う</div>
+<div>あ　い　う</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-002-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-002-ref.html
new file mode 100644
index 0000000000..70a1a6528e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-002-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div>a b c</div>
+<div>a b c</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-004-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-004-ref.html
new file mode 100644
index 0000000000..fbe74942b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-004-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div>ab c</div>
+<div>ab c</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-007-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-007-ref.html
new file mode 100644
index 0000000000..b0cb891308
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-007-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div>a b c d e f g h i j</div>
+<div>a b c d e f g h i j</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-008-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-008-ref.html
new file mode 100644
index 0000000000..ff73104a00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-008-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div>a  b  c  d  e  f  g  h  i     j</div>
+<div>a  b  c  d  e  f  g  h  i     j</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-009-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-009-ref.html
new file mode 100644
index 0000000000..815fe800e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-009-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div>ａ　ｂ　ｃ　ｄ　ｅ　ｆ　ｇ</div>
+<div>ａ　ｂ　ｃ　ｄ　ｅ　ｆ　ｇ</div>
+
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-010-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-010-ref.html
new file mode 100644
index 0000000000..2ca6b8db7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-010-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  float: left;
+  margin: 1px;
+  padding: 0 1em;
+}
+</style>
+
+<p>Test passes if the all boxes below are identical.
+
+<div>あ　い</div>
+<div>あ　い</div>
+<div>あ　い</div>
+<div>あ　い</div>
+<div>あ　い</div>
+<div>あ　い</div>
+
+<div>あ　い</div>
+<div>あ　い</div>
+<div>あ　い</div>
+<div>あ　い</div>
+
+<div>あ　い</div>
+<div>あ　い</div>
+<div>あ　い</div>
+<div>あ　い</div>
+
+<div>あ　い</div>
+<div>あ　い</div>
+<div>あ　い</div>
+<div>あ　い</div>
+
+<div>あ　い</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-011-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-011-ref.html
new file mode 100644
index 0000000000..e1af62ffdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-011-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  float: left;
+  margin: 1px;
+}
+</style>
+
+<p>Test passes if the all boxes below are identical.
+
+<div id=ref>あ　い<br>う</div>
+<div id=ref>あ　い<br>う</div>
+
+<div id=ref>あ　い<br>う</div>
+<div id=ref>あ　い<br>う</div>
+
+<div id=ref>あ　い<br>う</div>
+<div id=ref>あ　い<br>う</div>
+
+<div id=ref>あ　い<br>う</div>
+<div id=ref>あ　い<br>う</div>
+
+<div id=ref>あ　い<br>う</div>
+<div id=ref>あ　い<br>う</div>
+
+<div id=ref>あ　い<br>う</div>
+<div id=ref>あ　い<br>う</div>
+
+<div id=ref>あ　い<br>う</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-012-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-012-ref.html
new file mode 100644
index 0000000000..016dc5968c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-012-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  float: left;
+  margin: 1px;
+}
+</style>
+
+<p>Test passes if the all boxes below are identical.
+
+<div id=ref>あい　うえ</div>
+<div id=ref>あい　うえ</div>
+<div id=ref>あい　うえ</div>
+
+<div id=ref>あい　うえ</div>
+<div id=ref>あい　うえ</div>
+<div id=ref>あい　うえ</div>
+
+<div id=ref>あい　うえ</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-013-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-013-ref.html
new file mode 100644
index 0000000000..9490e52d1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-013-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  width: 7em;
+  border: solid blue;
+  margin: 1em;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div>ああ　いい　<br>うう</div>
+<div>ああ　いい　<br>うう</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-014-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-014-ref.html
new file mode 100644
index 0000000000..dbec99b082
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-014-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  width: 7ch;
+  font-family: monospace;
+  border: solid blue;
+  margin: 1em;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div>aa bb <br>cc</div>
+<div>aa bb <br>cc</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-016-a-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-016-a-ref.html
new file mode 100644
index 0000000000..3347778df6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-016-a-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#ref1 {
+  border-color: blue;
+}
+#ref2 {
+  border-color: orange;
+}
+</style>
+
+<p>Test passes if the black box is identical to either the blue or orange one.
+
+<div id=ref1 lang=ja>東京へ　行きましょう。</div>
+<div id=test lang=ja>東京へ　行きましょう。</div>
+<div id=ref2 lang=ja>東京　へ　行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-016-b-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-016-b-ref.html
new file mode 100644
index 0000000000..550c9e8888
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-016-b-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#ref1 {
+  border-color: blue;
+}
+#ref2 {
+  border-color: orange;
+}
+</style>
+
+<p>Test passes if the black box is identical to either the blue or orange one.
+
+<div id=ref1 lang=ja>東京へ　行きましょう。</div>
+<div id=test lang=ja>東京　へ　行きましょう。</div>
+<div id=ref2 lang=ja>東京　へ　行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-017-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-017-ref.html
new file mode 100644
index 0000000000..d37b2301d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-017-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+.wrap {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#ref {
+  border-color: blue;
+}
+</style>
+
+<p>Test passes if the black box is identical to the blue one.
+
+<div lang=th>กรุงเทพ คือ สวยงาม</div>
+<div id=ref lang=th>กรุงเทพ คือ สวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-018-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-018-ref.html
new file mode 100644
index 0000000000..84cb52c478
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-018-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#ref {
+  border-color: blue;
+}
+u {  background: silver; }
+b {  background: green; }
+em { background: gray; }
+</style>
+
+<p>Test passes if the black box is identical to the blue one.
+
+<div lang=th>กรุงเทพ <b><u>คือ</u> <em>สวยง</em></b>าม</div>
+<div id=ref lang=th>กรุงเทพ <b><u>คือ</u> <em>สวยง</em></b>าม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-019-a-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-019-a-ref.html
new file mode 100644
index 0000000000..4ff39ee4f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-019-a-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#ref1 {
+  border-color: blue;
+}
+#ref2 {
+  border-color: orange;
+}
+u {  background: silver; }
+b {  background: green; }
+em { background: gray; }
+</style>
+
+<p>Test passes if the black box is identical to either the blue or orange one.
+
+<div id=ref1 lang=ja>東京<b><u>へ</u>　<em>行きましょ</em></b>う。</div>
+<div lang=ja>東京<b><u>へ</u>　<em>行きましょ</em></b>う。</div>
+<div id=ref2 lang=ja>東京　<b><u>へ</u>　<em>行きましょ</em></b>う。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-019-b-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-019-b-ref.html
new file mode 100644
index 0000000000..5b58e078dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-019-b-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#ref1 {
+  border-color: blue;
+}
+#ref2 {
+  border-color: orange;
+}
+u {  background: silver; }
+b {  background: green; }
+em { background: gray; }
+</style>
+
+<p>Test passes if the black box is identical to either the blue or orange one.
+
+<div id=ref1 lang=ja>東京<b><u>へ</u>　<em>行きましょ</em></b>う。</div>
+<div lang=ja>東京　<b><u>へ</u>　<em>行きましょ</em></b>う。</div>
+<div id=ref2 lang=ja>東京　<b><u>へ</u>　<em>行きましょ</em></b>う。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-020-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-020-ref.html
new file mode 100644
index 0000000000..a7d1dffcd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-020-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div lang=ja>東京へ行きましょう。</div>
+<div lang=ja>東京へ行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-021-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-021-ref.html
new file mode 100644
index 0000000000..1569dc9cbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-021-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>一生懸命 働きます。</div>
+<div id=ref lang=ja>一生懸命 働きます。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-022-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-022-ref.html
new file mode 100644
index 0000000000..734c08ccab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-022-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>一生懸命　働きます。</div>
+<div id=ref lang=ja>一生懸命　働きます。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-024-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-024-ref.html
new file mode 100644
index 0000000000..e198dafafa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-024-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div lang=ja>東京&nbsp;へ&nbsp;行きましょう。</div>
+<div lang=ja>東京&nbsp;へ&nbsp;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-025-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-025-ref.html
new file mode 100644
index 0000000000..e9cecd792b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-025-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div lang=ja>東京&#x2060;へ&#x2060;行きましょう。</div>
+<div lang=ja>東京&#x2060;へ&#x2060;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-026-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-026-ref.html
new file mode 100644
index 0000000000..86ecdba912
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-026-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div lang=ja>東京&#x200D;へ&#x200D;行きましょう。</div>
+<div lang=ja>東京&#x200D;へ&#x200D;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-027-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-027-ref.html
new file mode 100644
index 0000000000..58cfc552c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-027-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test>東京へ行きましょう。</div>
+<div id=ref>東京へ行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-028-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-028-ref.html
new file mode 100644
index 0000000000..9904cb9610
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-028-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京へ行きましょう。</div>
+<div id=ref lang=ja>東京へ行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-029-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-029-ref.html
new file mode 100644
index 0000000000..0844a20126
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-029-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=xyz>東京へ行きましょう。</div>
+<div id=ref lang=xyz>東京へ行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-030-ref.html b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-030-ref.html
new file mode 100644
index 0000000000..46df21573f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/reference/word-space-transform-030-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content;
+  white-space: pre;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div lang=ja>一生懸命　<br>働きます。</div>
+<div lang=ja>一生懸命　<br>働きます。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-001.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-001.html
new file mode 100644
index 0000000000..5378808efe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform:ideographic-space </title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-001-ref.html">
+<meta name="assert" content="Both zero-width-spaces and <wbr> are expanded by word-space-transform: ideographic-space">
+<style>
+div {
+  font-size: 2em;
+}
+#test {
+  word-space-transform: ideographic-space;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div id=test>あ<wbr>い&#x200B;う</div>
+<div id=ref>あ　い　う</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-002.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-002.html
new file mode 100644
index 0000000000..5cad18ef47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform:space</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-002-ref.html">
+<meta name="assert" content="Both zero-width-spaces and <wbr> are expanded by word-space-transform: space">
+<style>
+div {
+  font-size: 2em;
+}
+#test {
+  word-space-transform: space;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div id=test>a<wbr>b&#x200B;c</div>
+<div id=ref>a b c</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-003.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-003.html
new file mode 100644
index 0000000000..f7e4f5c9e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-003.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform inherits</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-001-ref.html">
+<meta name="assert" content="word-space-transform inherits">
+<style>
+div {
+  font-size: 2em;
+}
+#wrap {
+  word-space-transform: ideographic-space;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div id=wrap>
+  <div id=test>あ<wbr>い&#x200B;う</div>
+</div>
+<div id=ref>あ　い　う</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-004.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-004.html
new file mode 100644
index 0000000000..082824542f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-004.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform off on wbr</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-004-ref.html">
+<meta name="assert" content="word-space-transform can be turned off on a <wbr>">
+<style>
+div {
+  font-size: 2em;
+}
+#test {
+  word-space-transform: space;
+}
+wbr {
+  word-space-transform: none;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div id=test>a<wbr>b&#x200B;c</div>
+<div id=ref>ab c</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-005.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-005.html
new file mode 100644
index 0000000000..fc994ebbe6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-005.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform off on inline</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-004-ref.html">
+<meta name="assert" content="word-space-transform can be turned off on a inlines">
+<style>
+div {
+  font-size: 2em;
+}
+#test {
+  word-space-transform: space;
+}
+span {
+  word-space-transform: none;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div id=test><span>a&#x200B;b</span>&#x200B;c</div>
+<div id=ref>ab c</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-006.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-006.html
new file mode 100644
index 0000000000..6fdd0abbe9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-006.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: turn on word-space-transform on wbr and inlines</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-002-ref.html">
+<meta name="assert" content="word-space-transform applies to inlines, including wbr">
+<style>
+div {
+  font-size: 2em;
+}
+wbr, span {
+  word-space-transform: space;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div id=test>a<wbr>b<span>&#x200B;c</span></div>
+<div id=ref>a b c</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-007.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-007.html
new file mode 100644
index 0000000000..5d021684de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-007.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform space collapsing</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-1">
+<link rel="match" href="reference/word-space-transform-007-ref.html">
+<meta name="assert" content="word-space-transform happens between phase 1 and 2 of white space processing, so inserted spaces don't collapse with adjacent ones">
+<style>
+div {
+  font-size: 2em;
+}
+#test {
+  word-space-transform: space;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div id=test>a<wbr> b <wbr>c &#x200B;d&#x200B; e<wbr><wbr>f&#x200B;&#x200B;g<wbr>&#x200B;h&#x200B;<wbr>i <wbr> &#x200B; j</div>
+<div id=ref>a  b  c  d  e  f  g  h  i     j</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-008.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-008.html
new file mode 100644
index 0000000000..8808d936f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-008.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform space non collapsing</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-1">
+<link rel="match" href="reference/word-space-transform-008-ref.html">
+<meta name="assert" content="word-space-transform happens between phase 1 and 2 of white space processing, so inserted spaces are preserved, and become non-wrappable with white-space:pre">
+<style>
+div {
+  font-size: 2em;
+  white-space: pre;
+}
+#test {
+  word-space-transform: space;
+  width: 0;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div id=test>a<wbr> b <wbr>c &#x200B;d&#x200B; e<wbr><wbr>f&#x200B;&#x200B;g<wbr>&#x200B;h&#x200B;<wbr>i <wbr> &#x200B; j</div>
+<div id=ref>a  b  c  d  e  f  g  h  i     j</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-009.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-009.html
new file mode 100644
index 0000000000..5c0df04d1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-009.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform and text-transform:full-width</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/##text-transform-order">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-transform-property">
+<link rel="match" href="reference/word-space-transform-009-ref.html">
+<meta name="assert" content="word-space-transform:space happens at the right stage of the white space processing pipeline to interact properly with text-transform:full-width">
+<style>
+div {
+  font-size: 2em;
+}
+#test {
+  word-space-transform: space;
+  text-transform: full-width;
+}
+</style>
+
+<p>Test passes if the two lines below are identical.
+
+<div id=test>a b<wbr>c&#x200B;d <wbr>e &#x200B;f<wbr>&#x200B;g</div>
+<div id=ref>ａ　ｂ　ｃ　ｄ　ｅ　ｆ　ｇ</div>
+
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-010.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-010.html
new file mode 100644
index 0000000000..b91f2d2499
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-010.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform and forced line breaks</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-010-ref.html">
+<meta name="assert" content="must not replace instances of U+200B immediately preceding or following a forced line break (ignoring any intervening inline box boundaries, and associated margin/border/padding)">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  float: left;
+  margin: 1px;
+}
+.pad { padding: 0 1em; }
+.spad { padding: 0 0.5em; }
+.margin { margin: 0 1em; }
+.smargin { margin: 0 0.5em; }
+.border {  border: solid transparent; border-width: 0 1em; }
+.sborder { border: solid transparent; border-width: 0 0.5em; }
+.test {
+  word-space-transform: ideographic-space;
+}
+</style>
+
+<p>Test passes if the all boxes below are identical.
+
+<div class="test pad"><wbr>あ<wbr>い<wbr></div>
+<div class="test pad">&#x200B;あ&#x200B;い&#x200B;</div>
+<div class="test pad"><span><wbr>あ<wbr>い<wbr><span></div>
+<div class="test pad"><span>&#x200B;あ&#x200B;い&#x200B;</span></div>
+<div class="test pad"><span></span><wbr>あ<wbr>い<wbr><span></span></div>
+<div class="test pad"><span></span>&#x200B;あ&#x200B;い&#x200B;<span></span></div>
+
+<div class="test"><span class=pad><wbr>あ<wbr>い<wbr><span></div>
+<div class="test"><span class=pad>&#x200B;あ&#x200B;い&#x200B;</span></div>
+<div class="test"><span class=spad></span><wbr>あ<wbr>い<wbr><span class=spad></span></div>
+<div class="test"><span class=spad></span>&#x200B;あ&#x200B;い&#x200B;<span class=spad></span></div>
+
+<div class="test"><span class=margin><wbr>あ<wbr>い<wbr><span></div>
+<div class="test"><span class=margin>&#x200B;あ&#x200B;い&#x200B;</span></div>
+<div class="test"><span class=smargin></span><wbr>あ<wbr>い<wbr><span class=smargin></span></div>
+<div class="test"><span class=smargin></span>&#x200B;あ&#x200B;い&#x200B;<span class=smargin></span></div>
+
+<div class="test"><span class=border><wbr>あ<wbr>い<wbr><span></div>
+<div class="test"><span class=border>&#x200B;あ&#x200B;い&#x200B;</span></div>
+<div class="test"><span class=sborder></span><wbr>あ<wbr>い<wbr><span class=sborder></span></div>
+<div class="test"><span class=sborder></span>&#x200B;あ&#x200B;い&#x200B;<span class=sborder></span></div>
+
+<div id=ref class=pad>あ　い</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-011.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-011.html
new file mode 100644
index 0000000000..9df80d7073
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-011.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform and forced line breaks (br and preserved new lines)</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-011-ref.html">
+<meta name="assert" content="must not replace instances of U+200B immediately preceding or following a forced line break (br and preserved new lines)">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  float: left;
+  margin: 1px;
+}
+.test {
+  word-space-transform: ideographic-space;
+}
+.pre {
+	white-space: pre;
+}
+.mbp span {
+  padding: 0 5px;
+  border: solid transparent;
+  border-width: 0 5px;
+  margin: 0 -10px;
+}
+</style>
+
+<p>Test passes if the all boxes below are identical.
+
+<div class="test">あ<wbr>い<wbr><br><wbr>う</div>
+<div class="test">あ&#x200B;い&#x200B;<br>&#x200B;う</div>
+
+<div class="test">あ<wbr>い<span><wbr></span><span></span><span><br></span><span></span><span><wbr></span>う</div>
+<div class="test">あ&#x200B;い<span>&#x200B;</span><span></span><span><br></span><span></span><span>&#x200B;</span>う</div>
+
+<div class="test mbp">あ<wbr>い<span><wbr></span><span></span><span><br></span><span></span><span><wbr></span>う</div>
+<div class="test mbp">あ&#x200B;い<span>&#x200B;</span><span></span><span><br></span><span></span><span>&#x200B;</span>う</div>
+
+<div class="test pre">あ<wbr>い<wbr>
+<wbr>う</div>
+<div class="test pre">あ&#x200B;い&#x200B;
+&#x200B;う</div>
+
+<div class="test pre">あ<wbr>い<span><wbr></span><span></span><span>
+</span><span></span><span><wbr></span>う</div>
+<div class="test pre">あ&#x200B;い<span>&#x200B;</span><span></span><span>
+</span><span></span><span>&#x200B;</span>う</div>
+
+<div class="test pre mbp">あ<wbr>い<span><wbr></span><span></span><span>
+</span><span></span><span><wbr></span>う</div>
+<div class="test pre mbp">あ&#x200B;い<span>&#x200B;</span><span></span><span>
+</span><span></span><span>&#x200B;</span>う</div>
+
+<div id=ref>あ　い<br>う</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-012.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-012.html
new file mode 100644
index 0000000000..5aa86fe4d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-012.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform and forced line breaks (inline blocks)</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-012-ref.html">
+<meta name="assert" content="must not replace instances of U+200B immediately preceding or following a forced line break (inline block boundaries)">
+<style>
+div {
+  font-size: 2em;
+  border: solid blue;
+  float: left;
+  margin: 1px;
+}
+.test {
+  word-space-transform: ideographic-space;
+}
+a { display: inline-block; }
+.mbp span {
+  padding: 0 5px;
+  border: solid transparent;
+  border-width: 0 5px;
+  margin: 0 -10px;
+}
+</style>
+
+<p>Test passes if the all boxes below are identical.
+
+<div class=test>あ<a><wbr>い<wbr>う<wbr></a>え</div>
+<div class=test>あ<a><span></span><span><wbr></span>い<wbr>う<span><wbr></span><span></span></a>え</div>
+<div class="test mbp">あ<a><span></span><span><wbr></span>い<wbr>う<span><wbr></span><span></span></a>え</div>
+
+<div class=test>あ<a>&#x200B;い&#x200B;う&#x200B;</a>え</div>
+<div class=test>あ<a><span></span><span>&#x200B;</span>い&#x200B;う<span>&#x200B;</span><span></span></a>え</div>
+<div class="test mbp">あ<a><span></span><span>&#x200B;</span>い&#x200B;う<span>&#x200B;</span><span></span></a>え</div>
+
+<div id=ref>あい　うえ</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-013.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-013.html
new file mode 100644
index 0000000000..2f3fe9c661
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-013.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform and keep-all</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="match" href="reference/word-space-transform-013-ref.html">
+<meta name="assert" content="ideographic spaces inserted by word-space-transform provide soft wrapping opportunities, even with keep-all">
+<style>
+div {
+  font-size: 2em;
+  width: 7em;
+  border: solid blue;
+  margin: 1em;
+}
+#test {
+  word-space-transform: ideographic-space;
+  word-break: keep-all;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test>ああ<wbr>いい<wbr>うう</div>
+<div id=ref>ああ　いい　<br>うう</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-014.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-014.html
new file mode 100644
index 0000000000..9ab350c7b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-014.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform and keep-all</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
+<link rel="match" href="reference/word-space-transform-014-ref.html">
+<meta name="assert" content="spaces inserted by word-space-transform provide soft wrapping opportunities, even with keep-all">
+<style>
+div {
+  font-size: 2em;
+  width: 7ch;
+  font-family: monospace;
+  border: solid blue;
+  margin: 1em;
+}
+#test {
+  word-space-transform: space;
+  word-break: keep-all;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test>aa<wbr>bb<wbr>cc</div>
+<div id=ref>aa bb <br>cc</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-015-manual.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-015-manual.html
new file mode 100644
index 0000000000..b86df3879c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-015-manual.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform copy-pasting</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<meta name="assert" content="word-space-transform does not affect copy and paste">
+<style>
+div, textarea {
+  font-size: 2em;
+  margin: 1em;
+  font-family: monospace;
+  resize: none;
+  overflow: hidden;
+  height: 2em;
+  width: 20ch;
+  padding: 0px;
+}
+#test {
+  border: solid blue;
+  word-space-transform: space;
+}
+#ref {
+  border: solid orange;
+}
+textarea {
+  border: solid pink;
+}
+
+</style>
+
+<p>Copy the text from the blue box, and paste it into the pink one.
+The test passes if the pink and orange boxes are identical.
+
+<div id=test>no<wbr>space&#x200B;here</div>
+<textarea spellcheck="false"></textarea>
+<div id=ref>nospacehere</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-016.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-016.html
new file mode 100644
index 0000000000..c76acf7bf6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-016.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform:auto-phrase</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-016-a-ref.html">
+<link rel="match" href="reference/word-space-transform-016-b-ref.html">
+<meta name="assert" content="word-space-transform:ideographic-space auto-phrase inserts virtual word boundaries at reasonable points, which can then be expanded into ideographic spaces">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+#ref1 {
+  border-color: blue;
+}
+#ref2 {
+  border-color: orange;
+}
+</style>
+
+<p>Test passes if the black box is identical to either the blue or orange one.
+
+<div id=ref1 lang=ja>東京へ　行きましょう。</div>
+<div id=test lang=ja>東京へ行きましょう。</div>
+<div id=ref2 lang=ja>東京　へ　行きましょう。</div>
+
+<!-- The first reference is preferable,
+    but as the specific algo is up to the UA
+    arguably the second one is OK too.
+-->
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-017.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-017.html
new file mode 100644
index 0000000000..3a50355153
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-017.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform: space auto-phase</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-017-ref.html">
+<meta name="assert" content="word-space-transform: space auto-phrase inserts virtual word boundaries at reasonable points, which can then be expanded into spaces">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transfor: space auto-phrase;
+}
+#ref {
+  border-color: blue;
+}
+</style>
+
+<p>Test passes if the black box is identical to the blue one.
+
+<div id=test lang=th>กรุงเทพคือสวยงาม</div>
+<div id=ref lang=th>กรุงเทพ คือ สวยงาม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-018.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-018.html
new file mode 100644
index 0000000000..53703bb7ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-018.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform: auto-phrase outermost placement</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-space-transform-018-ref.html">
+<meta name="assert" content="If a word/phrase boundary is found at the same position as one or more inline box boundaries, the virtual expandable separator must be inserted in the outermost element that participates in this inline box boundary.">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: space auto-phrase;
+}
+#ref {
+  border-color: blue;
+}
+u {  background: silver; }
+b {  background: green; }
+em { background: gray; }
+</style>
+
+<p>Test passes if the black box is identical to the blue one.
+
+<div id=test lang=th>กรุงเทพ<b><u>คือ</u><em>สวยง</em></b>าม</div>
+<div id=ref lang=th>กรุงเทพ <b><u>คือ</u> <em>สวยง</em></b>าม</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-019.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-019.html
new file mode 100644
index 0000000000..d52fcdabd9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-019.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform: ideographic-space auto-phrase and outermost placement</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-space-transform-019-a-ref.html">
+<link rel="match" href="reference/word-space-transform-019-b-ref.html">
+<meta name="assert" content="If a phrase boundary is found at the same position as one or more inline box boundaries, the virtual word separator must be inserted in the outermost element that participates in this inline box boundary.">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+#ref1 {
+  border-color: blue;
+}
+#ref2 {
+  border-color: orange;
+}
+u {  background: silver; }
+b {  background: green; }
+em { background: gray; }
+</style>
+
+<p>Test passes if the black box is identical to either the blue or orange one.
+
+<div id=ref1 lang=ja>東京<b><u>へ</u>　<em>行きましょ</em></b>う。</div>
+<div id=test lang=ja>東京<b><u>へ</u><em>行きましょ</em></b>う。</div>
+<div id=ref2 lang=ja>東京　<b><u>へ</u>　<em>行きましょ</em></b>う。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-020.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-020.html
new file mode 100644
index 0000000000..fac894ab0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-020.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform: auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-space-transform-020-ref.html">
+<meta name="assert" content="The UA must not expand a virtual word separator at the beginning or end of any box whose parent box has a used value of none.">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: none;
+}
+#test span {
+  word-space-transform: ideographic-space auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京<span>へ</span>行きましょう。</div>
+<div id=ref lang=ja>東京へ行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-021.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-021.html
new file mode 100644
index 0000000000..d77e6e41ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-021.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-021-ref.html">
+<meta name="assert" content="The UA must not insert a virtual word separator immediately adjacent to a word-separator character">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>一生懸命 働きます。</div>
+<div id=ref lang=ja>一生懸命 働きます。</div>
+
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-022.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-022.html
new file mode 100644
index 0000000000..3e17a5bc8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-022.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-022-ref.html">
+<meta name="assert" content="The UA must not insert a virtual word boundary immediately adjacent to an other space separator.">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>一生懸命　働きます。</div>
+<div id=ref lang=ja>一生懸命　働きます。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-023.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-023.html
new file mode 100644
index 0000000000..044c3b18b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-023.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform: auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="match" href="reference/word-space-transform-022-ref.html">
+<meta name="assert" content="The UA must not insert a virtual word boundary immediately adjacent to ZERO WIDTH SPACE (U+200B) character.">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>一生懸命&#X200B;働きます。</div>
+<div id=ref lang=ja>一生懸命　働きます。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-024.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-024.html
new file mode 100644
index 0000000000..644ee08e5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-024.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-space-transform-024-ref.html">
+<meta name="assert" content="The UA must not insert a virtual word boundary between a typographic letter unit and an adjacent typographic character unit from the [UAX14] GL line breaking class">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京&nbsp;へ&nbsp;行きましょう。</div>
+<div id=ref lang=ja>東京&nbsp;へ&nbsp;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-025.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-025.html
new file mode 100644
index 0000000000..704081ac13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-025.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-space-transform-025-ref.html">
+<meta name="assert" content="The UA must not insert a virtual word boundary between a typographic letter unit and an adjacent typographic character unit from the [UAX14] WJ line breaking class">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京&#x2060;へ&#x2060;行きましょう。</div>
+<div id=ref lang=ja>東京&#x2060;へ&#x2060;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-026.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-026.html
new file mode 100644
index 0000000000..30531bfc4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-026.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform: auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-space-transform-026-ref.html">
+<meta name="assert" content="The UA must not insert a virtual word boundary between a typographic letter unit and an adjacent typographic character unit from the [UAX14] ZWJ line breaking class">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京&#x200D;へ&#x200D;行きましょう。</div>
+<div id=ref lang=ja>東京&#x200D;へ&#x200D;行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-027.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-027.html
new file mode 100644
index 0000000000..325daa12c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-027.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform: auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-space-transform-027-ref.html">
+<meta name="assert" content="The UA must not insert (and expand) a virtual word boundary when the language is unknown">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test>東京へ行きましょう。</div>
+<div id=ref>東京へ行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-028.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-028.html
new file mode 100644
index 0000000000..e334449a70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-028.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform: auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-space-transform-028-ref.html">
+<meta name="assert" content="The UA must not insert (and expand) a virtual word boundary when  auto-phrase is not specified, only explicit ones.">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>東京へ行きましょう。</div>
+<div id=ref lang=ja>東京へ行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-029.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-029.html
new file mode 100644
index 0000000000..8eb25c1351
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-029.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform: auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-space-transform-029-ref.html">
+<meta name="assert" content="The UA must not insert (and expand) a virtual word boundary when the language is unsupported">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: 30ch;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=xyz>東京へ行きましょう。</div>
+<div id=ref lang=xyz>東京へ行きましょう。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-030.html b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-030.html
new file mode 100644
index 0000000000..9c1ba11fd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-space-transform/word-space-transform-030.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 4 Test: word-space-transform: auto-phrase forbidden</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-space-transform">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#word-phrase-detection">
+<link rel="match" href="reference/word-space-transform-030-ref.html">
+<meta name="assert" content="Transform effects, notably transforming virtual word separators into spaces, affect line breaking.">
+<style>
+div {
+  font-size: 2em;
+  border: solid black;
+  margin: 5px;
+  width: min-content;
+  word-break: keep-all;
+}
+#test {
+  word-space-transform: ideographic-space auto-phrase;
+}
+</style>
+
+<p>Test passes if the two boxes below are identical.
+
+<div id=test lang=ja>一生懸命働きます。</div>
+<div id=ref lang=ja>一生懸命　<br>働きます。</div>
diff --git a/testing/web-platform/tests/css/css-text/word-spacing/reference/ref-filled-green-100px-square.xht b/testing/web-platform/tests/css/css-text/word-spacing/reference/ref-filled-green-100px-square.xht
new file mode 100644
index 0000000000..05a1379448
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-spacing/reference/ref-filled-green-100px-square.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: green;
+  height: 100px;
+  width: 100px;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/word-spacing/support/swatch-blue.png b/testing/web-platform/tests/css/css-text/word-spacing/support/swatch-blue.png
new file mode 100644
index 0000000000..bf2759634d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-spacing/support/swatch-blue.png
diff --git a/testing/web-platform/tests/css/css-text/word-spacing/support/swatch-orange.png b/testing/web-platform/tests/css/css-text/word-spacing/support/swatch-orange.png
new file mode 100644
index 0000000000..d3cd498b52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-spacing/support/swatch-orange.png
diff --git a/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-001-ref.html b/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-001-ref.html
new file mode 100644
index 0000000000..d4cdb54d11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSS Text Test: Word Spacing</title>
+<link rel="author" title="Nicholas Nethercote" href="mailto:nnethercote@mozilla.com">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<meta name="flags" content="ahem">
+<style>
+@font-face {
+  font-family: Ahem;
+  src: url(/fonts/Ahem.ttf);
+}
+/* We use Ahem to avoid very minor differences between the test and the
+   reference that occur with certain font+platform combinations. */
+div { font-family: Ahem; font-size: 20px; }
+span.padoneem { padding-left: 1em; }
+</style>
+<body>
+  <p>Test passes if the space between the words starts at zero and increases by
+  one on each subsequent line.</p>
+  <div>ABcDefGhij</div>
+  <div>A Bc Def Ghij</div>
+  <div>A &nbsp;Bc &nbsp;Def &nbsp;Ghij</div>
+  <div>A &nbsp;&nbsp;Bc &nbsp;&nbsp;Def &nbsp;&nbsp;Ghij</div>
+  <div>A &nbsp;&nbsp;&nbsp;Bc &nbsp;&nbsp;&nbsp;Def &nbsp;&nbsp;&nbsp;Ghij</div>
+  <div>A &nbsp;&nbsp;&nbsp;&nbsp;Bc &nbsp;&nbsp;&nbsp;&nbsp;Def &nbsp;&nbsp;&nbsp;&nbsp;Ghij</div>
+  <div>A &nbsp;&nbsp;&nbsp;&nbsp;<span class="padoneem">Bc &nbsp;&nbsp;&nbsp;&nbsp;<span class="padoneem">Def &nbsp;&nbsp;&nbsp;&nbsp;<span class="padoneem">Ghij &nbsp;&nbsp;&nbsp;&nbsp;<span class="padoneem"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-001.html b/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-001.html
new file mode 100644
index 0000000000..f9ffc9c323
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>CSS Text Test: Word Spacing</title>
+<link rel="author" title="Nicholas Nethercote" href="mailto:nnethercote@mozilla.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#word-spacing">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="match" href="word-spacing-001-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Test checks that word-spacing works with percentages.">
+<style>
+@font-face {
+  font-family: Ahem;
+  src: url(/fonts/Ahem.ttf);
+}
+/* We use Ahem to avoid very minor differences between the test and the
+   reference that occur with certain font+platform combinations. */
+div { font-family: Ahem; font-size: 20px; }
+div.wsn100  { word-spacing: -100%; }
+div.wsn40   { word-spacing: -40%; }
+div.ws0     { word-spacing: 0%; }
+div.ws25    { word-spacing: calc(25% + 0px); }
+div.ws100   { word-spacing: 100%; }
+div.ws300   { word-spacing: calc(100% + 6em + 50%*4 - 12em/2); }
+div.ws400p1 { word-spacing: calc(400% + 1em); }
+</style>
+<body>
+  <p>Test passes if the space between the words starts at zero and increases by
+  one on each subsequent line.</p>
+  <div class="wsn100" >A Bc Def Ghij</div>
+  <div class="ws0"    >A Bc Def Ghij</div>
+  <div class="ws100"  >A Bc Def Ghij</div>
+  <div class="wsn40"  >A &nbsp;&nbsp;&nbsp;&nbsp;Bc &nbsp;&nbsp;&nbsp;&nbsp;Def &nbsp;&nbsp;&nbsp;&nbsp;Ghij</div>
+  <div class="ws300"  >A Bc Def Ghij</div>
+  <div class="ws25"   >A &nbsp;&nbsp;&nbsp;Bc &nbsp;&nbsp;&nbsp;Def &nbsp;&nbsp;&nbsp;Ghij</div>
+  <div class="ws400p1">A Bc Def Ghij</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-computed-001.html b/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-computed-001.html
new file mode 100644
index 0000000000..84d1fcf1e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-computed-001.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: computed value of 'word-spacing: normal' and of various &lt;length&gt;</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#word-spacing-property">
+
+  <meta content="This test checks that the computed value of 'normal' for the property word-spacing is '0px'. We also check the computed value of various &lt;length&gt;." name="assert">
+
+  <script src="/resources/testharness.js"></script>
+
+  <script src="/resources/testharnessreport.js"></script>
+
+  <style>
+  div#target
+    {
+      font-size: 20px;
+    }
+  </style>
+
+  <div id="target">A Z</div>
+
+  <div id="log"></div>
+
+  <script>
+  function startTesting()
+  {
+
+  var targetElement = document.getElementById("target");
+
+    function verifyComputedStyle(property_name, specified_value, expected_value)
+    {
+
+    test(function()
+      {
+
+      targetElement.style.setProperty(property_name, "91px");
+
+      /*
+      The purpose of setting the property to an arbitrary value
+      is to act as a fallback value in case the specified value
+      fails. Since we are running 12 consecutive tests on the
+      same element, then it is necessary to 'reset' its property
+      to an arbitrary value.
+      */
+
+      targetElement.style.setProperty(property_name, specified_value);
+
+      assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
+
+      }, `testing ${property_name}: ${specified_value}`);
+    }
+
+    verifyComputedStyle("word-spacing", "normal", "0px");
+
+    verifyComputedStyle("word-spacing", "0", "0px");
+
+    verifyComputedStyle("word-spacing", "1.27cm", "48px");
+
+    verifyComputedStyle("word-spacing", "1em", "20px");
+
+    verifyComputedStyle("word-spacing", "0.5in", "48px");
+
+    verifyComputedStyle("word-spacing", "25.4mm", "96px");
+
+    verifyComputedStyle("word-spacing", "5pc", "80px");
+
+    verifyComputedStyle("word-spacing", "18pt", "24px");
+
+    verifyComputedStyle("word-spacing", "7px", "7px");
+
+    verifyComputedStyle("word-spacing", "101.6Q", "96px");
+
+    verifyComputedStyle("word-spacing", "3rem", "48px");
+
+    verifyComputedStyle("word-spacing", "0ch", "0px");
+
+  }
+
+  startTesting();
+
+  </script>
diff --git a/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-negative-value-001.html b/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-negative-value-001.html
new file mode 100644
index 0000000000..6e5df950c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/word-spacing/word-spacing-negative-value-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Text Test: 'word-spacing' value may be negative (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-text-3/#word-spacing-property">
+  <link rel="match" href="reference/ref-filled-green-100px-square.xht">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+
+  <meta content="may" name="flags">
+
+  <style>
+  div
+    {
+      background-color: red;
+      color: green;
+      font-family: Ahem;
+      font-size: 50px;
+      line-height: 1;
+      width: 2em;
+      word-spacing: -1em;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div>T E</div>
+
+  <div>S T</div>
diff --git a/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-font-001-ref.html b/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-font-001-ref.html
new file mode 100644
index 0000000000..f0bd7fe262
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-font-001-ref.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test reference</title>
+<link rel=author title="Ambrose Li" href="http://port.ambroseli.ca/">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>The test passes if the word pairs below are all displayed in the same font.
+
+<table>
+  <tr>
+    <td>ping4 on1
+    <td>salaam
+    <td>shalom
+  <tr>
+    <td>ping4 on1
+    <td>salaam
+    <td>shalom
+</table>
+
diff --git a/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-line-break-001-ref.html b/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-line-break-001-ref.html
new file mode 100644
index 0000000000..3aa1c84ab6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-line-break-001-ref.html
@@ -0,0 +1,19 @@
+<!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>
+div {
+  font-family: monospace;
+  width: 2em;
+}
+[lang=ja] { border: solid blue; }
+[lang=ja-Hang] { border: solid orange; }
+</style>
+
+<p>The test passes if the second line in the blue box below <em>starts with</em> a “〜”,
+and if the second line in the orange box below <em>ends with</em> a “〜”.
+
+<div lang=ja>東京<br>〜大<br>阪</div>
+<div lang=ja-Hang>도<br>쿄〜<br>오사<br>카</div>
diff --git a/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-line-break-002-ref.html b/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-line-break-002-ref.html
new file mode 100644
index 0000000000..2855797d35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-line-break-002-ref.html
@@ -0,0 +1,11 @@
+<!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>
+</style>
+
+<p>The test passes if the question mark in the phrase below is alone on the second line.
+
+<div lang=en-Hrkt>ハロー、ハウアーユー<br>？</div>
diff --git a/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-segment-break-001-ref.html b/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-segment-break-001-ref.html
new file mode 100644
index 0000000000..f451a74a51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-segment-break-001-ref.html
@@ -0,0 +1,10 @@
+<!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">
+
+<p>The test passes if the both lines are identical, including the spacing of the characters.
+
+<div lang=ain-Kana>“アイヌイタㇰ”</div>
+<div lang=ain-Kana>“アイヌイタㇰ”</div>
diff --git a/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-text-transform-001-ref.html b/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-text-transform-001-ref.html
new file mode 100644
index 0000000000..9b50fb1331
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/writing-system/reference/writing-system-text-transform-001-ref.html
@@ -0,0 +1,13 @@
+<!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>
+div {
+  font-size: 3em;
+}
+</style>
+<p>Test passes if the two words below are identical: there must be a dot on the “i” letter at the beginning of the word.
+<div lang=tr-Cyrl>iстанбул</div>
+<div lang=tr-Cyrl>iстанбул</div>
diff --git a/testing/web-platform/tests/css/css-text/writing-system/writing-system-font-001.html b/testing/web-platform/tests/css/css-text/writing-system/writing-system-font-001.html
new file mode 100644
index 0000000000..a8d4549279
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/writing-system/writing-system-font-001.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: font selection and writing sytem</title>
+<link rel=author title="Ambrose Li" href="http://port.ambroseli.ca/">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#languages">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#script-tagging">
+<link rel=help href="https://drafts.csswg.org/css-fonts-4/#language-specific-support">
+<link rel=match href="reference/writing-system-font-001-ref.html">
+<meta name=assert content="An explicit writing system takes precedence over the content language for font selection">
+
+<p>The test passes if the word pairs below are all displayed in the same font.
+
+<table>
+  <tr>
+    <td>ping4 on1
+    <td>salaam
+    <td>shalom
+  <tr>
+    <td><span lang=zh-yue-latn>ping4 on1</span>
+    <td><span lang=ar-latn>salaam</span>
+    <td><span lang=he-latn>shalom</span>
+</table>
+
diff --git a/testing/web-platform/tests/css/css-text/writing-system/writing-system-line-break-001.html b/testing/web-platform/tests/css/css-text/writing-system/writing-system-line-break-001.html
new file mode 100644
index 0000000000..6d52672b89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/writing-system/writing-system-line-break-001.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: writing system and line breaking</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#languages">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#script-tagging">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=match href="reference/writing-system-line-break-001-ref.html">
+<meta name=assert content="breaks before U+301C when line-break is loose are allowed if the content language is Japanese,
+but not when the writing system is not Japanese/Chinese (e.g. Korean).">
+<style>
+div {
+  font-family: monospace;
+  width: 2em;
+  line-break: loose;
+}
+[lang=ja] { border: solid blue; }
+[lang=ja-Hang] { border: solid orange; }
+</style>
+
+<p>The test passes if the second line in the blue box below <em>starts with</em> a “〜”,
+and if the second line in the orange box below <em>ends with</em> a “〜”.
+
+<div lang=ja>東京〜大阪</div>
+<div lang=ja-Hang>도쿄〜오사카</div>
diff --git a/testing/web-platform/tests/css/css-text/writing-system/writing-system-line-break-002.html b/testing/web-platform/tests/css/css-text/writing-system/writing-system-line-break-002.html
new file mode 100644
index 0000000000..a973560a6e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/writing-system/writing-system-line-break-002.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: writing system and line breaking</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#languages">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#script-tagging">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-line-break">
+<link rel=match href="reference/writing-system-line-break-002-ref.html">
+<meta name=assert content="breaks before U+FF1F when line-break is loose are allowed
+if the writing system is Japanese (which includes Hrkt),
+but even when the language not Japanese.">
+<style>
+div {
+  width: 10em;
+  line-break: loose;
+}
+</style>
+
+<p>The test passes if the question mark in the phrase below is alone on the second line.
+
+<div lang=en-Hrkt>ハロー、ハウアーユー？</div>
diff --git a/testing/web-platform/tests/css/css-text/writing-system/writing-system-segment-break-001.html b/testing/web-platform/tests/css/css-text/writing-system/writing-system-segment-break-001.html
new file mode 100644
index 0000000000..1d560d9f49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/writing-system/writing-system-segment-break-001.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: writing system and segment break transformation</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#languages">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#script-tagging">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#line-break-transform">
+<link rel=match href="reference/writing-system-segment-break-001-ref.html">
+<meta name=assert content="If the writing system of the segment break is Chinese, Japanese, or Yi,
+and the character before or after the segment break is punctuation or a symbol (Unicode general category P* or S*)
+and has an East Asian Width property of A or is Emoji,
+and the character on the other side of the segment break is F, W, or H, and not Hangul or Emoji,
+then the segment break is removed.">
+<!--
+In this case, checking with “ and ” which are punctuation with East Asian Width of A,
+next to Katakana letters (which are W),
+while the writing system is Katakana, which is classified as Japanese,
+despite a non Japanese content language (Ainu).
+-->
+
+<p>The test passes if the both lines are identical, including the spacing of the characters.
+
+<div lang=ain-Kana>“
+アイヌイタㇰ
+”</div>
+<div lang=ain-Kana>“アイヌイタㇰ”</div>
diff --git a/testing/web-platform/tests/css/css-text/writing-system/writing-system-text-transform-001.html b/testing/web-platform/tests/css/css-text/writing-system/writing-system-text-transform-001.html
new file mode 100644
index 0000000000..209d56c951
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/writing-system/writing-system-text-transform-001.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS test: text-transform and writing systems</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#languages">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#script-tagging">
+<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-text-transform">
+<link rel=match href="reference/writing-system-text-transform-001-ref.html">
+<meta name=assert content="text transform rules that depend on the language are overriden by a contradicting explicit script tag.">
+<style>
+div {
+  text-transform: lowercase;
+  font-size: 3em;
+}
+</style>
+<p>Test passes if the two words below are identical: there must be a dot on the “i” letter at the beginning of the word.
+<div lang=tr-Cyrl>IСТАНБУЛ</div>
+<div lang=tr-Cyrl>iстанбул</div>