summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-text/letter-spacing/reference
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-text/letter-spacing/reference')
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-200-ref.html52
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-201-ref.html50
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-202-ref.html14
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-203-ref.html58
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-204-ref.html74
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-205-ref.html36
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html84
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-211-ref.html29
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-212-ref.html28
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bengali-yaphala-001-ref.html98
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-001-ref.html14
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-002-ref.html14
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-003-ref.xht30
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-004-ref.xht27
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-005-ref.xht27
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-control-chars-001.ref.html30
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-001-ref.html14
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-001-ref.html31
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-002-ref.html28
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-003-ref.html17
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-004-ref.html21
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-001-ref.html14
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-002-ref.html14
-rw-r--r--testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-003-ref.xht26
24 files changed, 830 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-200-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-200-ref.html
new file mode 100644
index 0000000000..d6e87a56d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-200-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+ @import "/fonts/ahem.css";
+ .contain {
+ font: 20px/1 Ahem;
+ width: 5em;
+ border: solid blue;
+ margin: 1em;
+ float: left; }
+ .pre, .control p {
+ white-space: pre;
+ }
+ p { margin: 0; }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all four blue boxes.</div>
+
+<!-- Control -->
+<div class="contain control">
+ <p>x x</p>
+ <p>x x 水<br>x x x<br>水 x x</p>
+ <p>x x x<br>x x<br>x x x</p>
+ <p>x x x<br>x x<br>x x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain control">
+ <p>x x</p>
+ <p>x x 水<br>x x x<br>水 x x</p>
+ <p>x x x<br>x x<br>x x x</p>
+ <p>x x x<br>x x<br>x x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain control">
+ <p>x x</p>
+ <p>x x 水<br>x x x<br>水 x x</p>
+ <p>x x x<br>x x<br>x x x</p>
+ <p>x x x<br>x x<br>x x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain control">
+ <p>x x</p>
+ <p>x x 水<br>x x x<br>水 x x</p>
+ <p>x x x<br>x x<br>x x x</p>
+ <p>x x x<br>x x<br>x x x</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-201-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-201-ref.html
new file mode 100644
index 0000000000..6898da609d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-201-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+ @import "/fonts/ahem.css";
+ .contain {
+ font: 20px/1 Ahem;
+ width: 5em;
+ border: solid blue;
+ margin: 1em;
+ float: left; }
+ p { margin: 0;
+ white-space: pre; }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all four blue boxes.</div>
+
+<!-- Control -->
+<div class="contain">
+ <p> x </p>
+ <p>x x <br> x <br> x x</p>
+ <p>x x <br> x <br> x x</p>
+ <p>x x <br> x <br> x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain">
+ <p> x </p>
+ <p>x x <br> x <br> x x</p>
+ <p>x x <br> x <br> x x</p>
+ <p>x x <br> x <br> x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain">
+ <p> x </p>
+ <p>x x <br> x <br> x x</p>
+ <p>x x <br> x <br> x x</p>
+ <p>x x <br> x <br> x x</p>
+</div>
+
+<!-- Control -->
+<div class="contain">
+ <p> x </p>
+ <p>x x <br> x <br> x x</p>
+ <p>x x <br> x <br> x x</p>
+ <p>x x <br> x <br> x x</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-202-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-202-ref.html
new file mode 100644
index 0000000000..08ea8e56e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-202-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+ @import "/fonts/ahem.css";
+ .test { float: left; color: green; background: red; font: 20px/1 Ahem; }
+ .spacing { position: absolute; width: 1em; height: 2em; margin: 0 1em; background: green; }
+</style>
+
+<div id='instructions'>Test passes if there is a green rectangle below and no red.</div>
+
+<div class="test"><div class="spacing"></div>xx<br>xx</div></div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-203-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-203-ref.html
new file mode 100644
index 0000000000..3461347a28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-203-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+ @import "/fonts/ahem.css";
+ .contain {
+ font: 20px/1 Ahem;
+ border: solid blue;
+ margin: 1em;
+ float: left; }
+ .control p {
+ white-space: pre-wrap;
+ }
+ p {
+ letter-spacing: 0;
+ margin: 0;
+ }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div>
+
+<div class="contain control">
+ <!-- middle owned by containing block: simple -->
+ <p>AAA BBB</p>
+ <p>A A AB B B</p>
+ <!-- middle owned by containing block: double nesting -->
+ <p>AAAB B B</p>
+ <p>A A AB B B</p>
+ <!-- middle owned by inline: simple -->
+ <p>AAA BBB</p>
+ <p>A A AB B B</p>
+ <!-- middle owned by inline: double nesting -->
+ <p>AAAB B B</p>
+ <p>A A A B B B</p>
+ <!-- middle containing space -->
+ <p>AAA BBB</p>
+ <p>AAA B B B</p>
+</div>
+
+<div class="contain control">
+ <!-- middle owned by containing block: simple -->
+ <p>AAA BBB</p>
+ <p>A A AB B B</p>
+ <!-- middle owned by containing block: double nesting -->
+ <p>AAAB B B</p>
+ <p>A A AB B B</p>
+ <!-- middle owned by inline: simple -->
+ <p>AAA BBB</p>
+ <p>A A AB B B</p>
+ <!-- middle owned by inline: double nesting -->
+ <p>AAAB B B</p>
+ <p>A A A B B B</p>
+ <!-- middle containing space -->
+ <p>AAA BBB</p>
+ <p>AAA B B B</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-204-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-204-ref.html
new file mode 100644
index 0000000000..078656c463
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-204-ref.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+ @import "/fonts/ahem.css";
+ .contain {
+ font: 20px/1 Ahem;
+ border: solid blue;
+ margin: 1em;
+ float: left; }
+
+ .block, .table, .flex, .grid {
+ display: inline-block;
+ width: 15px;
+ height: 15px;
+ background: orange;
+ }
+ .table {
+ display: inline-table;
+ }
+ .flex {
+ display: inline-flex;
+ }
+ .grid {
+ display: inline-grid;
+ }
+ .control p {
+ white-space: pre-wrap;
+ }
+ p {
+ letter-spacing: 0;
+ margin: 0;
+ }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all blue boxes.</div>
+
+<div class="contain control">
+ <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p>
+ <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p>
+ <p>A <span class="block"></span><span class="block"></span> D</p>
+ <p>A <span class="table"></span><span class="block"></span> D</p>
+ <p>A <span class="flex"></span><span class="block"></span> D</p>
+ <p>A <span class="grid"></span><span class="block"></span> D</p>
+</div>
+
+<div class="contain control">
+ <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p>
+ <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p>
+ <p>A <span class="block"></span><span class="block"></span> D</p>
+ <p>A <span class="table"></span><span class="block"></span> D</p>
+ <p>A <span class="flex"></span><span class="block"></span> D</p>
+ <p>A <span class="grid"></span><span class="block"></span> D</p>
+</div>
+
+<div class="contain control">
+ <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p>
+ <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p>
+ <p>A <span class="block"></span><span class="block"></span> D</p>
+ <p>A <span class="table"></span><span class="block"></span> D</p>
+ <p>A <span class="flex"></span><span class="block"></span> D</p>
+ <p>A <span class="grid"></span><span class="block"></span> D</p>
+</div>
+
+<div class="contain control">
+ <p>A <img src="../support/swatch-orange.png"><img src="../support/swatch-orange.png"> D</p>
+ <p>A <img class="block" src="../support/swatch-orange.png"><img class="block" src="../support/swatch-orange.png"> D</p>
+ <p>A <span class="block"></span><span class="block"></span> D</p>
+ <p>A <span class="table"></span><span class="block"></span> D</p>
+ <p>A <span class="flex"></span><span class="block"></span> D</p>
+ <p>A <span class="grid"></span><span class="block"></span> D</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-205-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-205-ref.html
new file mode 100644
index 0000000000..3c6e2aa60e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-205-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+ @import "/fonts/ahem.css";
+ .contain {
+ font: 20px/1 Ahem;
+ border: solid blue;
+ margin: 1em;
+ width: max-content; }
+ .ls1 {
+ letter-spacing: 1em;
+ }
+ span {
+ border: solid orange;
+ }
+ .control p {
+ white-space: pre-wrap;
+ }
+ p {
+ letter-spacing: 0;
+ margin: 0;
+ }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in both blue boxes.</div>
+
+<div class="contain control">
+ <p><span></span>A<span></span><span></span> D<span></span>
+</div>
+
+<div class="contain control">
+ <p><span></span>A<span></span><span></span> D<span></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html
new file mode 100644
index 0000000000..36bad163f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-206-ref.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+ @import "/fonts/ahem.css";
+ .contain {
+ font: 20px/1 Ahem;
+ border: solid blue;
+ margin: 1em;
+ float: left; }
+ .control p {
+ white-space: pre;
+ }
+ p {
+ letter-spacing: 0;
+ margin: 0;
+ word-break: break-all;
+ float: left;
+ clear: left;
+ border-right: solid orange 1em;
+ background: yellow;
+ }
+</style>
+
+<div id='instructions'>Test passes if the pattern is identical in all three blue boxes.</div>
+
+<div class="contain control">
+<p>A A A B B B</p>
+<!-- middle owned by containing block: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by containing block: double nesting -->
+<p>AAA B B B</p>
+<p>A A A B B B</p>
+<!-- middle owned by inline: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by inline: double nesting -->
+<p>AAAB B B</p>
+<p>A A A B B B</p>
+<!-- middle containing space -->
+<p>AAA BBB</p>
+<p>AAA B B B</p>
+</div>
+
+<div class="contain control">
+<p>A A A B B B</p>
+<!-- middle owned by containing block: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by containing block: double nesting -->
+<p>AAA B B B</p>
+<p>A A A B B B</p>
+<!-- middle owned by inline: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by inline: double nesting -->
+<p>AAAB B B</p>
+<p>A A A B B B</p>
+<!-- middle containing space -->
+<p>AAA BBB</p>
+<p>AAA B B B</p>
+</div>
+
+<div class="contain control">
+<p>A A A B B B</p>
+<!-- middle owned by containing block: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by containing block: double nesting -->
+<p>AAA B B B</p>
+<p>A A A B B B</p>
+<!-- middle owned by inline: simple -->
+<p>AAA BBB</p>
+<p>A A AB B B</p>
+<!-- middle owned by inline: double nesting -->
+<p>AAAB B B</p>
+<p>A A A B B B</p>
+<!-- middle containing space -->
+<p>AAA BBB</p>
+<p>AAA B B B</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-211-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-211-ref.html
new file mode 100644
index 0000000000..9b3499ed7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-211-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>letter-spacing at element boundaries</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+ @import "/fonts/ahem.css";
+ .contain {
+ font: 20px/1 Ahem;
+ margin: 1em; }
+ .control p {
+ white-space: pre-wrap;
+ }
+ p {
+ letter-spacing: 0;
+ margin: 0;
+ text-emphasis: dot;
+ }
+</style>
+
+<div id='instructions'>Test passes if the blue pattern is identical to the black one.</div>
+
+<div class="contain control">
+ <p>A B C
+</div>
+
+<div class="contain control" style="color:blue">
+ <p>A B C
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-212-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-212-ref.html
new file mode 100644
index 0000000000..889803699d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-212-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
+<style type='text/css'>
+ @import "/fonts/ahem.css";
+ .contain {
+ font: 20px/1 Ahem;
+ margin: 1em; }
+ .control p {
+ white-space: pre-wrap;
+ }
+ p {
+ letter-spacing: 0;
+ margin: 0;
+ }
+</style>
+
+<div id='instructions'>Test passes if the blue pattern is identical to the black one.</div>
+
+<div class="contain control">
+ <p><ruby>A<rt>a</rt></ruby> <ruby>B B<rt>b</rt></ruby></p>
+</div>
+
+<div class="contain control" style="color: blue">
+ <p><ruby>A<rt>a</rt></ruby> <ruby>B B<rt>b</rt></ruby></p>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bengali-yaphala-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bengali-yaphala-001-ref.html
new file mode 100644
index 0000000000..a1ff2e053a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bengali-yaphala-001-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Text reference: letter-spacing and Bengali ya-phala (yo-pholo)</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+
+<style>
+/* We try various "likely" font names, as well as generics; those not available
+ on the platform will simply fall back to a default. */
+.outer.a {
+ font-family: sans-serif;
+}
+.outer.b {
+ font-family: serif;
+}
+.outer.c {
+ font-family: Bangla MN, serif;
+}
+.outer.d {
+ font-family: Bangla Sangam MN, sans-serif;
+}
+.outer.e {
+ font-family: Nirmala UI, Vrinda, sans-serif;
+}
+.outer.f {
+ font-family: Noto Sans Bengali, sans-serif;
+}
+.inner {
+ position: relative;
+ margin: 1em;
+ height: 2em;
+}
+.mask {
+ padding: 0.25em;
+ color: green;
+ background: green;
+ position: absolute;
+}
+span {
+ display: inline-block;
+}
+</style>
+
+<p>Test passes if the red Bengali text is entirely hidden by the green blocks.</p>
+
+<div class="outer a">
+ <div class="inner" lang="bn">
+ <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+ </div>
+ <div class="inner" lang="bn">
+ <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+ </div>
+</div>
+
+<div class="outer b">
+ <div class="inner" lang="bn">
+ <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+ </div>
+ <div class="inner" lang="bn">
+ <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+ </div>
+</div>
+
+<div class="outer c">
+ <div class="inner" lang="bn">
+ <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+ </div>
+ <div class="inner" lang="bn">
+ <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+ </div>
+</div>
+
+<div class="outer d">
+ <div class="inner" lang="bn">
+ <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+ </div>
+ <div class="inner" lang="bn">
+ <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+ </div>
+</div>
+
+<div class="outer e">
+ <div class="inner" lang="bn">
+ <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+ </div>
+ <div class="inner" lang="bn">
+ <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+ </div>
+</div>
+
+<div class="outer f">
+ <div class="inner" lang="bn">
+ <div class="mask">অ্যান্টিগুয়া<span style="width:3em"></span></div>
+ </div>
+ <div class="inner" lang="bn">
+ <div class="mask">এ্যাডভোকেট<span style="width:4em"></span></div>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-001-ref.html
new file mode 100644
index 0000000000..e34dbc313f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+ font-family: monospace;
+ font-size: 3em;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4.
+<div>12345</div>
+<div>abאב</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-002-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-002-ref.html
new file mode 100644
index 0000000000..f197769f3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-002-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+ font-family: monospace;
+ font-size: 3em;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3.
+<div>12345</div>
+<div>aaב<br>ב</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-003-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-003-ref.xht
new file mode 100644
index 0000000000..d46dd7a361
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-003-ref.xht
@@ -0,0 +1,30 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+ <style>
+ .control {
+ font: 50px/1 monospace;
+ width: 14ch;
+ font-kerning: none;
+ border: 1px solid black;
+ white-space: pre;
+ }
+ .red {
+ color: red;
+ position: absolute;
+ z-index: -1;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if no red is visible except for anti-aliasing differences.</p>
+ <!-- bet <ls> alef <ls> <space stretched from justification> A <ls> B -->
+ <div class="control red">&#x5d0; &#x5d1;<div style="float: right">A B</div></div>
+ <div class="control">&#x5d0; &#x5d1;<div style="float: right">A B</div></div>
+
+ <!-- A <ls> B <ls> <space stretched from justification> alef <ls> bet -->
+ <div class="control red">A B<div style="float: right">&#x5d0; &#x5d1;</div></div>
+ <div class="control">A B<div style="float: right">&#x5d0; &#x5d1;</div></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-004-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-004-ref.xht
new file mode 100644
index 0000000000..a0326fcbaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-004-ref.xht
@@ -0,0 +1,27 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+ <style>
+ .control {
+ font: 50px/1 monospace;
+ font-kerning: none;
+ white-space: pre;
+ }
+ .red {
+ color: red;
+ position: absolute;
+ z-index: -1;
+ }
+ .control span {
+ background: green;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if no red is visible except for anti-aliasing differences, and the green boxes are the width of a single letter.</p>
+ <!-- A <ls> B <ls> <bg>C</bg> <ls> gimel <ls> bet <ls> <bg>alef</bg> <gap> -->
+ <div class="control red">A B <span>C</span> &#x5d1; &#x5d2; <span style="unicode-bidi:embed">&#x5d0;</span></div>
+ <div class="control">A B <span>C</span> &#x5d1; &#x5d2; <span style="unicode-bidi:embed">&#x5d0;</span></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-005-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-005-ref.xht
new file mode 100644
index 0000000000..d93f98495a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-bidi-005-ref.xht
@@ -0,0 +1,27 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+ <style>
+ .control {
+ font: 50px/1 monospace;
+ font-kerning: none;
+ white-space: pre;
+ }
+ .red {
+ color: red;
+ position: absolute;
+ z-index: -1;
+ }
+ .control span {
+ background: green;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p>
+ <!-- A <ls> <ls> <bg>B <ls> bet <ls> alef <ls> C</bg> <ls> D <gap> -->
+ <div class="control red">A <span>B &#x5d0; &#x5d1; C</span> D</div>
+ <div class="control">A <span>B &#x5d0; &#x5d1; C</span> D</div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-control-chars-001.ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-control-chars-001.ref.html
new file mode 100644
index 0000000000..977d821145
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-control-chars-001.ref.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>letter-spacing should not be applied to zero-width format controls</title>
+<style>
+.test {
+ font: 12px/2 monospace;
+ letter-spacing: 4px;
+}
+</style>
+</head>
+<body>
+The two lines below should match:<br>
+<div class=test>
+letterspacing should not be
+affected by
+zero-width
+format
+characters
+</div>
+<div class=test>
+letterspacing should not be
+affected by
+zero-width
+format
+characters
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-001-ref.html
new file mode 100644
index 0000000000..eb474ab8d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-end-of-line-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+ font-family: monospace;
+ font-size: 3em;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4.
+<div>12345</div>
+<div>a aa</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-001-ref.html
new file mode 100644
index 0000000000..e4caf6587a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>text-justify:inter-character and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+@font-face {
+ font-family: 'mplus';
+ src: url('/fonts/mplus-1p-regular.woff');
+}
+div {
+ font-size: 2em;
+ font-family: mplus;
+ width: 12ch;
+ text-align: justify;
+ text-align-last: justify;
+ text-justify: inter-character;
+ font-variant-ligatures: none;
+ font-kerning: none;
+}
+span {
+ display: inline-block;
+ text-justify: auto;
+}
+.ref { color: blue;}
+.noref { color: orange; font-variant-ligatures: initial;}
+</style>
+<p>Test passes if the black text looks like the blue one, not the orange one.
+<div>office</div>
+<div class=ref>office</div>
+<div class=noref>o<span>ffi</span>ce</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-002-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-002-ref.html
new file mode 100644
index 0000000000..2cbe5b0a0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-002-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>letter spacing and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+@font-face {
+ font-family: 'mplus';
+ src: url('/fonts/mplus-1p-regular.woff');
+}
+div {
+ font-size: 2em;
+ font-family: mplus;
+ width: 12ch;
+ font-variant-ligatures: none;
+ letter-spacing: 0;
+ font-kerning: none;
+}
+i {
+ padding-left: 20px;
+}
+.ref {
+ color: blue;
+}
+</style>
+<p>Test passes if the black text looks like the blue one.
+<div>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div>
+<div class=ref>o<i></i>f<i></i>f<i></i>i<i></i>c<i></i>e</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-003-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-003-ref.html
new file mode 100644
index 0000000000..2d1e7bd038
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-003-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>text-justify:inter-character and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div {
+ font-size: 2em;
+ width: 12ch;
+}
+span { float: right; }
+.ref { color: blue; }
+</style>
+<p>Test passes if the black text looks like the blue one.
+<div lang=km>&#x179F;&#x17B6;<span>&#x17A0;&#x17B6;</span></div>
+<div lang=km class=ref>&#x179F;&#x17B6;<span>&#x17A0;&#x17B6;</span></div>
+
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-004-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-004-ref.html
new file mode 100644
index 0000000000..bb3881fc5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-ligatures-004-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en" >
+<meta charset="utf-8">
+<title>letter spacing and ligatures</title>
+<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'>
+<style>
+div {
+ font-size: 2em;
+ width: 12ch;
+ font-kerning: none;
+}
+span {
+ padding-left: 20px;
+}
+.ref {
+ color: blue;
+}
+</style>
+<p>Test passes if the black text looks like the blue one.
+<div lang=km>&#x179F;&#x17B6;<span></span>&#x17A0;&#x17B6;</div>
+<div lang=km class=ref>&#x179F;&#x17B6;<span></span>&#x17A0;&#x17B6;</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-001-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-001-ref.html
new file mode 100644
index 0000000000..3d003f3621
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+ font-family: monospace;
+ font-size: 3em;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 5.
+<div>123456</div>
+<div>aa aa</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-002-ref.html b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-002-ref.html
new file mode 100644
index 0000000000..93eb6b0fca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-002-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<style>
+div {
+ font-family: monospace;
+ font-size: 3em;
+}
+</style>
+
+<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3.
+<div>12345</div>
+<div>aaa</div>
diff --git a/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-003-ref.xht b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-003-ref.xht
new file mode 100644
index 0000000000..996f2a1e30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/letter-spacing/reference/letter-spacing-nesting-003-ref.xht
@@ -0,0 +1,26 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="author" title="Mike Bremford" href="http://bfo.com" />
+ <style>
+ .control {
+ font: 50px/1 monospace;
+ font-kerning: none;
+ white-space: pre;
+ }
+ .red {
+ color: red;
+ position: absolute;
+ z-index: -1;
+ }
+ .control span {
+ background: green;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if no red is visible except for anti-aliasing differences, and the green rectangle does not extend beyond B to C.</p>
+ <!-- A <ls> <ls> <bg>B <ls> <ls> C</bg> <ls> D -->
+ <div class="control">A <span>B C</span> D</div>
+ </body>
+</html>