summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-text/hyphens/reference
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-text/hyphens/reference
parentInitial commit. (diff)
downloadfirefox-upstream.tar.xz
firefox-upstream.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-text/hyphens/reference')
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-001-ref.html18
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-003-ref.html18
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-004-ref.html18
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-005-ref.html19
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-limit-chars-001-ref.html26
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-001-ref.html20
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-002-ref.html15
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004H-ref.html28
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004M-ref.html28
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005H-ref.html28
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005M-ref.html28
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010H-ref.html29
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010M-ref.html29
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010H-ref.html29
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010M-ref.html29
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref.html15
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref2.html15
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-character-ref.html31
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-010-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011H-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011M-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013H-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013M-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-010-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011H-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011M-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012H-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012M-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-out-of-flow-001-ref.html22
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-overflow-001-ref.html21
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-punctuation-001-ref.html12
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html25
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html6
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html24
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html22
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-001-ref.html27
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-002-ref.html28
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-003-ref.html28
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-004-ref.html29
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html15
-rw-r--r--testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-ref.html15
41 files changed, 967 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-001-ref.html
new file mode 100644
index 0000000000..3014cb9fb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+ font: 16px monospace;
+}
+</style>
+
+<p>Test passes if the words below are broken at hyphenation positions but <b>no visible hyphens appear</b>.
+
+<div lang="en">
+im<br>ple<br>men<br>ta<br>tion<br><br>
+ini<br>tial<br>iza<br>tion<br><br>
+real<br>iza<br>tion<br><br>
+hy<br>phen<br>ation
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-003-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-003-ref.html
new file mode 100644
index 0000000000..f8bce3c302
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-003-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+ font: 16px monospace;
+}
+</style>
+
+<p>Test passes if the words below are hyphenated <b>using a bullet (&#x2022;) character</b>.
+
+<div lang="en">
+im•<br>ple•<br>men•<br>ta•<br>tion<br><br>
+ini•<br>tial•<br>iza•<br>tion<br><br>
+real•<br>iza•<br>tion<br><br>
+hy•<br>phen•<br>ation
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-004-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-004-ref.html
new file mode 100644
index 0000000000..399f867210
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-004-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+ font: 16px monospace;
+}
+</style>
+
+<p>Test passes if the words below are hyphenated <b>using the string "/-/"</b>.
+
+<div lang="en">
+im/-/<br>ple/-/<br>men/-/<br>tation<br><br>
+ini/-/<br>tial/-/<br>iza/-/<br>tion<br><br>
+re/-/<br>al/-/<br>iza/-/<br>tion<br><br>
+hy/-/<br>phen/-/<br>ation
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-005-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-005-ref.html
new file mode 100644
index 0000000000..50a0ebd585
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-character-005-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: hyphenate-character</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+div {
+ font: 32px sans-serif;
+ margin-left: 10ch;
+ width: 3ch;
+}
+</style>
+
+<p>Test passes if the word below is hyphenated
+using a right-to-left <i>space+kashida</i> sequence "<span dir=rtl>&nbsp;&#x0640;</span>",
+and shaping is <i>not</i> interrupted.
+
+<div dir=rtl lang=ug>
+قىل&#x200d;&nbsp;&#x640;<br>&#x200d;مىغانلىقى
+</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-limit-chars-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-limit-chars-001-ref.html
new file mode 100644
index 0000000000..c491fbca27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphenate-limit-chars-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSS Text: 'hyphens: auto' with a valid 'lang' attribute specification</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#hyphenation">
+<link rel="author" href="mailto:kojii@chromium.org">
+<style>
+#container > div {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 20px;
+ line-height: 1;
+ width: 1ch;
+}
+</style>
+<body>
+ <div lang="en-us" id="container">
+ <div>ex-<br>am-<br>ple</div>
+ <div>example</div>
+ <div>ex-<br>am-<br>ple</div>
+ <div>exam-<br>ple</div>
+ <div>exam-<br>ple</div>
+ <div>example</div>
+ <div>ex-<br>am-<br>ple</div>
+ <div>ex-<br>ample</div>
+ <div>example</div>
+ </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-001-ref.html
new file mode 100644
index 0000000000..c1355d0abb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test Reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div { white-space: pre; }
+</style>
+
+<p>Test passes if none of the words below are hyphenated.
+<div>implementation
+initialization
+realization
+hyphenation
+anticonstitutionnellement
+intergouvernementalisation
+dichlorodiphényltrichloroéthane
+honorificabilitudinitatibus
+Wiedervereinigung
+Rechtsschutzversicherungsgesellschaften</div>
+
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-002-ref.html
new file mode 100644
index 0000000000..dece5f7394
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-002-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Reference File</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+<style>
+div {
+ width: 100px;
+ height: 100px;
+ background: green;
+}
+</style>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004H-ref.html
new file mode 100644
index 0000000000..cb26d85e8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004H-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+ <style>
+ div
+ {
+ border: solid 1px;
+ font: 32px/1 monospace;
+ width: 6ch;
+ }
+ </style>
+
+ <body lang="en">
+
+ <div>regu&#x002D;<br>lation<br><br>imple&#x002D;<br>menta&#x002D;<br>tion<br>now</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004M-ref.html
new file mode 100644
index 0000000000..4e234bf76d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-004M-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+ <style>
+ div
+ {
+ border: solid 1px;
+ font: 32px/1 monospace;
+ width: 6ch;
+ }
+ </style>
+
+ <body lang="en">
+
+ <div>regu&#x2010;<br>lation<br><br>imple&#x2010;<br>menta&#x2010;<br>tion<br>now</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005H-ref.html
new file mode 100644
index 0000000000..6bd86d36aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005H-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+ <style>
+ div
+ {
+ border: solid 1px;
+ font: 50px/1 monospace;
+ width: 4ch;
+ }
+ </style>
+
+ <body>
+
+ <div>reg&#x002D;<br>ula&#x002D;<br>tion</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005M-ref.html
new file mode 100644
index 0000000000..38b00cef8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-005M-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
+
+ <style>
+ div
+ {
+ border: solid 1px;
+ font: 50px/1 monospace;
+ width: 4ch;
+ }
+ </style>
+
+ <body>
+
+ <div>reg&#x2010;<br>ula&#x2010;<br>tion</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010H-ref.html
new file mode 100644
index 0000000000..6d453b9560
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010H-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 6ch;
+ }
+ </style>
+
+ <body lang="en">
+
+ <div>regu&#x2010;<br>lation<br>imple&#x2010;<br>menta&#x2010;<br>tion<br>now</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010M-ref.html
new file mode 100644
index 0000000000..27adc3f08f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-010M-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 6ch;
+ }
+ </style>
+
+ <body lang="en">
+
+ <div>regu&#x002D;<br>lation<br>imple&#x002D;<br>menta&#x002D;<br>tion<br>now</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010H-ref.html
new file mode 100644
index 0000000000..0a3aedf286
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010H-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 6ch;
+ }
+ </style>
+
+ <body lang="en">
+
+ <div>There<br>are<br>new<br>en&#x2010;<br>gines<br>now.</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010M-ref.html
new file mode 100644
index 0000000000..59f5247e50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-inline-010M-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 6ch;
+ }
+ </style>
+
+ <body lang="en">
+
+ <div>There<br>are<br>new<br>en&#x002D;<br>gines<br>now.</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref.html
new file mode 100644
index 0000000000..7fe23fe75d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+div {
+ width: 5ch;
+ border: 1px solid blue;
+}
+</style>
+<body lang="en-us">
+ <div style="width: 10ch">Test ex&shy;am&shy;ple</div>
+ <div>ex&shy;am&shy;ple</div>
+ <div>1 ex&shy;am&shy;ple</div>
+ <div>1234 ex&shy;am&shy;ple</div>
+ <div>ex&shy;am&shy;ple 5678</div>
+ <div>1234 ex&shy;am&shy;ple 5678</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref2.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref2.html
new file mode 100644
index 0000000000..9c9f41312e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-auto-last-word-001-ref2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+div {
+ width: 5ch;
+ border: 1px solid blue;
+}
+</style>
+<body lang="en-us">
+ <div style="width: 10ch">Test example</div>
+ <div>ex&shy;am&shy;ple</div>
+ <div>1<br>ex&shy;am&shy;ple</div>
+ <div>1234 ex&shy;am&shy;ple</div>
+ <div>ex&shy;am&shy;ple 5678</div>
+ <div>1234 ex&shy;am&shy;ple 5678</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-character-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-character-ref.html
new file mode 100644
index 0000000000..7e590a1f75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-character-ref.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en" class="reftest-wait">
+ <link rel="author" title="Dominik Röttsches" href="mailto:drott@chromium.org">
+ <meta charset="utf-8" />
+ <style>
+ @font-face {
+ font-family: roboto_hyphen;
+ src: url(../resources/roboto_hyphenation_subset.ttf)
+ }
+
+ div {
+ width: 30px;
+ hyphens: auto;
+ -webkit-hyphens: auto;
+ font-family: roboto_hyphen, cursive;
+ }
+ </style>
+ <body>
+ <div>
+ Do-<br>
+ nau-<br>
+ dampf-<br>
+ schiff-<br>
+ fahrt
+ </div>
+ <script>
+ document.fonts.ready.then(
+ () => { document.documentElement.classList.remove("reftest-wait"); });
+ </script>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-010-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-010-ref.html
new file mode 100644
index 0000000000..f79ce17a4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-010-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ hyphens: none;
+ margin-bottom: 0.25em;
+ width: 10ch;
+ }
+ </style>
+
+ <body lang="en">
+
+ <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles.
+
+ <div>Deoxyribonucleic acid</div>
+
+ <div>Deoxyribonucleic acid</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011H-ref.html
new file mode 100644
index 0000000000..99612206f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011H-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 10ch;
+ }
+ </style>
+
+ <div>Deoxyribo&#x2010;<br>nucleic acid</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011M-ref.html
new file mode 100644
index 0000000000..191095a413
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-011M-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 10ch;
+ }
+ </style>
+
+ <div>Deoxyribo&#x002D;<br>nucleic acid</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013H-ref.html
new file mode 100644
index 0000000000..12ad0ed505
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013H-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 10ch;
+ }
+ </style>
+
+ <div>Deoxy&#x2010;<br>ribonucleic acid</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013M-ref.html
new file mode 100644
index 0000000000..3c7121242b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-013M-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 10ch;
+ }
+ </style>
+
+ <div>Deoxy&#x002D;<br>ribonucleic acid</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-010-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-010-ref.html
new file mode 100644
index 0000000000..a55fe859ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-010-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ hyphens: none;
+ margin-bottom: 0.25em;
+ width: 10ch;
+ }
+ </style>
+
+ <body lang="en">
+
+ <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. Only "ucleic" should be outside of the black-bordered rectangles.
+
+ <div>DNA means Deoxyribonucleic acid.</div>
+
+ <div>DNA means Deoxyribonucleic acid.</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011H-ref.html
new file mode 100644
index 0000000000..0cd1ef9f9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011H-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 10ch;
+ }
+ </style>
+
+ <div>DNA means<br>Deoxyribo&#x2010;<br>nucleic<br>acid.</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011M-ref.html
new file mode 100644
index 0000000000..836919648e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-011M-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 10ch;
+ }
+ </style>
+
+ <div>DNA means<br>Deoxyribo&#x002D;<br>nucleic<br>acid.</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012H-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012H-ref.html
new file mode 100644
index 0000000000..8b2ff04ade
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012H-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 8ch;
+ }
+ </style>
+
+ <div>DNA<br>means<br>Deoxy&#x2010;<br>ribonu&#x2010;<br>cleic<br>acid.</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012M-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012M-ref.html
new file mode 100644
index 0000000000..0c8db033c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-manual-inline-012M-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div
+ {
+ border: black solid 2px;
+ font-family: monospace;
+ font-size: 32px;
+ width: 8ch;
+ }
+ </style>
+
+ <div>DNA<br>means<br>Deoxy&#x002D;<br>ribonu&#x002D;<br>cleic<br>acid.</div>
+
+<!--
+
+ Hyphen-minus == &#x002D; == &#0045;
+
+ Hyphen == &#x2010; == &#8208;
+
+-->
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-out-of-flow-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-out-of-flow-001-ref.html
new file mode 100644
index 0000000000..7339447924
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-out-of-flow-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+ border: solid orange;
+ margin: 5px;
+ width: 6ch;
+ hyphens: manual;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-overflow-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-overflow-001-ref.html
new file mode 100644
index 0000000000..db002ce45d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-overflow-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+ font-size: 10px;
+ font-family: Ahem;
+ width: 5.1ch;
+ border: 1px solid blue;
+}
+</style>
+<body>
+ <div>12 4-<br>xx</div>
+ <div>12<br>45xx</div>
+ <div>12<br>456xx</div>
+ <div>1234-<br>xx</div>
+ <div>12345-<br>xx</div>
+ <div>123456-<br>xx</div>
+
+ <div style="width: 10ch">renfor-<br>cer99999</div>
+ <div>00-<br>1222</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-punctuation-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-punctuation-001-ref.html
new file mode 100644
index 0000000000..75e2363789
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-punctuation-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+div {
+ width: 5ch;
+ border: 1px solid blue;
+}
+</style>
+<body lang="en-us">
+ <div>00000 ex&shy;am&shy;ple 00000</div>
+ <div>00000 ex&shy;am&shy;ple. 00000</div>
+ <div>00000 (ex&shy;am&shy;ple 00000</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html
new file mode 100644
index 0000000000..9eb1d7fd68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+<style>
+ @font-face {
+ font-family: 'csstest_noto';
+ src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
+ }
+ div {
+ font-family: 'csstest_noto';
+ font-size: 3em;
+ line-height: 1; /* Not strictly needed, but it gets quite tall otherwise, so this helps fit the screen. */
+ width: 0;
+ hyphens: manual;
+ margin: 1em auto;
+ }
+ .ref { color: orange; }
+</style>
+
+<p>Test passes if the black text is identical to the orange text (except the color).
+
+<div dir=rtl lang=ug class=ref>&#xFEA9;&#xFE8D;&#xFEE3;&#xFEF4;<br>&#xFEAA;&#xFEEF;</div>
+
+<div dir=rtl lang=ug>&#xFEA9;&#xFE8D;&#xFEE3;&#xFEF4;<br>&#xFEAA;&#xFEEF;</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html
new file mode 100644
index 0000000000..d8e31d71e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-shaping-002-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text level 3 Test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
+
+<p>Test passes if there is something below:
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html
new file mode 100644
index 0000000000..cbe3726137
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-001-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+ border: solid orange;
+ margin: 5px;
+ width: 6ch;
+ hyphens: manual;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
+<div>high&shy;way</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html
new file mode 100644
index 0000000000..7b3f820641
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-span-002-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+ border: solid orange;
+ margin: 5px;
+ width: 6ch;
+ hyphens: auto;
+}
+</style>
+
+<p>Test passes if the text in all orange boxes below is identical (including the presence and position of a hyphen).
+
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
+<div lang=en>highway</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-001-ref.html
new file mode 100644
index 0000000000..5be7a840d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-001-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+ div {
+ font: 16px monospace;
+ writing-mode: vertical-rl;
+ border: 1px solid gray;
+ margin: 10px;
+ padding: 2px;
+ hyphens: manual;
+ width: 3em;
+ height: 9ch;
+ }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+ hyphen&#x2010;<br>ation
+</div>
+
+<div>
+ hyphen&#x2010;<br>ation
+</div> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-002-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-002-ref.html
new file mode 100644
index 0000000000..cb240212bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-002-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+ div {
+ font: 16px monospace;
+ writing-mode: vertical-rl;
+ text-orientation: upright;
+ border: 1px solid gray;
+ margin: 10px;
+ padding: 2px;
+ hyphens: manual;
+ width: 3em;
+ height: 9ch;
+ }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+ hyphen&#x2010;<br>ation
+</div>
+
+<div>
+ hyphen&#x2010;<br>ation
+</div> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-003-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-003-ref.html
new file mode 100644
index 0000000000..6d3ea15845
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-003-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+ div {
+ font: 16px monospace;
+ writing-mode: vertical-rl;
+ border: 1px solid gray;
+ margin: 10px;
+ padding: 2px;
+ hyphens: manual;
+ width: 3em;
+ height: 9ch;
+ hyphenate-character: "+=";
+ }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+ hyphen+=<br>ation
+</div>
+
+<div>
+ hyphen+=<br>ation
+</div> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-004-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-004-ref.html
new file mode 100644
index 0000000000..63c751165f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/hyphens-vertical-004-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text reference: soft hyphens in vertical writing mode</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+ div {
+ font: 16px monospace;
+ writing-mode: vertical-rl;
+ text-orientation: upright;
+ border: 1px solid gray;
+ margin: 10px;
+ padding: 2px;
+ hyphens: manual;
+ width: 3em;
+ height: 9ch;
+ hyphenate-character: "+=";
+ }
+</style>
+
+<p>Test passes if the two boxes look the same:</p>
+
+<div>
+ hyphen+=<br>ation
+</div>
+
+<div>
+ hyphen+=<br>ation
+</div> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html
new file mode 100644
index 0000000000..c86cb50028
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-alt-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+span {
+ font-size: 3em;
+ color: red;
+ text-shadow: 3px 3px 3px black;
+}
+</style>
+
+<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
+
+<div>ex<span>&#x2010;</span><br>ample</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-ref.html b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-ref.html
new file mode 100644
index 0000000000..ad9df16e35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/reference/shy-styling-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+span {
+ font-size: 3em;
+ color: red;
+ text-shadow: 3px 3px 3px black;
+}
+</style>
+
+<p>Test passes if the word “example” below is hyphenated, and the hyphen is large, red, and has a shadow
+
+<div>ex<span>&#x002D;</span><br>ample</div>