summaryrefslogtreecommitdiffstats
path: root/layout/reftests/w3c-css/submitted/writing-modes-3
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/reftests/w3c-css/submitted/writing-modes-3
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/w3c-css/submitted/writing-modes-3')
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001-ref.html88
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001.html99
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/reftest-stylo.list18
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/reftest.list17
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/support/WidthTest-Regular.otfbin0 -> 3248 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/support/tcy.css11
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/support/width-test.css7
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001-ref.html21
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001.html24
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001a.html26
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001-ref.html21
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001.html24
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002-ref.html21
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002.html24
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003-ref.html21
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003.html24
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004-ref.html21
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004.html24
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005-ref.html21
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005.html24
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005a.html25
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006-ref.html21
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006.html24
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006a.html25
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007-ref.html21
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007.html25
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001-ref.html19
-rw-r--r--layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001.html21
28 files changed, 717 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001-ref.html
new file mode 100644
index 000000000..9fea986c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: border-block and border-inline logical properties in different writing modes</title>
+<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
+<style>
+#body tr td:nth-child(2) div {
+ writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(3) div {
+ writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(4) div {
+ writing-mode: vertical-rl;
+}
+#body tr td:nth-child(5) div {
+ writing-mode: vertical-rl;
+}
+#body tr td:nth-child(6) div {
+ writing-mode: vertical-lr;
+}
+#body tr td:nth-child(7) div {
+ writing-mode: vertical-lr;
+}
+#body tr td:nth-child(8) div {
+ writing-mode: sideways-lr;
+}
+#body tr td:nth-child(9) div {
+ writing-mode: sideways-lr;
+}
+
+
+#body tr td:nth-child(2n+2) div {
+ direction: ltr;
+}
+#body tr td:nth-child(2n+3) div {
+ direction: rtl;
+}
+
+
+td {
+ padding: 5px;
+ font-size: 13px;
+ background-color: silver;
+ width: 70px;
+ height: 70px;
+}
+
+
+.top {
+ border-bottom: 2px dotted blue;
+ border-top: 2px dotted orange;
+}
+.right {
+ border-left: 2px dotted blue;
+ border-right: 2px dotted orange;
+}
+
+.bottom {
+ border-top: 2px dotted blue;
+ border-bottom: 2px dotted orange;
+}
+.left {
+ border-right: 2px dotted blue;
+ border-left: 2px dotted orange;
+}
+</style>
+</head>
+<body>
+<p>
+ Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell.
+</p>
+<table>
+<thead>
+ <tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr>
+ <tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
+</thead>
+<tbody id=body>
+ <tr id=block-start><th>block-start</th> <td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr>
+ <tr id=block-end><th>block-end</th> <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr>
+ <tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr>
+ <tr id=inline-end><th>inline-end</th> <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr>
+</tbody>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001.html
new file mode 100644
index 000000000..76f3149bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: border-block and border-inline logical properties in different writing modes</title>
+<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<link rel="match" href="logical-physical-mapping-001-ref.html">
+<style>
+#block-start div.outer div {
+ border-block-start: dotted 2px orange;
+}
+#block-end div.outer div {
+ border-block-end: dotted 2px orange;
+}
+#inline-start div.outer div {
+ border-inline-start: dotted 2px orange;
+}
+#inline-end div.outer div {
+ border-inline-end: dotted 2px orange;
+}
+
+#body tr td:nth-child(2) div {
+ writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(3) div {
+ writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(4) div {
+ writing-mode: vertical-rl;
+}
+#body tr td:nth-child(5) div {
+ writing-mode: vertical-rl;
+}
+#body tr td:nth-child(6) div {
+ writing-mode: vertical-lr;
+}
+#body tr td:nth-child(7) div {
+ writing-mode: vertical-lr;
+}
+#body tr td:nth-child(8) div {
+ writing-mode: sideways-lr;
+}
+#body tr td:nth-child(9) div {
+ writing-mode: sideways-lr;
+}
+
+
+#body tr td:nth-child(2n+2) div {
+ direction: ltr;
+}
+#body tr td:nth-child(2n+3) div {
+ direction: rtl;
+}
+
+
+td {
+ padding: 5px;
+ font-size: 13px;
+ background-color: silver;
+ width: 70px;
+ height: 70px;
+}
+
+
+.top {
+ border-bottom: 2px dotted blue;
+}
+.right {
+ border-left: 2px dotted blue;
+}
+
+.bottom {
+ border-top: 2px dotted blue;
+}
+.left {
+ border-right: 2px dotted blue;
+}
+</style>
+</head>
+<body>
+<p>
+ Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell.
+</p>
+<table>
+<thead>
+ <tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr>
+ <tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
+</thead>
+<tbody id=body>
+ <tr id=block-start><th>block-start</th> <td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr>
+ <tr id=block-end><th>block-end</th> <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr>
+ <tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr>
+ <tr id=inline-end><th>inline-end</th> <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr>
+</tbody>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest-stylo.list
new file mode 100644
index 000000000..5b10baf15
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest-stylo.list
@@ -0,0 +1,18 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences pref(layout.css.text-combine-upright.enabled,true)
+
+== text-combine-upright-break-inside-001.html text-combine-upright-break-inside-001.html
+== text-combine-upright-break-inside-001a.html text-combine-upright-break-inside-001a.html
+== text-combine-upright-compression-001.html text-combine-upright-compression-001.html
+== text-combine-upright-compression-002.html text-combine-upright-compression-002.html
+== text-combine-upright-compression-003.html text-combine-upright-compression-003.html
+== text-combine-upright-compression-004.html text-combine-upright-compression-004.html
+== text-combine-upright-compression-005.html text-combine-upright-compression-005.html
+== text-combine-upright-compression-005a.html text-combine-upright-compression-005a.html
+== text-combine-upright-compression-006.html text-combine-upright-compression-006.html
+== text-combine-upright-compression-006a.html text-combine-upright-compression-006a.html
+== text-combine-upright-compression-007.html text-combine-upright-compression-007.html
+
+== text-orientation-upright-directionality-001.html text-orientation-upright-directionality-001.html
+
+== logical-physical-mapping-001.html logical-physical-mapping-001.html
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/reftest.list b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest.list
new file mode 100644
index 000000000..bc8158275
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest.list
@@ -0,0 +1,17 @@
+default-preferences pref(layout.css.text-combine-upright.enabled,true)
+
+== text-combine-upright-break-inside-001.html text-combine-upright-break-inside-001-ref.html
+== text-combine-upright-break-inside-001a.html text-combine-upright-break-inside-001-ref.html
+== text-combine-upright-compression-001.html text-combine-upright-compression-001-ref.html
+== text-combine-upright-compression-002.html text-combine-upright-compression-002-ref.html
+== text-combine-upright-compression-003.html text-combine-upright-compression-003-ref.html
+== text-combine-upright-compression-004.html text-combine-upright-compression-004-ref.html
+== text-combine-upright-compression-005.html text-combine-upright-compression-005-ref.html
+== text-combine-upright-compression-005a.html text-combine-upright-compression-005-ref.html
+== text-combine-upright-compression-006.html text-combine-upright-compression-006-ref.html
+== text-combine-upright-compression-006a.html text-combine-upright-compression-006-ref.html
+== text-combine-upright-compression-007.html text-combine-upright-compression-007-ref.html
+
+== text-orientation-upright-directionality-001.html text-orientation-upright-directionality-001-ref.html
+
+== logical-physical-mapping-001.html logical-physical-mapping-001-ref.html
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/support/WidthTest-Regular.otf b/layout/reftests/w3c-css/submitted/writing-modes-3/support/WidthTest-Regular.otf
new file mode 100644
index 000000000..06b1d3c02
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/support/WidthTest-Regular.otf
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/support/tcy.css b/layout/reftests/w3c-css/submitted/writing-modes-3/support/tcy.css
new file mode 100644
index 000000000..0117e215e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/support/tcy.css
@@ -0,0 +1,11 @@
+.tcy {
+ text-combine-upright: all;
+}
+.fake-tcy {
+ display: inline-block;
+ writing-mode: horizontal-tb;
+ width: 1em;
+ height: 1em;
+ text-align: center;
+ line-height: 1em;
+}
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/support/width-test.css b/layout/reftests/w3c-css/submitted/writing-modes-3/support/width-test.css
new file mode 100644
index 000000000..4f15976cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/support/width-test.css
@@ -0,0 +1,7 @@
+@font-face {
+ font-family: WidthTest;
+ src: url(WidthTest-Regular.otf);
+}
+.test {
+ font: 72px/1 WidthTest;
+}
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001-ref.html
new file mode 100644
index 000000000..9c6745667
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, no line break</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { height: 3em; margin: 0 5em; }
+.tcy, .fake-tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the two columns are identical.</p>
+<div class="test">
+ <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+ <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001.html
new file mode 100644
index 000000000..5248c076d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, whitespace inside tcy with insufficient line space</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout">
+<link rel="match" href="text-combine-upright-break-inside-001-ref.html">
+<meta name="assert" content="line should never be broken inside text-combine-upright text node">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { height: 3em; margin: 0 5em; }
+.tcy, .fake-tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the two columns are identical.</p>
+<div class="test">
+ <p>XXXXX<span class="tcy">X X</span>XXXXX</p>
+ <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001a.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001a.html
new file mode 100644
index 000000000..d4c4bd649
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, white-space: pre with new line</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout">
+<link rel="match" href="text-combine-upright-break-inside-001-ref.html">
+<meta name="assert" content="line should never be broken inside text-combine-upright text node">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { height: 3em; margin: 0 5em; }
+.tcy { white-space: pre; }
+.tcy, .fake-tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the two columns are identical.</p>
+<div class="test">
+ <p>XXXXX<span class="tcy">X
+X</span>XXXXX</p>
+ <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001-ref.html
new file mode 100644
index 000000000..b1971474e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, no compression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical zeros in the blocks below.</p>
+<div class="test">
+ <p><span class="fake-tcy">0</span></p>
+ <p><span class="fake-tcy">0</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001.html
new file mode 100644
index 000000000..304431bda
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, no compression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-001-ref.html">
+<meta name="assert" content="text-combine-upright with character not wider than 1em should not trigger compression.">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical zeros in the blocks below.</p>
+<div class="test">
+ <p><span class="tcy">0</span></p>
+ <p><span class="fake-tcy">0</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002-ref.html
new file mode 100644
index 000000000..dd05022c0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression of two characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="fake-tcy">22</span></p>
+ <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002.html
new file mode 100644
index 000000000..2be48da2d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression of two characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-002-ref.html">
+<meta name="assert" content="text-combine-upright should try applying 'hwid' feature if the width is wider than 1em">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="tcy">00</span></p>
+ <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003-ref.html
new file mode 100644
index 000000000..6c6ea736f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression of three characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="fake-tcy">333</span></p>
+ <p><span class="fake-tcy">333</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003.html
new file mode 100644
index 000000000..5b22fb365
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression of three characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-003-ref.html">
+<meta name="assert" content="text-combine-upright should try applying 'twid' feature if the width is wider than 1em">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="tcy">000</span></p>
+ <p><span class="fake-tcy">333</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004-ref.html
new file mode 100644
index 000000000..cb6aa0035
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression of four characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="fake-tcy">4444</span></p>
+ <p><span class="fake-tcy">4444</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004.html
new file mode 100644
index 000000000..c6bcb0232
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression of four characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-004-ref.html">
+<meta name="assert" content="text-combine-upright should try applying 'qwid' feature if the width is wider than 1em">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="tcy">0000</span></p>
+ <p><span class="fake-tcy">4444</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005-ref.html
new file mode 100644
index 000000000..a158be264
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, no compression for single full-width character</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="fake-tcy">0</span></p>
+ <p><span class="fake-tcy">0</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005.html
new file mode 100644
index 000000000..dbcb810ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, no compression for single full-width character</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-005-ref.html">
+<meta name="assert" content="text-combine-upright should not change a single full-width character">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="tcy">0</span></p>
+ <p><span class="fake-tcy">0</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005a.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005a.html
new file mode 100644
index 000000000..918140e83
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, no compression for single character with full-width transform</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-005-ref.html">
+<meta name="assert" content="text-combine-upright should not change a single full-width character">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+.tcy { text-transform: full-width; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="tcy">0</span></p>
+ <p><span class="fake-tcy">0</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006-ref.html
new file mode 100644
index 000000000..8a083f680
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression for two full-width characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="fake-tcy">22</span></p>
+ <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006.html
new file mode 100644
index 000000000..8ba98db9c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression for two full-width characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-006-ref.html">
+<meta name="assert" content="text-combine-upright should run the reverse of full-width transform before applying compression">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="tcy">00</span></p>
+ <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006a.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006a.html
new file mode 100644
index 000000000..bebda644e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression for two characters with full-width transform</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-006-ref.html">
+<meta name="assert" content="text-combine-upright should run the reverse of full-width transform before applying compression">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+.tcy { text-transform: full-width; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+ <p><span class="tcy">00</span></p>
+ <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007-ref.html
new file mode 100644
index 000000000..a0cba009a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright: all, fit any number of characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; height: 3.5em; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if the contents in the two blocks are identical.</p>
+<div class="test">
+ <p>一<span class="fake-tcy"></span>十</p>
+ <p>一<span class="fake-tcy"></span>十</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007.html
new file mode 100644
index 000000000..ca943f311
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright: all, fit any number of characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-007-ref.html">
+<meta name="assert" content="text-combine-upright: all should allow any amount of text to be compressed in a 1em square">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; height: 3.5em; }
+.test > p { border: 1px solid black; }
+.tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the contents in the two blocks are identical.</p>
+<div class="test">
+ <p>一<span class="tcy">ニ三四五六七八九</span>十</p>
+ <p>一<span class="fake-tcy"></span>十</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001-ref.html
new file mode 100644
index 000000000..cafd8e8f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Reference: text-orientation:upright in sideways-* writing modes</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-orientation">
+</head>
+<body style="font: 24px sans-serif">
+<p>The two sideways-rl lines should be identical:
+<div style="writing-mode:sideways-rl">
+ <p>hello العربي world עברית</p>
+ <p>hello العربي world עברית</p>
+</div>
+<p>The two sideways-lr lines should be identical:
+<div style="writing-mode:sideways-lr">
+ <p>hello العربي world עברית</p>
+ <p>hello العربي world עברית</p>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001.html
new file mode 100644
index 000000000..695e489df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test: text-orientation:upright in sideways-* writing modes</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-orientation">
+<link rel="match" href="text-orientation-upright-directionality-001-ref.html">
+<meta name="assert" content="text-orientation has no effect in horizontal typographic modes">
+</head>
+<body style="font: 24px sans-serif">
+<p>The two sideways-rl lines should be identical:
+<div style="writing-mode:sideways-rl">
+ <p>hello العربي world עברית</p>
+ <p style="text-orientation:upright">hello العربي world עברית</p>
+</div>
+<p>The two sideways-lr lines should be identical:
+<div style="writing-mode:sideways-lr">
+ <p>hello العربي world עברית</p>
+ <p style="text-orientation:upright">hello العربي world עברית</p>
+</div>