summaryrefslogtreecommitdiffstats
path: root/layout/reftests/first-letter
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/first-letter')
-rw-r--r--layout/reftests/first-letter/1385656-ref.html9
-rw-r--r--layout/reftests/first-letter/1385656.html16
-rw-r--r--layout/reftests/first-letter/1404167-1-ref.html12
-rw-r--r--layout/reftests/first-letter/1404167-1.html16
-rw-r--r--layout/reftests/first-letter/1404167-2-ref.html13
-rw-r--r--layout/reftests/first-letter/1404167-2.html18
-rw-r--r--layout/reftests/first-letter/1404167-3-ref.html9
-rw-r--r--layout/reftests/first-letter/1404167-3.html14
-rw-r--r--layout/reftests/first-letter/1404167-4-ref.html11
-rw-r--r--layout/reftests/first-letter/1404167-4.html16
-rw-r--r--layout/reftests/first-letter/229764-1.html15
-rw-r--r--layout/reftests/first-letter/229764-2.html20
-rw-r--r--layout/reftests/first-letter/229764-ref.html9
-rw-r--r--layout/reftests/first-letter/23605-1-ref.html11
-rw-r--r--layout/reftests/first-letter/23605-1.html11
-rw-r--r--layout/reftests/first-letter/23605-2-ref.html11
-rw-r--r--layout/reftests/first-letter/23605-2.html11
-rw-r--r--layout/reftests/first-letter/23605-3-ref.html11
-rw-r--r--layout/reftests/first-letter/23605-3.html11
-rw-r--r--layout/reftests/first-letter/23605-4-ref.html11
-rw-r--r--layout/reftests/first-letter/23605-4.html11
-rw-r--r--layout/reftests/first-letter/23605-5-ref.html24
-rw-r--r--layout/reftests/first-letter/23605-5.html24
-rw-r--r--layout/reftests/first-letter/23605-6-ref.html11
-rw-r--r--layout/reftests/first-letter/23605-6.html11
-rw-r--r--layout/reftests/first-letter/329069-1-ref.html11
-rw-r--r--layout/reftests/first-letter/329069-1.html11
-rw-r--r--layout/reftests/first-letter/329069-2-ref.html11
-rw-r--r--layout/reftests/first-letter/329069-2.html11
-rw-r--r--layout/reftests/first-letter/329069-3-ref.html11
-rw-r--r--layout/reftests/first-letter/329069-3.html11
-rw-r--r--layout/reftests/first-letter/329069-4-ref.html12
-rw-r--r--layout/reftests/first-letter/329069-4.html12
-rw-r--r--layout/reftests/first-letter/329069-5-ref.html14
-rw-r--r--layout/reftests/first-letter/329069-5.html14
-rw-r--r--layout/reftests/first-letter/342120-1-ref.xhtml11
-rw-r--r--layout/reftests/first-letter/342120-1.xhtml33
-rw-r--r--layout/reftests/first-letter/379799-1-ref.html10
-rw-r--r--layout/reftests/first-letter/379799-1.html29
-rw-r--r--layout/reftests/first-letter/399941-1-ref.html17
-rw-r--r--layout/reftests/first-letter/399941-1.html17
-rw-r--r--layout/reftests/first-letter/399941-2-ref.html19
-rw-r--r--layout/reftests/first-letter/399941-2.html19
-rw-r--r--layout/reftests/first-letter/399941-3-ref.html17
-rw-r--r--layout/reftests/first-letter/399941-3.html17
-rw-r--r--layout/reftests/first-letter/399941-4-ref.html17
-rw-r--r--layout/reftests/first-letter/399941-4.html17
-rw-r--r--layout/reftests/first-letter/399941-5-ref.html17
-rw-r--r--layout/reftests/first-letter/399941-5.html17
-rw-r--r--layout/reftests/first-letter/399941-6-ref.html17
-rw-r--r--layout/reftests/first-letter/399941-6.html17
-rw-r--r--layout/reftests/first-letter/399941-7-ref.html18
-rw-r--r--layout/reftests/first-letter/399941-7.html18
-rw-r--r--layout/reftests/first-letter/399941-8-ref.html16
-rw-r--r--layout/reftests/first-letter/399941-8.html16
-rw-r--r--layout/reftests/first-letter/399941-9-ref.html16
-rw-r--r--layout/reftests/first-letter/399941-9.html16
-rw-r--r--layout/reftests/first-letter/429968-1-ref.html14
-rw-r--r--layout/reftests/first-letter/429968-1a.html14
-rw-r--r--layout/reftests/first-letter/429968-1b.html18
-rw-r--r--layout/reftests/first-letter/429968-2-ref.html10
-rw-r--r--layout/reftests/first-letter/429968-2a.html15
-rw-r--r--layout/reftests/first-letter/429968-2b.html15
-rw-r--r--layout/reftests/first-letter/429968-2c.html15
-rw-r--r--layout/reftests/first-letter/441418-1-ref.html16
-rw-r--r--layout/reftests/first-letter/441418-1.html18
-rw-r--r--layout/reftests/first-letter/469227-1-ref.html5
-rw-r--r--layout/reftests/first-letter/469227-1.html12
-rw-r--r--layout/reftests/first-letter/484400-1-ref.html11
-rw-r--r--layout/reftests/first-letter/484400-1.html20
-rw-r--r--layout/reftests/first-letter/594303-1-ref.html7
-rw-r--r--layout/reftests/first-letter/594303-1.html8
-rw-r--r--layout/reftests/first-letter/617869-1-ref.html11
-rw-r--r--layout/reftests/first-letter/617869-1.html11
-rw-r--r--layout/reftests/first-letter/723509-1-ref.html18
-rw-r--r--layout/reftests/first-letter/723509-1.html18
-rw-r--r--layout/reftests/first-letter/922550-1-ref.html17
-rw-r--r--layout/reftests/first-letter/922550-1.html17
-rw-r--r--layout/reftests/first-letter/958249-ref.html24
-rw-r--r--layout/reftests/first-letter/958249.html24
-rw-r--r--layout/reftests/first-letter/basic-1.html17
-rw-r--r--layout/reftests/first-letter/basic-2.html17
-rw-r--r--layout/reftests/first-letter/basic-ref.html12
-rw-r--r--layout/reftests/first-letter/dynamic-1-ref.html18
-rw-r--r--layout/reftests/first-letter/dynamic-1.html44
-rw-r--r--layout/reftests/first-letter/dynamic-2-ref.html12
-rw-r--r--layout/reftests/first-letter/dynamic-2.html62
-rw-r--r--layout/reftests/first-letter/dynamic-3-ref.html9
-rw-r--r--layout/reftests/first-letter/dynamic-3a.html23
-rw-r--r--layout/reftests/first-letter/dynamic-3b.html23
-rw-r--r--layout/reftests/first-letter/dynamic-4-ref.html10
-rw-r--r--layout/reftests/first-letter/dynamic-4.html23
-rw-r--r--layout/reftests/first-letter/dynamic-5-ref.html7
-rw-r--r--layout/reftests/first-letter/dynamic-5.html15
-rw-r--r--layout/reftests/first-letter/font-text-styles-floater-ref.html28
-rw-r--r--layout/reftests/first-letter/font-text-styles-floater.html27
-rw-r--r--layout/reftests/first-letter/font-text-styles-ref.html33
-rw-r--r--layout/reftests/first-letter/font-text-styles.html35
-rw-r--r--layout/reftests/first-letter/indic-clusters-1-ref.html24
-rw-r--r--layout/reftests/first-letter/indic-clusters-1.html24
-rw-r--r--layout/reftests/first-letter/inline-height-empty-ref.html10
-rw-r--r--layout/reftests/first-letter/inline-height-empty.html10
-rw-r--r--layout/reftests/first-letter/nested-1-ref.html16
-rw-r--r--layout/reftests/first-letter/nested-1a.html21
-rw-r--r--layout/reftests/first-letter/nested-1b.html25
-rw-r--r--layout/reftests/first-letter/nested-1c.html25
-rw-r--r--layout/reftests/first-letter/nested-1d.html26
-rw-r--r--layout/reftests/first-letter/nested-1e.html24
-rw-r--r--layout/reftests/first-letter/nested-1f.html22
-rw-r--r--layout/reftests/first-letter/nested-1g.html19
-rw-r--r--layout/reftests/first-letter/overflow-float-nooverflow-ref.html14
-rw-r--r--layout/reftests/first-letter/overflow-float-nooverflow.html15
-rw-r--r--layout/reftests/first-letter/overflow-float-overflow-notref.html15
-rw-r--r--layout/reftests/first-letter/overflow-float-overflow.html15
-rw-r--r--layout/reftests/first-letter/overflow-inline-nooverflow-ref.html14
-rw-r--r--layout/reftests/first-letter/overflow-inline-nooverflow.html15
-rw-r--r--layout/reftests/first-letter/overflow-inline-overflow-notref.html14
-rw-r--r--layout/reftests/first-letter/overflow-inline-overflow-ref.html15
-rw-r--r--layout/reftests/first-letter/overflow-inline-overflow.html15
-rw-r--r--layout/reftests/first-letter/parent-style-1-ref.html11
-rw-r--r--layout/reftests/first-letter/parent-style-1.html16
-rw-r--r--layout/reftests/first-letter/quote-1-ref.html12
-rw-r--r--layout/reftests/first-letter/quote-1a.html17
-rw-r--r--layout/reftests/first-letter/quote-1b.html20
-rw-r--r--layout/reftests/first-letter/quote-1c.html20
-rw-r--r--layout/reftests/first-letter/quote-1d.html24
-rw-r--r--layout/reftests/first-letter/quote-1e.html17
-rw-r--r--layout/reftests/first-letter/quote-1f.html18
-rw-r--r--layout/reftests/first-letter/reftest.list82
129 files changed, 2213 insertions, 0 deletions
diff --git a/layout/reftests/first-letter/1385656-ref.html b/layout/reftests/first-letter/1385656-ref.html
new file mode 100644
index 0000000000..dc41cb2d34
--- /dev/null
+++ b/layout/reftests/first-letter/1385656-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>
+ div { border: 5px solid transparent; }
+ div::first-line { }
+ div::first-letter { border: inherit; border-color: yellow; }
+</style>
+<div>
+ Some text. Does the first letter still have a border?
+</div>
diff --git a/layout/reftests/first-letter/1385656.html b/layout/reftests/first-letter/1385656.html
new file mode 100644
index 0000000000..f3277b6ef8
--- /dev/null
+++ b/layout/reftests/first-letter/1385656.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+ div { border: 5px solid transparent; }
+ div::first-line { }
+ div::first-letter { border: inherit; border-color: yellow; }
+</style>
+<div>
+ Some text.
+</div>
+<script>
+ onload = function() {
+ var div = document.querySelector("div");
+ window.width = div.offsetWidth; // Make sure we flush layout.
+ div.appendChild(document.createTextNode('Does the first letter still have a border?'));
+ }
+</script>
diff --git a/layout/reftests/first-letter/1404167-1-ref.html b/layout/reftests/first-letter/1404167-1-ref.html
new file mode 100644
index 0000000000..44f20b89df
--- /dev/null
+++ b/layout/reftests/first-letter/1404167-1-ref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<style>
+text::first-letter {
+ font-size: 3em;
+}
+text {
+ font-size: 15px;
+}
+</style>
+<svg width="500px" height="50px">
+ <text x="0" y="40">The first-letter size should be 45px</text>
+</svg>
diff --git a/layout/reftests/first-letter/1404167-1.html b/layout/reftests/first-letter/1404167-1.html
new file mode 100644
index 0000000000..2c7b241488
--- /dev/null
+++ b/layout/reftests/first-letter/1404167-1.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<style>
+text::first-letter {
+ font-size: 3em;
+}
+text {
+ font-size: 10px;
+}
+</style>
+<svg width="500px" height="50px">
+ <text x="0" y="40">The first-letter size should be 45px</text>
+</svg>
+<script>
+ document.body.offsetTop;
+ document.querySelector('text').style.fontSize = "15px";
+</script>
diff --git a/layout/reftests/first-letter/1404167-2-ref.html b/layout/reftests/first-letter/1404167-2-ref.html
new file mode 100644
index 0000000000..a756034b28
--- /dev/null
+++ b/layout/reftests/first-letter/1404167-2-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+td::first-letter {
+ border: inherit;
+}
+</style>
+<table>
+ <tr>
+ <td style="border: 10px solid green">
+ This text should have a green border on the first letter.
+ </td>
+ </tr>
+</table>
diff --git a/layout/reftests/first-letter/1404167-2.html b/layout/reftests/first-letter/1404167-2.html
new file mode 100644
index 0000000000..70f7c0f29a
--- /dev/null
+++ b/layout/reftests/first-letter/1404167-2.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<style>
+td::first-letter {
+ border: inherit;
+}
+</style>
+<table>
+ <tr>
+ <td style="border: 10px solid red">
+ This text should have a green border on the first letter.
+ </td>
+ </tr>
+</table>
+<script>
+document.body.offsetTop;
+document.querySelector('td').style.borderColor = "green";
+document.body.offsetTop;
+</script>
diff --git a/layout/reftests/first-letter/1404167-3-ref.html b/layout/reftests/first-letter/1404167-3-ref.html
new file mode 100644
index 0000000000..c2646a66a4
--- /dev/null
+++ b/layout/reftests/first-letter/1404167-3-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+fieldset::first-letter {
+ border: inherit;
+}
+</style>
+<fieldset style="border: 10px solid green;">
+ This text should have a green border on the first letter.
+</fieldset>
diff --git a/layout/reftests/first-letter/1404167-3.html b/layout/reftests/first-letter/1404167-3.html
new file mode 100644
index 0000000000..e815874500
--- /dev/null
+++ b/layout/reftests/first-letter/1404167-3.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<style>
+fieldset::first-letter {
+ border: inherit;
+}
+</style>
+<fieldset style="border: 10px solid red;">
+ This text should have a green border on the first letter.
+</fieldset>
+<script>
+document.body.offsetTop;
+document.querySelector('fieldset').style.borderColor = "green";
+document.body.offsetTop;
+</script>
diff --git a/layout/reftests/first-letter/1404167-4-ref.html b/layout/reftests/first-letter/1404167-4-ref.html
new file mode 100644
index 0000000000..b08c8a24f5
--- /dev/null
+++ b/layout/reftests/first-letter/1404167-4-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+div::first-letter {
+ color: green;
+}
+
+div::first-line {
+ color: blue;
+}
+</style>
+<div style="font-size: 20px">My first letter should be green, and the whole line 20px in size</div>
diff --git a/layout/reftests/first-letter/1404167-4.html b/layout/reftests/first-letter/1404167-4.html
new file mode 100644
index 0000000000..daa8643015
--- /dev/null
+++ b/layout/reftests/first-letter/1404167-4.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<style>
+div::first-letter {
+ color: green;
+}
+
+div::first-line {
+ color: blue;
+}
+</style>
+<div>My first letter should be green, and the whole line 20px in size</div>
+<script>
+document.body.offsetTop;
+document.querySelector('div').style.fontSize = "20px";
+document.body.offsetTop;
+</script>
diff --git a/layout/reftests/first-letter/229764-1.html b/layout/reftests/first-letter/229764-1.html
new file mode 100644
index 0000000000..5a2174ea2b
--- /dev/null
+++ b/layout/reftests/first-letter/229764-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style type="text/css">
+ p:first-letter {
+ float: left;
+ color: red;
+ }
+ </style>
+ <title>a first-letter testcase</title>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet.</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/229764-2.html b/layout/reftests/first-letter/229764-2.html
new file mode 100644
index 0000000000..b806bd8e21
--- /dev/null
+++ b/layout/reftests/first-letter/229764-2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style type="text/css">
+ p:first-letter {
+ float: left;
+ color: red;
+ }
+ </style>
+ <title>a first-letter testcase</title>
+ <script type="text/javascript">
+ window.onload = function() {
+ document.getElementsByTagName("style")[0].disabled = true;
+ }
+ </script>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet.</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/229764-ref.html b/layout/reftests/first-letter/229764-ref.html
new file mode 100644
index 0000000000..168e8e5224
--- /dev/null
+++ b/layout/reftests/first-letter/229764-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>a first-letter testcase</title>
+ </head>
+ <body>
+ <p>Lorem ipsum dolor sit amet.</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/23605-1-ref.html b/layout/reftests/first-letter/23605-1-ref.html
new file mode 100644
index 0000000000..82ec762aa0
--- /dev/null
+++ b/layout/reftests/first-letter/23605-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ span.fake-first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p><span class="fake-first-letter">[T</span>ext]</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-1.html b/layout/reftests/first-letter/23605-1.html
new file mode 100644
index 0000000000..219d71dfd0
--- /dev/null
+++ b/layout/reftests/first-letter/23605-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ p:first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p>[Text]</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-2-ref.html b/layout/reftests/first-letter/23605-2-ref.html
new file mode 100644
index 0000000000..fb1977288e
--- /dev/null
+++ b/layout/reftests/first-letter/23605-2-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ span.fake-first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p><span class="fake-first-letter">"T</span>ext"</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-2.html b/layout/reftests/first-letter/23605-2.html
new file mode 100644
index 0000000000..4b9ab8b17c
--- /dev/null
+++ b/layout/reftests/first-letter/23605-2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ p:first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p>"Text"</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-3-ref.html b/layout/reftests/first-letter/23605-3-ref.html
new file mode 100644
index 0000000000..1813a4c5f3
--- /dev/null
+++ b/layout/reftests/first-letter/23605-3-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ span.fake-first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p><span class="fake-first-letter">&ldquo;T</span>ext&rdquo;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-3.html b/layout/reftests/first-letter/23605-3.html
new file mode 100644
index 0000000000..a0550ea29e
--- /dev/null
+++ b/layout/reftests/first-letter/23605-3.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ p:first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p>&ldquo;Text&rdquo;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-4-ref.html b/layout/reftests/first-letter/23605-4-ref.html
new file mode 100644
index 0000000000..41be3223ce
--- /dev/null
+++ b/layout/reftests/first-letter/23605-4-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ span.fake-first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p><span class="fake-first-letter">&sbquo;T</span>ext&sbquo;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-4.html b/layout/reftests/first-letter/23605-4.html
new file mode 100644
index 0000000000..21d04b7d8e
--- /dev/null
+++ b/layout/reftests/first-letter/23605-4.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ p:first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p>&sbquo;Text&sbquo;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-5-ref.html b/layout/reftests/first-letter/23605-5-ref.html
new file mode 100644
index 0000000000..548f8a4fa7
--- /dev/null
+++ b/layout/reftests/first-letter/23605-5-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+ See http://lists.w3.org/Archives/Public/www-style/2000Jan/0017.html and
+ http://www.w3.org/TR/CSS21/selector.html#first-letter
+ 'If the letters that would form the first-letter are not in the same element,
+ such as "'T" in <p>'<em>T..., the UA may create a first-letter
+ pseudo-element from one of the elements, both elements, or simply not create
+ a pseudo-element.'
+ So it's not necessarily a bug if this test fails, but I'm including it anyway
+ to track whether the behaviour changes. The current behaviour at the time of
+ creating the test is that only the first element is included in the
+ pseudo-element.
+-->
+<html>
+<head>
+ <style>
+ span.fake-first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p><span class="fake-first-letter">[</span><a href="http://www.mozilla.org/">A link to mozilla.org</a> is the
+ beginning of this paragraph.]</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-5.html b/layout/reftests/first-letter/23605-5.html
new file mode 100644
index 0000000000..903206e1ad
--- /dev/null
+++ b/layout/reftests/first-letter/23605-5.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+ See http://lists.w3.org/Archives/Public/www-style/2000Jan/0017.html and
+ http://www.w3.org/TR/CSS21/selector.html#first-letter
+ 'If the letters that would form the first-letter are not in the same element,
+ such as "'T" in <p>'<em>T..., the UA may create a first-letter
+ pseudo-element from one of the elements, both elements, or simply not create
+ a pseudo-element.'
+ So it's not necessarily a bug if this test fails, but I'm including it anyway
+ to track whether the behaviour changes. The current behaviour at the time of
+ creating the test is that only the first element is included in the
+ pseudo-element.
+-->
+<html>
+<head>
+ <style>
+ p:first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p>[<a href="http://www.mozilla.org/">A link to mozilla.org</a> is the
+ beginning of this paragraph.]</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-6-ref.html b/layout/reftests/first-letter/23605-6-ref.html
new file mode 100644
index 0000000000..03a310be42
--- /dev/null
+++ b/layout/reftests/first-letter/23605-6-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ span.fake-first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p><span class="fake-first-letter">"'[T</span>ext]'"</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/23605-6.html b/layout/reftests/first-letter/23605-6.html
new file mode 100644
index 0000000000..9da4aa3ae6
--- /dev/null
+++ b/layout/reftests/first-letter/23605-6.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ p:first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p>"'[Text]'"</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/329069-1-ref.html b/layout/reftests/first-letter/329069-1-ref.html
new file mode 100644
index 0000000000..8ca5fcd7ee
--- /dev/null
+++ b/layout/reftests/first-letter/329069-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ span.fake-first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p><span class="fake-first-letter">&#x0065;&#x0301;</span>cole</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/329069-1.html b/layout/reftests/first-letter/329069-1.html
new file mode 100644
index 0000000000..5e22833184
--- /dev/null
+++ b/layout/reftests/first-letter/329069-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ p:first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p>&#x0065;&#x0301;cole</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/329069-2-ref.html b/layout/reftests/first-letter/329069-2-ref.html
new file mode 100644
index 0000000000..b8c9ec7fb3
--- /dev/null
+++ b/layout/reftests/first-letter/329069-2-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+ <style>
+ span.fake-first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p><span class="fake-first-letter">&#x1101;&#x1170;&#x11B7;</span>&#x1101;&#x1170;&#x11B7;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/329069-2.html b/layout/reftests/first-letter/329069-2.html
new file mode 100644
index 0000000000..67f9960d65
--- /dev/null
+++ b/layout/reftests/first-letter/329069-2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+ <style>
+ p:first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p>&#x1101;&#x1170;&#x11B7;&#x1101;&#x1170;&#x11B7;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/329069-3-ref.html b/layout/reftests/first-letter/329069-3-ref.html
new file mode 100644
index 0000000000..6c1c075244
--- /dev/null
+++ b/layout/reftests/first-letter/329069-3-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <style>
+ span.fake-first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p><span class="fake-first-letter">&#xFF84;&#xFF9E;</span>&#xFF84;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/329069-3.html b/layout/reftests/first-letter/329069-3.html
new file mode 100644
index 0000000000..4a3212d40f
--- /dev/null
+++ b/layout/reftests/first-letter/329069-3.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <style>
+ p:first-letter { color: red; }
+ </style>
+</head>
+<body>
+ <p>&#xFF84;&#xFF9E;&#xFF84;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/329069-4-ref.html b/layout/reftests/first-letter/329069-4-ref.html
new file mode 100644
index 0000000000..2e9ad9f81b
--- /dev/null
+++ b/layout/reftests/first-letter/329069-4-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="hi">
+<head>
+ <style>
+ span.fake-first-letter { color: red; }
+ </style>
+ <title>Devanagari first-letter 1</title>
+</head>
+<body>
+ <p><span class="fake-first-letter">&#x935;&#x93F;</span>&#x915;&#x93F;&#x92A;&#x940;&#x921;&#x93F;&#x92F;&#x93E;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/329069-4.html b/layout/reftests/first-letter/329069-4.html
new file mode 100644
index 0000000000..d85dac9fbc
--- /dev/null
+++ b/layout/reftests/first-letter/329069-4.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="hi">
+<head>
+ <style>
+ p:first-letter { color: red; }
+ </style>
+ <title>Devanagari first-letter 1</title>
+</head>
+<body>
+ <p>&#x935;&#x93F;&#x915;&#x93F;&#x92A;&#x940;&#x921;&#x93F;&#x92F;&#x93E;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/329069-5-ref.html b/layout/reftests/first-letter/329069-5-ref.html
new file mode 100644
index 0000000000..31311ad7fc
--- /dev/null
+++ b/layout/reftests/first-letter/329069-5-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="hi">
+<head>
+ <style>
+ @font-face { font-family: lohit; src: url(../fonts/ttf-indic/lohit_hi.ttf); }
+ body { font-family: lohit; }
+ span.fake-first-letter { color: red; }
+ </style>
+ <title>Devanagari first-letter 2</title>
+</head>
+<body>
+ <p><span class="fake-first-letter">&#x938;&#x94d;&#x925;&#x93F;</span>&#x924;&#x93F;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/329069-5.html b/layout/reftests/first-letter/329069-5.html
new file mode 100644
index 0000000000..3386e6aa5c
--- /dev/null
+++ b/layout/reftests/first-letter/329069-5.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="hi">
+<head>
+ <style>
+ @font-face { font-family: lohit; src: url(../fonts/ttf-indic/lohit_hi.ttf); }
+ body { font-family: lohit; }
+ p:first-letter { color: red; }
+ </style>
+ <title>Devanagari first-letter 2</title>
+</head>
+<body>
+ <p>&#x938;&#x94d;&#x925;&#x93F;&#x924;&#x93F;</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/342120-1-ref.xhtml b/layout/reftests/first-letter/342120-1-ref.xhtml
new file mode 100644
index 0000000000..9ca9f54e0f
--- /dev/null
+++ b/layout/reftests/first-letter/342120-1-ref.xhtml
@@ -0,0 +1,11 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+</head>
+
+<body>
+
+<div>,,, <strong id="s"><div></div><p id="p">1</p>2</strong> ...</div>
+
+</body>
+
+</html>
diff --git a/layout/reftests/first-letter/342120-1.xhtml b/layout/reftests/first-letter/342120-1.xhtml
new file mode 100644
index 0000000000..b0de87b0f5
--- /dev/null
+++ b/layout/reftests/first-letter/342120-1.xhtml
@@ -0,0 +1,33 @@
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<head>
+
+<script>
+
+function boom ()
+{
+ var p = document.getElementById("p");
+ var s = document.getElementById("s");
+
+ s.insertBefore(document.createElement("div"), p);
+
+ document.documentElement.removeAttribute("class");
+}
+
+</script>
+
+
+<style>
+
+strong:first-letter { color: red; }
+
+</style>
+
+</head>
+
+<body onload="setTimeout(boom, 30);">
+
+<div>,,, <strong id="s"><p id="p">1</p>2</strong> ...</div>
+
+</body>
+
+</html>
diff --git a/layout/reftests/first-letter/379799-1-ref.html b/layout/reftests/first-letter/379799-1-ref.html
new file mode 100644
index 0000000000..56c66e1bbe
--- /dev/null
+++ b/layout/reftests/first-letter/379799-1-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<div class="fl" id="parent" style="color: green">
+ Foo <span id="test">Bar</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/first-letter/379799-1.html b/layout/reftests/first-letter/379799-1.html
new file mode 100644
index 0000000000..532b26407c
--- /dev/null
+++ b/layout/reftests/first-letter/379799-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<style id="firstLetterSheet">
+ .fl:first-letter { color: red }
+</style>
+
+<script>
+
+function boom()
+{
+ document.getElementById("parent").className = "";
+ document.body.offsetWidth;
+ document.getElementById("test").style.position = "relative";
+}
+
+</script>
+
+</head>
+
+<body onload="boom()">
+
+<div class="fl" id="parent" style="color: green">
+ Foo <span id="test">Bar</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/first-letter/399941-1-ref.html b/layout/reftests/first-letter/399941-1-ref.html
new file mode 100644
index 0000000000..586bfd92e1
--- /dev/null
+++ b/layout/reftests/first-letter/399941-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Leading and trailing punctuation should all be included -->
+ <p><span class="fake-first-letter">"I!,"</span> said the Fly,</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-1.html b/layout/reftests/first-letter/399941-1.html
new file mode 100644
index 0000000000..c8de114751
--- /dev/null
+++ b/layout/reftests/first-letter/399941-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ p:first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Leading and trailing punctuation should all be included -->
+ <p>"I!," said the Fly,</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-2-ref.html b/layout/reftests/first-letter/399941-2-ref.html
new file mode 100644
index 0000000000..6c0639fc1d
--- /dev/null
+++ b/layout/reftests/first-letter/399941-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941, revised in bug 1260366 due to spec changes</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Punctuation in class Pc should be included: there is a first-letter here -->
+ <p><span class="fake-first-letter">_I_,</span> said the Fly,</p>
+ <!-- Punctuation in class Pd should be included: there is a first-letter here -->
+ <p><span class="fake-first-letter">-I-,</span> said the Fly,</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-2.html b/layout/reftests/first-letter/399941-2.html
new file mode 100644
index 0000000000..d47ff75178
--- /dev/null
+++ b/layout/reftests/first-letter/399941-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Reference: Test case for bug 399941, revised in bug 1260366 due to spec changes</title>
+ <style type="text/css">
+ p:first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Punctuation in class Pc should be included: there is a first-letter here -->
+ <p>_I_, said the Fly,</p>
+ <!-- Punctuation in class Pd should be included: there is a first-letter here -->
+ <p>-I-, said the Fly,</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-3-ref.html b/layout/reftests/first-letter/399941-3-ref.html
new file mode 100644
index 0000000000..101724ad97
--- /dev/null
+++ b/layout/reftests/first-letter/399941-3-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Test non-ASCII punctuation -->
+ <p><span class="fake-first-letter">¿C</span>ómo está usted?</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-3.html b/layout/reftests/first-letter/399941-3.html
new file mode 100644
index 0000000000..f1df77c2c9
--- /dev/null
+++ b/layout/reftests/first-letter/399941-3.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ p:first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Test non-ASCII punctuation -->
+ <p>¿Cómo está usted?</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-4-ref.html b/layout/reftests/first-letter/399941-4-ref.html
new file mode 100644
index 0000000000..4396fa0a5a
--- /dev/null
+++ b/layout/reftests/first-letter/399941-4-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Test 16-bit punctuation -->
+ <p><span class="fake-first-letter">&#x201c;I!,&#x201d;</span> said the Fly,</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-4.html b/layout/reftests/first-letter/399941-4.html
new file mode 100644
index 0000000000..6c7000a3a1
--- /dev/null
+++ b/layout/reftests/first-letter/399941-4.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ p:first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Test 16-bit punctuation -->
+ <p>&#x201c;I!,&#x201d; said the Fly,</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-5-ref.html b/layout/reftests/first-letter/399941-5-ref.html
new file mode 100644
index 0000000000..5a5baac1e8
--- /dev/null
+++ b/layout/reftests/first-letter/399941-5-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- If there is whitespace between the punctuation and the first letter, there is no first-letter -->
+ <p>"*" is an asterisk</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-5.html b/layout/reftests/first-letter/399941-5.html
new file mode 100644
index 0000000000..2e8fe8caab
--- /dev/null
+++ b/layout/reftests/first-letter/399941-5.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ p:first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- If there is whitespace between the punctuation and the first letter, there is no first-letter -->
+ <p>"*" is an asterisk</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-6-ref.html b/layout/reftests/first-letter/399941-6-ref.html
new file mode 100644
index 0000000000..691b87ce86
--- /dev/null
+++ b/layout/reftests/first-letter/399941-6-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- :first-letter applies to digits (and following punctuation) -->
+ <p><span class="fake-first-letter">2,</span>000 miles</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-6.html b/layout/reftests/first-letter/399941-6.html
new file mode 100644
index 0000000000..39cc9ef39f
--- /dev/null
+++ b/layout/reftests/first-letter/399941-6.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ p:first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- :first-letter applies to digits (and following punctuation) -->
+ <p>2,000 miles</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-7-ref.html b/layout/reftests/first-letter/399941-7-ref.html
new file mode 100644
index 0000000000..a172ddf349
--- /dev/null
+++ b/layout/reftests/first-letter/399941-7-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- :first-letter originally didn't apply to symbols,
+ but this changed in bug 1686512 -->
+ <p><span class="fake-first-letter">$</span>64,000</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-7.html b/layout/reftests/first-letter/399941-7.html
new file mode 100644
index 0000000000..f12e2bffa4
--- /dev/null
+++ b/layout/reftests/first-letter/399941-7.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ p:first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- :first-letter originally didn't apply to symbols,
+ but this changed in bug 1686512 -->
+ <p>$64,000</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-8-ref.html b/layout/reftests/first-letter/399941-8-ref.html
new file mode 100644
index 0000000000..34c449c026
--- /dev/null
+++ b/layout/reftests/first-letter/399941-8-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Test SMP characters -->
+ <p><span class="fake-first-letter">&#x10900;</span>&#x10901;&#x10909; is Phoenician</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-8.html b/layout/reftests/first-letter/399941-8.html
new file mode 100644
index 0000000000..6ec8b7677a
--- /dev/null
+++ b/layout/reftests/first-letter/399941-8.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ p:first-letter {
+ color: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Test SMP characters -->
+ <p>&#x10900;&#x10901;&#x10909; is Phoenician</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-9-ref.html b/layout/reftests/first-letter/399941-9-ref.html
new file mode 100644
index 0000000000..671c3559d2
--- /dev/null
+++ b/layout/reftests/first-letter/399941-9-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Test SMP characters and punctuation -->
+ <p><span class="fake-first-letter">&#x12470;&#x12000;&#x12470;</span>&#x12041; is cuneiform with punctuation</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/399941-9.html b/layout/reftests/first-letter/399941-9.html
new file mode 100644
index 0000000000..f696098958
--- /dev/null
+++ b/layout/reftests/first-letter/399941-9.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 399941.html</title>
+ <style type="text/css">
+ p:first-letter {
+ color: lime;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Test SMP characters and punctuation -->
+ <p>&#x12470;&#x12000;&#x12470;&#x12041; is cuneiform with punctuation</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/429968-1-ref.html b/layout/reftests/first-letter/429968-1-ref.html
new file mode 100644
index 0000000000..80977e5924
--- /dev/null
+++ b/layout/reftests/first-letter/429968-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body { white-space:pre; color:black; }
+/* FIXME (Bug 1058203): avoid line-height:normal since it seems to have
+ different meaning on ::first-letter or span */
+span.first-letter { text-decoration:underline;
+ font-size:200%; line-height: 1.2; }
+</style>
+</head>
+<body>
+<span class="first-letter"></span>AB</body>
+</html>
diff --git a/layout/reftests/first-letter/429968-1a.html b/layout/reftests/first-letter/429968-1a.html
new file mode 100644
index 0000000000..592659ae23
--- /dev/null
+++ b/layout/reftests/first-letter/429968-1a.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+body { white-space:pre; color:black; }
+/* FIXME (Bug 1058203): avoid line-height:normal since it seems to have
+ different meaning on ::first-letter or span */
+#inner::first-letter { color:red; text-decoration:underline;
+ font-size:200%; line-height: 1.2; }
+</style>
+</head>
+<body><div id="inner"><span>
+</span>AB</div></body>
+</html>
diff --git a/layout/reftests/first-letter/429968-1b.html b/layout/reftests/first-letter/429968-1b.html
new file mode 100644
index 0000000000..dda8016e77
--- /dev/null
+++ b/layout/reftests/first-letter/429968-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+body { white-space:pre; color:blue; }
+/* FIXME (Bug 1058203): avoid line-height:normal since it seems to have
+ different meaning on ::first-letter or span */
+#inner::first-letter { color:red; text-decoration:underline;
+ font-size:200%; line-height: 1.2; }
+</style>
+</head>
+<body><div id="inner"><span>
+</span>AB</div></body>
+<script>
+document.body.offsetTop;
+document.body.style.color = "black";
+</script>
+</html>
diff --git a/layout/reftests/first-letter/429968-2-ref.html b/layout/reftests/first-letter/429968-2-ref.html
new file mode 100644
index 0000000000..b541822a4d
--- /dev/null
+++ b/layout/reftests/first-letter/429968-2-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body { color:black; }
+span { color:lime; }
+</style>
+</head>
+<body><span>A</span>B</body>
+</html>
diff --git a/layout/reftests/first-letter/429968-2a.html b/layout/reftests/first-letter/429968-2a.html
new file mode 100644
index 0000000000..dd7d4091c3
--- /dev/null
+++ b/layout/reftests/first-letter/429968-2a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+body { white-space:pre; color:black; }
+#inner::first-letter { color:lime; }
+</style>
+</head>
+<body><div id="inner"><span id="s">
+</span>AB</div></body>
+<script>
+document.body.offsetTop;
+document.getElementById("s").textContent = "";
+</script>
+</html>
diff --git a/layout/reftests/first-letter/429968-2b.html b/layout/reftests/first-letter/429968-2b.html
new file mode 100644
index 0000000000..4f3daffa10
--- /dev/null
+++ b/layout/reftests/first-letter/429968-2b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+body { white-space:pre; color:black; }
+#inner::first-letter { color:lime; }
+</style>
+</head>
+<body><div id="inner"><span id="s">
+</span>AB</div></body>
+<script>
+document.body.offsetTop;
+document.getElementById("s").firstChild.data = "";
+</script>
+</html>
diff --git a/layout/reftests/first-letter/429968-2c.html b/layout/reftests/first-letter/429968-2c.html
new file mode 100644
index 0000000000..65bb91d3db
--- /dev/null
+++ b/layout/reftests/first-letter/429968-2c.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+body { white-space:pre; color:black; }
+#inner::first-letter { color:lime; }
+</style>
+</head>
+<body><div id="inner"><span id="s">
+</span>AB</div></body>
+<script>
+document.body.offsetTop;
+document.getElementById("s").style.whiteSpace = "normal";
+</script>
+</html>
diff --git a/layout/reftests/first-letter/441418-1-ref.html b/layout/reftests/first-letter/441418-1-ref.html
new file mode 100644
index 0000000000..124d6908f1
--- /dev/null
+++ b/layout/reftests/first-letter/441418-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+p { color:black; }
+</style>
+</head>
+<body>
+<p><br>
+Hello
+<p>"<br>
+Hello
+<p>"<br>
+Hello
+</body>
+</html>
diff --git a/layout/reftests/first-letter/441418-1.html b/layout/reftests/first-letter/441418-1.html
new file mode 100644
index 0000000000..cfe01500e7
--- /dev/null
+++ b/layout/reftests/first-letter/441418-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+p { width:0; color:black; }
+p::first-letter { color:yellow; }
+p.pre { white-space:pre; }
+</style>
+</head>
+<body>
+<p class="pre">
+Hello
+<p class="pre">"
+Hello
+<p>"
+Hello
+</body>
+</html>
diff --git a/layout/reftests/first-letter/469227-1-ref.html b/layout/reftests/first-letter/469227-1-ref.html
new file mode 100644
index 0000000000..2878ec28aa
--- /dev/null
+++ b/layout/reftests/first-letter/469227-1-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<title>Testcase for issue in bug 469227 comment 8</title>
+<span></span>
+<p></p>
+<span style="margin-left: 30px; color: green">Hello</span>
diff --git a/layout/reftests/first-letter/469227-1.html b/layout/reftests/first-letter/469227-1.html
new file mode 100644
index 0000000000..f502297910
--- /dev/null
+++ b/layout/reftests/first-letter/469227-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Testcase for issue in bug 469227 comment 8</title>
+<style type="text/css">
+
+span, p::first-letter { color: green; }
+span.foo, p.foo::first-letter { position: relative; }
+span.foo, p.foo::first-letter { left: 30px; }
+
+</style>
+<span></span>
+<p class="foo"></p>
+<span class="foo">Hello</span>
diff --git a/layout/reftests/first-letter/484400-1-ref.html b/layout/reftests/first-letter/484400-1-ref.html
new file mode 100644
index 0000000000..0b30370483
--- /dev/null
+++ b/layout/reftests/first-letter/484400-1-ref.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+<style>
+ div::first-letter { color: red; font-size: 200%; background-color: blue; }
+</style>
+</head>
+<body>
+ <div>
+ T
+ </div>
+</body>
diff --git a/layout/reftests/first-letter/484400-1.html b/layout/reftests/first-letter/484400-1.html
new file mode 100644
index 0000000000..234f0ecd4c
--- /dev/null
+++ b/layout/reftests/first-letter/484400-1.html
@@ -0,0 +1,20 @@
+<html class="reftest-wait">
+<head>
+<style>
+ div::first-letter { color: red; font-size: 200%; background-color: blue; }
+</style>
+<script>
+function boom() {
+ document.documentElement.offsetWidth;
+ var s = document.getElementById("s");
+ s.remove();
+ document.documentElement.offsetWidth;
+ document.documentElement.removeAttribute("class");
+}
+</script>
+</head>
+<body onload="boom();">
+ <div>
+ <span id="s" style="position: absolute;">abcdefh</span>T
+ </div>
+</body>
diff --git a/layout/reftests/first-letter/594303-1-ref.html b/layout/reftests/first-letter/594303-1-ref.html
new file mode 100644
index 0000000000..cd196ab9b4
--- /dev/null
+++ b/layout/reftests/first-letter/594303-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<title>Testcase Bug 594303</title>
+<style>
+body { width: 300px; font-size: 16px }
+p::first-letter { font-size: 3em; float: left }
+</style>
+<p>This is a paragraph with a decent amount of text in it, enough to wrap to multiple lines.</p>
diff --git a/layout/reftests/first-letter/594303-1.html b/layout/reftests/first-letter/594303-1.html
new file mode 100644
index 0000000000..001584f7bd
--- /dev/null
+++ b/layout/reftests/first-letter/594303-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<title>Testcase Bug 594303</title>
+<style>
+body { width: 500px; font-size: 16px }
+p::first-letter { font-size: 3em; float: left }
+</style>
+<div style="float: right; width: 200px; height: 200px"></div>
+<p>This is a paragraph with a decent amount of text in it, enough to wrap to multiple lines.</p>
diff --git a/layout/reftests/first-letter/617869-1-ref.html b/layout/reftests/first-letter/617869-1-ref.html
new file mode 100644
index 0000000000..7a498948e9
--- /dev/null
+++ b/layout/reftests/first-letter/617869-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <style>
+ span.fake-first-letter { color: red; font-size: 200%; }
+ </style>
+</head>
+<body>
+ <p><span class="fake-first-letter">S</span>ome text</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/617869-1.html b/layout/reftests/first-letter/617869-1.html
new file mode 100644
index 0000000000..8b9db98aa0
--- /dev/null
+++ b/layout/reftests/first-letter/617869-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <style>
+ p:first-letter { color: red; font-size: 200%; }
+ </style>
+</head>
+<body>
+ <p>Some text</p>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/723509-1-ref.html b/layout/reftests/first-letter/723509-1-ref.html
new file mode 100644
index 0000000000..7114de4bf1
--- /dev/null
+++ b/layout/reftests/first-letter/723509-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 723509.html</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Test characters that became "punctuation" in Unicode 6.1 -->
+ <p><span class="fake-first-letter">&#x00a7;S</span>ection</p>
+ <p><span class="fake-first-letter">&#x00b6;P</span>aragraph</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/723509-1.html b/layout/reftests/first-letter/723509-1.html
new file mode 100644
index 0000000000..e690089ffb
--- /dev/null
+++ b/layout/reftests/first-letter/723509-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Test case for bug 723509.html</title>
+ <style type="text/css">
+ p:first-letter {
+ color: lime;
+ background-color: olive;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Test characters that became "punctuation" in Unicode 6.1 -->
+ <p>&#x00a7;Section</p>
+ <p>&#x00b6;Paragraph</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/922550-1-ref.html b/layout/reftests/first-letter/922550-1-ref.html
new file mode 100644
index 0000000000..b0fc1531a6
--- /dev/null
+++ b/layout/reftests/first-letter/922550-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>New first letter punctuation in Unicode 6.3</title>
+ <style type="text/css">
+ span.fake-first-letter {
+ color: gold;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Leading and trailing punctuation should all be included -->
+ <p><span class="fake-first-letter">&#x2308;A&#x2309;,</span> &#x2308;B&#x2309;, &#x2308;C&#x2309;</p>
+ <p><span class="fake-first-letter">&#x230A;X&#x230B;,</span> &#x230A;Y&#x230B;, &#x230A;Z&#x230B;</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/922550-1.html b/layout/reftests/first-letter/922550-1.html
new file mode 100644
index 0000000000..7a01f61271
--- /dev/null
+++ b/layout/reftests/first-letter/922550-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>New first letter punctuation in Unicode 6.3</title>
+ <style type="text/css">
+ p:first-letter {
+ color: gold;
+ }
+ </style>
+ </head>
+ <body>
+ <!-- Leading and trailing punctuation should all be included -->
+ <p>&#x2308;A&#x2309;, &#x2308;B&#x2309;, &#x2308;C&#x2309;</p>
+ <p>&#x230A;X&#x230B;, &#x230A;Y&#x230B;, &#x230A;Z&#x230B;</p>
+ </body>
+</html>
diff --git a/layout/reftests/first-letter/958249-ref.html b/layout/reftests/first-letter/958249-ref.html
new file mode 100644
index 0000000000..c03c22a38d
--- /dev/null
+++ b/layout/reftests/first-letter/958249-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Bug 958249 test 1</title>
+ <style>
+ html,body {
+ color:black; background-color:white; font-size:16px;
+ }
+
+.logo::first-letter {
+ border:2px solid;
+}
+
+.logo2::first-letter {
+ float:left;
+ border:2px solid;
+}
+
+</style>
+<body>
+<div class="logo">P</div>
+<br clear="all">
+<div class="logo2">P</div>
+</body></html>
diff --git a/layout/reftests/first-letter/958249.html b/layout/reftests/first-letter/958249.html
new file mode 100644
index 0000000000..bb15ab6a46
--- /dev/null
+++ b/layout/reftests/first-letter/958249.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Bug 958249 test 1</title>
+ <style>
+ html,body {
+ color:black; background-color:white; font-size:16px;
+ }
+
+.logo::first-letter {
+ border:2px solid;
+}
+
+.logo2::first-letter {
+ float:left;
+ border:2px solid;
+}
+
+</style>
+<body>
+<div class="logo">P&nbsp;</div>
+<br clear="all">
+<div class="logo2">P&nbsp;</div>
+</body></html>
diff --git a/layout/reftests/first-letter/basic-1.html b/layout/reftests/first-letter/basic-1.html
new file mode 100644
index 0000000000..20c2c02c35
--- /dev/null
+++ b/layout/reftests/first-letter/basic-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="" />
+ <style>
+ div { color: black; }
+ div:first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>This is text</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/basic-2.html b/layout/reftests/first-letter/basic-2.html
new file mode 100644
index 0000000000..b8252e90c2
--- /dev/null
+++ b/layout/reftests/first-letter/basic-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>This is text</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/basic-ref.html b/layout/reftests/first-letter/basic-ref.html
new file mode 100644
index 0000000000..d1aa8815db
--- /dev/null
+++ b/layout/reftests/first-letter/basic-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ div { color: black; }
+ span { color: green; }
+ </style>
+</head>
+<body>
+ <div><span>T</span>his is text</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/dynamic-1-ref.html b/layout/reftests/first-letter/dynamic-1-ref.html
new file mode 100644
index 0000000000..fd00950f13
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+ span:before { content: '"'; }
+ span:after { content: '"'; }
+ :after { border: 3px solid green; }
+ :first-letter { color: green; }
+</style>
+</head>
+<body>
+
+<p><span>Foo</span></p>
+
+<p id="p2"><span id="q2"></span></p>
+
+</body>
+</html>
diff --git a/layout/reftests/first-letter/dynamic-1.html b/layout/reftests/first-letter/dynamic-1.html
new file mode 100644
index 0000000000..55cd3147d0
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-1.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="dom" />
+<script>function setTextContent(n, t) { n.textContent = t; }
+
+var stylesheets = [];
+function initFuzzerSpecific()
+{
+ var myStylesheetHolder = document.getElementsByTagName("head")[0];
+
+ for (var i = 0; i < 25; ++i) {
+ var s = document.createElementNS("http://www.w3.org/1999/xhtml", 'style');
+ s.style.display = "none";
+ myStylesheetHolder.appendChild(s);
+ stylesheets.push(s);
+ }
+}
+</script>
+<style>
+ span:before { content: open-quote; }
+ span:after { content: close-quote; }
+ span { quotes: '"' '"'; }
+</style>
+</head>
+<body>
+
+<p><span>Foo</span></p>
+
+<p id="p2"><span id="q2"></span></p>
+
+<script>
+ document.body.offsetWidth;
+ initFuzzerSpecific();
+ setTextContent(stylesheets[1], "*:after { border: 3px solid green; } :first-letter { color: green; }");
+ setTextContent(stylesheets[2], "*:before { counter-reset: chicken; }");
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/first-letter/dynamic-2-ref.html b/layout/reftests/first-letter/dynamic-2-ref.html
new file mode 100644
index 0000000000..b46bcb6d0a
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-2-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+
+<p><q>Foo</q></p>
+
+<p id="p2">&lt;1&gt;0&lt;/1&gt;</p>
+
+</body>
+</html>
diff --git a/layout/reftests/first-letter/dynamic-2.html b/layout/reftests/first-letter/dynamic-2.html
new file mode 100644
index 0000000000..3fb9c974d6
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="dom" />
+<script>
+function boom1()
+{
+ initFuzzerSpecific();
+ setTextContent(stylesheets[1], "*:first-letter { }");
+ setTextContent(stylesheets[2], "*:before { counter-reset: chicken; }");
+ document.body.offsetWidth;
+ boom2();
+}
+
+function boom2()
+{
+ setTextContent(stylesheets[3], "#q2:first-letter { content: 'generated'; }");
+ setTextContent(stylesheets[1], "");
+ setTextContent(stylesheets[4], "#q2 { quotes: '<1>' '</1>'; }");
+ document.body.offsetWidth;
+ boom3();
+}
+
+function boom3()
+{
+ document.getElementById("p2").style.counterReset = "egg";
+ setTextContent(stylesheets[1], "*:first-letter { }");
+}
+
+function setTextContent(n, t) { n.textContent = t; }
+
+var stylesheets = [];
+function initFuzzerSpecific()
+{
+ var myStylesheetHolder = document.getElementsByTagName("head")[0];
+
+ for (var i = 0; i < 25; ++i) {
+ var s = document.createElementNS("http://www.w3.org/1999/xhtml", 'style');
+ s.style.display = "none";
+ myStylesheetHolder.appendChild(s);
+ stylesheets.push(s);
+ }
+}
+</script>
+
+</head>
+<body>
+
+<p><q>Foo</q></p>
+
+<p id="p2"><q id="q2">0</q></p>
+
+<script>
+ document.body.offsetWidth;
+ boom1();
+</script>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/dynamic-3-ref.html b/layout/reftests/first-letter/dynamic-3-ref.html
new file mode 100644
index 0000000000..e6bd5262d7
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-3-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div>Text</div>
+</body>
+</html>
+
diff --git a/layout/reftests/first-letter/dynamic-3a.html b/layout/reftests/first-letter/dynamic-3a.html
new file mode 100644
index 0000000000..f19c9f13a3
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-3a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="dom" />
+ <style>
+ div#x::first-letter { color: blue; float: left; }
+ </style>
+</head>
+<body>
+<div id="x">Need at least two letters here</div>
+<script>
+ document.body.offsetWidth;
+ var div = document.getElementById("x");
+ div.id = "y";
+ div.firstChild.data = "Text";
+</script>
+</body>
+</html>
+
diff --git a/layout/reftests/first-letter/dynamic-3b.html b/layout/reftests/first-letter/dynamic-3b.html
new file mode 100644
index 0000000000..d82d40403b
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-3b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="dom" />
+ <style>
+ div#x::first-letter { color: blue; float: none }
+ </style>
+</head>
+<body>
+<div id="x">x</div>
+<script>
+ document.body.offsetWidth;
+ var div = document.getElementById("x");
+ div.id = "y";
+ div.firstChild.data = "Text";
+</script>
+</body>
+</html>
+
diff --git a/layout/reftests/first-letter/dynamic-4-ref.html b/layout/reftests/first-letter/dynamic-4-ref.html
new file mode 100644
index 0000000000..6ae1622cab
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-4-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <style>
+ span { color: green; }
+ div::first-letter { font-size: 100px; }
+ </style>
+ <div style="color: red">
+ <span>X</span>
+ </div>
+</html>
diff --git a/layout/reftests/first-letter/dynamic-4.html b/layout/reftests/first-letter/dynamic-4.html
new file mode 100644
index 0000000000..636859e952
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-4.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <style>
+ span.x { color: green; }
+ div::first-letter { font-size: 100px; }
+ </style>
+ <div style="color: red">
+ <span>X</span>
+ </div>
+ <script>
+ addEventListener("load", function() {
+ // Make sure we do our class change after we've done our next restyle, so we
+ // won't get a spurious restyle hiding the problem we're testing.
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ var s = document.querySelector("span");
+ s.className = 'x'
+ document.documentElement.className = "";
+ });
+ });
+ });
+ </script>
+</html>
diff --git a/layout/reftests/first-letter/dynamic-5-ref.html b/layout/reftests/first-letter/dynamic-5-ref.html
new file mode 100644
index 0000000000..760794a3f1
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-5-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+fieldset::first-letter {
+ color: green;
+}
+</style>
+<fieldset>Text</fieldset>
diff --git a/layout/reftests/first-letter/dynamic-5.html b/layout/reftests/first-letter/dynamic-5.html
new file mode 100644
index 0000000000..2d5638c3d3
--- /dev/null
+++ b/layout/reftests/first-letter/dynamic-5.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+fieldset::first-letter {
+ color: red;
+}
+fieldset.f::first-letter {
+ color: green;
+}
+</style>
+<fieldset>Text</fieldset>
+<script>
+window.onload = function() {
+ document.querySelector('fieldset').classList.add('f');
+}
+</script>
diff --git a/layout/reftests/first-letter/font-text-styles-floater-ref.html b/layout/reftests/first-letter/font-text-styles-floater-ref.html
new file mode 100644
index 0000000000..337aabeb99
--- /dev/null
+++ b/layout/reftests/first-letter/font-text-styles-floater-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Testing first-letter handling of font/text styles</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+html { overflow: hidden; }
+body {
+ margin: 20px;
+ font-size: 600%;
+ line-height: 1.2em;
+ font-family: serif;
+}
+
+div { width: 5em; }
+p { width: 0.5em; margin: 0; font-style: italic; }
+span.boldnormal { font-weight: bold; font-style: normal; }
+p.floatingfirst::first-letter { float: left; }
+</style>
+
+</head>
+<body>
+<div>
+<p class="floatingfirst"><span class="boldnormal">G</span>onzo</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/font-text-styles-floater.html b/layout/reftests/first-letter/font-text-styles-floater.html
new file mode 100644
index 0000000000..b68a5579c8
--- /dev/null
+++ b/layout/reftests/first-letter/font-text-styles-floater.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Testing first-letter handling of font/text styles</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+html { overflow: hidden; }
+body {
+ margin: 20px;
+ font-size: 600%;
+ line-height: 1.2em;
+ font-family: serif;
+}
+
+div { width: 5em; }
+p { width: 0.5em; margin: 0; font-style: italic; }
+p.floatingfirst::first-letter { float: left; font-weight: bold; text-transform: uppercase; font-style: normal; }
+</style>
+
+</head>
+<body>
+<div>
+<p class="floatingfirst">gonzo</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/font-text-styles-ref.html b/layout/reftests/first-letter/font-text-styles-ref.html
new file mode 100644
index 0000000000..a9e400d1b6
--- /dev/null
+++ b/layout/reftests/first-letter/font-text-styles-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Testing first-letter handling of font/text styles</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+html { overflow: hidden; }
+body {
+ margin: 1em;
+ font-size: 25px;
+ line-height: 1.2em;
+ font-family: serif;
+}
+
+div { width: 200px; }
+p { width: 0.5em; margin: 0; }
+span.bold { font-weight: bold; }
+span.bolditalic { font-weight: bold; font-style: italic; }
+span.floater { float: left; }
+span.sans { font-family: sans-serif; }
+</style>
+
+</head>
+<body>
+<div>
+<p><span class="bold">Y</span>ellow corndog</p>
+<p><span class="bolditalic">h</span>IPPIE BANANA</p>
+<p><span class="floater"><span class="sans">G</span>onzo macadamia</span></p>
+<p><span class="bolditalic">f</span>ELICITOUS <span class="bold">R</span>aspberry</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/font-text-styles.html b/layout/reftests/first-letter/font-text-styles.html
new file mode 100644
index 0000000000..e117a6bbf6
--- /dev/null
+++ b/layout/reftests/first-letter/font-text-styles.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Testing first-letter handling of font/text styles</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+html { overflow: hidden; }
+body {
+ margin: 1em;
+ font-size: 25px;
+ line-height: 1.2em;
+ font-family: serif;
+}
+
+div { width: 200px; }
+p { width: 0.5em; margin: 0; }
+p:first-letter { font-weight: bold; text-transform: uppercase; }
+p.reverse:first-letter { font-style: italic; text-transform: lowercase; }
+span.floater { float: left; }
+span.floater:first-letter { font-family: sans-serif; text-transform: uppercase; }
+span.special { display: inline-block; }
+span.special:first-letter { font-weight: bold; text-transform: uppercase; }
+</style>
+
+</head>
+<body>
+<div>
+<p>yellow corndog</p>
+<p class="reverse">HIPPIE BANANA</p>
+<p><span class="floater">gonzo macadamia</span></p>
+<p class="reverse">FELICITOUS <span class="special">raspberry</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/indic-clusters-1-ref.html b/layout/reftests/first-letter/indic-clusters-1-ref.html
new file mode 100644
index 0000000000..0b14703115
--- /dev/null
+++ b/layout/reftests/first-letter/indic-clusters-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Bug 1048899</title>
+<style>
+@font-face { font-family: lohit; src: url(../fonts/ttf-indic/Lohit-Telugu.ttf); }
+body { font-family: lohit; }
+.first { color: red; font-weight: bold; }
+</style>
+</head>
+<body>
+<div><span class='first'>అ</span>మ్మ</div>
+<div><span class='first'>క</span>డలి</div>
+<div><span class='first'>జో</span>రు</div>
+<div><span class='first'>అం</span>దం</div>
+<div><span class='first'>వాఁ</span>డు</div>
+<div><span class='first'>కాం</span>డం</div>
+<div><span class='first'>కృ</span>తి</div>
+<div><span class='first'>ప్ర</span>జలు</div>
+<div><span class='first'>క్రాం</span>తి</div>
+<div><span class='first'>స్త్రీ</span>లు</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/indic-clusters-1.html b/layout/reftests/first-letter/indic-clusters-1.html
new file mode 100644
index 0000000000..e8420d1d02
--- /dev/null
+++ b/layout/reftests/first-letter/indic-clusters-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Bug 1048899</title>
+<style>
+@font-face { font-family: lohit; src: url(../fonts/ttf-indic/Lohit-Telugu.ttf); }
+body { font-family: lohit; }
+.test::first-letter { color: red; font-weight: bold; }
+</style>
+</head>
+<body>
+<div class='test'>అమ్మ</div>
+<div class='test'>కడలి</div>
+<div class='test'>జోరు</div>
+<div class='test'>అందం</div>
+<div class='test'>వాఁడు</div>
+<div class='test'>కాండం</div>
+<div class='test'>కృతి</div>
+<div class='test'>ప్రజలు</div>
+<div class='test'>క్రాంతి</div>
+<div class='test'>స్త్రీలు</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/inline-height-empty-ref.html b/layout/reftests/first-letter/inline-height-empty-ref.html
new file mode 100644
index 0000000000..015b93ea53
--- /dev/null
+++ b/layout/reftests/first-letter/inline-height-empty-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1055865</title>
+<style>
+
+p { border: thin solid blue; color: transparent; font: 50px/50px serif; }
+
+p::first-letter { background: transparent; color: transparent }
+
+</style>
+<p>text</p>
diff --git a/layout/reftests/first-letter/inline-height-empty.html b/layout/reftests/first-letter/inline-height-empty.html
new file mode 100644
index 0000000000..d4840eb932
--- /dev/null
+++ b/layout/reftests/first-letter/inline-height-empty.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1055865</title>
+<style>
+
+p { border: thin solid blue; color: transparent; font: 50px/50px serif; }
+
+p::first-letter { background: transparent; color: transparent }
+
+</style>
+<p>&nbsp;text</p>
diff --git a/layout/reftests/first-letter/nested-1-ref.html b/layout/reftests/first-letter/nested-1-ref.html
new file mode 100644
index 0000000000..35bfb80f0c
--- /dev/null
+++ b/layout/reftests/first-letter/nested-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ div { color: black; }
+ span#letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <span>
+ <span id="letter">T</span>his is text
+ </span>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/nested-1a.html b/layout/reftests/first-letter/nested-1a.html
new file mode 100644
index 0000000000..88748e3070
--- /dev/null
+++ b/layout/reftests/first-letter/nested-1a.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <span>
+ This is text
+ </span>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/nested-1b.html b/layout/reftests/first-letter/nested-1b.html
new file mode 100644
index 0000000000..58d69233f0
--- /dev/null
+++ b/layout/reftests/first-letter/nested-1b.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="dom" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>This is more text
+ <span>
+ This is text
+ </span>
+ </div>
+ <script>
+ document.body.offsetWidth;
+ document.getElementsByTagName("div")[0].firstChild.data = "";
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/nested-1c.html b/layout/reftests/first-letter/nested-1c.html
new file mode 100644
index 0000000000..8e24f7bc43
--- /dev/null
+++ b/layout/reftests/first-letter/nested-1c.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="dom" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <span>
+
+ </span>
+ </div>
+ <script>
+ document.body.offsetWidth;
+ document.getElementsByTagName("span")[0].firstChild.data = "This is text";
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/nested-1d.html b/layout/reftests/first-letter/nested-1d.html
new file mode 100644
index 0000000000..2762ab4e5d
--- /dev/null
+++ b/layout/reftests/first-letter/nested-1d.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="dom" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <span>
+
+ </span>
+ </div>
+ <script>
+ document.body.offsetWidth;
+ document.getElementsByTagName("span")[0].
+ appendChild(document.createTextNode("This is text"));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/nested-1e.html b/layout/reftests/first-letter/nested-1e.html
new file mode 100644
index 0000000000..b8483c7257
--- /dev/null
+++ b/layout/reftests/first-letter/nested-1e.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="dom" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <span></span>
+ </div>
+ <script>
+ document.body.offsetWidth;
+ document.getElementsByTagName("span")[0].
+ appendChild(document.createTextNode("This is text"));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/nested-1f.html b/layout/reftests/first-letter/nested-1f.html
new file mode 100644
index 0000000000..192ff4e25e
--- /dev/null
+++ b/layout/reftests/first-letter/nested-1f.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: @charset</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#charset"/>
+ <meta name="flags" content="" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <span> </span>
+ <span>
+ This is text
+ </span>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/nested-1g.html b/layout/reftests/first-letter/nested-1g.html
new file mode 100644
index 0000000000..e26335bb6b
--- /dev/null
+++ b/layout/reftests/first-letter/nested-1g.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Simon Montagu" href="http://smontagu.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>
+ <span>T</span>his is text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/overflow-float-nooverflow-ref.html b/layout/reftests/first-letter/overflow-float-nooverflow-ref.html
new file mode 100644
index 0000000000..fad9f0e63d
--- /dev/null
+++ b/layout/reftests/first-letter/overflow-float-nooverflow-ref.html
@@ -0,0 +1,14 @@
+<title>::first-letter and overflow</title>
+<style>
+
+div {
+ height: 8em; width: 5em;
+ padding: 3px;
+ background: yellow; color: black;
+ line-height: 1.0;
+}
+div::first-letter { font-size: 1.2em; float: left; }
+
+</style>
+
+<div>Hello world, testing, testing, testing, testing</div>
diff --git a/layout/reftests/first-letter/overflow-float-nooverflow.html b/layout/reftests/first-letter/overflow-float-nooverflow.html
new file mode 100644
index 0000000000..ff90203443
--- /dev/null
+++ b/layout/reftests/first-letter/overflow-float-nooverflow.html
@@ -0,0 +1,15 @@
+<title>::first-letter and overflow</title>
+<style>
+
+div {
+ height: 8em; width: 5em;
+ padding: 3px;
+ background: yellow; color: black;
+ overflow: auto;
+ line-height: 1.0;
+}
+div::first-letter { font-size: 1.2em; float: left; }
+
+</style>
+
+<div>Hello world, testing, testing, testing, testing</div>
diff --git a/layout/reftests/first-letter/overflow-float-overflow-notref.html b/layout/reftests/first-letter/overflow-float-overflow-notref.html
new file mode 100644
index 0000000000..71653ab259
--- /dev/null
+++ b/layout/reftests/first-letter/overflow-float-overflow-notref.html
@@ -0,0 +1,15 @@
+<title>::first-letter and overflow</title>
+<style>
+
+div {
+ height: 3em; width: 8em;
+ padding: 3px;
+ background: yellow; color: black;
+ overflow: hidden;
+ line-height: 1.0;
+}
+div::first-letter { font-size: 6em; float: left; }
+
+</style>
+
+<div>Hello</div>
diff --git a/layout/reftests/first-letter/overflow-float-overflow.html b/layout/reftests/first-letter/overflow-float-overflow.html
new file mode 100644
index 0000000000..5d34cc0bdd
--- /dev/null
+++ b/layout/reftests/first-letter/overflow-float-overflow.html
@@ -0,0 +1,15 @@
+<title>::first-letter and overflow</title>
+<style>
+
+div {
+ height: 3em; width: 8em;
+ padding: 3px;
+ background: yellow; color: black;
+ overflow: auto;
+ line-height: 1.0;
+}
+div::first-letter { font-size: 6em; float: left; }
+
+</style>
+
+<div>Hello</div>
diff --git a/layout/reftests/first-letter/overflow-inline-nooverflow-ref.html b/layout/reftests/first-letter/overflow-inline-nooverflow-ref.html
new file mode 100644
index 0000000000..856c3a8a07
--- /dev/null
+++ b/layout/reftests/first-letter/overflow-inline-nooverflow-ref.html
@@ -0,0 +1,14 @@
+<title>::first-letter and overflow</title>
+<style>
+
+div {
+ height: 8em; width: 5em;
+ padding: 3px;
+ background: yellow; color: black;
+ line-height: 1.0;
+}
+div::first-letter { font-size: 1.2em }
+
+</style>
+
+<div>Hello world, testing, testing, testing, testing</div>
diff --git a/layout/reftests/first-letter/overflow-inline-nooverflow.html b/layout/reftests/first-letter/overflow-inline-nooverflow.html
new file mode 100644
index 0000000000..7a48a3c4c0
--- /dev/null
+++ b/layout/reftests/first-letter/overflow-inline-nooverflow.html
@@ -0,0 +1,15 @@
+<title>::first-letter and overflow</title>
+<style>
+
+div {
+ height: 8em; width: 5em;
+ padding: 3px;
+ background: yellow; color: black;
+ overflow: auto;
+ line-height: 1.0;
+}
+div::first-letter { font-size: 1.2em }
+
+</style>
+
+<div>Hello world, testing, testing, testing, testing</div>
diff --git a/layout/reftests/first-letter/overflow-inline-overflow-notref.html b/layout/reftests/first-letter/overflow-inline-overflow-notref.html
new file mode 100644
index 0000000000..772d835266
--- /dev/null
+++ b/layout/reftests/first-letter/overflow-inline-overflow-notref.html
@@ -0,0 +1,14 @@
+<title>::first-letter and overflow</title>
+<style>
+
+div {
+ height: 3em; width: 8em;
+ padding: 3px;
+ background: yellow; color: black;
+ line-height: 1.0;
+}
+div::first-letter { font-size: 4em }
+
+</style>
+
+<div>Hello</div>
diff --git a/layout/reftests/first-letter/overflow-inline-overflow-ref.html b/layout/reftests/first-letter/overflow-inline-overflow-ref.html
new file mode 100644
index 0000000000..196168c804
--- /dev/null
+++ b/layout/reftests/first-letter/overflow-inline-overflow-ref.html
@@ -0,0 +1,15 @@
+<title>::first-letter and overflow</title>
+<style>
+
+div {
+ height: 3em; width: 8em;
+ padding: 3px;
+ background: yellow; color: black;
+ overflow: auto;
+ line-height: 1.0;
+}
+span { font-size: 4em }
+
+</style>
+
+<div><span>H</span>ello</div>
diff --git a/layout/reftests/first-letter/overflow-inline-overflow.html b/layout/reftests/first-letter/overflow-inline-overflow.html
new file mode 100644
index 0000000000..a7b95c1e9b
--- /dev/null
+++ b/layout/reftests/first-letter/overflow-inline-overflow.html
@@ -0,0 +1,15 @@
+<title>::first-letter and overflow</title>
+<style>
+
+div {
+ height: 3em; width: 8em;
+ padding: 3px;
+ background: yellow; color: black;
+ overflow: auto;
+ line-height: 1.0;
+}
+div::first-letter { font-size: 4em }
+
+</style>
+
+<div>Hello</div>
diff --git a/layout/reftests/first-letter/parent-style-1-ref.html b/layout/reftests/first-letter/parent-style-1-ref.html
new file mode 100644
index 0000000000..52847e1ba3
--- /dev/null
+++ b/layout/reftests/first-letter/parent-style-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div { float: left; overflow: scroll; font-size: 50px; width: 3em; line-height: 10px }
+div::first-letter { float: left; }
+</style>
+<body>
+<div>T<span style="font-size: 10px">his is text in a div. Text in a div. Text in a div. Text in a div. Text in a div. Text in a div. Text in a div. Text in a div.</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/parent-style-1.html b/layout/reftests/first-letter/parent-style-1.html
new file mode 100644
index 0000000000..2b42290df7
--- /dev/null
+++ b/layout/reftests/first-letter/parent-style-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS 2.1 Test Suite: :first-letter</title>
+<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+<meta name="flags" content="" />
+<style>
+div { float: left; overflow: scroll; font-size: 50px; width: 3em; line-height: 10px }
+div::first-letter { float: inherit; }
+</style>
+<body>
+<div>T<span style="font-size: 10px">his is text in a div. Text in a div. Text in a div. Text in a div. Text in a div. Text in a div. Text in a div. Text in a div.</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/quote-1-ref.html b/layout/reftests/first-letter/quote-1-ref.html
new file mode 100644
index 0000000000..9c8b1674f0
--- /dev/null
+++ b/layout/reftests/first-letter/quote-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ div { color: black; }
+ span#letter { color: green; }
+ </style>
+</head>
+<body>
+ <div><span id="letter">"T</span>his is text"</span></div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/quote-1a.html b/layout/reftests/first-letter/quote-1a.html
new file mode 100644
index 0000000000..1b06d099dd
--- /dev/null
+++ b/layout/reftests/first-letter/quote-1a.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div>"This is text"</div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/quote-1b.html b/layout/reftests/first-letter/quote-1b.html
new file mode 100644
index 0000000000..8f1fe62059
--- /dev/null
+++ b/layout/reftests/first-letter/quote-1b.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ span:before { content: open-quote; }
+ span:after { content: close-quote; }
+ span { quotes: '"' '"'; }
+ </style>
+</head>
+<body>
+ <div><span>This is text</span></div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/quote-1c.html b/layout/reftests/first-letter/quote-1c.html
new file mode 100644
index 0000000000..5ece9a3dad
--- /dev/null
+++ b/layout/reftests/first-letter/quote-1c.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ span:before { content: open-quote "This "; }
+ span:after { content: close-quote; }
+ span { quotes: '"' '"'; }
+ </style>
+</head>
+<body>
+ <div><span>is text</span></div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/quote-1d.html b/layout/reftests/first-letter/quote-1d.html
new file mode 100644
index 0000000000..26aef7eb73
--- /dev/null
+++ b/layout/reftests/first-letter/quote-1d.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="dom" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div><span></span></div>
+ <script>
+ document.body.offsetWidth;
+ document.getElementsByTagName("span")[0].
+ appendChild(document.createTextNode('"'));
+ document.getElementsByTagName("span")[0].
+ appendChild(document.createTextNode('This is text"'));
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/quote-1e.html b/layout/reftests/first-letter/quote-1e.html
new file mode 100644
index 0000000000..e3b05922b1
--- /dev/null
+++ b/layout/reftests/first-letter/quote-1e.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ </style>
+</head>
+<body>
+ <div><a>"<span>This is text</span>"</a></div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/quote-1f.html b/layout/reftests/first-letter/quote-1f.html
new file mode 100644
index 0000000000..239f4d89e8
--- /dev/null
+++ b/layout/reftests/first-letter/quote-1f.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: :first-letter</title>
+ <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter"/>
+ <meta name="flags" content="" />
+ <style>
+ div { color: black; }
+ div::first-letter { color: green; }
+ span:before { content: "\"This "; }
+ </style>
+</head>
+<body>
+ <div><span>is text"</span></div>
+</body>
+</html>
diff --git a/layout/reftests/first-letter/reftest.list b/layout/reftests/first-letter/reftest.list
new file mode 100644
index 0000000000..b6aaa5e5e6
--- /dev/null
+++ b/layout/reftests/first-letter/reftest.list
@@ -0,0 +1,82 @@
+# basic functionality
+== basic-1.html basic-ref.html
+== basic-2.html basic-ref.html
+
+# parent ComputedStyle correct
+== parent-style-1.html parent-style-1-ref.html
+
+# others
+== nested-1a.html nested-1-ref.html
+== nested-1b.html nested-1-ref.html
+== nested-1c.html nested-1-ref.html
+== nested-1d.html nested-1-ref.html
+== nested-1e.html nested-1-ref.html
+== nested-1f.html nested-1-ref.html
+== nested-1g.html nested-1-ref.html
+== quote-1a.html quote-1-ref.html
+fails == quote-1b.html quote-1-ref.html # bug 509685
+fails == quote-1c.html quote-1-ref.html # bug 509685
+== quote-1c.html quote-1b.html
+fails == quote-1d.html quote-1-ref.html
+== quote-1d.html quote-1b.html
+fails == quote-1e.html quote-1-ref.html # bug 509685
+== quote-1e.html quote-1b.html
+== quote-1f.html quote-1-ref.html
+== dynamic-1.html dynamic-1-ref.html
+random-if(d2d) == dynamic-2.html dynamic-2-ref.html
+== dynamic-3a.html dynamic-3-ref.html
+== dynamic-3b.html dynamic-3-ref.html
+== dynamic-4.html dynamic-4-ref.html
+== dynamic-5.html dynamic-5-ref.html
+== 23605-1.html 23605-1-ref.html
+== 23605-2.html 23605-2-ref.html
+== 23605-3.html 23605-3-ref.html
+== 23605-4.html 23605-4-ref.html
+fuzzy-if(winWidget,0-177,0-1) == 23605-5.html 23605-5-ref.html # Antialiased pixel between the underline and the left square bracket
+== 23605-6.html 23605-6-ref.html
+!= 229764-1.html 229764-ref.html
+== 229764-2.html 229764-ref.html
+== 329069-1.html 329069-1-ref.html
+== 329069-2.html 329069-2-ref.html
+== 329069-3.html 329069-3-ref.html
+== 329069-4.html 329069-4-ref.html
+== 329069-5.html 329069-5-ref.html
+== 342120-1.xhtml 342120-1-ref.xhtml
+== 379799-1.html 379799-1-ref.html
+== 399941-1.html 399941-1-ref.html
+== 399941-2.html 399941-2-ref.html
+== 399941-3.html 399941-3-ref.html
+== 399941-4.html 399941-4-ref.html
+== 399941-5.html 399941-5-ref.html
+== 399941-6.html 399941-6-ref.html
+== 399941-7.html 399941-7-ref.html
+== 399941-8.html 399941-8-ref.html
+== 399941-9.html 399941-9-ref.html
+== 429968-1a.html 429968-1-ref.html
+== 429968-1b.html 429968-1-ref.html
+== 429968-2a.html 429968-2-ref.html
+== 429968-2b.html 429968-2-ref.html
+== 429968-2c.html 429968-2-ref.html
+== 441418-1.html 441418-1-ref.html
+== 469227-1.html 469227-1-ref.html
+== 484400-1.html 484400-1-ref.html
+== 594303-1.html 594303-1-ref.html
+fails-if(winWidget||cocoaWidget) fails-if(geckoview) == 617869-1.html 617869-1-ref.html # Bug 1558513 for GV
+== 723509-1.html 723509-1-ref.html
+== 922550-1.html 922550-1-ref.html
+== 958249.html 958249-ref.html
+== font-text-styles.html font-text-styles-ref.html
+random-if(gtkWidget) random-if(winWidget&&!d2d) == font-text-styles-floater.html font-text-styles-floater-ref.html # bug 992846
+== inline-height-empty.html inline-height-empty-ref.html
+== indic-clusters-1.html indic-clusters-1-ref.html
+== overflow-float-nooverflow.html overflow-float-nooverflow-ref.html
+!= overflow-float-overflow.html overflow-float-overflow-notref.html
+== overflow-inline-nooverflow.html overflow-inline-nooverflow-ref.html
+!= overflow-inline-overflow.html overflow-inline-overflow-notref.html
+== overflow-inline-overflow.html overflow-inline-overflow-ref.html
+
+== 1385656.html 1385656-ref.html
+== 1404167-1.html 1404167-1-ref.html
+== 1404167-2.html 1404167-2-ref.html
+== 1404167-3.html 1404167-3-ref.html
+== 1404167-4.html 1404167-4-ref.html