aboutsummaryrefslogtreecommitdiffstats
path: root/tests/wpt/web-platform-tests/css
diff options
context:
space:
mode:
Diffstat (limited to 'tests/wpt/web-platform-tests/css')
-rw-r--r--tests/wpt/web-platform-tests/css/CSS2/text/white-space-processing-005.xht4
-rw-r--r--tests/wpt/web-platform-tests/css/css-color/composited-filters-under-opacity-ref.html17
-rw-r--r--tests/wpt/web-platform-tests/css/css-color/composited-filters-under-opacity.html20
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-001.html24
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-002.html33
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-003.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-004.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-005.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-006.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-007.html24
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-008.html32
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-001.html23
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-002.html23
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-003.html23
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-004.html17
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-005.html18
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-003-ref.html15
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-005-ref.html15
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-007-ref.html15
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-008-ref.html15
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-001-ref.html9
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-002-ref.html9
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-003-ref.html9
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-004-ref.html9
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-005-ref.html9
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html12
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/parsing/word-break-invalid.html7
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/parsing/word-break-valid.html3
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-000-ref.html16
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-000-sanity-ref.html20
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-001-ref.html15
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-001-sanity-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-002-ref.html13
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-002-sanity-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-003-ref.html13
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-003-sanity-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-007-ref.html28
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-008-ref.html13
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-008-sanity-ref.html (renamed from tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-000-ref.html)15
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-009-ref.html14
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-009-sanity-ref.html (renamed from tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-004-ref.html)14
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-010-ref.html14
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-010-sanity-ref.html (renamed from tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-005-ref.html)14
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-011-ref.html14
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-011-sanity-ref.html (renamed from tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-006-ref.html)16
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-012-ref.html20
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-012-sanity-ref.html21
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-013-ref.html28
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-014-ref.html14
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-014-sanity-ref.html21
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-015-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-016-ref.html14
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-016-sanity-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-017-ref.html28
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-018-ref.html28
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-020-ref.html13
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-020-sanity-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-021-ref.html12
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-021-sanity-ref.html21
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-022-ref.html10
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-022-sanity-ref.html23
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-023-ref.html24
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-023-sanity-2-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-023-sanity-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-024-ref.html24
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-024-sanity-2-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-024-sanity-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-025-ref.html24
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-025-sanity-2-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-025-sanity-ref.html22
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-001-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-002-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-003-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-004-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-005-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-006-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-007-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-008-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-009-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-010-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-011-ref.html27
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-000.html10
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-001.html8
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-002.html9
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-003.html9
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-004.html11
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-005.html11
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-006.html11
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-007.html11
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-008.html10
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-009.html10
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-010.html10
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-011.html10
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-012.html13
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-013.html15
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-014.html10
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-015.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-016.html10
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-017.html12
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-018.html12
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-020.html9
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-021.html8
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-022.html8
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-023.html15
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-024.html11
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping-025.html10
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-000.html29
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-001.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-002.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-003.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-004.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-005.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-006.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-007.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-008.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-009.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-010.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-011.html31
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-join-001-ref.html42
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-no-join-001-ref.html47
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-tatweel-001-ref.html44
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-tatweel-002-ref.html50
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-join-001.html48
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-join-002.html59
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-join-003.html56
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-no-join-001.html52
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-no-join-002.html63
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-no-join-003.html60
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-tatweel-001.html47
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-tatweel-002.html58
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-tatweel-003.html55
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-003.html1
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-004.html1
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-005.html1
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-006.html1
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-007.html3
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-008.html1
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-009.html2
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/control-chars-00C.html18
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-008.html1
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-015.html1
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-016.html1
-rw-r--r--tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-break-spaces-005-ref.html1
143 files changed, 1778 insertions, 1172 deletions
diff --git a/tests/wpt/web-platform-tests/css/CSS2/text/white-space-processing-005.xht b/tests/wpt/web-platform-tests/css/CSS2/text/white-space-processing-005.xht
index 2e2c36dab25..26800d1c1e5 100644
--- a/tests/wpt/web-platform-tests/css/CSS2/text/white-space-processing-005.xht
+++ b/tests/wpt/web-platform-tests/css/CSS2/text/white-space-processing-005.xht
@@ -26,7 +26,7 @@
</head>
<body>
<p>Test passes if the black box below is the same width, or shorter, than the blue box.</p>
- <div id="div1">XX&#09;&#10;</div>
+ <div id="div1">XX&#x0D;&#10;</div>
<div id="div2"></div>
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-color/composited-filters-under-opacity-ref.html b/tests/wpt/web-platform-tests/css/css-color/composited-filters-under-opacity-ref.html
new file mode 100644
index 00000000000..73b420189ec
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-color/composited-filters-under-opacity-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<style>
+div {
+ position: absolute;
+}
+.content {
+ width: 100px;
+ height: 150px;
+ position: absolute;
+ background: blue;
+}
+</style>
+Below should be a light blue square in uniform color.
+<div style="opacity: 0.5; will-change: opacity">
+ <div class="content" style="left: 0"></div>
+ <div class="content" style="left: 50px"></div>
+</div>
diff --git a/tests/wpt/web-platform-tests/css/css-color/composited-filters-under-opacity.html b/tests/wpt/web-platform-tests/css/css-color/composited-filters-under-opacity.html
new file mode 100644
index 00000000000..f613748af3a
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-color/composited-filters-under-opacity.html
@@ -0,0 +1,20 @@
+<link rel="help" href="http://www.w3.org/TR/css3-color/#transparency">
+<link rel="match" href="composited-filters-under-opacity-ref.html">
+<style>
+div {
+ position: absolute;
+ will-change: opacity;
+}
+.content {
+ width: 100px;
+ height: 150px;
+ position: absolute;
+ background: yellow;
+ filter: invert(100%);
+}
+</style>
+Below should be a light blue square in uniform color.
+<div style="opacity: 0.5">
+ <div class="content" style="left: 0"></div>
+ <div class="content" style="left: 50px"></div>
+</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-001.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-001.html
new file mode 100644
index 00000000000..03666417ca4
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-001.html
@@ -0,0 +1,24 @@
+<!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">
+<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/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-002.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-002.html
new file mode 100644
index 00000000000..ca561fd52b4
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-002.html
@@ -0,0 +1,33 @@
+<!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">
+<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/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-003.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-003.html
new file mode 100644
index 00000000000..5fc007794cf
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-003.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NARROW NO-BREAK SPACE after atomic inline</title>
+<meta name=assert content="There is **not** a soft wrap opportunity between an atomic inline and a following NARROW NO-BREAK SPACE">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-atomic-003-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ font: 50px/1 Ahem;
+ width: 0;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there are two identical squares below.
+
+<div><span>AB</span>&#8239;CD</div>
+<div>AB&#8239;CD</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-004.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-004.html
new file mode 100644
index 00000000000..c4aa5757c34
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-004.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NARROW NO-BREAK SPACE before atomic inline</title>
+<meta name=assert content="There is **not** a soft wrap opportunity between an atomic inline and a preceeding NARROW NO-BREAK SPACE">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-atomic-003-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ font: 50px/1 Ahem;
+ width: 0;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there are two identical squares below.
+
+<div>AB&#8239;<span>CD</span></div>
+<div>AB&#8239;CD</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-005.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-005.html
new file mode 100644
index 00000000000..6c53d592ed2
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-005.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — WORD JOINER after atomic inline</title>
+<meta name=assert content="There is **not** a soft wrap opportunity between an atomic inline and a following WORD JOINER">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-atomic-005-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ font: 50px/1 Ahem;
+ width: 0;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a black square below.
+
+<div><span>A</span>&#8288;B</div>
+<div>A&#8288;B</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-006.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-006.html
new file mode 100644
index 00000000000..2eb2a301784
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-006.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — WORD JOINER before atomic inline</title>
+<meta name=assert content="There is **not** a soft wrap opportunity between an atomic inline and a preceeding WORD JOINER">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-atomic-005-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+ font: 50px/1 Ahem;
+ width: 0;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a black square below.
+
+<div>A&#8288;<span>B</span></div>
+<div>A&#8288;B</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-007.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-007.html
new file mode 100644
index 00000000000..826ce002a88
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-007.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — atomic inline line breaks like ideographic character</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">
+<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/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-008.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-008.html
new file mode 100644
index 00000000000..cab17e9a9c0
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-atomic-008.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — atomic inline line breaks like ideographic character, keep-all</title>
+<meta name=assert content="There isn't a soft wrap opportunity before and after an atomic inline 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">
+<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>ABC</div>
+<div class=test>A<span>B</span>C</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-001.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-001.html
new file mode 100644
index 00000000000..b9928084751
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-002.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-002.html
new file mode 100644
index 00000000000..6d6547fddf6
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-002.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — NARROW NO-BREAK SPACE and replaced element</title>
+<meta name=assert content="There is **not** a soft wrap opportunity between replaced elements and adjacent NARROW NO-BREAK SPACE">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-replaced-002-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+.red {
+ position: absolute;
+ z-index: -1;
+}
+.test {
+ width: 0;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div class=red><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50>&#8239;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50></div>
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50>&#8239;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-003.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-003.html
new file mode 100644
index 00000000000..038b1d8ee5b
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-003.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>CSS Text — WORD JOINER and replaced element</title>
+<meta name=assert content="There is **not** a soft wrap opportunity between replaced elements and adjacent WORD JOINER">
+<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
+<link rel=match href="reference/line-breaking-replaced-003-ref.html">
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+.red {
+ position: absolute;
+ z-index: -1;
+}
+.test {
+ width: 0;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div class=red><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50>&#8288;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==" width=50></div>
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50>&#8288;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-004.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-004.html
new file mode 100644
index 00000000000..2cce40a9a16
--- /dev/null
+++ b/tests/wpt/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 like ideographic characters</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/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-005.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/line-breaking-replaced-005.html
new file mode 100644
index 00000000000..fd00799e155
--- /dev/null
+++ b/tests/wpt/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 like ideographic characters, keep-all</title>
+<meta name=assert content="There isn't a soft wrap opportunity before and after a replaced element with word-break: keep-all">
+<link rel=match href="reference/line-breaking-replaced-005-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 “A” and “B” are on the same line.
+
+<div>A<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">B</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-003-ref.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-003-ref.html
new file mode 100644
index 00000000000..93a6d491c23
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-003-ref.html
@@ -0,0 +1,15 @@
+<!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: 50px/1 Ahem;
+}
+</style>
+
+<p>Test passes if there are two identical squares below.
+
+<div>AB&#8239;CD</div>
+<div>AB&#8239;CD</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-005-ref.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-005-ref.html
new file mode 100644
index 00000000000..aa7f0f4accf
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-005-ref.html
@@ -0,0 +1,15 @@
+<!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: 50px/1 Ahem;
+}
+</style>
+
+<p>Test passes if there is a black square below.
+
+<div>A&#8288;B</div>
+<div>A&#8288;B</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-007-ref.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-007-ref.html
new file mode 100644
index 00000000000..cd2b0590aa9
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-007-ref.html
@@ -0,0 +1,15 @@
+<!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: 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/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-008-ref.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-008-ref.html
new file mode 100644
index 00000000000..62d68f5c4b1
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-atomic-008-ref.html
@@ -0,0 +1,15 @@
+<!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: 50px/1 Ahem;
+ color: green;
+}
+</style>
+
+<p>Test passes if there is a green rectangle and <strong>no red</strong>.
+
+<div>ABC</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-001-ref.html
new file mode 100644
index 00000000000..330c55e4851
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-002-ref.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-002-ref.html
new file mode 100644
index 00000000000..ed6a8145d98
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-002-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Test reference</title>
+<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>Test passes if there is no red.
+
+<div class=test><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50>&#8239;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-003-ref.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-003-ref.html
new file mode 100644
index 00000000000..07c8823cead
--- /dev/null
+++ b/tests/wpt/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>&#8288;<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkaGD4DwACiQGBU29HsgAAAABJRU5ErkJggg==" width=50></div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-004-ref.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-004-ref.html
new file mode 100644
index 00000000000..c8913bdc592
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-005-ref.html b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-005-ref.html
new file mode 100644
index 00000000000..e0794390c93
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-text/line-breaking/reference/line-breaking-replaced-005-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 “A” and “B” are on the same line.
+
+<div>A<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">B</div>
diff --git a/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html b/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html
index 0491b921e1a..e701f765da2 100644
--- a/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html
+++ b/tests/wpt/web-platform-tests/css/css-text/overflow-wrap/overflow-wrap-break-word-007.html
@@ -3,15 +3,16 @@
<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">
+<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: break-spaces' property, that must prevent the word to be broken.">
+<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.">
<style>
div {
- position: relative;
- font-size: 20px;
- font-family: Ahem;
+ position: relative;
+ font-size: 20px;
+ font-family: Ahem;
+ line-height: 1em;
}
.red {
position: absolute;
@@ -24,7 +25,6 @@ div {
}
.test {
color: green;
- line-height: 1em;
width: 5ch;
white-space: pre-wrap;
diff --git a/tests/wpt/web-platform-tests/css/css-text/parsing/word-break-invalid.html b/tests/wpt/web-platform-tests/css/css-text/parsing/word-break-invalid.html
index 6d544de8bfa..46456b677d8 100644
--- a/tests/wpt/web-platform-tests/css/css-text/parsing/word-break-invalid.html
+++ b/tests/wpt/web-platform-tests/css/css-text/parsing/word-break-invalid.html
@@ -4,7 +4,7 @@
<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 | keep-all | break-all'.">
+<meta name="assert" content="word-break supports only the grammar 'normal | keep-all | break-all | break-word'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
@@ -14,6 +14,11 @@
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/tests/wpt/web-platform-tests/css/css-text/parsing/word-break-valid.html b/tests/wpt/web-platform-tests/css/css-text/parsing/word-break-valid.html
index 9cd917b488a..7f558848fb8 100644
--- a/tests/wpt/web-platform-tests/css/css-text/parsing/word-break-valid.html
+++ b/tests/wpt/web-platform-tests/css/css-text/parsing/word-break-valid.html
@@ -4,7 +4,7 @@
<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 the full grammar 'normal | keep-all | break-all'.">
+<meta name="assert" content="word-break supports the full grammar 'normal | keep-all | break-all | break-word'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
@@ -14,6 +14,7 @@
test_valid_value("word-break", "normal");
test_valid_value("word-break", "keep-all");
test_valid_value("word-break", "break-all");
+test_valid_value("word-break", "break-word");
</script>
</body>
</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-000-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-000-ref.html
index 62c8b500aaf..46312eb7bee 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-000-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-000-ref.html
@@ -2,24 +2,20 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: span</title>
+<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 */
</style>
+<link rel=mismatch href="shaping-000-sanity-ref.html">
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span>&zwj;ع&zwj;</span>&zwj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span>&zwj;ع&zwj;</span>&zwj;ع</div>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-000-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-000-sanity-ref.html
new file mode 100644
index 00000000000..af43f98b0ca
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-001-ref.html
index d9465300dfe..53a1093acee 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-001-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-001-ref.html
@@ -2,27 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: colour</title>
+<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"; }
+.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 join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-001-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-001-sanity-ref.html
new file mode 100644
index 00000000000..802c65387cc
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-002-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-002-ref.html
index 96d3c1ffdd8..1871724c1de 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-002-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-002-ref.html
@@ -2,27 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: font-weight</title>
+<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 */
.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 join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-002-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-002-sanity-ref.html
new file mode 100644
index 00000000000..5cb1200182e
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-003-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-003-ref.html
index 4143f916dcd..734e510af0d 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-003-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-003-ref.html
@@ -2,27 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: font-style</title>
+<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 */
.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 join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-003-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-003-sanity-ref.html
new file mode 100644
index 00000000000..6ca7f1c2df0
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-007-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-007-ref.html
deleted file mode 100644
index 8021eb99070..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-007-ref.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>shaping: font size 100%</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 */
-.fontsize { font-size:100%; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
-
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="fontsize">&zwj;ع&zwj;</span>&zwj;ع</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> \ No newline at end of file
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-008-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-008-ref.html
index 4e47e4763ed..42be6f8220b 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-008-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-008-ref.html
@@ -2,27 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: font size 120%</title>
+<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>
+<link rel=mismatch href="shaping-008-sanity-ref.html">
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-000-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-008-sanity-ref.html
index 62df53aae2c..abad0b4f8ef 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-000-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-008-sanity-ref.html
@@ -2,7 +2,7 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>marked up diacritic: span</title>
+<title>reference</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
@@ -12,14 +12,13 @@
}
.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 Arabic base characters in each word join.</p>
-<div class="ref" lang="ar" dir="rtl">ع&#x064E;ع ع&#x0651;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&#x064E;ع ع&#x0651;ع</div>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-009-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-009-ref.html
index bcdd7acbb68..6ff0985ab96 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-009-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-009-ref.html
@@ -2,26 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: margin &gt; 0</title>
+<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 */
.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 DON'T join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-004-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-009-sanity-ref.html
index 263f279bec7..b5545097a37 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-004-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-009-sanity-ref.html
@@ -2,27 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: margin 0</title>
+<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 */
-.margin { margin:0; }
+.margin { margin: 0.5em; }
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-010-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-010-ref.html
index 98416e98a7c..18d3325625c 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-010-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-010-ref.html
@@ -2,26 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: padding &gt; 0</title>
+<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 */
.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 DON'T join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-005-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-010-sanity-ref.html
index 9614f5d315c..b9d951c8874 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-005-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-010-sanity-ref.html
@@ -2,27 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: padding 0</title>
+<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 */
-.padding { padding:0; }
+.padding { padding: 0.5em; }
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-011-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-011-ref.html
index b4bd9422210..418b641e239 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-011-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-011-ref.html
@@ -2,26 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: border &gt; 0</title>
+<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 */
.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 DON'T join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-006-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-011-sanity-ref.html
index 1a265c4320c..a57aadc301d 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-006-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-011-sanity-ref.html
@@ -2,29 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: border 0</title>
+<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 */
-.margin { margin:0; }
-.padding { padding:0; }
-.border { border:0; }
+.border { border: 1px solid #ccc; }
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-012-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-012-ref.html
index c00fd2cb832..8a2f7198a20 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-012-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-012-ref.html
@@ -2,27 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: isolation, bdi</title>
+<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 */
</style>
+<link rel=mismatch href="shaping-012-sanity-ref.html">
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping-000)</small><br/>
-<small>Skip this test if bdi and dir=auto don't produce isolation in this browser.</small></p>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
-<!-- Notes:
-This test only works if bdi and dir=auto are supported by the browser.
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-012-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-012-sanity-ref.html
new file mode 100644
index 00000000000..ce2a7ecbe5b
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-013-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-013-ref.html
deleted file mode 100644
index 199aeb9870f..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-013-ref.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>shaping: isolation, auto</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 DON'T join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping-000)</small><br/>
-<small>Skip this test if bdi and dir=auto don't produce isolation in this browser.</small></p>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
-<!-- Notes:
-This test only works if bdi and dir=auto are supported by the browser.
-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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-014-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-014-ref.html
index 1d08b44ed2f..f32ae1c23ec 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-014-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-014-ref.html
@@ -2,25 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: text-decoration</title>
+<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"; }
.styled { text-decoration: underline; }
</style>
+<link rel=mismatch href="shaping-014-sanity-ref.html">
</head>
<body>
-<p class="instructions">Test passes if both boxes look the same.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-014-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-014-sanity-ref.html
new file mode 100644
index 00000000000..c47d28e223b
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-015-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-015-ref.html
deleted file mode 100644
index 2269909e4ae..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-015-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>shaping: text-decoration</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 */
-.styled { text-decoration: underline; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
-<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>
-<!-- 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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-016-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-016-ref.html
index 5fa5cd09390..af931cd3c52 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-016-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-016-ref.html
@@ -2,26 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>shaping: outline</title>
+<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 */
.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 join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
-<!-- Notes:
-This test uses the Noto Naskh Arabic font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-016-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-016-sanity-ref.html
new file mode 100644
index 00000000000..15debe37b9e
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-017-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-017-ref.html
deleted file mode 100644
index 94ffc829ab4..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-017-ref.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>shaping: em element</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 */
-.styled { font-style: italic; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if both boxes look the same.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<em>&zwj;ع&zwj;</em>&zwj;ع</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> \ No newline at end of file
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-018-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-018-ref.html
deleted file mode 100644
index b53c5aeb8d9..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-018-ref.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>shaping: b element</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 */
-.styled { font-weight: bold; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<b>&zwj;ع&zwj;</b>&zwj;ع</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> \ No newline at end of file
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-020-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-020-ref.html
index b95a6d57342..b5c4d4dcbc0 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-020-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-020-ref.html
@@ -2,25 +2,22 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>n'ko, colour</title>
+<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 { 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 join.</p>
+<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>
-<!-- Notes:
-This test uses the Noto Sans N'Ko font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-020-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-020-sanity-ref.html
new file mode 100644
index 00000000000..da3a1469be0
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-021-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-021-ref.html
index f3b45a1377c..c4e63eff6fb 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-021-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-021-ref.html
@@ -2,25 +2,21 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>n'ko, font-style</title>
+<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 { 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 join.</p>
+<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>
-<!-- Notes:
-This test uses the Noto Sans N'Ko font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-021-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-021-sanity-ref.html
new file mode 100644
index 00000000000..103e38e6c6c
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-022-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-022-ref.html
index b0f60a57dd5..6db719d2c13 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-022-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-022-ref.html
@@ -2,7 +2,7 @@
<html lang="en" >
<head>
<meta charset="utf-8">
-<title>n'ko, text-decoration</title>
+<title>reference</title>
<style type="text/css">
@font-face {
font-family: 'csstest_noto';
@@ -14,13 +14,11 @@
/* 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 join.</p>
+<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>
-<!-- Notes:
-This test uses the Noto Sans N'Ko font to control variables related to font choice.
--->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-022-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-022-sanity-ref.html
new file mode 100644
index 00000000000..fe28ab3a579
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-023-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-023-ref.html
new file mode 100644
index 00000000000..35e6b75b4a0
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-023-sanity-2-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-023-sanity-2-ref.html
new file mode 100644
index 00000000000..cbde30c641b
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-023-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-023-sanity-ref.html
new file mode 100644
index 00000000000..966579be1c3
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-024-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-024-ref.html
new file mode 100644
index 00000000000..2a955ae1e16
--- /dev/null
+++ b/tests/wpt/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; 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">ᠨ&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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-024-sanity-2-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-024-sanity-2-ref.html
new file mode 100644
index 00000000000..657478d9c76
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-024-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-024-sanity-ref.html
new file mode 100644
index 00000000000..fe89eecf687
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-025-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-025-ref.html
new file mode 100644
index 00000000000..19d45f49830
--- /dev/null
+++ b/tests/wpt/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; 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">ᠨ&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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-025-sanity-2-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-025-sanity-2-ref.html
new file mode 100644
index 00000000000..95e0ba2172a
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-025-sanity-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping-025-sanity-ref.html
new file mode 100644
index 00000000000..a75dd158d45
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-001-ref.html
deleted file mode 100644
index 28f2d0ad063..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-001-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: colour</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 */
-.styled { color:blue; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small></p>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-002-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-002-ref.html
deleted file mode 100644
index e46a4663051..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-002-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: font-weight</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 */
-.styled { font-weight: bold; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-003-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-003-ref.html
deleted file mode 100644
index 835ad521fd0..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-003-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: font-style</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 */
-.styled { font-style: italic; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-004-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-004-ref.html
deleted file mode 100644
index 5ec1500dde8..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-004-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: margin 0</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 */
-.styled { margin:0; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-005-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-005-ref.html
deleted file mode 100644
index 4d83cf6ec09..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-005-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: padding 0</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 */
-.styled { padding:0; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-006-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-006-ref.html
deleted file mode 100644
index 3a293849849..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-006-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: border 0</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 */
-.styled { border:0; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-007-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-007-ref.html
deleted file mode 100644
index 950ef6457cd..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-007-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: font size 100%</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 */
-.styled { font-size:100%; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-008-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-008-ref.html
deleted file mode 100644
index 0e54de5098d..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-008-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: font size 120%</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 */
-.styled { font-size:120%; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-009-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-009-ref.html
deleted file mode 100644
index 9470b65ea50..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-009-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: margin &gt; 0</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: 5em; font-size: 120px; font-family: "csstest_noto"; }
-/* the CSS above is not part of the test */
-.styled { margin: 0.5em; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-010-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-010-ref.html
deleted file mode 100644
index 59f02a8d558..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-010-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: padding &gt; 0</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: 5em; font-size: 120px; font-family: "csstest_noto"; }
-/* the CSS above is not part of the test */
-.styled { padding: 0.5em; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-011-ref.html b/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-011-ref.html
deleted file mode 100644
index 83a5139a21a..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/reference/shaping_cchar-011-ref.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: border &gt; 0</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: 5em; font-size: 120px; font-family: "csstest_noto"; }
-/* the CSS above is not part of the test */
-.styled { border: 1px solid #ccc; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-000.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-000.html
index 6a56c09064d..cd682ac733c 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-000.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-000.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>shaping: span</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries with no styling change.">
+<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">
@@ -11,19 +11,17 @@
@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>
+<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">ع&zwj;<span>&zwj;ع&zwj;</span>&zwj;ع</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
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-001.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-001.html
index 5c5ac1a0cd4..ce10ea93d7f 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-001.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-001.html
@@ -3,16 +3,15 @@
<head>
<meta charset="utf-8">
<title>shaping: colour</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to colour.">
+<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');
- 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 */
@@ -21,7 +20,6 @@
</head>
<body>
<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
<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>
@@ -29,4 +27,4 @@
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-002.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-002.html
index f4b4122bf56..282e7d186d8 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-002.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-002.html
@@ -3,16 +3,16 @@
<head>
<meta charset="utf-8">
<title>shaping: font-weight</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes in font weight.">
+<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;
- 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 */
@@ -20,8 +20,7 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
@@ -29,4 +28,4 @@
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-003.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-003.html
index 3cc4b3dfc3f..58602316f4b 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-003.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-003.html
@@ -3,15 +3,15 @@
<head>
<meta charset="utf-8">
<title>shaping: font-style</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes in font style.">
+<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-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
@@ -20,8 +20,7 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
@@ -29,4 +28,4 @@
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-004.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-004.html
index 3b7d1724e5c..4eaa25ad4d5 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-004.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-004.html
@@ -3,16 +3,14 @@
<head>
<meta charset="utf-8">
<title>shaping: margin 0</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries when margin is set to 0.">
+<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-004-ref.html">
+<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');
- 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 */
@@ -20,8 +18,7 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
@@ -29,4 +26,4 @@
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-005.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-005.html
index 2ef446f6c5a..809ea2f41cd 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-005.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-005.html
@@ -3,16 +3,14 @@
<head>
<meta charset="utf-8">
<title>shaping: padding 0</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries when padding is set to 0.">
+<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-005-ref.html">
+<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');
- 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 */
@@ -20,8 +18,7 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
@@ -29,4 +26,4 @@
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-006.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-006.html
index 5fad09bc317..21a13c0487f 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-006.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-006.html
@@ -3,16 +3,14 @@
<head>
<meta charset="utf-8">
<title>shaping: border 0</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries when border is set to 0.">
+<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-006-ref.html">
+<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');
- 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 */
@@ -22,8 +20,7 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
@@ -31,4 +28,4 @@
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-007.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-007.html
index 33a81b6df1a..a4f3dc10ee2 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-007.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-007.html
@@ -3,16 +3,14 @@
<head>
<meta charset="utf-8">
<title>shaping: font size 100%</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries when font-size is set to 100%.">
+<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-007-ref.html">
+<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');
- 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 */
@@ -20,8 +18,7 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
@@ -29,4 +26,4 @@
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-008.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-008.html
index f7f1fad6035..509645b3494 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-008.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-008.html
@@ -3,16 +3,15 @@
<head>
<meta charset="utf-8">
<title>shaping: font size 120%</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to font-size.">
+<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');
- 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 */
@@ -20,8 +19,7 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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>
@@ -29,4 +27,4 @@
This test uses the Noto Naskh Arabic font to control variables related to font choice.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-009.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-009.html
index 979e5fd5906..4d1d1f7c978 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-009.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-009.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>shaping: margin &gt; 0</title>
-<meta name="assert" content="Shaping SHOULD be broken across inline box boundaries when marginis set to a non-zero value.">
+<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">
@@ -11,8 +11,6 @@
@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 */
@@ -20,12 +18,12 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-010.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-010.html
index 02f7ce38bc9..cd318542bbb 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-010.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-010.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>shaping: padding &gt; 0</title>
-<meta name="assert" content="Shaping SHOULD be broken across inline box boundaries when padding is set to a non-zero value.">
+<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">
@@ -11,8 +11,6 @@
@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 */
@@ -20,12 +18,12 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-011.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-011.html
index a2316f54877..64b464e80bf 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-011.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-011.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>shaping: border &gt; 0</title>
-<meta name="assert" content="Shaping SHOULD be broken across inline box boundaries when border is set to a non-zero value.">
+<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">
@@ -11,8 +11,6 @@
@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 */
@@ -20,12 +18,12 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters DON'T join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-012.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-012.html
index 6bc26206d32..6ae3a9ba2bf 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-012.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-012.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>shaping: isolation, bdi</title>
-<meta name="assert" content="Shaping SHOULD be broken across inline box boundaries when isolation occurs.">
+<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">
@@ -11,22 +11,19 @@
@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 DON'T join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping-000)</small><br/>
-<small>Skip this test if bdi and dir=auto don't produce isolation in this browser.</small></p>
+<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 and dir=auto are supported by the browser.
+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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-013.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-013.html
index a4b55b22c26..e9b3359e785 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-013.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-013.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>shaping: isolation, auto</title>
-<meta name="assert" content="Shaping SHOULD be broken across inline box boundaries when isolation occurs.">
+<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">
@@ -11,22 +11,19 @@
@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 DON'T join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping-000)</small><br/>
-<small>Skip this test if bdi and dir=auto don't produce isolation in this browser.</small></p>
+<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;<bdi>&zwnj;ع&zwnj;</bdi>&zwnj;ع</div>
+<div class="ref" lang="ar" dir="rtl">ع&zwnj;ع&zwnj;ع</div>
<!-- Notes:
-This test only works if bdi and dir=auto are supported by the browser.
+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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-014.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-014.html
index 100a7d78859..01e80c35f2f 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-014.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-014.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>shaping: text-decoration</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes in text-decoration.">
+<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">
@@ -11,8 +11,6 @@
@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 */
@@ -20,12 +18,12 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if both boxes look the same.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-015.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-015.html
deleted file mode 100644
index fcbc44a57dd..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-015.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>shaping: text-decoration</title>
-<meta name="assert" content="Shaping should 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-015-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 */
-.styled { text-decoration: underline; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
-<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> \ No newline at end of file
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-016.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-016.html
index da3246215f9..b1800565108 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-016.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-016.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>shaping: outline</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes in outline.">
+<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">
@@ -11,8 +11,6 @@
@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 */
@@ -20,12 +18,12 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-017.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-017.html
index cb1acef205f..e4dc68a126d 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-017.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-017.html
@@ -3,15 +3,15 @@
<head>
<meta charset="utf-8">
<title>shaping: em element</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries for the em element.">
+<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-017-ref.html">
+<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-weight: normal;
font-style: normal;
}
.test, .ref { border: 1px solid #02D7F6; margin: 20px; padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
@@ -20,8 +20,8 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if both boxes look the same.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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:
@@ -29,4 +29,4 @@ This test uses the Noto Naskh Arabic font to control variables related to font c
It also assumes that the default rendering for the em element is italic.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-018.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-018.html
index a4b69e96435..fc44d6e640d 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-018.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-018.html
@@ -3,16 +3,16 @@
<head>
<meta charset="utf-8">
<title>shaping: b element</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries for the b element.">
+<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-018-ref.html">
+<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;
- 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 */
@@ -20,8 +20,8 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Arabic characters join.</p>
-<small>Skip if markup alone breaks the join (test shaping-000)</small>
+<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:
@@ -29,4 +29,4 @@ This test uses the Noto Naskh Arabic font to control variables related to font c
It also assumes that the default rendering for the b element is bold.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-020.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-020.html
index 10f612c3a25..a88b339e344 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-020.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-020.html
@@ -6,13 +6,13 @@
<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');
- 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 */
@@ -20,11 +20,12 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three N'Ko characters join.</p>
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-021.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-021.html
index 53201685edb..b94a39e4db7 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-021.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-021.html
@@ -7,12 +7,11 @@
<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');
- 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 */
@@ -20,11 +19,12 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three N'Ko characters join.</p>
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-022.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-022.html
index 06dde6f370c..131b23253f9 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-022.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-022.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>n'ko, text-decoration</title>
-<meta name="assert" content="Shaping should not be broken across inline box boundaries for changes to text-decoration in N'Ko.">
+<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">
@@ -11,8 +11,6 @@
@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 */
@@ -20,11 +18,11 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three N'Ko characters join.</p>
+<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> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-023.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-023.html
index 4ab0c1b31a7..67009d57a78 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-023.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-023.html
@@ -6,25 +6,24 @@
<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');
- 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; }
+.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 join in the right-hand line.</p>
-<small>Skip the test if the line on the left isn't arranged vertically and joined up.</small>
-<div class="test" lang="mn" dir="rtl">ᠨᠨᠨ<br/>ᠨ<span class="styled">ᠨ</span>ᠨ</div>
+<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.
-The test is manual because Safari (and possibly other browsers) don't support joining for vertical Mongolian anyway, so ref tests wouldn't test the correct thing.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-024.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-024.html
index 306ce43663d..3ab2bbe9510 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-024.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-024.html
@@ -6,6 +6,8 @@
<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';
@@ -19,12 +21,11 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Mongolian characters join in the right-hand line.</p>
-<small>Skip the test if the line on the left isn't arranged vertically and joined up.</small>
-<div class="test" lang="mn" dir="rtl">ᠨᠨᠨ<br/>ᠨ<span class="styled">ᠨ</span>ᠨ</div>
+<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.
-The test is manual because Safari (and possibly other browsers) don't support joining for vertical Mongolian anyway, so ref tests wouldn't test the correct thing.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-025.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-025.html
index 0c08600bfc4..c888784cd45 100644
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-025.html
+++ b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping-025.html
@@ -6,6 +6,7 @@
<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';
@@ -19,12 +20,11 @@
</style>
</head>
<body>
-<p class="instructions">Test passes if the three Mongolian characters join in the right-hand line.</p>
-<small>Skip the test if the line on the left isn't arranged vertically and joined up.</small>
-<div class="test" lang="mn" dir="rtl">ᠨᠨᠨ<br/>ᠨ<span class="styled">ᠨ</span>ᠨ</div>
+<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.
-The test is manual because Safari (and possibly other browsers) don't support joining for vertical Mongolian anyway, so ref tests wouldn't test the correct thing.
-->
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-000.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-000.html
deleted file mode 100644
index 62490a2b48a..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-000.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>marked up diacritic: span</title>
-<meta name="assert" content="Shaping should not be broken by a span with no styling change for an intervening diacritic.">
-<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_cchar-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 Arabic base characters in each word join.</p>
-<div class="test" lang="ar" dir="rtl">ع<span>&#x064E;</span>ع ع<span>&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&#x064E;ع ع&#x0651;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-001.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-001.html
deleted file mode 100644
index 48ab60a20c8..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-001.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: colour</title>
-<meta name="assert" content="Shaping should not be broken for changes to colour for an intervening diacritic.">
-<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_cchar-001-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 */
-.styled { color:blue; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small></p>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-002.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-002.html
deleted file mode 100644
index 5885743d908..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-002.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: font-weight</title>
-<meta name="assert" content="Shaping should not be broken for changes in font weight for an intervening diacritic.">
-<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_cchar-002-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 */
-.styled { font-weight: bold; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-003.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-003.html
deleted file mode 100644
index 32f40dd45ed..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-003.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: font-style</title>
-<meta name="assert" content="Shaping should not be broken for changes in font style for an intervening diacritic.">
-<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_cchar-003-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 */
-.styled { font-style: italic; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-004.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-004.html
deleted file mode 100644
index 2b24475031e..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-004.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: margin 0</title>
-<meta name="assert" content="Shaping should not be broken when margin is set to 0 for an intervening diacritic.">
-<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_cchar-004-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 */
-.styled { margin:0; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-005.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-005.html
deleted file mode 100644
index 8454d4ea054..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-005.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: padding 0</title>
-<meta name="assert" content="Shaping should not be broken when padding is set to 0 for an intervening diacritic.">
-<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_cchar-005-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 */
-.styled { padding:0; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-006.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-006.html
deleted file mode 100644
index 5f36e7dde57..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-006.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: border 0</title>
-<meta name="assert" content="Shaping should not be broken when border is set to 0 for an intervening diacritic.">
-<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_cchar-006-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 */
-.styled { border:0; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-007.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-007.html
deleted file mode 100644
index bd9e44e6609..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-007.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: font size 100%</title>
-<meta name="assert" content="Shaping should not be broken when font-size is set to 100% for an intervening diacritic.">
-<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_cchar-007-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 */
-.styled { font-size:100%; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-008.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-008.html
deleted file mode 100644
index 17295db5234..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-008.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: font size 120%</title>
-<meta name="assert" content="Shaping should not be broken when font-size is changed for an intervening diacritic.">
-<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_cchar-008-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 */
-.styled { font-size:120%; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic base characters in each word join.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;&#x064E;&zwj;</span>&zwj;ع ع&zwj;<span class="styled">&zwj;&#x0651;&zwj;</span>&zwj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-009.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-009.html
deleted file mode 100644
index e17218d29a8..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-009.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: margin &gt; 0</title>
-<meta name="assert" content="Shaping SHOULD be broken when margin is set to a non-zero value on an intervening diacritic.">
-<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_cchar-009-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: 5em; font-size: 120px; font-family: "csstest_noto"; }
-/* the CSS above is not part of the test */
-.styled { margin: 0.5em; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-010.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-010.html
deleted file mode 100644
index 0f9d8a4c1fd..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-010.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: padding &gt; 0</title>
-<meta name="assert" content="Shaping SHOULD be broken when padding is set to a non-zero value on an intervening diacritic.">
-<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_cchar-010-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: 5em; font-size: 120px; font-family: "csstest_noto"; }
-/* the CSS above is not part of the test */
-.styled { padding: 0.5em; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</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/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-011.html b/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-011.html
deleted file mode 100644
index 8ab7606d9ce..00000000000
--- a/tests/wpt/web-platform-tests/css/css-text/shaping/shaping_cchar-011.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-<meta charset="utf-8">
-<title>styled diacritic: border &gt; 0</title>
-<meta name="assert" content="Shaping SHOULD be broken when border is set to a non-zero value on an intervening diacritic.">
-<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_cchar-011-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: 5em; font-size: 120px; font-family: "csstest_noto"; }
-/* the CSS above is not part of the test */
-.styled { border: 1px solid #ccc; }
-</style>
-</head>
-<body>
-<p class="instructions">Test passes if the Arabic characters DON'T show joining forms.</p>
-<p><small>Skip if markup alone breaks the join (test shaping_cchar-000)</small><br/>
-<div class="test" lang="ar" dir="rtl">ع<span class="styled">&#x064E;</span>ع ع<span class="styled">&#x0651;</span>ع</div>
-<div class="ref" lang="ar" dir="rtl">ع&zwnj;<span class="styled">&zwnj;&#x064E;&zwnj;</span>&zwnj;ع ع&zwnj;<span class="styled">&zwnj;&#x0651;&zwnj;</span>&zwnj;ع</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/tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-join-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-join-001-ref.html
new file mode 100644
index 00000000000..1baeea5b0b5
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-no-join-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-no-join-001-ref.html
new file mode 100644
index 00000000000..4bf1b4aed7a
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-tatweel-001-ref.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-tatweel-001-ref.html
new file mode 100644
index 00000000000..87880e666a3
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-tatweel-002-ref.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/reference/shaping-tatweel-002-ref.html
new file mode 100644
index 00000000000..4393172ac2d
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-join-001.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-join-001.html
new file mode 100644
index 00000000000..c4a4d00c92f
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-join-002.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-join-002.html
new file mode 100644
index 00000000000..1e4eaf7fe99
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-join-003.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-join-003.html
new file mode 100644
index 00000000000..71459335d48
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-no-join-001.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-no-join-001.html
new file mode 100644
index 00000000000..738189d3a3d
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-no-join-002.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-no-join-002.html
new file mode 100644
index 00000000000..14fa73ed859
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-no-join-003.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-no-join-003.html
new file mode 100644
index 00000000000..e7d8c857018
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-tatweel-001.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-tatweel-001.html
new file mode 100644
index 00000000000..eaf5c9d3381
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-tatweel-002.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-tatweel-002.html
new file mode 100644
index 00000000000..f6878efe70f
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-tatweel-003.html b/tests/wpt/web-platform-tests/css/css-text/text-encoding/shaping-tatweel-003.html
new file mode 100644
index 00000000000..7e7107bc739
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-003.html b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-003.html
index c0101fd7dec..c7a8693fef1 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-003.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-003.html
@@ -13,7 +13,6 @@ between the last character of a word and the first space of a sequence of preser
if there are other wrapping opportunities earlier in the line.">
<style>
div {
- position: relative;
font: 25px/1 Ahem;
}
.fail {
diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-004.html b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-004.html
index 13770b7b8d1..75b9a0da4e6 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-004.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-004.html
@@ -11,7 +11,6 @@
<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the 'white-space: break-spaces' value.">
<style>
div {
- position: relative;
font: 20px/1 Ahem;
}
.fail {
diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-005.html b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-005.html
index c7f996fbc7b..89bf9cbd97d 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-005.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-005.html
@@ -9,7 +9,6 @@
<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.">
<style>
div {
- position: relative;
font: 10px/1 Ahem;
}
.fail {
diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-006.html b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-006.html
index f3973169303..b8d12a18440 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-006.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-006.html
@@ -11,7 +11,6 @@
<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.">
<style>
div {
- position: relative;
font: 25px/1 Ahem;
}
.fail {
diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-007.html b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-007.html
index d14aae72f51..c7242c27e5c 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-007.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-007.html
@@ -8,10 +8,9 @@
<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 hangs when breaking after it to move the rest of the text to the next line.">
+<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.">
<style>
div {
- position: relative;
font: 25px/1 Ahem;
}
.fail {
diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-008.html b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-008.html
index 7bcb9dd3375..4e6e9efa7e6 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-008.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-008.html
@@ -11,7 +11,6 @@
<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 first white-space after the word honoring the 'break-all' value.">
<style>
div {
- position: relative;
font: 25px/1 Ahem;
}
.fail {
diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-009.html b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-009.html
index 9ecaa919ddf..36aa9dafd6e 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-009.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/break-spaces-009.html
@@ -13,7 +13,6 @@ between the last character of a word and the first space of a sequence of preser
if there are no other wrapping opportunities earlier in the line">
<style>
div {
- position: relative;
font: 25px/1 Ahem;
}
.red {
@@ -27,7 +26,6 @@ div {
background: green;
color: red;
width: 4ch;
- z-index: -1;
white-space: break-spaces;
word-break: break-word;
diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/control-chars-00C.html b/tests/wpt/web-platform-tests/css/css-text/white-space/control-chars-00C.html
new file mode 100644
index 00000000000..db20bc72056
--- /dev/null
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-008.html b/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-008.html
index 1ddbb7fe356..7e4a24993f1 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-008.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-008.html
@@ -9,7 +9,6 @@
<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.">
<style>
div {
- position: relative;
font-size: 20px;
font-family: Ahem;
}
diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-015.html b/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-015.html
index 176259b72ed..d3f51bc429d 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-015.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-015.html
@@ -9,7 +9,6 @@
<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">
<style>
div {
- position: relative;
font: 20px/1 Ahem;
}
.ref {
diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-016.html b/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-016.html
index e88c3eda199..18dd834d813 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-016.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/pre-wrap-016.html
@@ -9,7 +9,6 @@
<meta name="assert" content="The word is not broken if there are previous breaking opportunities, honoring the white-space: pre-wrap value.">
<style>
div {
- position: relative;
font-size: 20px;
font-family: Ahem;
line-height: 1em;
diff --git a/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-break-spaces-005-ref.html b/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-break-spaces-005-ref.html
index 3247ae5a881..dece5f73944 100644
--- a/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-break-spaces-005-ref.html
+++ b/tests/wpt/web-platform-tests/css/css-text/white-space/reference/white-space-break-spaces-005-ref.html
@@ -4,7 +4,6 @@
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<style>
div {
- position: relative;
width: 100px;
height: 100px;
background: green;