From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 .../CSS21-t1502-no-inherited-font-family-ref.xhtml |  43 ++
 .../CSS21-t1502-no-inherited-font-family.xhtml     |  61 +++
 .../font-matching/apple-symbols-1-notref.html      |  25 +
 layout/reftests/font-matching/apple-symbols-1.html |  25 +
 .../reftests/font-matching/arial-arabic-ref.html   |  25 +
 layout/reftests/font-matching/arial-arabic.html    |  26 ++
 .../font-matching/arial-variations-1-ref.html      |  43 ++
 .../reftests/font-matching/arial-variations-1.html |  43 ++
 .../font-matching/arial-variations-2-ref.html      |  43 ++
 .../reftests/font-matching/arial-variations-2.html |  43 ++
 .../font-matching/arial-variations-3-ref.html      |  43 ++
 .../reftests/font-matching/arial-variations-3.html |  43 ++
 .../font-matching/arial-variations-4-ref.html      |  43 ++
 .../reftests/font-matching/arial-variations-4.html |  43 ++
 .../font-matching/arial-variations-5-ref.html      |  43 ++
 .../reftests/font-matching/arial-variations-5.html |  43 ++
 .../font-matching/arial-variations-6-ref.html      |  43 ++
 .../reftests/font-matching/arial-variations-6.html |  43 ++
 .../reftests/font-matching/arialunicode-bold.html  |  10 +
 .../font-matching/arialunicode-bolditalic.html     |  10 +
 .../font-matching/arialunicode-italic.html         |  10 +
 .../font-matching/arialunicode-oblique.html        |  10 +
 layout/reftests/font-matching/arialunicode.html    |  10 +
 .../bold-system-fallback-1-notref.html             |  19 +
 .../font-matching/bold-system-fallback-1.html      |  19 +
 .../bold-system-fallback-2-notref.html             |  19 +
 .../font-matching/bold-system-fallback-2.html      |  19 +
 .../reftests/font-matching/defaultfont-bold.html   |  10 +
 .../font-matching/defaultfont-bolditalic.html      |  10 +
 .../reftests/font-matching/defaultfont-italic.html |  10 +
 .../font-matching/defaultfont-oblique.html         |  10 +
 layout/reftests/font-matching/defaultfont.html     |   9 +
 .../font-matching/defaultjapanese-bold.html        |   9 +
 .../font-matching/defaultjapanese-bolditalic.html  |   9 +
 .../font-matching/defaultjapanese-italic.html      |   9 +
 .../font-matching/defaultjapanese-oblique.html     |  10 +
 layout/reftests/font-matching/defaultjapanese.html |   9 +
 .../familyname-escapedidents-ref.html              |  16 +
 .../font-matching/familyname-escapedidents.html    |  17 +
 .../font-matching/font-shorthand-stretch-1.html    |  79 ++++
 .../reftests/font-matching/font-stretch-1-ref.html |  73 +++
 layout/reftests/font-matching/font-stretch-1.html  |  79 ++++
 .../font-matching/font-synthesis-1-ref.html        |  23 +
 .../reftests/font-matching/font-synthesis-1.html   |  23 +
 .../font-matching/font-synthesis-2-ref.html        |  28 ++
 .../reftests/font-matching/font-synthesis-2.html   |  28 ++
 layout/reftests/font-matching/impact-bold.html     |  10 +
 .../reftests/font-matching/impact-bolditalic.html  |  10 +
 layout/reftests/font-matching/impact-italic.html   |  10 +
 layout/reftests/font-matching/impact-oblique.html  |  10 +
 layout/reftests/font-matching/impact.html          |  10 +
 .../reftests/font-matching/italic-oblique-1.html   |  31 ++
 .../reftests/font-matching/italic-oblique-2.html   |  31 ++
 .../reftests/font-matching/italic-oblique-3.html   |  37 ++
 .../reftests/font-matching/italic-oblique-4.html   |  37 ++
 .../reftests/font-matching/italic-oblique-5.html   |  37 ++
 .../reftests/font-matching/italic-oblique-6.html   |  37 ++
 .../reftests/font-matching/italic-oblique-7.html   |  37 ++
 .../reftests/font-matching/italic-oblique-8.html   |  43 ++
 .../reftests/font-matching/italic-oblique-9.html   |  43 ++
 .../font-matching/italic-oblique-kinnari-ref.html  |  37 ++
 .../font-matching/italic-oblique-kinnari.html      |  37 ++
 .../reftests/font-matching/italic-oblique-ref.html |  24 +
 .../localized-family-names-001-ref.html            |  46 ++
 .../font-matching/localized-family-names-001.html  |  46 ++
 .../localized-family-names-002-ref.html            |  46 ++
 .../font-matching/localized-family-names-002.html  |  46 ++
 .../localized-family-names-003-ref.html            |  46 ++
 .../font-matching/localized-family-names-003.html  |  46 ++
 .../localized-family-names-004-ref.html            |  38 ++
 .../font-matching/localized-family-names-004.html  |  38 ++
 .../reftests/font-matching/lucidaconsole-bold.html |  10 +
 .../font-matching/lucidaconsole-bolditalic.html    |  10 +
 .../font-matching/lucidaconsole-italic.html        |  10 +
 .../font-matching/lucidaconsole-oblique.html       |  10 +
 layout/reftests/font-matching/lucidaconsole.html   |  10 +
 .../font-matching/normalmedium-notref.html         |  42 ++
 .../reftests/font-matching/normalmedium-ref.html   |  42 ++
 layout/reftests/font-matching/normalmedium.html    |  44 ++
 layout/reftests/font-matching/reftest-stylo.list   | 143 ++++++
 layout/reftests/font-matching/reftest.list         | 127 ++++++
 .../reftests/font-matching/simple-oblique-ref.html |  33 ++
 layout/reftests/font-matching/simple-oblique.html  |  33 ++
 .../font-matching/stretchmapping-137-ref.html      | 348 ++++++++++++++
 .../reftests/font-matching/stretchmapping-137.html | 268 +++++++++++
 .../font-matching/stretchmapping-35-ref.html       | 320 +++++++++++++
 .../reftests/font-matching/stretchmapping-35.html  | 240 ++++++++++
 .../font-matching/stretchmapping-all-ref.html      | 366 +++++++++++++++
 .../reftests/font-matching/stretchmapping-all.html | 505 +++++++++++++++++++++
 .../font-matching/stretchmapping-reverse-ref.html  |  54 +++
 .../font-matching/stretchmapping-reverse.html      | 102 +++++
 .../font-matching/synthetic-bold-1-ref.html        |  11 +
 .../reftests/font-matching/synthetic-bold-1.html   |  12 +
 .../font-matching/synthetic-bold-2-ref.html        |  11 +
 .../reftests/font-matching/synthetic-bold-2.html   |  12 +
 .../font-matching/synthetic-style-1-notref.html    |  15 +
 .../reftests/font-matching/synthetic-style-1.html  |  19 +
 .../font-matching/synthetic-style-2-notref.html    |  15 +
 .../reftests/font-matching/synthetic-style-2.html  |  19 +
 .../font-matching/syntheticbold-rotated-ref.html   |  35 ++
 .../font-matching/syntheticbold-rotated.html       |  36 ++
 .../system-generic-fallback-1-ref.html             |  39 ++
 .../font-matching/system-generic-fallback-1.html   |  39 ++
 .../system-generic-fallback-2-ref.html             |  38 ++
 .../font-matching/system-generic-fallback-2.html   |  38 ++
 .../system-generic-fallback-3-ref.html             |  38 ++
 .../font-matching/system-generic-fallback-3.html   |  38 ++
 .../system-generic-fallback-4-ref.html             |  38 ++
 .../font-matching/system-generic-fallback-4.html   |  38 ++
 .../font-matching/system-generic-fallback-ja.html  |  33 ++
 .../font-matching/system-generic-fallback-ko.html  |  33 ++
 .../system-generic-fallback-zh-cn.html             |  33 ++
 .../system-generic-fallback-zh-tw.html             |  33 ++
 .../font-matching/weightmapping-12-ref.html        | 222 +++++++++
 .../reftests/font-matching/weightmapping-12.html   | 174 +++++++
 .../font-matching/weightmapping-12579-ref.html     | 255 +++++++++++
 .../font-matching/weightmapping-12579.html         | 207 +++++++++
 .../font-matching/weightmapping-25-ref.html        | 222 +++++++++
 .../reftests/font-matching/weightmapping-25.html   | 174 +++++++
 .../font-matching/weightmapping-45-ref.html        | 222 +++++++++
 .../reftests/font-matching/weightmapping-45.html   | 174 +++++++
 .../font-matching/weightmapping-458-ref.html       | 233 ++++++++++
 .../reftests/font-matching/weightmapping-458.html  | 185 ++++++++
 .../font-matching/weightmapping-478-ref.html       | 233 ++++++++++
 .../reftests/font-matching/weightmapping-478.html  | 185 ++++++++
 .../font-matching/weightmapping-7-ref.html         | 211 +++++++++
 layout/reftests/font-matching/weightmapping-7.html | 163 +++++++
 127 files changed, 8341 insertions(+)
 create mode 100644 layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family-ref.xhtml
 create mode 100644 layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family.xhtml
 create mode 100644 layout/reftests/font-matching/apple-symbols-1-notref.html
 create mode 100644 layout/reftests/font-matching/apple-symbols-1.html
 create mode 100644 layout/reftests/font-matching/arial-arabic-ref.html
 create mode 100644 layout/reftests/font-matching/arial-arabic.html
 create mode 100644 layout/reftests/font-matching/arial-variations-1-ref.html
 create mode 100644 layout/reftests/font-matching/arial-variations-1.html
 create mode 100644 layout/reftests/font-matching/arial-variations-2-ref.html
 create mode 100644 layout/reftests/font-matching/arial-variations-2.html
 create mode 100644 layout/reftests/font-matching/arial-variations-3-ref.html
 create mode 100644 layout/reftests/font-matching/arial-variations-3.html
 create mode 100644 layout/reftests/font-matching/arial-variations-4-ref.html
 create mode 100644 layout/reftests/font-matching/arial-variations-4.html
 create mode 100644 layout/reftests/font-matching/arial-variations-5-ref.html
 create mode 100644 layout/reftests/font-matching/arial-variations-5.html
 create mode 100644 layout/reftests/font-matching/arial-variations-6-ref.html
 create mode 100644 layout/reftests/font-matching/arial-variations-6.html
 create mode 100644 layout/reftests/font-matching/arialunicode-bold.html
 create mode 100644 layout/reftests/font-matching/arialunicode-bolditalic.html
 create mode 100644 layout/reftests/font-matching/arialunicode-italic.html
 create mode 100644 layout/reftests/font-matching/arialunicode-oblique.html
 create mode 100644 layout/reftests/font-matching/arialunicode.html
 create mode 100644 layout/reftests/font-matching/bold-system-fallback-1-notref.html
 create mode 100644 layout/reftests/font-matching/bold-system-fallback-1.html
 create mode 100644 layout/reftests/font-matching/bold-system-fallback-2-notref.html
 create mode 100644 layout/reftests/font-matching/bold-system-fallback-2.html
 create mode 100644 layout/reftests/font-matching/defaultfont-bold.html
 create mode 100644 layout/reftests/font-matching/defaultfont-bolditalic.html
 create mode 100644 layout/reftests/font-matching/defaultfont-italic.html
 create mode 100644 layout/reftests/font-matching/defaultfont-oblique.html
 create mode 100644 layout/reftests/font-matching/defaultfont.html
 create mode 100644 layout/reftests/font-matching/defaultjapanese-bold.html
 create mode 100644 layout/reftests/font-matching/defaultjapanese-bolditalic.html
 create mode 100644 layout/reftests/font-matching/defaultjapanese-italic.html
 create mode 100644 layout/reftests/font-matching/defaultjapanese-oblique.html
 create mode 100644 layout/reftests/font-matching/defaultjapanese.html
 create mode 100644 layout/reftests/font-matching/familyname-escapedidents-ref.html
 create mode 100644 layout/reftests/font-matching/familyname-escapedidents.html
 create mode 100644 layout/reftests/font-matching/font-shorthand-stretch-1.html
 create mode 100644 layout/reftests/font-matching/font-stretch-1-ref.html
 create mode 100644 layout/reftests/font-matching/font-stretch-1.html
 create mode 100644 layout/reftests/font-matching/font-synthesis-1-ref.html
 create mode 100644 layout/reftests/font-matching/font-synthesis-1.html
 create mode 100644 layout/reftests/font-matching/font-synthesis-2-ref.html
 create mode 100644 layout/reftests/font-matching/font-synthesis-2.html
 create mode 100644 layout/reftests/font-matching/impact-bold.html
 create mode 100644 layout/reftests/font-matching/impact-bolditalic.html
 create mode 100644 layout/reftests/font-matching/impact-italic.html
 create mode 100644 layout/reftests/font-matching/impact-oblique.html
 create mode 100644 layout/reftests/font-matching/impact.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-1.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-2.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-3.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-4.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-5.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-6.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-7.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-8.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-9.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-kinnari-ref.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-kinnari.html
 create mode 100644 layout/reftests/font-matching/italic-oblique-ref.html
 create mode 100644 layout/reftests/font-matching/localized-family-names-001-ref.html
 create mode 100644 layout/reftests/font-matching/localized-family-names-001.html
 create mode 100644 layout/reftests/font-matching/localized-family-names-002-ref.html
 create mode 100644 layout/reftests/font-matching/localized-family-names-002.html
 create mode 100644 layout/reftests/font-matching/localized-family-names-003-ref.html
 create mode 100644 layout/reftests/font-matching/localized-family-names-003.html
 create mode 100644 layout/reftests/font-matching/localized-family-names-004-ref.html
 create mode 100644 layout/reftests/font-matching/localized-family-names-004.html
 create mode 100644 layout/reftests/font-matching/lucidaconsole-bold.html
 create mode 100644 layout/reftests/font-matching/lucidaconsole-bolditalic.html
 create mode 100644 layout/reftests/font-matching/lucidaconsole-italic.html
 create mode 100644 layout/reftests/font-matching/lucidaconsole-oblique.html
 create mode 100644 layout/reftests/font-matching/lucidaconsole.html
 create mode 100644 layout/reftests/font-matching/normalmedium-notref.html
 create mode 100644 layout/reftests/font-matching/normalmedium-ref.html
 create mode 100644 layout/reftests/font-matching/normalmedium.html
 create mode 100644 layout/reftests/font-matching/reftest-stylo.list
 create mode 100644 layout/reftests/font-matching/reftest.list
 create mode 100644 layout/reftests/font-matching/simple-oblique-ref.html
 create mode 100644 layout/reftests/font-matching/simple-oblique.html
 create mode 100644 layout/reftests/font-matching/stretchmapping-137-ref.html
 create mode 100644 layout/reftests/font-matching/stretchmapping-137.html
 create mode 100644 layout/reftests/font-matching/stretchmapping-35-ref.html
 create mode 100644 layout/reftests/font-matching/stretchmapping-35.html
 create mode 100644 layout/reftests/font-matching/stretchmapping-all-ref.html
 create mode 100644 layout/reftests/font-matching/stretchmapping-all.html
 create mode 100644 layout/reftests/font-matching/stretchmapping-reverse-ref.html
 create mode 100644 layout/reftests/font-matching/stretchmapping-reverse.html
 create mode 100644 layout/reftests/font-matching/synthetic-bold-1-ref.html
 create mode 100644 layout/reftests/font-matching/synthetic-bold-1.html
 create mode 100644 layout/reftests/font-matching/synthetic-bold-2-ref.html
 create mode 100644 layout/reftests/font-matching/synthetic-bold-2.html
 create mode 100644 layout/reftests/font-matching/synthetic-style-1-notref.html
 create mode 100644 layout/reftests/font-matching/synthetic-style-1.html
 create mode 100644 layout/reftests/font-matching/synthetic-style-2-notref.html
 create mode 100644 layout/reftests/font-matching/synthetic-style-2.html
 create mode 100644 layout/reftests/font-matching/syntheticbold-rotated-ref.html
 create mode 100644 layout/reftests/font-matching/syntheticbold-rotated.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-1-ref.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-1.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-2-ref.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-2.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-3-ref.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-3.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-4-ref.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-4.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-ja.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-ko.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-zh-cn.html
 create mode 100644 layout/reftests/font-matching/system-generic-fallback-zh-tw.html
 create mode 100644 layout/reftests/font-matching/weightmapping-12-ref.html
 create mode 100644 layout/reftests/font-matching/weightmapping-12.html
 create mode 100644 layout/reftests/font-matching/weightmapping-12579-ref.html
 create mode 100644 layout/reftests/font-matching/weightmapping-12579.html
 create mode 100644 layout/reftests/font-matching/weightmapping-25-ref.html
 create mode 100644 layout/reftests/font-matching/weightmapping-25.html
 create mode 100644 layout/reftests/font-matching/weightmapping-45-ref.html
 create mode 100644 layout/reftests/font-matching/weightmapping-45.html
 create mode 100644 layout/reftests/font-matching/weightmapping-458-ref.html
 create mode 100644 layout/reftests/font-matching/weightmapping-458.html
 create mode 100644 layout/reftests/font-matching/weightmapping-478-ref.html
 create mode 100644 layout/reftests/font-matching/weightmapping-478.html
 create mode 100644 layout/reftests/font-matching/weightmapping-7-ref.html
 create mode 100644 layout/reftests/font-matching/weightmapping-7.html

(limited to 'layout/reftests/font-matching')

diff --git a/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family-ref.xhtml b/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family-ref.xhtml
new file mode 100644
index 000000000..fb00a9aa9
--- /dev/null
+++ b/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family-ref.xhtml
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS 2.1: Font matching algorithm (reference)</title>
+		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+	</head>
+	<body>
+
+<div style="font-family: FontDoesNotExist">
+  Every line of text in this page should be in the same font.
+</div>
+
+<div style="font-family: FontDoesNotExist">
+  Every line of text in this page should be in the same font.
+</div>
+
+<div style="font-family: FontDoesNotExist">
+  Every line of text in this page should be in the same font.
+</div>
+
+<div style="font-family: FontDoesNotExist">
+  Every line of text in this page should be in the same font.
+</div>
+
+<div style="font-family: FontDoesNotExist">
+  Every line of text in this page should be in the same font.
+</div>
+
+<div style="font-family: FontDoesNotExist">
+  Every line of text in this page should be in the same font.
+</div>
+
+<div style="font-family: FontDoesNotExist">
+  Every line of text in this page should be in the same font.
+</div>
+
+<div style="font-family: FontDoesNotExist">
+  Every line of text in this page should be in the same font.
+</div>
+
+	</body>
+</html>
diff --git a/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family.xhtml b/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family.xhtml
new file mode 100644
index 000000000..a3dcdba69
--- /dev/null
+++ b/layout/reftests/font-matching/CSS21-t1502-no-inherited-font-family.xhtml
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>CSS 2.1: Font matching algorithm</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/fonts.html#algorithm" />
+		<meta name="assert" content="That the 'UA-dependent default 'font-family'' described in step (5) does not vary based on the ancestor's font-family property." />
+	</head>
+	<body>
+
+<div style="font-family: Arial, Helvetica, sans-serif">
+  <div style="font-family: FontDoesNotExist">
+    Every line of text in this page should be in the same font.
+  </div>
+</div>
+
+<div style="font-family: Arial, Helvetica">
+  <div style="font-family: FontDoesNotExist">
+    Every line of text in this page should be in the same font.
+  </div>
+</div>
+
+<div style="font-family: Arial">
+  <div style="font-family: FontDoesNotExist">
+    Every line of text in this page should be in the same font.
+  </div>
+</div>
+
+<div style="font-family: Times New Roman, Times, serif">
+  <div style="font-family: FontDoesNotExist">
+    Every line of text in this page should be in the same font.
+  </div>
+</div>
+
+<div style="font-family: Times New Roman, Times">
+  <div style="font-family: FontDoesNotExist">
+    Every line of text in this page should be in the same font.
+  </div>
+</div>
+
+<div style="font-family: Times New Roman">
+  <div style="font-family: FontDoesNotExist">
+    Every line of text in this page should be in the same font.
+  </div>
+</div>
+
+<div style="font-family: Courier New, Courier, monospace">
+  <div style="font-family: FontDoesNotExist">
+    Every line of text in this page should be in the same font.
+  </div>
+</div>
+
+<div style="font-family: Verdana">
+  <div style="font-family: FontDoesNotExist">
+    Every line of text in this page should be in the same font.
+  </div>
+</div>
+
+	</body>
+</html>
diff --git a/layout/reftests/font-matching/apple-symbols-1-notref.html b/layout/reftests/font-matching/apple-symbols-1-notref.html
new file mode 100644
index 000000000..b216a4ff5
--- /dev/null
+++ b/layout/reftests/font-matching/apple-symbols-1-notref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Apple Symbols test</title>
+<style>
+@font-face {
+  font-family: "Ahem";
+  src: url(../fonts/Ahem.ttf);
+}
+body {
+  font-family: "Ahem", /* Ahem bullet first to establish consistent line metrics */
+               /* "Apple Symbols", */ /* Apple Symbols for the rest of the chars */
+               "Menlo", /* fallbacks for when Apple Symbols fails */
+               "Hiragino Kaku Gothic Pro",
+               sans-serif;
+  font-size: 36px;
+  line-height: 60px;
+}
+</style>
+</head>
+<body>
+&#x2219;&#x25E6;&#x25ce;&#x2611;&#x261e;
+</body>
+</html>
diff --git a/layout/reftests/font-matching/apple-symbols-1.html b/layout/reftests/font-matching/apple-symbols-1.html
new file mode 100644
index 000000000..ba92206f1
--- /dev/null
+++ b/layout/reftests/font-matching/apple-symbols-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Apple Symbols test</title>
+<style>
+@font-face {
+  font-family: "Ahem";
+  src: url(../fonts/Ahem.ttf);
+}
+body {
+  font-family: "Ahem", /* Ahem bullet first to establish consistent line metrics */
+               "Apple Symbols", /* Apple Symbols for the rest of the chars */
+               "Menlo", /* fallbacks for when Apple Symbols fails */
+               "Hiragino Kaku Gothic Pro",
+               sans-serif;
+  font-size: 36px;
+  line-height: 60px;
+}
+</style>
+</head>
+<body>
+&#x2219;&#x25E6;&#x25ce;&#x2611;&#x261e;
+</body>
+</html>
diff --git a/layout/reftests/font-matching/arial-arabic-ref.html b/layout/reftests/font-matching/arial-arabic-ref.html
new file mode 100644
index 000000000..f5665f6c5
--- /dev/null
+++ b/layout/reftests/font-matching/arial-arabic-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Bug 769475 - test for italicized Arabic script in Arial</title>
+<style type="text/css">
+body {
+  font-family: arial, serif;
+  font-size: 36px;
+  line-height: 72px;
+}
+span {
+  color: white;
+}
+</style>
+</head>
+<body lang="ar">
+<!-- the white span should have the same width whether it's italicized or not,
+  -- as Arial does not have Arabic characters in the italic face but we should
+  -- apply synthetic italic to the regular face, NOT fall back to a different
+  -- family from prefs.
+  -->
+<div>العربي <span>العربي</span> العربي</div>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/arial-arabic.html b/layout/reftests/font-matching/arial-arabic.html
new file mode 100644
index 000000000..5f363ca26
--- /dev/null
+++ b/layout/reftests/font-matching/arial-arabic.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Bug 769475 - test for italicized Arabic script in Arial</title>
+<style type="text/css">
+body {
+  font-family: arial, serif;
+  font-size: 36px;
+  line-height: 72px;
+}
+span {
+  font-style: italic;
+  color: white;
+}
+</style>
+</head>
+<body lang="ar">
+<!-- the white span should have the same width whether it's italicized or not,
+  -- as Arial does not have Arabic characters in the italic face but we should
+  -- apply synthetic italic to the regular face, NOT fall back to a different
+  -- family from prefs.
+  -->
+<div>العربي <span>العربي</span> العربي</div>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/arial-variations-1-ref.html b/layout/reftests/font-matching/arial-variations-1-ref.html
new file mode 100644
index 000000000..5956b40c8
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-1-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1 { font-family: Arial, sans-serif; }
+p#test2 { font-family: Georgia, serif; }
+p#test3 { font-family: Georgia, serif; }
+p#test4 { font-family: Georgia, serif; }
+
+p#test1 { color: black; }
+p#test2 { color: red; }
+p#test3 { color: red; }
+p#test4 { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1">{ font-family: Arial, sans-serif; }</p>
+<p id="test2">{ font-family: Arial Bold, Georgia, serif; }</p>
+<p id="test3">{ font-family: Arial Italic, Georgia, serif; }</p>
+<p id="test4">{ font-family: Arial Bold Italic, Georgia, serif; }</p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/arial-variations-1.html b/layout/reftests/font-matching/arial-variations-1.html
new file mode 100644
index 000000000..72c93ef9b
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-1.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1 { font-family: Arial, sans-serif; }
+p#test2 { font-family: Arial Bold, Georgia, serif; }
+p#test3 { font-family: Arial Italic, Georgia, serif; }
+p#test4 { font-family: Arial Bold Italic, Georgia, serif; }
+
+p#test1 { color: black; }
+p#test2 { color: red; }
+p#test3 { color: red; }
+p#test4 { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1">{ font-family: Arial, sans-serif; }</p>
+<p id="test2">{ font-family: Arial Bold, Georgia, serif; }</p>
+<p id="test3">{ font-family: Arial Italic, Georgia, serif; }</p>
+<p id="test4">{ font-family: Arial Bold Italic, Georgia, serif; }</p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/arial-variations-2-ref.html b/layout/reftests/font-matching/arial-variations-2-ref.html
new file mode 100644
index 000000000..04c8c8601
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-2-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1a { font-family: Arial, sans-serif; }
+p#test2a { font-family: Georgia, serif; }
+p#test3a { font-family: Georgia, serif; }
+p#test4a { font-family: Georgia, serif; }
+
+p#test1a { color: black; }
+p#test2a { color: red; }
+p#test3a { color: red; }
+p#test4a { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1a">{ font-family: arial, sans-serif; }</p>
+<p id="test2a">{ font-family: arial bold, georgia, serif; }</p>
+<p id="test3a">{ font-family: arial italic, georgia, serif; }</p>
+<p id="test4a">{ font-family: arial bold italic, georgia, serif; }</p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/arial-variations-2.html b/layout/reftests/font-matching/arial-variations-2.html
new file mode 100644
index 000000000..a6daf7157
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1a { font-family: arial, sans-serif; }
+p#test2a { font-family: arial bold, georgia, serif; }
+p#test3a { font-family: arial italic, georgia, serif; }
+p#test4a { font-family: arial bold italic, georgia, serif; }
+
+p#test1a { color: black; }
+p#test2a { color: red; }
+p#test3a { color: red; }
+p#test4a { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1a">{ font-family: arial, sans-serif; }</p>
+<p id="test2a">{ font-family: arial bold, georgia, serif; }</p>
+<p id="test3a">{ font-family: arial italic, georgia, serif; }</p>
+<p id="test4a">{ font-family: arial bold italic, georgia, serif; }</p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/arial-variations-3-ref.html b/layout/reftests/font-matching/arial-variations-3-ref.html
new file mode 100644
index 000000000..625a51a49
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-3-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1b { font-family: Georgia, serif; }
+p#test2b { font-family: Georgia, serif; }
+p#test3b { font-family: Georgia, serif; }
+p#test4b { font-family: Georgia, serif; }
+
+p#test1b { color: red; }
+p#test2b { color: red; }
+p#test3b { color: red; }
+p#test4b { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1b">{ font-family: ArialMT, Georgia, serif; }</p>
+<p id="test2b">{ font-family: Arial-BoldMT, Georgia, serif; }</p>
+<p id="test3b">{ font-family: Arial-ItalicMT, Georgia, serif; }</p>
+<p id="test4b">{ font-family: Arial-BoldItalicMT, Georgia, serif; }</p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/arial-variations-3.html b/layout/reftests/font-matching/arial-variations-3.html
new file mode 100644
index 000000000..ce1ca3ffc
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1b { font-family: ArialMT, Georgia, serif; }
+p#test2b { font-family: Arial-BoldMT, Georgia, serif; }
+p#test3b { font-family: Arial-ItalicMT, Georgia, serif; }
+p#test4b { font-family: Arial-BoldItalicMT, Georgia, serif; }
+
+p#test1b { color: red; }
+p#test2b { color: red; }
+p#test3b { color: red; }
+p#test4b { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1b">{ font-family: ArialMT, Georgia, serif; }</p>
+<p id="test2b">{ font-family: Arial-BoldMT, Georgia, serif; }</p>
+<p id="test3b">{ font-family: Arial-ItalicMT, Georgia, serif; }</p>
+<p id="test4b">{ font-family: Arial-BoldItalicMT, Georgia, serif; }</p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/arial-variations-4-ref.html b/layout/reftests/font-matching/arial-variations-4-ref.html
new file mode 100644
index 000000000..843851d25
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-4-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1c { font-family: Georgia, serif; }
+p#test2c { font-family: Georgia, serif; }
+p#test3c { font-family: Georgia, serif; }
+p#test4c { font-family: Georgia, serif; }
+
+p#test1c { color: red; }
+p#test2c { color: red; }
+p#test3c { color: red; }
+p#test4c { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1c">{ font-family: arialmt, georgia, serif; }</p>
+<p id="test2c">{ font-family: arial-boldmt, georgia, serif; }</p>
+<p id="test3c">{ font-family: arial-italicmt, georgia, serif; }</p>
+<p id="test4c">{ font-family: arial-bolditalicmt, georgia, serif; }</p>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/arial-variations-4.html b/layout/reftests/font-matching/arial-variations-4.html
new file mode 100644
index 000000000..a52d97daa
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-4.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1c { font-family: arialmt, georgia, serif; }
+p#test2c { font-family: arial-boldmt, georgia, serif; }
+p#test3c { font-family: arial-italicmt, georgia, serif; }
+p#test4c { font-family: arial-bolditalicmt, georgia, serif; }
+
+p#test1c { color: red; }
+p#test2c { color: red; }
+p#test3c { color: red; }
+p#test4c { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1c">{ font-family: arialmt, georgia, serif; }</p>
+<p id="test2c">{ font-family: arial-boldmt, georgia, serif; }</p>
+<p id="test3c">{ font-family: arial-italicmt, georgia, serif; }</p>
+<p id="test4c">{ font-family: arial-bolditalicmt, georgia, serif; }</p>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/arial-variations-5-ref.html b/layout/reftests/font-matching/arial-variations-5-ref.html
new file mode 100644
index 000000000..583c5d51d
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-5-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1d { font-family: Arial, sans-serif; }
+p#test2d { font-family: Georgia, serif; }
+p#test3d { font-family: Georgia, serif; }
+p#test4d { font-family: Georgia, serif; }
+
+p#test1d { color: black; }
+p#test2d { color: red; }
+p#test3d { color: red; }
+p#test4d { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1d">{ font-family: "Arial", sans-serif; }</p>
+<p id="test2d">{ font-family: "Arial Bold", Georgia, serif; }</p>
+<p id="test3d">{ font-family: "Arial Italic", Georgia, serif; }</p>
+<p id="test4d">{ font-family: "Arial Bold Italic", Georgia, serif; }</p>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/arial-variations-5.html b/layout/reftests/font-matching/arial-variations-5.html
new file mode 100644
index 000000000..73d237128
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-5.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1d { font-family: "Arial", sans-serif; }
+p#test2d { font-family: "Arial Bold", Georgia, serif; }
+p#test3d { font-family: "Arial Italic", Georgia, serif; }
+p#test4d { font-family: "Arial Bold Italic", Georgia, serif; }
+
+p#test1d { color: black; }
+p#test2d { color: red; }
+p#test3d { color: red; }
+p#test4d { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1d">{ font-family: "Arial", sans-serif; }</p>
+<p id="test2d">{ font-family: "Arial Bold", Georgia, serif; }</p>
+<p id="test3d">{ font-family: "Arial Italic", Georgia, serif; }</p>
+<p id="test4d">{ font-family: "Arial Bold Italic", Georgia, serif; }</p>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/arial-variations-6-ref.html b/layout/reftests/font-matching/arial-variations-6-ref.html
new file mode 100644
index 000000000..60fba9530
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-6-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1e { font-family: Arial, sans-serif; }
+p#test2e { font-family: Georgia, serif; }
+p#test3e { font-family: Georgia, serif; }
+p#test4e { font-family: Georgia, serif; }
+
+p#test1e { color: black; }
+p#test2e { color: red; }
+p#test3e { color: red; }
+p#test4e { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1e">{ font-family: "arial", sans-serif; }</p>
+<p id="test2e">{ font-family: "arial bold", georgia, serif; }</p>
+<p id="test3e">{ font-family: "arial italic", georgia, serif; }</p>
+<p id="test4e">{ font-family: "arial bold italic", georgia, serif; }</p>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/arial-variations-6.html b/layout/reftests/font-matching/arial-variations-6.html
new file mode 100644
index 000000000..0dd1e3b40
--- /dev/null
+++ b/layout/reftests/font-matching/arial-variations-6.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Arial Variations</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+p#test1e { font-family: "arial", sans-serif; }
+p#test2e { font-family: "arial bold", georgia, serif; }
+p#test3e { font-family: "arial italic", georgia, serif; }
+p#test4e { font-family: "arial bold italic", georgia, serif; }
+
+p#test1e { color: black; }
+p#test2e { color: red; }
+p#test3e { color: red; }
+p#test4e { color: red; }
+
+#tests {
+  font-size: 18pt;
+  margin-left: 0.5em;
+}
+
+</style>
+
+</head>
+<body>
+
+<p>Text in black should appear in Arial and text in red in Georgia or the default serif font:</p>
+
+<div id="tests">
+<p id="test1e">{ font-family: "arial", sans-serif; }</p>
+<p id="test2e">{ font-family: "arial bold", georgia, serif; }</p>
+<p id="test3e">{ font-family: "arial italic", georgia, serif; }</p>
+<p id="test4e">{ font-family: "arial bold italic", georgia, serif; }</p>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/arialunicode-bold.html b/layout/reftests/font-matching/arialunicode-bold.html
new file mode 100644
index 000000000..3b765c380
--- /dev/null
+++ b/layout/reftests/font-matching/arialunicode-bold.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: Arial Unicode MS, serif; font-weight: bold; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/arialunicode-bolditalic.html b/layout/reftests/font-matching/arialunicode-bolditalic.html
new file mode 100644
index 000000000..728bead4f
--- /dev/null
+++ b/layout/reftests/font-matching/arialunicode-bolditalic.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: Arial Unicode MS, serif; font-weight: bold; font-style: italic; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/arialunicode-italic.html b/layout/reftests/font-matching/arialunicode-italic.html
new file mode 100644
index 000000000..c9ab0231c
--- /dev/null
+++ b/layout/reftests/font-matching/arialunicode-italic.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: Arial Unicode MS, serif; font-style: italic; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/arialunicode-oblique.html b/layout/reftests/font-matching/arialunicode-oblique.html
new file mode 100644
index 000000000..c9ab0231c
--- /dev/null
+++ b/layout/reftests/font-matching/arialunicode-oblique.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: Arial Unicode MS, serif; font-style: italic; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/arialunicode.html b/layout/reftests/font-matching/arialunicode.html
new file mode 100644
index 000000000..92469691e
--- /dev/null
+++ b/layout/reftests/font-matching/arialunicode.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: Arial Unicode MS, serif; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/bold-system-fallback-1-notref.html b/layout/reftests/font-matching/bold-system-fallback-1-notref.html
new file mode 100644
index 000000000..c6f8709f2
--- /dev/null
+++ b/layout/reftests/font-matching/bold-system-fallback-1-notref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>Test for bold when system fallback is used</title>
+</head>
+<body>
+<!--
+  -- On OS X and Win7, the Plantagenet Cherokee font is only available in Regular weight.
+  --
+  -- Cherokee text including <b> elements taken from
+  -- http://chr.wikipedia.org/wiki/%E1%8F%A9%E1%8E%A6%E1%8F%A7%E1%8E%A7%E1%8F%85%E1%8F%8D%E1%8F%95%E1%8E%BE_%E1%8E%A4%E1%8F%82%E1%8E%BE%E1%8F%97%E1%8F%85%E1%8F%97
+  --
+  -->
+<p>ᏩᎦᏧᎧᏅᏍᏕᎾ ᎤᏂᎾᏗᏅᏗ ᎨᏒᎢ ᎠᏂᏙᎾᎥ ᎠᎴᏫᏍᏙᏗ ᎢᏳᏩᎪᏗ ᎯᎳᎪ ᎢᏳ ᏚᏂᎬᏩᎶᏔᏅ ᎠᎴ ᎠᎵᏌᎳᏗᏍᎬ
+ᎭᏫᎾᏗᏢ ᎠᏕᎸ ᏄᎾᏍᏛ ᎤᏂᎾᏗᏅᏗ ᎦᏣᏄᎳᎯᎨ ᎬᎾᏬᏍᎬ ᎤᎾᏤᎵ ᎧᏃᎮᏍᎩ ᏄᎵᏍᏔᏅ ᎢᎦᏘᎭ ᎢᎬᏁᎸ, ᎭᏫᎾᏗᏢ ᏧᏓᎴᎾᎢ
+ᎠᎵᏐᏆᎸᏗ ᎤᏂᎾᏗᏅᏗ ᎦᏙ ᎤᏍᏗ ᎨᏒᎢ ᎠᏂᏙᎾᎥ ᎠᎴᏫᏍᏙᏗ ᎢᏳᏩᎪᏗ ᎯᎳᎪ ᎢᏳ ᏚᏂᎬᏩᎶᏔᏅ ᎠᎴ ᎦᎶᏍᎬ.</p>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/bold-system-fallback-1.html b/layout/reftests/font-matching/bold-system-fallback-1.html
new file mode 100644
index 000000000..037f7306e
--- /dev/null
+++ b/layout/reftests/font-matching/bold-system-fallback-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>Test for bold when system fallback is used</title>
+</head>
+<body>
+<!--
+  -- On OS X and Win7, the Plantagenet Cherokee font is only available in Regular weight.
+  --
+  -- Cherokee text including <b> elements taken from
+  -- http://chr.wikipedia.org/wiki/%E1%8F%A9%E1%8E%A6%E1%8F%A7%E1%8E%A7%E1%8F%85%E1%8F%8D%E1%8F%95%E1%8E%BE_%E1%8E%A4%E1%8F%82%E1%8E%BE%E1%8F%97%E1%8F%85%E1%8F%97
+  --
+  -->
+<p><b>ᏩᎦᏧᎧᏅᏍᏕᎾ ᎤᏂᎾᏗᏅᏗ</b> ᎨᏒᎢ ᎠᏂᏙᎾᎥ ᎠᎴᏫᏍᏙᏗ ᎢᏳᏩᎪᏗ ᎯᎳᎪ ᎢᏳ ᏚᏂᎬᏩᎶᏔᏅ ᎠᎴ ᎠᎵᏌᎳᏗᏍᎬ
+ᎭᏫᎾᏗᏢ ᎠᏕᎸ ᏄᎾᏍᏛ ᎤᏂᎾᏗᏅᏗ ᎦᏣᏄᎳᎯᎨ ᎬᎾᏬᏍᎬ ᎤᎾᏤᎵ ᎧᏃᎮᏍᎩ ᏄᎵᏍᏔᏅ ᎢᎦᏘᎭ ᎢᎬᏁᎸ, ᎭᏫᎾᏗᏢ ᏧᏓᎴᎾᎢ
+<b>ᎠᎵᏐᏆᎸᏗ ᎤᏂᎾᏗᏅᏗ</b> ᎦᏙ ᎤᏍᏗ ᎨᏒᎢ ᎠᏂᏙᎾᎥ ᎠᎴᏫᏍᏙᏗ ᎢᏳᏩᎪᏗ ᎯᎳᎪ ᎢᏳ ᏚᏂᎬᏩᎶᏔᏅ ᎠᎴ ᎦᎶᏍᎬ.</p>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/bold-system-fallback-2-notref.html b/layout/reftests/font-matching/bold-system-fallback-2-notref.html
new file mode 100644
index 000000000..2a019c6de
--- /dev/null
+++ b/layout/reftests/font-matching/bold-system-fallback-2-notref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>Test for bold when system fallback is used</title>
+</head>
+<body>
+<!--
+  -- Chess symbols will use Droid Sans Fallback on Android,
+  -- which only has a single weight.
+  --
+  -- On some platforms there may be "regular" glyphs in the Bold face
+  -- of the fallback font used (e.g. Menlo on OS X), so this will
+  -- not reliably pass there.
+  -->
+<p>&#x2654;&#x2655;&#x2656;&#x2657;&#x2658;&#x2659;</p>
+<p>&#x2654;&#x2655;&#x2656;&#x2657;&#x2658;&#x2659;</p>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/bold-system-fallback-2.html b/layout/reftests/font-matching/bold-system-fallback-2.html
new file mode 100644
index 000000000..40400a846
--- /dev/null
+++ b/layout/reftests/font-matching/bold-system-fallback-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>Test for bold when system fallback is used</title>
+</head>
+<body>
+<!--
+  -- Chess symbols will use Droid Sans Fallback on Android,
+  -- which only has a single weight.
+  --
+  -- On some platforms there may be "regular" glyphs in the Bold face
+  -- of the fallback font used (e.g. Menlo on OS X), so this will
+  -- not reliably pass there.
+  -->
+<p>&#x2654;&#x2655;&#x2656;&#x2657;&#x2658;&#x2659;</p>
+<p><b>&#x2654;&#x2655;&#x2656;&#x2657;&#x2658;&#x2659;</b></p>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/defaultfont-bold.html b/layout/reftests/font-matching/defaultfont-bold.html
new file mode 100644
index 000000000..8d4de3395
--- /dev/null
+++ b/layout/reftests/font-matching/defaultfont-bold.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-weight: bold; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/defaultfont-bolditalic.html b/layout/reftests/font-matching/defaultfont-bolditalic.html
new file mode 100644
index 000000000..d8db0d7d9
--- /dev/null
+++ b/layout/reftests/font-matching/defaultfont-bolditalic.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-weight: bold; font-style: italic; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/defaultfont-italic.html b/layout/reftests/font-matching/defaultfont-italic.html
new file mode 100644
index 000000000..76d4ca0e5
--- /dev/null
+++ b/layout/reftests/font-matching/defaultfont-italic.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-style: italic; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/defaultfont-oblique.html b/layout/reftests/font-matching/defaultfont-oblique.html
new file mode 100644
index 000000000..9930095dc
--- /dev/null
+++ b/layout/reftests/font-matching/defaultfont-oblique.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-style: oblique; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/defaultfont.html b/layout/reftests/font-matching/defaultfont.html
new file mode 100644
index 000000000..18629c805
--- /dev/null
+++ b/layout/reftests/font-matching/defaultfont.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+</style>
+</head>
+<body><p>Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/defaultjapanese-bold.html b/layout/reftests/font-matching/defaultjapanese-bold.html
new file mode 100644
index 000000000..d25f250fa
--- /dev/null
+++ b/layout/reftests/font-matching/defaultjapanese-bold.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-weight: bold; font-style: normal; }
+</style>
+</head>
+<body><p id="test">魅力的な人</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/defaultjapanese-bolditalic.html b/layout/reftests/font-matching/defaultjapanese-bolditalic.html
new file mode 100644
index 000000000..3487e2eea
--- /dev/null
+++ b/layout/reftests/font-matching/defaultjapanese-bolditalic.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-weight: bold; font-style: italic; }
+</style>
+</head>
+<body><p id="test">魅力的な人</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/defaultjapanese-italic.html b/layout/reftests/font-matching/defaultjapanese-italic.html
new file mode 100644
index 000000000..0d7d4d056
--- /dev/null
+++ b/layout/reftests/font-matching/defaultjapanese-italic.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-weight: normal; font-style: italic; }
+</style>
+</head>
+<body><p id="test">魅力的な人</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/defaultjapanese-oblique.html b/layout/reftests/font-matching/defaultjapanese-oblique.html
new file mode 100644
index 000000000..fb0c3d542
--- /dev/null
+++ b/layout/reftests/font-matching/defaultjapanese-oblique.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-style: oblique; }
+</style>
+</head>
+<body><p id="test">魅力的な人</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/defaultjapanese.html b/layout/reftests/font-matching/defaultjapanese.html
new file mode 100644
index 000000000..ff3ad7b82
--- /dev/null
+++ b/layout/reftests/font-matching/defaultjapanese.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-weight: normal; font-style: normal; }
+</style>
+</head>
+<body><p id="test">魅力的な人</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/familyname-escapedidents-ref.html b/layout/reftests/font-matching/familyname-escapedidents-ref.html
new file mode 100644
index 000000000..2f54eb85a
--- /dev/null
+++ b/layout/reftests/font-matching/familyname-escapedidents-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Escaped family names test</title>
+<meta charset="UTF-8">
+<style>
+body { margin: 20px; }
+#test, #test2 { font-family: serif; }
+</style>
+
+</head>
+<body>
+<p id=test>Should be serif</p>
+<p id=test2>Should be serif</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/familyname-escapedidents.html b/layout/reftests/font-matching/familyname-escapedidents.html
new file mode 100644
index 000000000..0a328d6b1
--- /dev/null
+++ b/layout/reftests/font-matching/familyname-escapedidents.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Escaped family names test</title>
+<meta charset="UTF-8">
+<style>
+body { margin: 20px; }
+#test { font-family: \20 Arial, \20 Verdana, \20 Deja Vu Sans, \20 Fira Sans, \20 Fira Sans OT, serif; }
+#test2 { font-family: Arial\20 , Verdana\20 , Deja Vu Sans\20 , Fira Sans\20 , Fira Sans OT\20 , serif; }
+</style>
+
+</head>
+<body>
+<p id=test>Should be serif</p>
+<p id=test2>Should be serif</p>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/font-shorthand-stretch-1.html b/layout/reftests/font-matching/font-shorthand-stretch-1.html
new file mode 100644
index 000000000..1ac3073bf
--- /dev/null
+++ b/layout/reftests/font-matching/font-shorthand-stretch-1.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+/* load 9 faces of DejaVu Sans in the "dvs" family, with appropriate style descriptors */
+@font-face {
+  font-family: dvs;
+  src: url(../fonts/dejavu-sans/DejaVuSans.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-weight: bold;
+  src: url(../fonts/dejavu-sans/DejaVuSans-Bold.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-style: italic;
+  src: url(../fonts/dejavu-sans/DejaVuSans-Oblique.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-style: italic;
+  font-weight: bold;
+  src: url(../fonts/dejavu-sans/DejaVuSans-BoldOblique.ttf);
+}
+@font-face { /* note that there is no ExtraLight Condensed or Oblique */
+  font-family: dvs;
+  font-weight: 200;
+  src: url(../fonts/dejavu-sans/DejaVuSans-ExtraLight.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-stretch: condensed;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-weight: bold;
+  font-stretch: condensed;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Bold.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-style: italic;
+  font-stretch: condensed;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Oblique.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-style: italic;
+  font-weight: bold;
+  font-stretch: condensed;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed-BoldOblique.ttf);
+}
+
+body {
+  font-family: dvs, serif;
+  font-size: 24px;
+}
+.l {
+  font-weight: 200;
+}
+</style>
+</head>
+<body>
+<!-- all 4 levels of "condensed" come out the same; "condensed" takes priority over "light" -->
+<div style="font: ultra-condensed 24px dvs, serif">ultra-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font: extra-condensed 24px dvs, serif">extra-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font: condensed 24px dvs, serif">condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font: semi-condensed 24px dvs, serif">semi-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<!-- "normal" and all 4 levels of "expanded" come out the same; "light" is available, but only in upright, not italic -->
+<div style="font: 24px dvs">normal <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font: semi-expanded 24px dvs, serif">semi-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font: expanded 24px dvs, serif">expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font: extra-expanded 24px dvs, serif">extra-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font: ultra-expanded 24px dvs, serif">ultra-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+</body>
+</html>
+
diff --git a/layout/reftests/font-matching/font-stretch-1-ref.html b/layout/reftests/font-matching/font-stretch-1-ref.html
new file mode 100644
index 000000000..2fe8f2cf3
--- /dev/null
+++ b/layout/reftests/font-matching/font-stretch-1-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+/* each face is loaded as a separate family, so we can address them individually
+   without involving the style-matching algorithm */
+@font-face {
+  font-family: dvs;
+  src: url(../fonts/dejavu-sans/DejaVuSans.ttf);
+}
+@font-face {
+  font-family: dvsb;
+  src: url(../fonts/dejavu-sans/DejaVuSans-Bold.ttf);
+}
+@font-face {
+  font-family: dvsi;
+  src: url(../fonts/dejavu-sans/DejaVuSans-Oblique.ttf);
+}
+@font-face {
+  font-family: dvsbi;
+  src: url(../fonts/dejavu-sans/DejaVuSans-BoldOblique.ttf);
+}
+@font-face { /* note that there is no ExtraLight Condensed or Oblique */
+  font-family: dvsl;
+  src: url(../fonts/dejavu-sans/DejaVuSans-ExtraLight.ttf);
+}
+@font-face {
+  font-family: dvsc;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed.ttf);
+}
+@font-face {
+  font-family: dvscb;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Bold.ttf);
+}
+@font-face {
+  font-family: dvsci;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Oblique.ttf);
+}
+@font-face {
+  font-family: dvscbi;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed-BoldOblique.ttf);
+}
+
+body {
+  font-family: dvs, serif;
+  font-size: 24px;
+}
+
+.b { font-family: dvsb; }
+.i { font-family: dvsi; }
+.bi { font-family: dvsbi; }
+.l { font-family: dvsl; }
+.c { font-family: dvsc; }
+.cb { font-family: dvscb; }
+.ci { font-family: dvsci; }
+.cbi { font-family: dvscbi; }
+</style>
+</head>
+<body>
+<!-- all 4 levels of "condensed" come out the same; "condensed" takes priority over "light" -->
+<div class="c">ultra-condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div>
+<div class="c">extra-condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div>
+<div class="c">condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div>
+<div class="c">semi-condensed <span class="ci">italic</span> <span class="cb">bold <span class="cbi">italic</span></span> <span class="c">light <span class="ci">italic</span></span></div>
+<!-- "normal" and all 4 levels of "expanded" come out the same; "light" is available, but only in upright, not italic -->
+<div>normal <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div>
+<div>semi-expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div>
+<div>expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div>
+<div>extra-expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div>
+<div>ultra-expanded <span class="i">italic</span> <span class="b">bold <span class="bi">italic</span></span> <span class="l">light <span class="i">italic</span></span></div>
+</body>
+</html>
+
diff --git a/layout/reftests/font-matching/font-stretch-1.html b/layout/reftests/font-matching/font-stretch-1.html
new file mode 100644
index 000000000..ca86a08ed
--- /dev/null
+++ b/layout/reftests/font-matching/font-stretch-1.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+/* load 9 faces of DejaVu Sans in the "dvs" family, with appropriate style descriptors */
+@font-face {
+  font-family: dvs;
+  src: url(../fonts/dejavu-sans/DejaVuSans.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-weight: bold;
+  src: url(../fonts/dejavu-sans/DejaVuSans-Bold.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-style: italic;
+  src: url(../fonts/dejavu-sans/DejaVuSans-Oblique.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-style: italic;
+  font-weight: bold;
+  src: url(../fonts/dejavu-sans/DejaVuSans-BoldOblique.ttf);
+}
+@font-face { /* note that there is no ExtraLight Condensed or Oblique */
+  font-family: dvs;
+  font-weight: 200;
+  src: url(../fonts/dejavu-sans/DejaVuSans-ExtraLight.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-stretch: condensed;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-weight: bold;
+  font-stretch: condensed;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Bold.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-style: italic;
+  font-stretch: condensed;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed-Oblique.ttf);
+}
+@font-face {
+  font-family: dvs;
+  font-style: italic;
+  font-weight: bold;
+  font-stretch: condensed;
+  src: url(../fonts/dejavu-sans/DejaVuSansCondensed-BoldOblique.ttf);
+}
+
+body {
+  font-family: dvs, serif;
+  font-size: 24px;
+}
+.l {
+  font-weight: 200;
+}
+</style>
+</head>
+<body>
+<!-- all 4 levels of "condensed" come out the same; "condensed" takes priority over "light" -->
+<div style="font-stretch: ultra-condensed">ultra-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font-stretch: extra-condensed">extra-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font-stretch: condensed">condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font-stretch: semi-condensed">semi-condensed <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<!-- "normal" and all 4 levels of "expanded" come out the same; "light" is available, but only in upright, not italic -->
+<div style="font-stretch: normal">normal <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font-stretch: semi-expanded">semi-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font-stretch: expanded">expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font-stretch: extra-expanded">extra-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+<div style="font-stretch: ultra-expanded">ultra-expanded <i>italic</i> <b>bold <i>italic</i></b> <span class="l">light <i>italic</i></span></div>
+</body>
+</html>
+
diff --git a/layout/reftests/font-matching/font-synthesis-1-ref.html b/layout/reftests/font-matching/font-synthesis-1-ref.html
new file mode 100644
index 000000000..35e5911db
--- /dev/null
+++ b/layout/reftests/font-matching/font-synthesis-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/sil/GenR102.ttf);
+}
+body {
+  font-family: test; /* family that lacks bold and italic faces */
+  font-size: 36px;
+  margin: 1em;
+}
+</style>
+</head>
+<body>
+<p>Hello, <i>cruel</i> <b>world<i>!</i></b>
+<p>Hello, cruel <b>world!</b>
+<p>Hello, <i>cruel</i> world<i>!</i>
+<p>Hello, cruel world!
+</body>
+</html>
diff --git a/layout/reftests/font-matching/font-synthesis-1.html b/layout/reftests/font-matching/font-synthesis-1.html
new file mode 100644
index 000000000..ebccfcac8
--- /dev/null
+++ b/layout/reftests/font-matching/font-synthesis-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/sil/GenR102.ttf);
+}
+body {
+  font-family: test; /* family that lacks bold and italic faces */
+  font-size: 36px;
+  margin: 1em;
+}
+</style>
+</head>
+<body>
+<p>Hello, <i>cruel</i> <b>world<i>!</i></b>
+<p style="font-synthesis:weight">Hello, <i>cruel</i> <b>world<i>!</i></b>
+<p style="font-synthesis:style">Hello, <i>cruel</i> <b>world<i>!</i></b>
+<p style="font-synthesis:none">Hello, <i>cruel</i> <b>world<i>!</i></b>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/font-synthesis-2-ref.html b/layout/reftests/font-matching/font-synthesis-2-ref.html
new file mode 100644
index 000000000..3bec8c014
--- /dev/null
+++ b/layout/reftests/font-matching/font-synthesis-2-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/sil/GenR102.ttf);
+}
+body {
+  /* try for a locally-installed font that lacks Bold and Italic faces */
+  font-family: Papyrus, /* OS X */
+               Microsoft Sans Serif, /* Windows */
+               /* XXX no idea what to try for Linux desktop systems :( */
+               Droid Sans Fallback, /* Android, B2G */
+               test; /* fallback to avoid failures on "none of the above" */
+  font-size: 36px;
+  margin: 1em;
+}
+</style>
+</head>
+<body>
+<p>Hello, <i>cruel</i> <b>world<i>!</i></b>
+<p>Hello, cruel <b>world!</b>
+<p>Hello, <i>cruel</i> world<i>!</i>
+<p>Hello, cruel world!
+</body>
+</html>
diff --git a/layout/reftests/font-matching/font-synthesis-2.html b/layout/reftests/font-matching/font-synthesis-2.html
new file mode 100644
index 000000000..408d5f753
--- /dev/null
+++ b/layout/reftests/font-matching/font-synthesis-2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/sil/GenR102.ttf);
+}
+body {
+  /* try for a locally-installed font that lacks Bold and Italic faces */
+  font-family: Papyrus, /* OS X */
+               Microsoft Sans Serif, /* Windows */
+               /* XXX no idea what to try for Linux desktop systems :( */
+               Droid Sans Fallback, /* Android, B2G */
+               test; /* fallback to avoid failures on "none of the above" */
+  font-size: 36px;
+  margin: 1em;
+}
+</style>
+</head>
+<body>
+<p>Hello, <i>cruel</i> <b>world<i>!</i></b>
+<p style="font-synthesis:weight">Hello, <i>cruel</i> <b>world<i>!</i></b>
+<p style="font-synthesis:style">Hello, <i>cruel</i> <b>world<i>!</i></b>
+<p style="font-synthesis:none">Hello, <i>cruel</i> <b>world<i>!</i></b>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/impact-bold.html b/layout/reftests/font-matching/impact-bold.html
new file mode 100644
index 000000000..78a17c14c
--- /dev/null
+++ b/layout/reftests/font-matching/impact-bold.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: Impact, serif; font-weight: bold; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/impact-bolditalic.html b/layout/reftests/font-matching/impact-bolditalic.html
new file mode 100644
index 000000000..c0c273ce4
--- /dev/null
+++ b/layout/reftests/font-matching/impact-bolditalic.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: Impact, serif; font-weight: bold; font-style: italic; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/impact-italic.html b/layout/reftests/font-matching/impact-italic.html
new file mode 100644
index 000000000..ce6a3ca7d
--- /dev/null
+++ b/layout/reftests/font-matching/impact-italic.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: Impact, serif; font-style: italic; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/impact-oblique.html b/layout/reftests/font-matching/impact-oblique.html
new file mode 100644
index 000000000..f9e378a0b
--- /dev/null
+++ b/layout/reftests/font-matching/impact-oblique.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: Impact, serif; font-style: oblique; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/impact.html b/layout/reftests/font-matching/impact.html
new file mode 100644
index 000000000..4644a88e7
--- /dev/null
+++ b/layout/reftests/font-matching/impact.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: Impact, serif; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/italic-oblique-1.html b/layout/reftests/font-matching/italic-oblique-1.html
new file mode 100644
index 000000000..ae7e70fa6
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/markA.woff);
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markB.woff);
+  font-style: italic;
+}
+
+body { margin: 30px }
+p { margin: 0; font: italic 600% test, serif; }
+</style>
+</head>
+<body>
+<p>BBB</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-2.html b/layout/reftests/font-matching/italic-oblique-2.html
new file mode 100644
index 000000000..f5ae4c33b
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/markA.woff);
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markC.woff);
+  font-style: oblique;
+}
+
+body { margin: 30px }
+p { margin: 0; font: italic 600% test, serif; }
+</style>
+</head>
+<body>
+<p>CCC</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-3.html b/layout/reftests/font-matching/italic-oblique-3.html
new file mode 100644
index 000000000..5d1c95bfe
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-3.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/markA.woff);
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markB.woff);
+  font-style: italic;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mark2B.woff);
+  font-style: oblique;
+}
+
+body { margin: 30px }
+p { margin: 0; font: italic 600% test, serif; }
+</style>
+</head>
+<body>
+<p>BBB</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-4.html b/layout/reftests/font-matching/italic-oblique-4.html
new file mode 100644
index 000000000..92438c6a1
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-4.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/markA.woff);
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mark2B.woff);
+  font-style: oblique;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markB.woff);
+  font-style: italic;
+}
+
+body { margin: 30px }
+p { margin: 0; font: italic 600% test, serif; }
+</style>
+</head>
+<body>
+<p>BBB</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-5.html b/layout/reftests/font-matching/italic-oblique-5.html
new file mode 100644
index 000000000..d71ffa780
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-5.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/markA.woff);
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mark2B.woff);
+  font-style: italic;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markB.woff);
+  font-style: oblique;
+}
+
+body { margin: 30px }
+p { margin: 0; font: oblique 600% test, serif; }
+</style>
+</head>
+<body>
+<p>BBB</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-6.html b/layout/reftests/font-matching/italic-oblique-6.html
new file mode 100644
index 000000000..3d249c504
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-6.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/markA.woff);
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markB.woff);
+  font-style: italic;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markC.woff);
+  font-style: oblique;
+}
+
+body { margin: 30px }
+p { margin: 0; font: oblique 600% test, serif; }
+</style>
+</head>
+<body>
+<p>CCC</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-7.html b/layout/reftests/font-matching/italic-oblique-7.html
new file mode 100644
index 000000000..3064fa534
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-7.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/markA.woff);
+  font-style: oblique;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markB.woff);
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mark2B.woff);
+  font-style: italic;
+}
+
+body { margin: 30px }
+p { margin: 0; font: oblique 600% test, serif; }
+</style>
+</head>
+<body>
+<p>AAA</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-8.html b/layout/reftests/font-matching/italic-oblique-8.html
new file mode 100644
index 000000000..13783610d
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-8.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test1;
+  src: url(../fonts/markA.woff);
+}
+
+@font-face {
+  font-family: test2;
+  src: url(../fonts/markB.woff);
+  font-style: italic;
+}
+
+@font-face {
+  font-family: test3;
+  src: url(../fonts/markC.woff);
+  font-style: oblique;
+}
+
+@font-face {
+  font-family: test3;
+  src: url(../fonts/mark2C.woff);
+  font-style: italic;
+}
+
+body { margin: 30px }
+p { margin: 0; font: oblique 600% test1, test2, test3, serif; }
+</style>
+</head>
+<body>
+<p>CCC</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-9.html b/layout/reftests/font-matching/italic-oblique-9.html
new file mode 100644
index 000000000..a669682ab
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-9.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test1;
+  src: url(../fonts/markA.woff);
+}
+
+@font-face {
+  font-family: test2;
+  src: url(../fonts/markC.woff);
+  font-style: italic;
+}
+
+@font-face {
+  font-family: test3;
+  src: url(../fonts/mark2C.woff);
+  font-style: oblique;
+}
+
+@font-face {
+  font-family: test3;
+  src: url(../fonts/mark2A.woff);
+  font-style: italic;
+}
+
+body { margin: 30px }
+p { margin: 0; font: oblique 600% test1, test2, test3, serif; }
+</style>
+</head>
+<body>
+<p>CCC</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-kinnari-ref.html b/layout/reftests/font-matching/italic-oblique-kinnari-ref.html
new file mode 100644
index 000000000..4499ebc0b
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-kinnari-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/mark2A.woff);
+  font-style: oblique;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markB.woff);
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markA.woff);
+  font-style: italic;
+}
+
+body { margin: 30px }
+p { margin: 0; font: italic 300% kinnari, test, serif; }
+</style>
+</head>
+<body>
+<p>AAA</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-kinnari.html b/layout/reftests/font-matching/italic-oblique-kinnari.html
new file mode 100644
index 000000000..f465d247e
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-kinnari.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/mark2A.woff);
+  font-style: oblique;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markB.woff);
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/markA.woff);
+  font-style: italic;
+}
+
+body { margin: 30px }
+p { margin: 0; font: oblique 300% kinnari, test, serif; }
+</style>
+</head>
+<body>
+<p>AAA</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/italic-oblique-ref.html b/layout/reftests/font-matching/italic-oblique-ref.html
new file mode 100644
index 000000000..d1fc2939c
--- /dev/null
+++ b/layout/reftests/font-matching/italic-oblique-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<head>
+<title>style matching - italic/oblique</title>
+<link rel="author" title="John Daggett" href="mailto:jdaggett@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-prop">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-style-matching">
+<link rel="match" href="italic-oblique-1-ref.html">
+<meta name="flags" content="font matching must distinguish between italic and oblique">
+<style>
+@font-face {
+  font-family: test;
+  src: url(../fonts/markA.woff);
+}
+body { margin: 30px }
+p { margin: 0; font: 600% test, serif; }
+</style>
+</head>
+<body>
+<p>AAA</p>
+</body>
+</html>
+
+
diff --git a/layout/reftests/font-matching/localized-family-names-001-ref.html b/layout/reftests/font-matching/localized-family-names-001-ref.html
new file mode 100644
index 000000000..6cd0c2218
--- /dev/null
+++ b/layout/reftests/font-matching/localized-family-names-001-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Localized font family names (ref)</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-size: 24px;
+}
+
+#test2 { font-family: "Apple LiSung"; }
+#test3 { font-family: "BatangChe"; }
+#test9 { font-family: "Dotum"; }
+#test10 { font-family: "FangSong"; }
+#test12 { font-family: "Gulim"; }
+#test14 { font-family: "Gungsuh"; }
+#test15 { font-family: "HY Kak Headline Std"; }
+#test17 { font-family: "Hiragino Kaku Gothic Pro"; }
+#test18 { font-family: "Hiragino Kaku Gothic StdN"; }
+#test19 { font-family: "Hiragino Kaku Gothic Std"; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<p id="test2">蘋果儷細宋 Apple LiSung</p>
+<p id="test3">바탕체 BatangChe</p>
+<p id="test9">돋움 Dotum</p>
+<p id="test10">仿宋 FangSong</p>
+<p id="test12">굴림 Gulim</p>
+<p id="test14">궁서 Gungsuh</p>
+<p id="test15">HY각헤드라인 Std HY Kak Headline Std</p>
+<p id="test17">ヒラギノ角ゴ Pro Hiragino Kaku Gothic Pro</p>
+<p id="test18">ヒラギノ角ゴ StdN Hiragino Kaku Gothic StdN</p>
+<p id="test19">ヒラギノ角ゴ Std Hiragino Kaku Gothic Std</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/localized-family-names-001.html b/layout/reftests/font-matching/localized-family-names-001.html
new file mode 100644
index 000000000..d5396a62b
--- /dev/null
+++ b/layout/reftests/font-matching/localized-family-names-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Localized font family names</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-size: 24px;
+}
+
+#test2 { font-family: "蘋果儷細宋"; }
+#test3 { font-family: "바탕체"; }
+#test9 { font-family: "돋움"; }
+#test10 { font-family: "仿宋"; }
+#test12 { font-family: "굴림"; }
+#test14 { font-family: "궁서"; }
+#test15 { font-family: "HY각헤드라인 Std"; }
+#test17 { font-family: "ヒラギノ角ゴ Pro"; }
+#test18 { font-family: "ヒラギノ角ゴ StdN"; }
+#test19 { font-family: "ヒラギノ角ゴ Std"; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<p id="test2">蘋果儷細宋 Apple LiSung</p>
+<p id="test3">바탕체 BatangChe</p>
+<p id="test9">돋움 Dotum</p>
+<p id="test10">仿宋 FangSong</p>
+<p id="test12">굴림 Gulim</p>
+<p id="test14">궁서 Gungsuh</p>
+<p id="test15">HY각헤드라인 Std HY Kak Headline Std</p>
+<p id="test17">ヒラギノ角ゴ Pro Hiragino Kaku Gothic Pro</p>
+<p id="test18">ヒラギノ角ゴ StdN Hiragino Kaku Gothic StdN</p>
+<p id="test19">ヒラギノ角ゴ Std Hiragino Kaku Gothic Std</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/localized-family-names-002-ref.html b/layout/reftests/font-matching/localized-family-names-002-ref.html
new file mode 100644
index 000000000..6ab9a06e3
--- /dev/null
+++ b/layout/reftests/font-matching/localized-family-names-002-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Localized font family names (ref)</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-size: 24px;
+}
+
+#test20 { font-family: "Hiragino Maru Gothic ProN"; }
+#test22 { font-family: "Hiragino Mincho ProN"; }
+#test23 { font-family: "Hiragino Mincho Pro"; }
+#test24 { font-family: "KaiTi"; }
+#test30 { font-family: "LiHei Pro"; }
+#test31 { font-family: "LiSong Pro"; }
+#test33 { font-family: "MS Mincho"; }
+#test34 { font-family: "MS PGothic"; }
+#test35 { font-family: "MS PMincho"; }
+#test36 { font-family: "Malgun Gothic"; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<p id="test20">ヒラギノ丸ゴ ProN Hiragino Maru Gothic ProN</p>
+<p id="test22">ヒラギノ明朝 ProN Hiragino Mincho ProN</p>
+<p id="test23">ヒラギノ明朝 Pro Hiragino Mincho Pro</p>
+<p id="test24">楷体 KaiTi</p>
+<p id="test30">儷黑 Pro LiHei Pro</p>
+<p id="test31">儷宋 Pro LiSong Pro</p>
+<p id="test33">ＭＳ 明朝 MS Mincho</p>
+<p id="test34">ＭＳ Ｐゴシック MS PGothic</p>
+<p id="test35">ＭＳ Ｐ明朝 MS PMincho</p>
+<p id="test36">맑은 고딕 Malgun Gothic</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/localized-family-names-002.html b/layout/reftests/font-matching/localized-family-names-002.html
new file mode 100644
index 000000000..5a7fffc2a
--- /dev/null
+++ b/layout/reftests/font-matching/localized-family-names-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Localized font family names</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-size: 24px;
+}
+
+#test20 { font-family: "ヒラギノ丸ゴ ProN"; }
+#test22 { font-family: "ヒラギノ明朝 ProN"; }
+#test23 { font-family: "ヒラギノ明朝 Pro"; }
+#test24 { font-family: "楷体"; }
+#test30 { font-family: "儷黑 Pro"; }
+#test31 { font-family: "儷宋 Pro"; }
+#test33 { font-family: "ＭＳ 明朝"; }
+#test34 { font-family: "ＭＳ Ｐゴシック"; }
+#test35 { font-family: "ＭＳ Ｐ明朝"; }
+#test36 { font-family: "맑은 고딕"; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<p id="test20">ヒラギノ丸ゴ ProN Hiragino Maru Gothic ProN</p>
+<p id="test22">ヒラギノ明朝 ProN Hiragino Mincho ProN</p>
+<p id="test23">ヒラギノ明朝 Pro Hiragino Mincho Pro</p>
+<p id="test24">楷体 KaiTi</p>
+<p id="test30">儷黑 Pro LiHei Pro</p>
+<p id="test31">儷宋 Pro LiSong Pro</p>
+<p id="test33">ＭＳ 明朝 MS Mincho</p>
+<p id="test34">ＭＳ Ｐゴシック MS PGothic</p>
+<p id="test35">ＭＳ Ｐ明朝 MS PMincho</p>
+<p id="test36">맑은 고딕 Malgun Gothic</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/localized-family-names-003-ref.html b/layout/reftests/font-matching/localized-family-names-003-ref.html
new file mode 100644
index 000000000..713df79c6
--- /dev/null
+++ b/layout/reftests/font-matching/localized-family-names-003-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Localized font family names (ref)</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-size: 24px;
+}
+
+#test37 { font-family: "Meiryo"; }
+#test38 { font-family: "Microsoft JhengHei"; }
+#test39 { font-family: "Microsoft YaHei"; }
+#test40 { font-family: "MingLiU-ExtB"; }
+#test41 { font-family: "MingLiU"; }
+#test43 { font-family: "MingLiU_HKSCS"; }
+#test44 { font-family: "NSimSun"; }
+#test46 { font-family: "PMingLiU"; }
+#test47 { font-family: "Raanana"; }
+#test48 { font-family: "STFangsong"; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<p id="test37">メイリオ Meiryo</p>
+<p id="test38">微軟正黑體 Microsoft JhengHei</p>
+<p id="test39">微软雅黑 Microsoft YaHei</p>
+<p id="test40">細明體-ExtB MingLiU-ExtB</p>
+<p id="test41">細明體 MingLiU</p>
+<p id="test43">細明體_HKSCS MingLiU_HKSCS</p>
+<p id="test44">新宋体 NSimSun</p>
+<p id="test46">新細明體 PMingLiU</p>
+<p id="test47">רעננה Raanana</p>
+<p id="test48">华文仿宋 STFangsong</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/localized-family-names-003.html b/layout/reftests/font-matching/localized-family-names-003.html
new file mode 100644
index 000000000..10d7f9c65
--- /dev/null
+++ b/layout/reftests/font-matching/localized-family-names-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Localized font family names</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-size: 24px;
+}
+
+#test37 { font-family: "メイリオ"; }
+#test38 { font-family: "微軟正黑體"; }
+#test39 { font-family: "微软雅黑"; }
+#test40 { font-family: "細明體-ExtB"; }
+#test41 { font-family: "細明體"; }
+#test43 { font-family: "細明體_HKSCS"; }
+#test44 { font-family: "新宋体"; }
+#test46 { font-family: "新細明體"; }
+#test47 { font-family: "רעננה"; }
+#test48 { font-family: "华文仿宋"; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<p id="test37">メイリオ Meiryo</p>
+<p id="test38">微軟正黑體 Microsoft JhengHei</p>
+<p id="test39">微软雅黑 Microsoft YaHei</p>
+<p id="test40">細明體-ExtB MingLiU-ExtB</p>
+<p id="test41">細明體 MingLiU</p>
+<p id="test43">細明體_HKSCS MingLiU_HKSCS</p>
+<p id="test44">新宋体 NSimSun</p>
+<p id="test46">新細明體 PMingLiU</p>
+<p id="test47">רעננה Raanana</p>
+<p id="test48">华文仿宋 STFangsong</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/localized-family-names-004-ref.html b/layout/reftests/font-matching/localized-family-names-004-ref.html
new file mode 100644
index 000000000..6ef138d8b
--- /dev/null
+++ b/layout/reftests/font-matching/localized-family-names-004-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Localized font family names (ref)</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-size: 24px;
+}
+
+#test49 { font-family: "STHeiti"; }
+#test51 { font-family: "STSong"; }
+#test52 { font-family: "Sazanami Gothic"; }
+#test53 { font-family: "Sazanami Mincho"; }
+#test54 { font-family: "SimHei"; }
+#test55 { font-family: "SimSun"; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<p id="test49">华文黑体 STHeiti</p>
+<p id="test51">华文宋体 STSong</p>
+<p id="test52">さざなみゴシック Sazanami Gothic</p>
+<p id="test53">さざなみ明朝 Sazanami Mincho</p>
+<p id="test54">黑体 SimHei</p>
+<p id="test55">宋体 SimSun</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/localized-family-names-004.html b/layout/reftests/font-matching/localized-family-names-004.html
new file mode 100644
index 000000000..52ff48748
--- /dev/null
+++ b/layout/reftests/font-matching/localized-family-names-004.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Localized font family names</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-size: 24px;
+}
+
+#test49 { font-family: "华文黑体"; }
+#test51 { font-family: "华文宋体"; }
+#test52 { font-family: "さざなみゴシック"; }
+#test53 { font-family: "さざなみ明朝"; }
+#test54 { font-family: "黑体"; }
+#test55 { font-family: "宋体"; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<p id="test49">华文黑体 STHeiti</p>
+<p id="test51">华文宋体 STSong</p>
+<p id="test52">さざなみゴシック Sazanami Gothic</p>
+<p id="test53">さざなみ明朝 Sazanami Mincho</p>
+<p id="test54">黑体 SimHei</p>
+<p id="test55">宋体 SimSun</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/lucidaconsole-bold.html b/layout/reftests/font-matching/lucidaconsole-bold.html
new file mode 100644
index 000000000..9b17188cd
--- /dev/null
+++ b/layout/reftests/font-matching/lucidaconsole-bold.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: "Lucida Console", serif; font-weight: bold; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/lucidaconsole-bolditalic.html b/layout/reftests/font-matching/lucidaconsole-bolditalic.html
new file mode 100644
index 000000000..2d9c82104
--- /dev/null
+++ b/layout/reftests/font-matching/lucidaconsole-bolditalic.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: "Lucida Console", serif; font-weight: bold; font-style: italic; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/lucidaconsole-italic.html b/layout/reftests/font-matching/lucidaconsole-italic.html
new file mode 100644
index 000000000..1403a8ee9
--- /dev/null
+++ b/layout/reftests/font-matching/lucidaconsole-italic.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: "Lucida Console", serif; font-style: italic; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/lucidaconsole-oblique.html b/layout/reftests/font-matching/lucidaconsole-oblique.html
new file mode 100644
index 000000000..7125faeaa
--- /dev/null
+++ b/layout/reftests/font-matching/lucidaconsole-oblique.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: "Lucida Console", serif; font-style: oblique; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/lucidaconsole.html b/layout/reftests/font-matching/lucidaconsole.html
new file mode 100644
index 000000000..f20047522
--- /dev/null
+++ b/layout/reftests/font-matching/lucidaconsole.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML><html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+body { margin: 50px; font-size: 72pt; }
+#test { font-family: "Lucida Console", serif; }
+</style>
+</head>
+<body><p id="test">Bongo</p></body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/normalmedium-notref.html b/layout/reftests/font-matching/normalmedium-notref.html
new file mode 100644
index 000000000..33925b92d
--- /dev/null
+++ b/layout/reftests/font-matching/normalmedium-notref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Mapping 400 to medium</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+@font-face {
+  font-family: mplus1p;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: mplus1p;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+p { font-size: 24pt; font-family: mplus1p; font-weight: 200; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<h4>The two lines below should match</h4>
+
+<p id="test1">Fiddling fiddlesticks!</p>
+<p id="test2">Fiddling fiddlesticks!</p>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/normalmedium-ref.html b/layout/reftests/font-matching/normalmedium-ref.html
new file mode 100644
index 000000000..b8b8df4ce
--- /dev/null
+++ b/layout/reftests/font-matching/normalmedium-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Mapping 400 to medium</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+@font-face {
+  font-family: mplus1p;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: mplus1p;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+p { font-size: 24pt; font-family: mplus1p; font-weight: normal; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<h4>The two lines below should match</h4>
+
+<p id="test1">Fiddling fiddlesticks!</p>
+<p id="test2">Fiddling fiddlesticks!</p>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/normalmedium.html b/layout/reftests/font-matching/normalmedium.html
new file mode 100644
index 000000000..7a29c5a66
--- /dev/null
+++ b/layout/reftests/font-matching/normalmedium.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Mapping 400 to medium</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+}
+
+@font-face {
+  font-family: mplus1p;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: mplus1p;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+p { font-size: 24pt; }
+#test1 { font-family: mplus1p; font-weight: normal; }
+#test2 { font-family: mplus1p; font-weight: 500; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<h4>The two lines below should match</h4>
+
+<p id="test1">Fiddling fiddlesticks!</p>
+<p id="test2">Fiddling fiddlesticks!</p>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/reftest-stylo.list b/layout/reftests/font-matching/reftest-stylo.list
new file mode 100644
index 000000000..5902a983f
--- /dev/null
+++ b/layout/reftests/font-matching/reftest-stylo.list
@@ -0,0 +1,143 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== CSS21-t1502-no-inherited-font-family.xhtml CSS21-t1502-no-inherited-font-family.xhtml
+
+# basic tests for bug 538730
+== synthetic-bold-1.html synthetic-bold-1.html
+== synthetic-bold-2.html synthetic-bold-2.html
+
+# synthetic bold/italic tests
+== defaultfont-bold.html defaultfont-bold.html
+== defaultfont-italic.html defaultfont-italic.html
+== defaultfont-oblique.html defaultfont-oblique.html
+== defaultfont-bolditalic.html defaultfont-bolditalic.html
+== defaultfont-bolditalic.html defaultfont-bolditalic.html
+
+== defaultjapanese-bold.html defaultjapanese-bold.html
+== defaultjapanese-italic.html defaultjapanese-italic.html
+== defaultjapanese-oblique.html defaultjapanese-oblique.html
+== defaultjapanese-bolditalic.html defaultjapanese-bolditalic.html
+== defaultjapanese-bolditalic.html defaultjapanese-bolditalic.html
+
+random-if(cocoaWidget) == impact-bold.html impact-bold.html
+# bug 539418
+== impact-italic.html impact-italic.html
+== impact-oblique.html impact-oblique.html
+== impact-bolditalic.html impact-bolditalic.html
+== impact-bolditalic.html impact-bolditalic.html
+
+== arialunicode-bold.html arialunicode-bold.html
+== arialunicode-italic.html arialunicode-italic.html
+== arialunicode-oblique.html arialunicode-oblique.html
+== arialunicode-bolditalic.html arialunicode-bolditalic.html
+== arialunicode-bolditalic.html arialunicode-bolditalic.html
+
+== lucidaconsole-bold.html lucidaconsole-bold.html
+== lucidaconsole-italic.html lucidaconsole-italic.html
+== lucidaconsole-oblique.html lucidaconsole-oblique.html
+== lucidaconsole-bolditalic.html lucidaconsole-bolditalic.html
+== lucidaconsole-bolditalic.html lucidaconsole-bolditalic.html
+
+# checking that we don't match fullnames, psnames (see bug 538103)
+== arial-variations-1.html arial-variations-1.html
+== arial-variations-2.html arial-variations-2.html
+== arial-variations-3.html arial-variations-3.html
+== arial-variations-4.html arial-variations-4.html
+== arial-variations-5.html arial-variations-5.html
+== arial-variations-6.html arial-variations-6.html
+
+# localized font family names should always match just as English names do
+== localized-family-names-001.html localized-family-names-001.html
+skip-if(Mulet) == localized-family-names-002.html localized-family-names-002.html
+# MULET: Bug 1144079: Re-enable Mulet mochitests and reftests taskcluster-specific disables
+fails-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)&&!d2d) == localized-family-names-003.html localized-family-names-003.html
+# Bug 1258248
+== localized-family-names-004.html localized-family-names-004.html
+
+# family names with escaped spaces shouldn't match the names without the spaces
+== familyname-escapedidents.html familyname-escapedidents.html
+
+# weight mapping tests
+skip-if(B2G||Mulet) HTTP(..) == normalmedium.html normalmedium.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) HTTP(..) == normalmedium.html normalmedium.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# Linux fails due to bug 604815
+skip fuzzy-if(OSX==1010&&browserIsRemote,1,23) HTTP(..) == weightmapping-12.html weightmapping-12.html
+skip HTTP(..) == weightmapping-25.html weightmapping-25.html
+skip HTTP(..) == weightmapping-45.html weightmapping-45.html
+skip HTTP(..) == weightmapping-458.html weightmapping-458.html
+skip HTTP(..) == weightmapping-478.html weightmapping-478.html
+skip HTTP(..) == weightmapping-7.html weightmapping-7.html
+skip fuzzy-if(OSX==1010,1,30) HTTP(..) == weightmapping-12579.html weightmapping-12579.html
+
+skip skip-if(B2G||Mulet) HTTP(..) == stretchmapping-all.html stretchmapping-all.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip skip-if(B2G||Mulet) HTTP(..) == stretchmapping-reverse.html stretchmapping-reverse.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip fuzzy-if(OSX==1010&&browserIsRemote,1,17) fuzzy-if(Android,4,8) HTTP(..) == stretchmapping-35.html stretchmapping-35.html
+skip fuzzy-if(OSX==1010,3,5) HTTP(..) == stretchmapping-137.html stretchmapping-137.html
+
+# test for font-stretch using @font-face
+skip-if(B2G||Mulet) skip-if(Android) HTTP(..) == font-stretch-1.html font-stretch-1.html
+# bugs 773482, 927602
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) skip-if(Android) HTTP(..) == font-shorthand-stretch-1.html font-shorthand-stretch-1.html
+# bugs 773482, 927602
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# bug 724231 - applying synthetic styles to a single @font-face font
+# should apply artificial obliquing, not switch to a true styled face
+== synthetic-style-1.html synthetic-style-1.html
+== synthetic-style-2.html synthetic-style-2.html
+
+# Bug 765906 - synthetic bold should be used if necessary together with system fallback.
+# **NOTE** we skip these on Linux because of bug 769659.
+# test 1 uses Cherokee; expected to pass on OS X and Win7
+random-if(!(cocoaWidget||/^Windows\x20NT\x206\.1/.test(http.oscpu))) skip-if(gtkWidget) == bold-system-fallback-1.html bold-system-fallback-1.html
+# test 2 uses Chess symbols; expected to pass on Android
+random-if(!Android) skip-if(gtkWidget) == bold-system-fallback-2.html bold-system-fallback-2.html
+
+# Bug 769475 - applying 'italic' to Arabic text in Arial should NOT change family or metrics.
+# Expected to pass on MacOSX and Windows; other platforms unknown, depending on font availability.
+random-if(!(cocoaWidget||winWidget)) == arial-arabic.html arial-arabic.html
+
+== syntheticbold-rotated.html syntheticbold-rotated.html
+
+HTTP(..) == font-synthesis-1.html font-synthesis-1.html
+skip-if(Mulet) HTTP(..) == font-synthesis-2.html font-synthesis-2.html
+# MULET: Bug 1144079: Re-enable Mulet mochitests and reftests taskcluster-specific disables
+
+# Bug 1060791 - support for format 10 cmap in Apple Symbols;
+# relevant fonts not present on other platforms.
+skip skip-if(!cocoaWidget) HTTP(..) == apple-symbols-1.html apple-symbols-1.html
+
+# distinguish between italic and oblique
+== simple-oblique.html simple-oblique.html
+== italic-oblique-1.html italic-oblique-1.html
+== italic-oblique-2.html italic-oblique-2.html
+== italic-oblique-3.html italic-oblique-3.html
+== italic-oblique-4.html italic-oblique-4.html
+== italic-oblique-5.html italic-oblique-5.html
+== italic-oblique-6.html italic-oblique-6.html
+== italic-oblique-7.html italic-oblique-7.html
+== italic-oblique-8.html italic-oblique-8.html
+== italic-oblique-9.html italic-oblique-9.html
+== italic-oblique-kinnari.html italic-oblique-kinnari.html
+
+# system font generic per-language tests, only works under OSX currently
+# Bug 1212731 - initial implementation caused startup regression and
+# regression with full-width digits display in UI elements. Disable
+# tests until these problems are corrected.
+# random-if(!OSX) == system-generic-fallback-1.html system-generic-fallback-1.html
+# random-if(!OSX||OSX<1008) == system-generic-fallback-2.html system-generic-fallback-2.html
+# random-if(!OSX||OSX<1008) == system-generic-fallback-3.html system-generic-fallback-3.html
+# random-if(!OSX||OSX<1008) == system-generic-fallback-4.html system-generic-fallback-4.html
+# random-if(!OSX) == system-generic-fallback-ko.html system-generic-fallback-ko.html
+# random-if(!OSX) == system-generic-fallback-zh-tw.html system-generic-fallback-zh-tw.html
+# random-if(!OSX) == system-generic-fallback-zh-cn.html system-generic-fallback-zh-cn.html
+# random-if(!OSX) == system-generic-fallback-zh-tw.html system-generic-fallback-zh-tw.html
+
diff --git a/layout/reftests/font-matching/reftest.list b/layout/reftests/font-matching/reftest.list
new file mode 100644
index 000000000..ec2c98f21
--- /dev/null
+++ b/layout/reftests/font-matching/reftest.list
@@ -0,0 +1,127 @@
+== CSS21-t1502-no-inherited-font-family.xhtml CSS21-t1502-no-inherited-font-family-ref.xhtml
+
+# basic tests for bug 538730
+!= synthetic-bold-1.html synthetic-bold-1-ref.html
+!= synthetic-bold-2.html synthetic-bold-2-ref.html
+
+# synthetic bold/italic tests
+!= defaultfont-bold.html defaultfont.html
+!= defaultfont-italic.html defaultfont.html 
+!= defaultfont-oblique.html defaultfont.html 
+!= defaultfont-bolditalic.html defaultfont.html 
+!= defaultfont-bolditalic.html defaultfont-bold.html
+
+!= defaultjapanese-bold.html defaultjapanese.html
+!= defaultjapanese-italic.html defaultjapanese.html
+!= defaultjapanese-oblique.html defaultjapanese.html
+!= defaultjapanese-bolditalic.html defaultjapanese.html
+!= defaultjapanese-bolditalic.html defaultjapanese-bold.html
+
+random-if(cocoaWidget) != impact-bold.html impact.html # bug 539418
+!= impact-italic.html impact.html
+!= impact-oblique.html impact.html
+!= impact-bolditalic.html impact.html
+!= impact-bolditalic.html impact-bold.html
+
+!= arialunicode-bold.html arialunicode.html
+!= arialunicode-italic.html arialunicode.html
+!= arialunicode-oblique.html arialunicode.html
+!= arialunicode-bolditalic.html arialunicode.html
+!= arialunicode-bolditalic.html arialunicode-bold.html
+
+!= lucidaconsole-bold.html lucidaconsole.html
+!= lucidaconsole-italic.html lucidaconsole.html
+!= lucidaconsole-oblique.html lucidaconsole.html
+!= lucidaconsole-bolditalic.html lucidaconsole.html
+!= lucidaconsole-bolditalic.html lucidaconsole-bold.html
+
+# checking that we don't match fullnames, psnames (see bug 538103)
+== arial-variations-1.html arial-variations-1-ref.html
+== arial-variations-2.html arial-variations-2-ref.html
+== arial-variations-3.html arial-variations-3-ref.html
+== arial-variations-4.html arial-variations-4-ref.html
+== arial-variations-5.html arial-variations-5-ref.html
+== arial-variations-6.html arial-variations-6-ref.html
+
+# localized font family names should always match just as English names do
+== localized-family-names-001.html localized-family-names-001-ref.html
+== localized-family-names-002.html localized-family-names-002-ref.html
+== localized-family-names-003.html localized-family-names-003-ref.html
+== localized-family-names-004.html localized-family-names-004-ref.html
+
+# family names with escaped spaces shouldn't match the names without the spaces
+fails-if(http.oscpu=="Linux\u0020x86_64") == familyname-escapedidents.html familyname-escapedidents-ref.html # bug 1309425
+
+# weight mapping tests
+HTTP(..) == normalmedium.html normalmedium-ref.html
+HTTP(..) != normalmedium.html normalmedium-notref.html
+
+# Linux fails due to bug 604815
+fuzzy-if(OSX==1010&&browserIsRemote,1,23) HTTP(..) == weightmapping-12.html weightmapping-12-ref.html
+HTTP(..) == weightmapping-25.html weightmapping-25-ref.html
+HTTP(..) == weightmapping-45.html weightmapping-45-ref.html
+HTTP(..) == weightmapping-458.html weightmapping-458-ref.html
+HTTP(..) == weightmapping-478.html weightmapping-478-ref.html
+HTTP(..) == weightmapping-7.html weightmapping-7-ref.html
+fuzzy-if(OSX==1010,1,30) HTTP(..) == weightmapping-12579.html weightmapping-12579-ref.html
+
+HTTP(..) == stretchmapping-all.html stretchmapping-all-ref.html
+HTTP(..) == stretchmapping-reverse.html stretchmapping-reverse-ref.html
+fuzzy-if(OSX==1010&&browserIsRemote,1,17) fuzzy-if(Android,4,8) HTTP(..) == stretchmapping-35.html stretchmapping-35-ref.html
+fuzzy-if(OSX==1010,3,5) HTTP(..) == stretchmapping-137.html stretchmapping-137-ref.html
+
+# test for font-stretch using @font-face
+HTTP(..) == font-stretch-1.html font-stretch-1-ref.html
+HTTP(..) == font-shorthand-stretch-1.html font-stretch-1-ref.html
+
+# bug 724231 - applying synthetic styles to a single @font-face font
+# should apply artificial obliquing, not switch to a true styled face
+!= synthetic-style-1.html synthetic-style-1-notref.html
+!= synthetic-style-2.html synthetic-style-2-notref.html
+
+# Bug 765906 - synthetic bold should be used if necessary together with system fallback.
+# **NOTE** we skip these on Linux because of bug 769659.
+# test 1 uses Cherokee; expected to pass on OS X and Win7
+random-if(!(cocoaWidget||/^Windows\x20NT\x206\.1/.test(http.oscpu))) skip-if(gtkWidget) != bold-system-fallback-1.html bold-system-fallback-1-notref.html
+# test 2 uses Chess symbols; expected to pass on Android
+random-if(!Android) skip-if(gtkWidget) != bold-system-fallback-2.html bold-system-fallback-2-notref.html
+
+# Bug 769475 - applying 'italic' to Arabic text in Arial should NOT change family or metrics.
+# Expected to pass on MacOSX and Windows; other platforms unknown, depending on font availability.
+random-if(!(cocoaWidget||winWidget)) == arial-arabic.html arial-arabic-ref.html
+
+!= syntheticbold-rotated.html syntheticbold-rotated-ref.html
+
+HTTP(..) == font-synthesis-1.html font-synthesis-1-ref.html
+HTTP(..) == font-synthesis-2.html font-synthesis-2-ref.html
+
+# Bug 1060791 - support for format 10 cmap in Apple Symbols;
+# relevant fonts not present on other platforms.
+skip-if(!cocoaWidget) HTTP(..) != apple-symbols-1.html apple-symbols-1-notref.html
+
+# distinguish between italic and oblique
+== simple-oblique.html simple-oblique-ref.html
+== italic-oblique-1.html italic-oblique-ref.html
+== italic-oblique-2.html italic-oblique-ref.html
+== italic-oblique-3.html italic-oblique-ref.html
+== italic-oblique-4.html italic-oblique-ref.html
+== italic-oblique-5.html italic-oblique-ref.html
+== italic-oblique-6.html italic-oblique-ref.html
+== italic-oblique-7.html italic-oblique-ref.html
+== italic-oblique-8.html italic-oblique-ref.html
+== italic-oblique-9.html italic-oblique-ref.html
+!= italic-oblique-kinnari.html italic-oblique-kinnari-ref.html
+
+# system font generic per-language tests, only works under OSX currently
+# Bug 1212731 - initial implementation caused startup regression and
+# regression with full-width digits display in UI elements. Disable
+# tests until these problems are corrected.
+# random-if(!OSX) == system-generic-fallback-1.html system-generic-fallback-1-ref.html
+# random-if(!OSX||OSX<1008) == system-generic-fallback-2.html system-generic-fallback-2-ref.html
+# random-if(!OSX||OSX<1008) == system-generic-fallback-3.html system-generic-fallback-3-ref.html
+# random-if(!OSX||OSX<1008) == system-generic-fallback-4.html system-generic-fallback-4-ref.html
+# random-if(!OSX) != system-generic-fallback-ko.html system-generic-fallback-ja.html
+# random-if(!OSX) != system-generic-fallback-zh-tw.html system-generic-fallback-ja.html
+# random-if(!OSX) != system-generic-fallback-zh-cn.html system-generic-fallback-ja.html
+# random-if(!OSX) != system-generic-fallback-zh-tw.html system-generic-fallback-zh-cn.html
+
diff --git a/layout/reftests/font-matching/simple-oblique-ref.html b/layout/reftests/font-matching/simple-oblique-ref.html
new file mode 100644
index 000000000..d021f51d0
--- /dev/null
+++ b/layout/reftests/font-matching/simple-oblique-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>oblique italic equivalence</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-size: 300%;
+}
+
+#sans { font-family: sans-serif; }
+#serif { font-family: serif; }
+#mono { font-family: monospace; }
+
+p {
+  margin: 0;
+  font-style: italic;
+  line-height: 1.3em;
+}
+</style>
+
+</head>
+<body>
+
+<p id=sans>UNICORN asteroid</p>
+<p id=serif>UNICORN asteroid</p>
+<p id=mono>UNICORN asteroid</p>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/simple-oblique.html b/layout/reftests/font-matching/simple-oblique.html
new file mode 100644
index 000000000..cb4671f4d
--- /dev/null
+++ b/layout/reftests/font-matching/simple-oblique.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>oblique italic equivalence</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-size: 300%;
+}
+
+#sans { font-family: sans-serif; }
+#serif { font-family: serif; }
+#mono { font-family: monospace; }
+
+p {
+  margin: 0;
+  font-style: oblique;
+  line-height: 1.3em;
+}
+</style>
+
+</head>
+<body>
+
+<p id=sans>UNICORN asteroid</p>
+<p id=serif>UNICORN asteroid</p>
+<p id=mono>UNICORN asteroid</p>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/stretchmapping-137-ref.html b/layout/reftests/font-matching/stretchmapping-137-ref.html
new file mode 100644
index 000000000..a42b81c83
--- /dev/null
+++ b/layout/reftests/font-matching/stretchmapping-137-ref.html
@@ -0,0 +1,348 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>font-stretch mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+table {
+  border-collapse: collapse;
+  font-size: 28px;
+}
+
+td {
+  padding: 0; margin: 0;
+  font-family: test;
+}
+
+th {
+  font-weight: inherit;
+}
+
+p { width: 300px; }
+
+.red { color: red; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+  font-weight: 400;
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+  font-weight: 800;
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+  font-stretch: expanded;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+  font-weight: 900;
+  font-stretch: expanded;
+}
+
+@font-face {
+  font-family: test100;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: test200;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test400;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test800;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: test900;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+  font-weight: 900;
+}
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+.w1 .fs1 { font-family: test100; }
+.w2 .fs1 { font-family: test100; }
+.w3 .fs1 { font-family: test100; }
+.w4 .fs1 { font-family: test400; }
+.w5 .fs1 { font-family: test400; }
+.w6 .fs1 { font-family: test400; }
+.w7 .fs1 { font-family: test400; }
+.w8 .fs1 { font-family: test400; }
+.w9 .fs1 { font-family: test400; }
+
+.w1 .fs2 { font-family: test100; }
+.w2 .fs2 { font-family: test100; }
+.w3 .fs2 { font-family: test100; }
+.w4 .fs2 { font-family: test400; }
+.w5 .fs2 { font-family: test400; }
+.w6 .fs2 { font-family: test400; }
+.w7 .fs2 { font-family: test400; }
+.w8 .fs2 { font-family: test400; }
+.w9 .fs2 { font-family: test400; }
+
+.w1 .fs3 { font-family: test200; }
+.w2 .fs3 { font-family: test200; }
+.w3 .fs3 { font-family: test200; }
+.w4 .fs3 { font-family: test200; }
+.w5 .fs3 { font-family: test200; }
+.w6 .fs3 { font-family: test800; }
+.w7 .fs3 { font-family: test800; }
+.w8 .fs3 { font-family: test800; }
+.w9 .fs3 { font-family: test800; }
+
+.w1 .fs4 { font-family: test200; }
+.w2 .fs4 { font-family: test200; }
+.w3 .fs4 { font-family: test200; }
+.w4 .fs4 { font-family: test200; }
+.w5 .fs4 { font-family: test200; }
+.w6 .fs4 { font-family: test800; }
+.w7 .fs4 { font-family: test800; }
+.w8 .fs4 { font-family: test800; }
+.w9 .fs4 { font-family: test800; }
+
+.w1 .fs5 { font-family: test200; }
+.w2 .fs5 { font-family: test200; }
+.w3 .fs5 { font-family: test200; }
+.w4 .fs5 { font-family: test200; }
+.w5 .fs5 { font-family: test200; }
+.w6 .fs5 { font-family: test800; }
+.w7 .fs5 { font-family: test800; }
+.w8 .fs5 { font-family: test800; }
+.w9 .fs5 { font-family: test800; }
+
+.w1 .fs6 { font-family: test500; }
+.w2 .fs6 { font-family: test500; }
+.w3 .fs6 { font-family: test500; }
+.w4 .fs6 { font-family: test500; }
+.w5 .fs6 { font-family: test500; }
+.w6 .fs6 { font-family: test900; }
+.w7 .fs6 { font-family: test900; }
+.w8 .fs6 { font-family: test900; }
+.w9 .fs6 { font-family: test900; }
+
+.w1 .fs7 { font-family: test500; }
+.w2 .fs7 { font-family: test500; }
+.w3 .fs7 { font-family: test500; }
+.w4 .fs7 { font-family: test500; }
+.w5 .fs7 { font-family: test500; }
+.w6 .fs7 { font-family: test900; }
+.w7 .fs7 { font-family: test900; }
+.w8 .fs7 { font-family: test900; }
+.w9 .fs7 { font-family: test900; }
+
+.w1 .fs8 { font-family: test500; }
+.w2 .fs8 { font-family: test500; }
+.w3 .fs8 { font-family: test500; }
+.w4 .fs8 { font-family: test500; }
+.w5 .fs8 { font-family: test500; }
+.w6 .fs8 { font-family: test900; }
+.w7 .fs8 { font-family: test900; }
+.w8 .fs8 { font-family: test900; }
+.w9 .fs8 { font-family: test900; }
+
+.w1 .fs9 { font-family: test500; }
+.w2 .fs9 { font-family: test500; }
+.w3 .fs9 { font-family: test500; }
+.w4 .fs9 { font-family: test500; }
+.w5 .fs9 { font-family: test500; }
+.w6 .fs9 { font-family: test900; }
+.w7 .fs9 { font-family: test900; }
+.w8 .fs9 { font-family: test900; }
+.w9 .fs9 { font-family: test900; }
+
+</style>
+</head>
+<body>
+
+<p>Font family with ultra-condensed 100, 400, condensed 200, 800 and expanded 500, 900</p>
+
+<table>
+<thead>
+<th></th>
+<th class="red">1</th>
+<th>2</th>
+<th class="red">3</th>
+<th>4</th>
+<th>5</th>
+<th>6</th>
+<th class="red">7</th>
+<th>8</th>
+<th>9</th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w5">
+<th>500</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/stretchmapping-137.html b/layout/reftests/font-matching/stretchmapping-137.html
new file mode 100644
index 000000000..81f45f66d
--- /dev/null
+++ b/layout/reftests/font-matching/stretchmapping-137.html
@@ -0,0 +1,268 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>font-stretch mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+table {
+  border-collapse: collapse;
+  font-size: 28px;
+}
+
+td {
+  padding: 0; margin: 0;
+  font-family: test;
+}
+
+th {
+  font-weight: inherit;
+}
+
+p { width: 300px; }
+
+.red { color: red; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+  font-weight: 400;
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+  font-weight: 800;
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+  font-stretch: expanded;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+  font-weight: 900;
+  font-stretch: expanded;
+}
+
+@font-face {
+  font-family: test100;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: test200;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test400;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test800;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: test900;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+  font-weight: 900;
+}
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+.fs1 { font-stretch: ultra-condensed; }
+.fs2 { font-stretch: extra-condensed; }
+.fs3 { font-stretch: condensed; }
+.fs4 { font-stretch: semi-condensed; }
+.fs5 { font-stretch: normal; }
+.fs6 { font-stretch: semi-expanded; }
+.fs7 { font-stretch: expanded; }
+.fs8 { font-stretch: extra-expanded; }
+.fs9 { font-stretch: ultra-expanded; }
+
+</style>
+</head>
+<body>
+
+<p>Font family with ultra-condensed 100, 400, condensed 200, 800 and expanded 500, 900</p>
+
+<table>
+<thead>
+<th></th>
+<th class="red">1</th>
+<th>2</th>
+<th class="red">3</th>
+<th>4</th>
+<th>5</th>
+<th>6</th>
+<th class="red">7</th>
+<th>8</th>
+<th>9</th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w5">
+<th>500</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="fs1"><span>か</span></td>
+<td class="fs2"><span>か</span></td>
+<td class="fs3"><span>か</span></td>
+<td class="fs4"><span>か</span></td>
+<td class="fs5"><span>か</span></td>
+<td class="fs6"><span>か</span></td>
+<td class="fs7"><span>か</span></td>
+<td class="fs8"><span>か</span></td>
+<td class="fs9"><span>か</span></td>
+</tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/stretchmapping-35-ref.html b/layout/reftests/font-matching/stretchmapping-35-ref.html
new file mode 100644
index 000000000..2124a6874
--- /dev/null
+++ b/layout/reftests/font-matching/stretchmapping-35-ref.html
@@ -0,0 +1,320 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>font-stretch mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+table {
+  border-collapse: collapse;
+  font-size: 28px;
+}
+
+td {
+  padding: 0; margin: 0;
+  font-family: test;
+}
+
+th {
+  font-weight: inherit;
+}
+
+p { width: 300px; }
+
+.red { color: red; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+  font-weight: 900;
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: test100;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: test200;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test900;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+  font-weight: 900;
+}
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+.w1 .fs1 { font-family: test100; }
+.w2 .fs1 { font-family: test100; }
+.w3 .fs1 { font-family: test100; }
+.w4 .fs1 { font-family: test100; }
+.w5 .fs1 { font-family: test100; }
+.w6 .fs1 { font-family: test900; }
+.w7 .fs1 { font-family: test900; }
+.w8 .fs1 { font-family: test900; }
+.w9 .fs1 { font-family: test900; }
+
+.w1 .fs2 { font-family: test100; }
+.w2 .fs2 { font-family: test100; }
+.w3 .fs2 { font-family: test100; }
+.w4 .fs2 { font-family: test100; }
+.w5 .fs2 { font-family: test100; }
+.w6 .fs2 { font-family: test900; }
+.w7 .fs2 { font-family: test900; }
+.w8 .fs2 { font-family: test900; }
+.w9 .fs2 { font-family: test900; }
+
+.w1 .fs3 { font-family: test100; }
+.w2 .fs3 { font-family: test100; }
+.w3 .fs3 { font-family: test100; }
+.w4 .fs3 { font-family: test100; }
+.w5 .fs3 { font-family: test100; }
+.w6 .fs3 { font-family: test900; }
+.w7 .fs3 { font-family: test900; }
+.w8 .fs3 { font-family: test900; }
+.w9 .fs3 { font-family: test900; }
+
+.w1 .fs4 { font-family: test100; }
+.w2 .fs4 { font-family: test100; }
+.w3 .fs4 { font-family: test100; }
+.w4 .fs4 { font-family: test100; }
+.w5 .fs4 { font-family: test100; }
+.w6 .fs4 { font-family: test900; }
+.w7 .fs4 { font-family: test900; }
+.w8 .fs4 { font-family: test900; }
+.w9 .fs4 { font-family: test900; }
+
+.w1 .fs5 { font-family: test200; }
+.w2 .fs5 { font-family: test200; }
+.w3 .fs5 { font-family: test200; }
+.w4 .fs5 { font-family: test500; }
+.w5 .fs5 { font-family: test500; }
+.w6 .fs5 { font-family: test500; }
+.w7 .fs5 { font-family: test500; }
+.w8 .fs5 { font-family: test500; }
+.w9 .fs5 { font-family: test500; }
+
+.w1 .fs6 { font-family: test200; }
+.w2 .fs6 { font-family: test200; }
+.w3 .fs6 { font-family: test200; }
+.w4 .fs6 { font-family: test500; }
+.w5 .fs6 { font-family: test500; }
+.w6 .fs6 { font-family: test500; }
+.w7 .fs6 { font-family: test500; }
+.w8 .fs6 { font-family: test500; }
+.w9 .fs6 { font-family: test500; }
+
+.w1 .fs7 { font-family: test200; }
+.w2 .fs7 { font-family: test200; }
+.w3 .fs7 { font-family: test200; }
+.w4 .fs7 { font-family: test500; }
+.w5 .fs7 { font-family: test500; }
+.w6 .fs7 { font-family: test500; }
+.w7 .fs7 { font-family: test500; }
+.w8 .fs7 { font-family: test500; }
+.w9 .fs7 { font-family: test500; }
+
+.w1 .fs8 { font-family: test200; }
+.w2 .fs8 { font-family: test200; }
+.w3 .fs8 { font-family: test200; }
+.w4 .fs8 { font-family: test500; }
+.w5 .fs8 { font-family: test500; }
+.w6 .fs8 { font-family: test500; }
+.w7 .fs8 { font-family: test500; }
+.w8 .fs8 { font-family: test500; }
+.w9 .fs8 { font-family: test500; }
+
+.w1 .fs9 { font-family: test200; }
+.w2 .fs9 { font-family: test200; }
+.w3 .fs9 { font-family: test200; }
+.w4 .fs9 { font-family: test500; }
+.w5 .fs9 { font-family: test500; }
+.w6 .fs9 { font-family: test500; }
+.w7 .fs9 { font-family: test500; }
+.w8 .fs9 { font-family: test500; }
+.w9 .fs9 { font-family: test500; }
+
+</style>
+</head>
+<body>
+
+<p>Font family with normal width 200, 500 and condensed 100, 900</p>
+
+<table>
+<thead>
+<th></th>
+<th>1</th>
+<th>2</th>
+<th class="red">3</th>
+<th>4</th>
+<th class="red">5</th>
+<th>6</th>
+<th>7</th>
+<th>8</th>
+<th>9</th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w5">
+<th>500</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/stretchmapping-35.html b/layout/reftests/font-matching/stretchmapping-35.html
new file mode 100644
index 000000000..a6c1245b3
--- /dev/null
+++ b/layout/reftests/font-matching/stretchmapping-35.html
@@ -0,0 +1,240 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>font-stretch mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+table {
+  border-collapse: collapse;
+  font-size: 28px;
+}
+
+td {
+  padding: 0; margin: 0;
+  font-family: test;
+}
+
+th {
+  font-weight: inherit;
+}
+
+p { width: 300px; }
+
+.red { color: red; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+  font-weight: 900;
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: test100;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: test200;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test900;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+  font-weight: 900;
+}
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+.fs1 { font-stretch: ultra-condensed; }
+.fs2 { font-stretch: extra-condensed; }
+.fs3 { font-stretch: condensed; }
+.fs4 { font-stretch: semi-condensed; }
+.fs5 { font-stretch: normal; }
+.fs6 { font-stretch: semi-expanded; }
+.fs7 { font-stretch: expanded; }
+.fs8 { font-stretch: extra-expanded; }
+.fs9 { font-stretch: ultra-expanded; }
+
+</style>
+</head>
+<body>
+
+<p>Font family with normal width 200, 500 and condensed 100, 900</p>
+
+<table>
+<thead>
+<th></th>
+<th>1</th>
+<th>2</th>
+<th class="red">3</th>
+<th>4</th>
+<th class="red">5</th>
+<th>6</th>
+<th>7</th>
+<th>8</th>
+<th>9</th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w5">
+<th>500</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="fs1"><span>あ</span></td>
+<td class="fs2"><span>あ</span></td>
+<td class="fs3"><span>あ</span></td>
+<td class="fs4"><span>あ</span></td>
+<td class="fs5"><span>あ</span></td>
+<td class="fs6"><span>あ</span></td>
+<td class="fs7"><span>あ</span></td>
+<td class="fs8"><span>あ</span></td>
+<td class="fs9"><span>あ</span></td>
+</tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/stretchmapping-all-ref.html b/layout/reftests/font-matching/stretchmapping-all-ref.html
new file mode 100644
index 000000000..267e50b4c
--- /dev/null
+++ b/layout/reftests/font-matching/stretchmapping-all-ref.html
@@ -0,0 +1,366 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>font-stretch matching tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Calibri, Verdana, sans-serif;
+}
+
+p { margin: 0; padding: 0; }
+
+table {
+  border-collapse: collapse;
+}
+
+th { 
+  font-weight: normal;
+  background-color: #eee;
+}
+
+th, td { width: 3em; text-align: left; }
+tr th { text-align: left; }
+
+.fstest-full { font-family: fstest-full; }
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd1.ttf);
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd2.ttf);
+  font-stretch: extra-condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd3.ttf);
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd4.ttf);
+  font-stretch: semi-condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd5.ttf);
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd6.ttf);
+  font-stretch: semi-expanded;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd7.ttf);
+  font-stretch: expanded;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd8.ttf);
+  font-stretch: extra-expanded;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd9.ttf);
+  font-stretch: ultra-expanded;
+}
+
+.fstest-1-3 { font-family: fstest-1-3; }
+
+@font-face {
+  font-family: fstest-1-3;
+  src: url(../fonts/csstest-widths-wd1.ttf);
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: fstest-1-3;
+  src: url(../fonts/csstest-widths-wd3.ttf);
+  font-stretch: condensed;
+}
+
+.fstest-1-4 { font-family: fstest-1-4; }
+
+@font-face {
+  font-family: fstest-1-4;
+  src: url(../fonts/csstest-widths-wd1.ttf);
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: fstest-1-4;
+  src: url(../fonts/csstest-widths-wd4.ttf);
+  font-stretch: semi-condensed;
+}
+
+.fstest-1-5 { font-family: fstest-1-5; }
+
+@font-face {
+  font-family: fstest-1-5;
+  src: url(../fonts/csstest-widths-wd1.ttf);
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: fstest-1-5;
+  src: url(../fonts/csstest-widths-wd5.ttf);
+  font-stretch: normal;
+}
+
+.fstest-2-6 { font-family: fstest-2-6; }
+
+@font-face {
+  font-family: fstest-2-6;
+  src: url(../fonts/csstest-widths-wd2.ttf);
+  font-stretch: extra-condensed;
+}
+
+@font-face {
+  font-family: fstest-2-6;
+  src: url(../fonts/csstest-widths-wd6.ttf);
+  font-stretch: semi-expanded;
+}
+
+.fstest-4-6 { font-family: fstest-4-6; }
+
+@font-face {
+  font-family: fstest-4-6;
+  src: url(../fonts/csstest-widths-wd4.ttf);
+  font-stretch: semi-condensed;
+}
+
+@font-face {
+  font-family: fstest-4-6;
+  src: url(../fonts/csstest-widths-wd6.ttf);
+  font-stretch: semi-expanded;
+}
+
+.fstest-4-7 { font-family: fstest-4-7; }
+
+@font-face {
+  font-family: fstest-4-7;
+  src: url(../fonts/csstest-widths-wd4.ttf);
+  font-stretch: semi-condensed;
+}
+
+@font-face {
+  font-family: fstest-4-7;
+  src: url(../fonts/csstest-widths-wd7.ttf);
+  font-stretch: expanded;
+}
+
+.fstest-6-7 { font-family: fstest-6-7; }
+
+@font-face {
+  font-family: fstest-6-7;
+  src: url(../fonts/csstest-widths-wd6.ttf);
+  font-stretch: semi-expanded;
+}
+
+@font-face {
+  font-family: fstest-6-7;
+  src: url(../fonts/csstest-widths-wd7.ttf);
+  font-stretch: expanded;
+}
+
+.fstest-7-9 { font-family: fstest-7-9; }
+
+@font-face {
+  font-family: fstest-7-9;
+  src: url(../fonts/csstest-widths-wd7.ttf);
+  font-stretch: expanded;
+}
+
+@font-face {
+  font-family: fstest-7-9;
+  src: url(../fonts/csstest-widths-wd9.ttf);
+  font-stretch: ultra-expanded;
+}
+
+.fstest-8-9 { font-family: fstest-8-9; }
+
+@font-face {
+  font-family: fstest-8-9;
+  src: url(../fonts/csstest-widths-wd8.ttf);
+  font-stretch: extra-expanded;
+}
+
+@font-face {
+  font-family: fstest-8-9;
+  src: url(../fonts/csstest-widths-wd9.ttf);
+  font-stretch: ultra-expanded;
+}
+
+.fs1 { font-stretch: ultra-condensed; }
+.fs2 { font-stretch: extra-condensed; }
+.fs3 { font-stretch: condensed; }
+.fs4 { font-stretch: semi-condensed; }
+.fs5 { font-stretch: normal; }
+.fs6 { font-stretch: semi-expanded; }
+.fs7 { font-stretch: expanded; }
+.fs8 { font-stretch: extra-expanded; }
+.fs9 { font-stretch: ultra-expanded; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<p>font-stretch mapping with different font family sets</p>
+<p>(only numbers should appear in the body of the table)</p>
+
+<table>
+<thead>
+<th>width</th>
+<th>full</th>
+<th>1-3</th>
+<th>1-4</th>
+<th>1-5</th>
+<th>2-6</th>
+<th>4-6</th>
+<th>4-7</th>
+<th>6-7</th>
+<th>7-9</th>
+<th>8-9</th>
+</thead>
+<tr class="fs1">
+<th>1</th>
+<td class="fstest-full">1</td>
+<td class="fstest-1-3">1</td>
+<td class="fstest-1-4">1</td>
+<td class="fstest-1-5">1</td>
+<td class="fstest-2-6">2</td>
+<td class="fstest-4-6">4</td>
+<td class="fstest-4-7">4</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs2">
+<th>2</th>
+<td class="fstest-full">2</td>
+<td class="fstest-1-3">1</td>
+<td class="fstest-1-4">1</td>
+<td class="fstest-1-5">1</td>
+<td class="fstest-2-6">2</td>
+<td class="fstest-4-6">4</td>
+<td class="fstest-4-7">4</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs3">
+<th>3</th>
+<td class="fstest-full">3</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">1</td>
+<td class="fstest-1-5">1</td>
+<td class="fstest-2-6">2</td>
+<td class="fstest-4-6">4</td>
+<td class="fstest-4-7">4</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs4">
+<th>4</th>
+<td class="fstest-full">4</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">1</td>
+<td class="fstest-2-6">2</td>
+<td class="fstest-4-6">4</td>
+<td class="fstest-4-7">4</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs5">
+<th>5</th>
+<td class="fstest-full">5</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">5</td>
+<td class="fstest-2-6">2</td>
+<td class="fstest-4-6">4</td>
+<td class="fstest-4-7">4</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs6">
+<th>6</th>
+<td class="fstest-full">6</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">5</td>
+<td class="fstest-2-6">6</td>
+<td class="fstest-4-6">6</td>
+<td class="fstest-4-7">7</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs7">
+<th>7</th>
+<td class="fstest-full">7</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">5</td>
+<td class="fstest-2-6">6</td>
+<td class="fstest-4-6">6</td>
+<td class="fstest-4-7">7</td>
+<td class="fstest-6-7">7</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs8">
+<th>8</th>
+<td class="fstest-full">8</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">5</td>
+<td class="fstest-2-6">6</td>
+<td class="fstest-4-6">6</td>
+<td class="fstest-4-7">7</td>
+<td class="fstest-6-7">7</td>
+<td class="fstest-7-9">9</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs9">
+<th>9</th>
+<td class="fstest-full">9</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">5</td>
+<td class="fstest-2-6">6</td>
+<td class="fstest-4-6">6</td>
+<td class="fstest-4-7">7</td>
+<td class="fstest-6-7">7</td>
+<td class="fstest-7-9">9</td>
+<td class="fstest-8-9">9</td>
+</tr>
+</table>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/stretchmapping-all.html b/layout/reftests/font-matching/stretchmapping-all.html
new file mode 100644
index 000000000..904fcd8f3
--- /dev/null
+++ b/layout/reftests/font-matching/stretchmapping-all.html
@@ -0,0 +1,505 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>font-stretch matching tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Calibri, Verdana, sans-serif;
+}
+
+p { margin: 0; padding: 0; }
+
+table {
+  border-collapse: collapse;
+}
+
+th { 
+  font-weight: normal;
+  background-color: #eee;
+}
+
+th, td { width: 3em; text-align: left; }
+tr th { text-align: left; }
+
+.fstest-full { font-family: fstest-full; }
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd1.ttf);
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd2.ttf);
+  font-stretch: extra-condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd3.ttf);
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd4.ttf);
+  font-stretch: semi-condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd5.ttf);
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd6.ttf);
+  font-stretch: semi-expanded;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd7.ttf);
+  font-stretch: expanded;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd8.ttf);
+  font-stretch: extra-expanded;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd9.ttf);
+  font-stretch: ultra-expanded;
+}
+
+.fstest-1-3 { font-family: fstest-1-3; }
+
+@font-face {
+  font-family: fstest-1-3;
+  src: url(../fonts/csstest-widths-wd1.ttf);
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: fstest-1-3;
+  src: url(../fonts/csstest-widths-wd3.ttf);
+  font-stretch: condensed;
+}
+
+.fstest-1-4 { font-family: fstest-1-4; }
+
+@font-face {
+  font-family: fstest-1-4;
+  src: url(../fonts/csstest-widths-wd1.ttf);
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: fstest-1-4;
+  src: url(../fonts/csstest-widths-wd4.ttf);
+  font-stretch: semi-condensed;
+}
+
+.fstest-1-5 { font-family: fstest-1-5; }
+
+@font-face {
+  font-family: fstest-1-5;
+  src: url(../fonts/csstest-widths-wd1.ttf);
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: fstest-1-5;
+  src: url(../fonts/csstest-widths-wd5.ttf);
+  font-stretch: normal;
+}
+
+.fstest-2-6 { font-family: fstest-2-6; }
+
+@font-face {
+  font-family: fstest-2-6;
+  src: url(../fonts/csstest-widths-wd2.ttf);
+  font-stretch: extra-condensed;
+}
+
+@font-face {
+  font-family: fstest-2-6;
+  src: url(../fonts/csstest-widths-wd6.ttf);
+  font-stretch: semi-expanded;
+}
+
+.fstest-4-6 { font-family: fstest-4-6; }
+
+@font-face {
+  font-family: fstest-4-6;
+  src: url(../fonts/csstest-widths-wd4.ttf);
+  font-stretch: semi-condensed;
+}
+
+@font-face {
+  font-family: fstest-4-6;
+  src: url(../fonts/csstest-widths-wd6.ttf);
+  font-stretch: semi-expanded;
+}
+
+.fstest-4-7 { font-family: fstest-4-7; }
+
+@font-face {
+  font-family: fstest-4-7;
+  src: url(../fonts/csstest-widths-wd4.ttf);
+  font-stretch: semi-condensed;
+}
+
+@font-face {
+  font-family: fstest-4-7;
+  src: url(../fonts/csstest-widths-wd7.ttf);
+  font-stretch: expanded;
+}
+
+.fstest-6-7 { font-family: fstest-6-7; }
+
+@font-face {
+  font-family: fstest-6-7;
+  src: url(../fonts/csstest-widths-wd6.ttf);
+  font-stretch: semi-expanded;
+}
+
+@font-face {
+  font-family: fstest-6-7;
+  src: url(../fonts/csstest-widths-wd7.ttf);
+  font-stretch: expanded;
+}
+
+.fstest-7-9 { font-family: fstest-7-9; }
+
+@font-face {
+  font-family: fstest-7-9;
+  src: url(../fonts/csstest-widths-wd7.ttf);
+  font-stretch: expanded;
+}
+
+@font-face {
+  font-family: fstest-7-9;
+  src: url(../fonts/csstest-widths-wd9.ttf);
+  font-stretch: ultra-expanded;
+}
+
+.fstest-8-9 { font-family: fstest-8-9; }
+
+@font-face {
+  font-family: fstest-8-9;
+  src: url(../fonts/csstest-widths-wd8.ttf);
+  font-stretch: extra-expanded;
+}
+
+@font-face {
+  font-family: fstest-8-9;
+  src: url(../fonts/csstest-widths-wd9.ttf);
+  font-stretch: ultra-expanded;
+}
+
+.fs1 { font-stretch: ultra-condensed; }
+.fs2 { font-stretch: extra-condensed; }
+.fs3 { font-stretch: condensed; }
+.fs4 { font-stretch: semi-condensed; }
+.fs5 { font-stretch: normal; }
+.fs6 { font-stretch: semi-expanded; }
+.fs7 { font-stretch: expanded; }
+.fs8 { font-stretch: extra-expanded; }
+.fs9 { font-stretch: ultra-expanded; }
+
+</style>
+  
+<script type="text/javascript">
+
+</script>
+  
+</head>
+<body>
+
+<p>font-stretch mapping with different font family sets</p>
+<p>(only numbers should appear in the body of the table)</p>
+
+<table>
+<thead>
+<th>width</th>
+<th>full</th>
+<th>1-3</th>
+<th>1-4</th>
+<th>1-5</th>
+<th>2-6</th>
+<th>4-6</th>
+<th>4-7</th>
+<th>6-7</th>
+<th>7-9</th>
+<th>8-9</th>
+</thead>
+<tr class="fs1">
+<th>1</th>
+<td class="fstest-full">F</td>
+<td class="fstest-1-3">F</td>
+<td class="fstest-1-4">F</td>
+<td class="fstest-1-5">F</td>
+<td class="fstest-2-6">F</td>
+<td class="fstest-4-6">F</td>
+<td class="fstest-4-7">F</td>
+<td class="fstest-6-7">F</td>
+<td class="fstest-7-9">F</td>
+<td class="fstest-8-9">F</td>
+</tr>
+<tr class="fs2">
+<th>2</th>
+<td class="fstest-full">F</td>
+<td class="fstest-1-3">F</td>
+<td class="fstest-1-4">F</td>
+<td class="fstest-1-5">F</td>
+<td class="fstest-2-6">F</td>
+<td class="fstest-4-6">F</td>
+<td class="fstest-4-7">F</td>
+<td class="fstest-6-7">F</td>
+<td class="fstest-7-9">F</td>
+<td class="fstest-8-9">F</td>
+</tr>
+<tr class="fs3">
+<th>3</th>
+<td class="fstest-full">F</td>
+<td class="fstest-1-3">F</td>
+<td class="fstest-1-4">F</td>
+<td class="fstest-1-5">F</td>
+<td class="fstest-2-6">F</td>
+<td class="fstest-4-6">F</td>
+<td class="fstest-4-7">F</td>
+<td class="fstest-6-7">F</td>
+<td class="fstest-7-9">F</td>
+<td class="fstest-8-9">F</td>
+</tr>
+<tr class="fs4">
+<th>4</th>
+<td class="fstest-full">F</td>
+<td class="fstest-1-3">F</td>
+<td class="fstest-1-4">F</td>
+<td class="fstest-1-5">F</td>
+<td class="fstest-2-6">F</td>
+<td class="fstest-4-6">F</td>
+<td class="fstest-4-7">F</td>
+<td class="fstest-6-7">F</td>
+<td class="fstest-7-9">F</td>
+<td class="fstest-8-9">F</td>
+</tr>
+<tr class="fs5">
+<th>5</th>
+<td class="fstest-full">F</td>
+<td class="fstest-1-3">F</td>
+<td class="fstest-1-4">F</td>
+<td class="fstest-1-5">F</td>
+<td class="fstest-2-6">F</td>
+<td class="fstest-4-6">F</td>
+<td class="fstest-4-7">F</td>
+<td class="fstest-6-7">F</td>
+<td class="fstest-7-9">F</td>
+<td class="fstest-8-9">F</td>
+</tr>
+<tr class="fs6">
+<th>6</th>
+<td class="fstest-full">F</td>
+<td class="fstest-1-3">F</td>
+<td class="fstest-1-4">F</td>
+<td class="fstest-1-5">F</td>
+<td class="fstest-2-6">F</td>
+<td class="fstest-4-6">F</td>
+<td class="fstest-4-7">F</td>
+<td class="fstest-6-7">F</td>
+<td class="fstest-7-9">F</td>
+<td class="fstest-8-9">F</td>
+</tr>
+<tr class="fs7">
+<th>7</th>
+<td class="fstest-full">F</td>
+<td class="fstest-1-3">F</td>
+<td class="fstest-1-4">F</td>
+<td class="fstest-1-5">F</td>
+<td class="fstest-2-6">F</td>
+<td class="fstest-4-6">F</td>
+<td class="fstest-4-7">F</td>
+<td class="fstest-6-7">F</td>
+<td class="fstest-7-9">F</td>
+<td class="fstest-8-9">F</td>
+</tr>
+<tr class="fs8">
+<th>8</th>
+<td class="fstest-full">F</td>
+<td class="fstest-1-3">F</td>
+<td class="fstest-1-4">F</td>
+<td class="fstest-1-5">F</td>
+<td class="fstest-2-6">F</td>
+<td class="fstest-4-6">F</td>
+<td class="fstest-4-7">F</td>
+<td class="fstest-6-7">F</td>
+<td class="fstest-7-9">F</td>
+<td class="fstest-8-9">F</td>
+</tr>
+<tr class="fs9">
+<th>9</th>
+<td class="fstest-full">F</td>
+<td class="fstest-1-3">F</td>
+<td class="fstest-1-4">F</td>
+<td class="fstest-1-5">F</td>
+<td class="fstest-2-6">F</td>
+<td class="fstest-4-6">F</td>
+<td class="fstest-4-7">F</td>
+<td class="fstest-6-7">F</td>
+<td class="fstest-7-9">F</td>
+<td class="fstest-8-9">F</td>
+</tr>
+</table>
+
+<!--
+
+<p>Results based on spec logic:</p>
+
+<table>
+<thead>
+<th>width</th>
+<th>full</th>
+<th>1-3</th>
+<th>1-4</th>
+<th>1-5</th>
+<th>2-6</th>
+<th>4-6</th>
+<th>4-7</th>
+<th>6-7</th>
+<th>7-9</th>
+<th>8-9</th>
+</thead>
+<tr class="fs1">
+<th>1</th>
+<td class="fstest-full">1</td>
+<td class="fstest-1-3">1</td>
+<td class="fstest-1-4">1</td>
+<td class="fstest-1-5">1</td>
+<td class="fstest-2-6">2</td>
+<td class="fstest-4-6">4</td>
+<td class="fstest-4-7">4</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs2">
+<th>2</th>
+<td class="fstest-full">2</td>
+<td class="fstest-1-3">1</td>
+<td class="fstest-1-4">1</td>
+<td class="fstest-1-5">1</td>
+<td class="fstest-2-6">2</td>
+<td class="fstest-4-6">4</td>
+<td class="fstest-4-7">4</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs3">
+<th>3</th>
+<td class="fstest-full">3</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">1</td>
+<td class="fstest-1-5">1</td>
+<td class="fstest-2-6">2</td>
+<td class="fstest-4-6">4</td>
+<td class="fstest-4-7">4</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs4">
+<th>4</th>
+<td class="fstest-full">4</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">1</td>
+<td class="fstest-2-6">2</td>
+<td class="fstest-4-6">4</td>
+<td class="fstest-4-7">4</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs5">
+<th>5</th>
+<td class="fstest-full">5</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">5</td>
+<td class="fstest-2-6">2</td>
+<td class="fstest-4-6">4</td>
+<td class="fstest-4-7">4</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs6">
+<th>6</th>
+<td class="fstest-full">6</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">5</td>
+<td class="fstest-2-6">6</td>
+<td class="fstest-4-6">6</td>
+<td class="fstest-4-7">7</td>
+<td class="fstest-6-7">6</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs7">
+<th>7</th>
+<td class="fstest-full">7</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">5</td>
+<td class="fstest-2-6">6</td>
+<td class="fstest-4-6">6</td>
+<td class="fstest-4-7">7</td>
+<td class="fstest-6-7">7</td>
+<td class="fstest-7-9">7</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs8">
+<th>8</th>
+<td class="fstest-full">8</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">5</td>
+<td class="fstest-2-6">6</td>
+<td class="fstest-4-6">6</td>
+<td class="fstest-4-7">7</td>
+<td class="fstest-6-7">7</td>
+<td class="fstest-7-9">9</td>
+<td class="fstest-8-9">8</td>
+</tr>
+<tr class="fs9">
+<th>9</th>
+<td class="fstest-full">9</td>
+<td class="fstest-1-3">3</td>
+<td class="fstest-1-4">4</td>
+<td class="fstest-1-5">5</td>
+<td class="fstest-2-6">6</td>
+<td class="fstest-4-6">6</td>
+<td class="fstest-4-7">7</td>
+<td class="fstest-6-7">7</td>
+<td class="fstest-7-9">9</td>
+<td class="fstest-8-9">9</td>
+</tr>
+</table>
+
+-->
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/stretchmapping-reverse-ref.html b/layout/reftests/font-matching/stretchmapping-reverse-ref.html
new file mode 100644
index 000000000..2a8fde16c
--- /dev/null
+++ b/layout/reftests/font-matching/stretchmapping-reverse-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Assure OS/2 usWidthClass isn't referenced</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd5.ttf);
+  font-stretch: normal;
+}
+
+body {
+  margin: 50px;
+}
+
+p.test {
+  font-family: fstest-full;
+  font-size: 24px;
+}
+
+.fs9 { font-stretch: ultra-condensed; }
+.fs8 { font-stretch: extra-condensed; }
+.fs7 { font-stretch: condensed; }
+.fs6 { font-stretch: semi-condensed; }
+.fs5 { font-stretch: normal; }
+.fs4 { font-stretch: semi-expanded; }
+.fs3 { font-stretch: expanded; }
+.fs2 { font-stretch: extra-expanded; }
+.fs1 { font-stretch: ultra-expanded; }
+
+</style>
+  
+</head>
+<body>
+
+<p>The numbers below should appear in ascending sequence:</p>
+
+<p class="test">
+<span class="fs1">1</span>
+<span class="fs2">2</span>
+<span class="fs3">3</span>
+<span class="fs4">4</span>
+<span class="fs5">5</span>
+<span class="fs6">6</span>
+<span class="fs7">7</span>
+<span class="fs8">8</span>
+<span class="fs9">9</span>
+</p>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/stretchmapping-reverse.html b/layout/reftests/font-matching/stretchmapping-reverse.html
new file mode 100644
index 000000000..ef3b0b1ed
--- /dev/null
+++ b/layout/reftests/font-matching/stretchmapping-reverse.html
@@ -0,0 +1,102 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Assure OS/2 usWidthClass isn't referenced</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd9.ttf);
+  font-stretch: ultra-condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd8.ttf);
+  font-stretch: extra-condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd7.ttf);
+  font-stretch: condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd6.ttf);
+  font-stretch: semi-condensed;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd5.ttf);
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd4.ttf);
+  font-stretch: semi-expanded;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd3.ttf);
+  font-stretch: expanded;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd2.ttf);
+  font-stretch: extra-expanded;
+}
+
+@font-face {
+  font-family: fstest-full;
+  src: url(../fonts/csstest-widths-wd1.ttf);
+  font-stretch: ultra-expanded;
+}
+
+body {
+  margin: 50px;
+}
+
+p.test {
+  font-family: fstest-full;
+  font-size: 24px;
+}
+
+.fs9 { font-stretch: ultra-condensed; }
+.fs8 { font-stretch: extra-condensed; }
+.fs7 { font-stretch: condensed; }
+.fs6 { font-stretch: semi-condensed; }
+.fs5 { font-stretch: normal; }
+.fs4 { font-stretch: semi-expanded; }
+.fs3 { font-stretch: expanded; }
+.fs2 { font-stretch: extra-expanded; }
+.fs1 { font-stretch: ultra-expanded; }
+
+</style>
+  
+</head>
+<body>
+
+<p>The numbers below should appear in ascending sequence:</p>
+
+<p class="test">
+<span class="fs1">F</span>
+<span class="fs2">F</span>
+<span class="fs3">F</span>
+<span class="fs4">F</span>
+<span class="fs5">F</span>
+<span class="fs6">F</span>
+<span class="fs7">F</span>
+<span class="fs8">F</span>
+<span class="fs9">F</span>
+</p>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/synthetic-bold-1-ref.html b/layout/reftests/font-matching/synthetic-bold-1-ref.html
new file mode 100644
index 000000000..9d5b28369
--- /dev/null
+++ b/layout/reftests/font-matching/synthetic-bold-1-ref.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+<style type="text/css">
+body { font-family: Symbol, OpenSymbol, "Standard Symbols L"; font-size: 2em; }
+</style>
+</head>
+<body>
+<p>&#xf061;&#xf062;&#xf063; abc</p>
+<p>&#xf061;&#xf062;&#xf063; abc</p>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/synthetic-bold-1.html b/layout/reftests/font-matching/synthetic-bold-1.html
new file mode 100644
index 000000000..77588b06b
--- /dev/null
+++ b/layout/reftests/font-matching/synthetic-bold-1.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+<style type="text/css">
+body { font-family: Symbol, OpenSymbol, "Standard Symbols L"; font-size: 2em; }
+</style>
+</head>
+<!-- if synthetic bolding is working, this should NOT match the reference -->
+<body>
+<p>&#xf061;&#xf062;&#xf063; abc</p>
+<p><b>&#xf061;&#xf062;&#xf063; abc</b></p>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/synthetic-bold-2-ref.html b/layout/reftests/font-matching/synthetic-bold-2-ref.html
new file mode 100644
index 000000000..b5a8f0d69
--- /dev/null
+++ b/layout/reftests/font-matching/synthetic-bold-2-ref.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+<style type="text/css">
+body { font-family: "Apple Chancery", Impact, "Microsoft Sans Serif", "URW Chancery L"; font-size: 2em; }
+</style>
+</head>
+<body>
+<p>Hello World</p>
+<p>Hello World</p>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/synthetic-bold-2.html b/layout/reftests/font-matching/synthetic-bold-2.html
new file mode 100644
index 000000000..7da903c14
--- /dev/null
+++ b/layout/reftests/font-matching/synthetic-bold-2.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+<style type="text/css">
+body { font-family: "Apple Chancery", Impact, "Microsoft Sans Serif", "URW Chancery L"; font-size: 2em; }
+</style>
+</head>
+<!-- if synthetic bolding is working, this should NOT match the reference -->
+<body>
+<p>Hello World</p>
+<p><b>Hello World</b></p>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/synthetic-style-1-notref.html b/layout/reftests/font-matching/synthetic-style-1-notref.html
new file mode 100644
index 000000000..0cc51da48
--- /dev/null
+++ b/layout/reftests/font-matching/synthetic-style-1-notref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Synthetic italic should not use true italic face</title>
+<!-- see bug 724231 -->
+<style type="text/css">
+body {
+  font-family: "Times New Roman", "Times", "DejaVu Serif", "FreeSerif", "Droid Serif", sans-serif;
+}
+</style>
+</head>
+<body>
+<p><i>Synthetic italics</i> should <i>not</i> use the true italic face.
+</body>
+</html>
diff --git a/layout/reftests/font-matching/synthetic-style-1.html b/layout/reftests/font-matching/synthetic-style-1.html
new file mode 100644
index 000000000..4db379273
--- /dev/null
+++ b/layout/reftests/font-matching/synthetic-style-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Synthetic italic should not use true italic face</title>
+<!-- see bug 724231 -->
+<style type="text/css">
+@font-face {
+  font-family: test;
+  src: local(Times New Roman), local(Times), local(DejaVu Serif), local(FreeSerif), local(Droid Serif);
+}
+body {
+  font-family: test, sans-serif;
+}
+</style>
+</head>
+<body>
+<p><i>Synthetic italics</i> should <i>not</i> use the true italic face.
+</body>
+</html>
diff --git a/layout/reftests/font-matching/synthetic-style-2-notref.html b/layout/reftests/font-matching/synthetic-style-2-notref.html
new file mode 100644
index 000000000..e3fa7fb6a
--- /dev/null
+++ b/layout/reftests/font-matching/synthetic-style-2-notref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Synthetic bold should not use true bold face</title>
+<!-- see bug 724231 -->
+<style type="text/css">
+body {
+  font-family: "Times New Roman", "Times", "DejaVu Serif", "FreeSerif", "Droid Serif", sans-serif;
+}
+</style>
+</head>
+<body>
+<p><b>Synthetic bold</b> should <b>not</b> use the true bold face.
+</body>
+</html>
diff --git a/layout/reftests/font-matching/synthetic-style-2.html b/layout/reftests/font-matching/synthetic-style-2.html
new file mode 100644
index 000000000..388511911
--- /dev/null
+++ b/layout/reftests/font-matching/synthetic-style-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Synthetic bold should not use true bold face</title>
+<!-- see bug 724231 -->
+<style type="text/css">
+@font-face {
+  font-family: test;
+  src: local(Times New Roman), local(Times), local(DejaVu Serif), local(FreeSerif), local(Droid Serif);
+}
+body {
+  font-family: test, sans-serif;
+}
+</style>
+</head>
+<body>
+<p><b>Synthetic bold</b> should <b>not</b> use the true bold face.
+</body>
+</html>
diff --git a/layout/reftests/font-matching/syntheticbold-rotated-ref.html b/layout/reftests/font-matching/syntheticbold-rotated-ref.html
new file mode 100644
index 000000000..2065e3158
--- /dev/null
+++ b/layout/reftests/font-matching/syntheticbold-rotated-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>rotated synthetic bold</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+@font-face {
+  font-family: libertine;
+  src: url(../fonts/LinLibertine_Re-4.7.5.woff);
+}
+
+body {
+  margin: 150px 0px;
+  font-size: 800%;
+}
+
+p { margin: 0; }
+
+.test {
+  font-family: libertine;
+  display: inline-block;
+  transform: rotate(90deg);
+}
+
+</style>
+
+</head>
+<body>
+
+<p><span class="test">uh oh!</span></p>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/syntheticbold-rotated.html b/layout/reftests/font-matching/syntheticbold-rotated.html
new file mode 100644
index 000000000..bb856c0c3
--- /dev/null
+++ b/layout/reftests/font-matching/syntheticbold-rotated.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>rotated synthetic bold</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<style type="text/css">
+
+@font-face {
+  font-family: libertine;
+  src: url(../fonts/LinLibertine_Re-4.7.5.woff);
+}
+
+body {
+  margin: 150px 0px;
+  font-size: 800%;
+}
+
+p { margin: 0; }
+
+.test {
+  font-family: libertine;
+  display: inline-block;
+  transform: rotate(90deg);
+  font-weight: bold;
+}
+
+</style>
+
+</head>
+<body>
+
+<p><span class="test">uh oh!</span></p>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/system-generic-fallback-1-ref.html b/layout/reftests/font-matching/system-generic-fallback-1-ref.html
new file mode 100644
index 000000000..84deb813a
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-1-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  width: 200px;
+  font-size: 32px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+#test { width: 500px }
+</style>
+
+</head>
+<body>
+
+<div lang="en" id=test>
+<p></p>
+<p></p>
+<p></p>
+<p></p>
+<p></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-1.html b/layout/reftests/font-matching/system-generic-fallback-1.html
new file mode 100644
index 000000000..d06d5259c
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  width: 200px;
+  font-size: 32px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+#test { width: 500px }
+</style>
+
+</head>
+<body>
+
+<div id=test>
+<p></p>
+<p lang="ru"></p>
+<p lang="el"></p>
+<p lang="he"></p>
+<p lang="ar"></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-2-ref.html b/layout/reftests/font-matching/system-generic-fallback-2-ref.html
new file mode 100644
index 000000000..efe6f9373
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-2-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  width: 200px;
+  font-size: 32px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+#test { width: 500px }
+</style>
+
+</head>
+<body>
+
+<div id=test>
+<p lang="zh-tw"></p>
+<p lang="zh-tw"></p>
+<p lang="zh-tw"></p>
+<p lang="zh-tw"></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-2.html b/layout/reftests/font-matching/system-generic-fallback-2.html
new file mode 100644
index 000000000..2e1b02655
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  width: 200px;
+  font-size: 32px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+#test { width: 500px }
+</style>
+
+</head>
+<body>
+
+<div id=test>
+<p lang="zh-tw"></p>
+<p lang="zh-TW"></p>
+<p lang="zh_tw"></p>
+<p lang="zh_TW"></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-3-ref.html b/layout/reftests/font-matching/system-generic-fallback-3-ref.html
new file mode 100644
index 000000000..0ddd8c5d9
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-3-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  width: 200px;
+  font-size: 32px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+#test { width: 500px }
+</style>
+
+</head>
+<body>
+
+<div id=test>
+<p lang="zh-cn"></p>
+<p lang="zh-cn"></p>
+<p lang="zh-cn"></p>
+<p lang="zh-cn"></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-3.html b/layout/reftests/font-matching/system-generic-fallback-3.html
new file mode 100644
index 000000000..a704d234c
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-3.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  width: 200px;
+  font-size: 32px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+#test { width: 500px }
+</style>
+
+</head>
+<body>
+
+<div id=test>
+<p lang="zh-cn"></p>
+<p lang="zh-CN"></p>
+<p lang="zh_cn"></p>
+<p lang="zh_CN"></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-4-ref.html b/layout/reftests/font-matching/system-generic-fallback-4-ref.html
new file mode 100644
index 000000000..5961caaf5
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-4-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  width: 200px;
+  font-size: 32px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+#test { width: 500px }
+</style>
+
+</head>
+<body>
+
+<div id=test>
+<p lang="zh-hk"></p>
+<p lang="zh-hk"></p>
+<p lang="zh-hk"></p>
+<p lang="zh-hk"></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-4.html b/layout/reftests/font-matching/system-generic-fallback-4.html
new file mode 100644
index 000000000..d7ffee3e9
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-4.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  width: 200px;
+  font-size: 32px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+#test { width: 500px }
+</style>
+
+</head>
+<body>
+
+<div id=test>
+<p lang="zh-hk"></p>
+<p lang="zh-HK"></p>
+<p lang="zh_hk"></p>
+<p lang="zh_HK"></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-ja.html b/layout/reftests/font-matching/system-generic-fallback-ja.html
new file mode 100644
index 000000000..844200111
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-ja.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  font-size: 80px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+</style>
+
+</head>
+<body>
+
+<div lang="ja" id=test>
+<p></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-ko.html b/layout/reftests/font-matching/system-generic-fallback-ko.html
new file mode 100644
index 000000000..526ab817d
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-ko.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  font-size: 80px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+</style>
+
+</head>
+<body>
+
+<div lang="ko" id=test>
+<p></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-zh-cn.html b/layout/reftests/font-matching/system-generic-fallback-zh-cn.html
new file mode 100644
index 000000000..afcabb396
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-zh-cn.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  font-size: 80px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+</style>
+
+</head>
+<body>
+
+<div lang="zh-cn" id=test>
+<p></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/system-generic-fallback-zh-tw.html b/layout/reftests/font-matching/system-generic-fallback-zh-tw.html
new file mode 100644
index 000000000..64cc1aded
--- /dev/null
+++ b/layout/reftests/font-matching/system-generic-fallback-zh-tw.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>system generic linked families</title>
+<meta charset="utf-8">
+
+<style>
+body {
+  margin: 50px;
+}
+
+p {
+  margin: 0;
+  display: inline-block;
+  font-size: 80px;
+  line-height: 1.3em;
+}
+
+p + p { margin-top: 5px; }
+
+#test p:before { content: "123abc 途外"; }
+#test p { font-family: -apple-system; }
+</style>
+
+</head>
+<body>
+
+<div lang="zh-tw" id=test>
+<p></p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-12-ref.html b/layout/reftests/font-matching/weightmapping-12-ref.html
new file mode 100644
index 000000000..f985dac4f
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-12-ref.html
@@ -0,0 +1,222 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test100;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+}
+
+@font-face {
+  font-family: test200;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 .clili { font-family: test100; }
+.w1 .cli { font-family: test100; }
+.w1 .cnor { font-family: test100; }
+.w1 .cbo { font-family: test200; }
+.w1 .cbobo { font-family: test200; font-weight: bold; }
+
+.w2 .clili { font-family: test100; }
+.w2 .cli { font-family: test100; }
+.w2 .cnor { font-family: test200; }
+.w2 .cbo { font-family: test200; }
+.w2 .cbobo { font-family: test200; font-weight: bold; }
+
+.w3 .clili { font-family: test100; }
+.w3 .cli { font-family: test100; }
+.w3 .cnor { font-family: test200; }
+.w3 .cbo { font-family: test200; }
+.w3 .cbobo { font-family: test200; font-weight: bold; }
+
+.w4 .clili { font-family: test100; }
+.w4 .cli { font-family: test100; }
+.w4 .cnor { font-family: test200; }
+.w4 .cbo { font-family: test200; font-weight: bold; }
+.w4 .cbobo { font-family: test200; font-weight: bold; }
+
+.w5 .clili { font-family: test100; }
+.w5 .cli { font-family: test100; }
+.w5 .cnor { font-family: test200; }
+.w5 .cbo { font-family: test200; font-weight: bold; }
+.w5 .cbobo { font-family: test200; font-weight: bold; }
+
+.w6 .clili { font-family: test100; }
+.w6 .cli { font-family: test200; }
+.w6 .cnor { font-family: test200; font-weight: bold; }
+.w6 .cbo { font-family: test200; font-weight: bold; }
+.w6 .cbobo { font-family: test200; font-weight: bold; }
+
+.w7 .clili { font-family: test100; }
+.w7 .cli { font-family: test200; }
+.w7 .cnor { font-family: test200; font-weight: bold; }
+.w7 .cbo { font-family: test200; font-weight: bold; }
+.w7 .cbobo { font-family: test200; font-weight: bold; }
+
+.w8 .clili { font-family: test200; }
+.w8 .cli { font-family: test200; font-weight: bold; }
+.w8 .cnor { font-family: test200; font-weight: bold; }
+.w8 .cbo { font-family: test200; font-weight: bold; }
+.w8 .cbobo { font-family: test200; font-weight: bold; }
+
+.w9 .clili { font-family: test200; }
+.w9 .cli { font-family: test200; font-weight: bold; }
+.w9 .cnor { font-family: test200; font-weight: bold; }
+.w9 .cbo { font-family: test200; font-weight: bold; }
+.w9 .cbobo { font-family: test200; font-weight: bold; }
+
+.w1 th { font-weight: 100; }
+.w2 th { font-weight: 200; }
+.w3 th { font-weight: 300; }
+.w4 th { font-weight: 400; }
+.w5 th { font-weight: 500; }
+.w6 th { font-weight: 600; }
+.w7 th { font-weight: 700; }
+.w8 th { font-weight: 800; }
+.w9 th { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 100, 200 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th class="red">100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th class="red">200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th>500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-12.html b/layout/reftests/font-matching/weightmapping-12.html
new file mode 100644
index 000000000..d64a716f2
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-12.html
@@ -0,0 +1,174 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test100;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+}
+
+@font-face {
+  font-family: test200;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+td.cnor { font-weight: inherit; }
+td.cbo { font-weight: bolder; }
+td.cbobo, td.cbobo span { font-weight: bolder; }
+td.cli { font-weight: lighter; }
+td.clili, td.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 100, 200 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th class="red">100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th class="red">200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th>500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-12579-ref.html b/layout/reftests/font-matching/weightmapping-12579-ref.html
new file mode 100644
index 000000000..a7b27d312
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-12579-ref.html
@@ -0,0 +1,255 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+  font-weight: 900;
+}
+
+@font-face {
+  font-family: test100;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+}
+
+@font-face {
+  font-family: test200;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+}
+
+@font-face {
+  font-family: test700;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+}
+
+@font-face {
+  font-family: test900;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 .clili { font-family: test100; }
+.w1 .cli { font-family: test100; }
+.w1 .cnor { font-family: test100; }
+.w1 .cbo { font-family: test500; }
+.w1 .cbobo { font-family: test700; }
+
+.w2 .clili { font-family: test100; }
+.w2 .cli { font-family: test100; }
+.w2 .cnor { font-family: test200; }
+.w2 .cbo { font-family: test500; }
+.w2 .cbobo { font-family: test700; }
+
+.w3 .clili { font-family: test100; }
+.w3 .cli { font-family: test100; }
+.w3 .cnor { font-family: test200; }
+.w3 .cbo { font-family: test500; }
+.w3 .cbobo { font-family: test700; }
+
+.w4 .clili { font-family: test100; }
+.w4 .cli { font-family: test100; }
+.w4 .cnor { font-family: test500; }
+.w4 .cbo { font-family: test700; }
+.w4 .cbobo { font-family: test900; }
+
+.w5 .clili { font-family: test100; }
+.w5 .cli { font-family: test100; }
+.w5 .cnor { font-family: test500; }
+.w5 .cbo { font-family: test700; }
+.w5 .cbobo { font-family: test900; }
+
+.w6 .clili { font-family: test100; }
+.w6 .cli { font-family: test500; }
+.w6 .cnor { font-family: test700; }
+.w6 .cbo { font-family: test900; }
+.w6 .cbobo { font-family: test900; }
+
+.w7 .clili { font-family: test100; }
+.w7 .cli { font-family: test500; }
+.w7 .cnor { font-family: test700; }
+.w7 .cbo { font-family: test900; }
+.w7 .cbobo { font-family: test900; }
+
+.w8 .clili { font-family: test500; }
+.w8 .cli { font-family: test700; }
+.w8 .cnor { font-family: test900; }
+.w8 .cbo { font-family: test900; }
+.w8 .cbobo { font-family: test900; }
+
+.w9 .clili { font-family: test500; }
+.w9 .cli { font-family: test700; }
+.w9 .cnor { font-family: test900; }
+.w9 .cbo { font-family: test900; }
+.w9 .cbobo { font-family: test900; }
+
+.w1 th { font-weight: 100; }
+.w2 th { font-weight: 200; }
+.w3 th { font-weight: 300; }
+.w4 th { font-weight: 400; }
+.w5 th { font-weight: 500; }
+.w6 th { font-weight: 600; }
+.w7 th { font-weight: 700; }
+.w8 th { font-weight: 800; }
+.w9 th { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 100, 200, 500, 700, 900 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th class="red">100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th class="red">200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th class="red">500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th class="red">700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th class="red">900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-12579.html b/layout/reftests/font-matching/weightmapping-12579.html
new file mode 100644
index 000000000..bdce065ec
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-12579.html
@@ -0,0 +1,207 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+  font-weight: 900;
+}
+
+@font-face {
+  font-family: test100;
+  src: url(../fonts/mplus/mplus-1p-thin.ttf);
+}
+
+@font-face {
+  font-family: test200;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+}
+
+@font-face {
+  font-family: test700;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+}
+
+@font-face {
+  font-family: test900;
+  src: url(../fonts/mplus/mplus-1p-black.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+td.cnor { font-weight: inherit; }
+td.cbo { font-weight: bolder; }
+td.cbobo, td.cbobo span { font-weight: bolder; }
+td.cli { font-weight: lighter; }
+td.clili, td.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 100, 200, 500, 700, 900 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th class="red">100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th class="red">200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th class="red">500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th class="red">700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th class="red">900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-25-ref.html b/layout/reftests/font-matching/weightmapping-25-ref.html
new file mode 100644
index 000000000..8f216c27f
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-25-ref.html
@@ -0,0 +1,222 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test200;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 .clili { font-family: test200; }
+.w1 .cli { font-family: test200; }
+.w1 .cnor { font-family: test200; }
+.w1 .cbo { font-family: test500; }
+.w1 .cbobo { font-family: test500; font-weight: bold; }
+
+.w2 .clili { font-family: test200; }
+.w2 .cli { font-family: test200; }
+.w2 .cnor { font-family: test200; }
+.w2 .cbo { font-family: test500; }
+.w2 .cbobo { font-family: test500; font-weight: bold; }
+
+.w3 .clili { font-family: test200; }
+.w3 .cli { font-family: test200; }
+.w3 .cnor { font-family: test200; }
+.w3 .cbo { font-family: test500; }
+.w3 .cbobo { font-family: test500; font-weight: bold; }
+
+.w4 .clili { font-family: test200; }
+.w4 .cli { font-family: test200; }
+.w4 .cnor { font-family: test500; }
+.w4 .cbo { font-family: test500; font-weight: bold; }
+.w4 .cbobo { font-family: test500; font-weight: bold; }
+
+.w5 .clili { font-family: test200; }
+.w5 .cli { font-family: test200; }
+.w5 .cnor { font-family: test500; }
+.w5 .cbo { font-family: test500; font-weight: bold; }
+.w5 .cbobo { font-family: test500; font-weight: bold; }
+
+.w6 .clili { font-family: test200; }
+.w6 .cli { font-family: test500; }
+.w6 .cnor { font-family: test500; font-weight: bold; }
+.w6 .cbo { font-family: test500; font-weight: bold; }
+.w6 .cbobo { font-family: test500; font-weight: bold; }
+
+.w7 .clili { font-family: test200; }
+.w7 .cli { font-family: test500; }
+.w7 .cnor { font-family: test500; font-weight: bold; }
+.w7 .cbo { font-family: test500; font-weight: bold; }
+.w7 .cbobo { font-family: test500; font-weight: bold; }
+
+.w8 .clili { font-family: test500; }
+.w8 .cli { font-family: test500; font-weight: bold; }
+.w8 .cnor { font-family: test500; font-weight: bold; }
+.w8 .cbo { font-family: test500; font-weight: bold; }
+.w8 .cbobo { font-family: test500; font-weight: bold; }
+
+.w9 .clili { font-family: test500; }
+.w9 .cli { font-family: test500; font-weight: bold; }
+.w9 .cnor { font-family: test500; font-weight: bold; }
+.w9 .cbo { font-family: test500; font-weight: bold; }
+.w9 .cbobo { font-family: test500; font-weight: bold; }
+
+.w1 th { font-weight: 100; }
+.w2 th { font-weight: 200; }
+.w3 th { font-weight: 300; }
+.w4 th { font-weight: 400; }
+.w5 th { font-weight: 500; }
+.w6 th { font-weight: 600; }
+.w7 th { font-weight: 700; }
+.w8 th { font-weight: 800; }
+.w9 th { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 200, 500 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th class="red">200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th class="red">500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-25.html b/layout/reftests/font-matching/weightmapping-25.html
new file mode 100644
index 000000000..360d875ad
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-25.html
@@ -0,0 +1,174 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test200;
+  src: url(../fonts/mplus/mplus-1p-light.ttf);
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+td.cnor { font-weight: inherit; }
+td.cbo { font-weight: bolder; }
+td.cbobo, td.cbobo span { font-weight: bolder; }
+td.cli { font-weight: lighter; }
+td.clili, td.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 200, 500 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th class="red">200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th class="red">500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-45-ref.html b/layout/reftests/font-matching/weightmapping-45-ref.html
new file mode 100644
index 000000000..411599909
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-45-ref.html
@@ -0,0 +1,222 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test400;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 .clili { font-family: test400; }
+.w1 .cli { font-family: test400; }
+.w1 .cnor { font-family: test400; }
+.w1 .cbo { font-family: test400; }
+.w1 .cbobo { font-family: test500; font-weight: bold; }
+
+.w2 .clili { font-family: test400; }
+.w2 .cli { font-family: test400; }
+.w2 .cnor { font-family: test400; }
+.w2 .cbo { font-family: test400; }
+.w2 .cbobo { font-family: test500; font-weight: bold; }
+
+.w3 .clili { font-family: test400; }
+.w3 .cli { font-family: test400; }
+.w3 .cnor { font-family: test400; }
+.w3 .cbo { font-family: test400; }
+.w3 .cbobo { font-family: test500; font-weight: bold; }
+
+.w4 .clili { font-family: test400; }
+.w4 .cli { font-family: test400; }
+.w4 .cnor { font-family: test400; }
+.w4 .cbo { font-family: test500; font-weight: bold; }
+.w4 .cbobo { font-family: test500; font-weight: bold; }
+
+.w5 .clili { font-family: test400; }
+.w5 .cli { font-family: test400; }
+.w5 .cnor { font-family: test500; }
+.w5 .cbo { font-family: test500; font-weight: bold; }
+.w5 .cbobo { font-family: test500; font-weight: bold; }
+
+.w6 .clili { font-family: test400; }
+.w6 .cli { font-family: test400; }
+.w6 .cnor { font-family: test500; font-weight: bold; }
+.w6 .cbo { font-family: test500; font-weight: bold; }
+.w6 .cbobo { font-family: test500; font-weight: bold; }
+
+.w7 .clili { font-family: test400; }
+.w7 .cli { font-family: test400; }
+.w7 .cnor { font-family: test500; font-weight: bold; }
+.w7 .cbo { font-family: test500; font-weight: bold; }
+.w7 .cbobo { font-family: test500; font-weight: bold; }
+
+.w8 .clili { font-family: test400; }
+.w8 .cli { font-family: test500; font-weight: bold; }
+.w8 .cnor { font-family: test500; font-weight: bold; }
+.w8 .cbo { font-family: test500; font-weight: bold; }
+.w8 .cbobo { font-family: test500; font-weight: bold; }
+
+.w9 .clili { font-family: test400; }
+.w9 .cli { font-family: test500; font-weight: bold; }
+.w9 .cnor { font-family: test500; font-weight: bold; }
+.w9 .cbo { font-family: test500; font-weight: bold; }
+.w9 .cbobo { font-family: test500; font-weight: bold; }
+
+.w1 th { font-weight: 100; }
+.w2 th { font-weight: 200; }
+.w3 th { font-weight: 300; }
+.w4 th { font-weight: 400; }
+.w5 th { font-weight: 500; }
+.w6 th { font-weight: 600; }
+.w7 th { font-weight: 700; }
+.w8 th { font-weight: 800; }
+.w9 th { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 400, 500 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th class="red">400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th class="red">500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-45.html b/layout/reftests/font-matching/weightmapping-45.html
new file mode 100644
index 000000000..49647aea0
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-45.html
@@ -0,0 +1,174 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test400;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+td.cnor { font-weight: inherit; }
+td.cbo { font-weight: bolder; }
+td.cbobo, td.cbobo span { font-weight: bolder; }
+td.cli { font-weight: lighter; }
+td.clili, td.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 400, 500 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th class="red">400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th class="red">500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-458-ref.html b/layout/reftests/font-matching/weightmapping-458-ref.html
new file mode 100644
index 000000000..56cf4d743
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-458-ref.html
@@ -0,0 +1,233 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: test400;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+}
+
+@font-face {
+  font-family: test800;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 .clili { font-family: test400; }
+.w1 .cli { font-family: test400; }
+.w1 .cnor { font-family: test400; }
+.w1 .cbo { font-family: test400; }
+.w1 .cbobo { font-family: test800; }
+
+.w2 .clili { font-family: test400; }
+.w2 .cli { font-family: test400; }
+.w2 .cnor { font-family: test400; }
+.w2 .cbo { font-family: test400; }
+.w2 .cbobo { font-family: test800; }
+
+.w3 .clili { font-family: test400; }
+.w3 .cli { font-family: test400; }
+.w3 .cnor { font-family: test400; }
+.w3 .cbo { font-family: test400; }
+.w3 .cbobo { font-family: test800; }
+
+.w4 .clili { font-family: test400; }
+.w4 .cli { font-family: test400; }
+.w4 .cnor { font-family: test400; }
+.w4 .cbo { font-family: test800; }
+.w4 .cbobo { font-family: test800; }
+
+.w5 .clili { font-family: test400; }
+.w5 .cli { font-family: test400; }
+.w5 .cnor { font-family: test500; }
+.w5 .cbo { font-family: test800; }
+.w5 .cbobo { font-family: test800; }
+
+.w6 .clili { font-family: test400; }
+.w6 .cli { font-family: test400; }
+.w6 .cnor { font-family: test800; }
+.w6 .cbo { font-family: test800; }
+.w6 .cbobo { font-family: test800; }
+
+.w7 .clili { font-family: test400; }
+.w7 .cli { font-family: test400; }
+.w7 .cnor { font-family: test800; }
+.w7 .cbo { font-family: test800; }
+.w7 .cbobo { font-family: test800; }
+
+.w8 .clili { font-family: test400; }
+.w8 .cli { font-family: test800; }
+.w8 .cnor { font-family: test800; }
+.w8 .cbo { font-family: test800; }
+.w8 .cbobo { font-family: test800; }
+
+.w9 .clili { font-family: test400; }
+.w9 .cli { font-family: test800; }
+.w9 .cnor { font-family: test800; }
+.w9 .cbo { font-family: test800; }
+.w9 .cbobo { font-family: test800; }
+
+.w1 th { font-weight: 100; }
+.w2 th { font-weight: 200; }
+.w3 th { font-weight: 300; }
+.w4 th { font-weight: 400; }
+.w5 th { font-weight: 500; }
+.w6 th { font-weight: 600; }
+.w7 th { font-weight: 700; }
+.w8 th { font-weight: 800; }
+.w9 th { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 400, 500, 800 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th class="red">400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th class="red">500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th class="red">800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-458.html b/layout/reftests/font-matching/weightmapping-458.html
new file mode 100644
index 000000000..4c4461ab0
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-458.html
@@ -0,0 +1,185 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: test400;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+}
+
+@font-face {
+  font-family: test500;
+  src: url(../fonts/mplus/mplus-1p-medium.ttf);
+}
+
+@font-face {
+  font-family: test800;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+td.cnor { font-weight: inherit; }
+td.cbo { font-weight: bolder; }
+td.cbobo, td.cbobo span { font-weight: bolder; }
+td.cli { font-weight: lighter; }
+td.clili, td.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 400, 500, 800 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th class="red">400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th class="red">500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th>700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th class="red">800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-478-ref.html b/layout/reftests/font-matching/weightmapping-478-ref.html
new file mode 100644
index 000000000..a170d3a35
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-478-ref.html
@@ -0,0 +1,233 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: test400;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+}
+
+@font-face {
+  font-family: test700;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+}
+
+@font-face {
+  font-family: test800;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 .clili { font-family: test400; }
+.w1 .cli { font-family: test400; }
+.w1 .cnor { font-family: test400; }
+.w1 .cbo { font-family: test400; }
+.w1 .cbobo { font-family: test700; }
+
+.w2 .clili { font-family: test400; }
+.w2 .cli { font-family: test400; }
+.w2 .cnor { font-family: test400; }
+.w2 .cbo { font-family: test400; }
+.w2 .cbobo { font-family: test700; }
+
+.w3 .clili { font-family: test400; }
+.w3 .cli { font-family: test400; }
+.w3 .cnor { font-family: test400; }
+.w3 .cbo { font-family: test400; }
+.w3 .cbobo { font-family: test700; }
+
+.w4 .clili { font-family: test400; }
+.w4 .cli { font-family: test400; }
+.w4 .cnor { font-family: test400; }
+.w4 .cbo { font-family: test700; }
+.w4 .cbobo { font-family: test800; }
+
+.w5 .clili { font-family: test400; }
+.w5 .cli { font-family: test400; }
+.w5 .cnor { font-family: test400; }
+.w5 .cbo { font-family: test700; }
+.w5 .cbobo { font-family: test800; }
+
+.w6 .clili { font-family: test400; }
+.w6 .cli { font-family: test400; }
+.w6 .cnor { font-family: test700; }
+.w6 .cbo { font-family: test800; }
+.w6 .cbobo { font-family: test800; }
+
+.w7 .clili { font-family: test400; }
+.w7 .cli { font-family: test400; }
+.w7 .cnor { font-family: test700; }
+.w7 .cbo { font-family: test800; }
+.w7 .cbobo { font-family: test800; }
+
+.w8 .clili { font-family: test400; }
+.w8 .cli { font-family: test700; }
+.w8 .cnor { font-family: test800; }
+.w8 .cbo { font-family: test800; }
+.w8 .cbobo { font-family: test800; }
+
+.w9 .clili { font-family: test400; }
+.w9 .cli { font-family: test700; }
+.w9 .cnor { font-family: test800; }
+.w9 .cbo { font-family: test800; }
+.w9 .cbobo { font-family: test800; }
+
+.w1 th { font-weight: 100; }
+.w2 th { font-weight: 200; }
+.w3 th { font-weight: 300; }
+.w4 th { font-weight: 400; }
+.w5 th { font-weight: 500; }
+.w6 th { font-weight: 600; }
+.w7 th { font-weight: 700; }
+.w8 th { font-weight: 800; }
+.w9 th { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 400, 700, 800 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th class="red">400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th>500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th class="red">700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th class="red">800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-478.html b/layout/reftests/font-matching/weightmapping-478.html
new file mode 100644
index 000000000..9c61689c4
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-478.html
@@ -0,0 +1,185 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: test400;
+  src: url(../fonts/mplus/mplus-1p-regular.ttf);
+}
+
+@font-face {
+  font-family: test700;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+}
+
+@font-face {
+  font-family: test800;
+  src: url(../fonts/mplus/mplus-1p-heavy.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+td.cnor { font-weight: inherit; }
+td.cbo { font-weight: bolder; }
+td.cbobo, td.cbobo span { font-weight: bolder; }
+td.cli { font-weight: lighter; }
+td.clili, td.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 400, 700, 800 weights</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th class="red">400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th>500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th class="red">700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th class="red">800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-7-ref.html b/layout/reftests/font-matching/weightmapping-7-ref.html
new file mode 100644
index 000000000..53888decd
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-7-ref.html
@@ -0,0 +1,211 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: test700;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 .clili { font-family: test700; }
+.w1 .cli { font-family: test700; }
+.w1 .cnor { font-family: test700; }
+.w1 .cbo { font-family: test700; }
+.w1 .cbobo { font-family: test700; }
+
+.w2 .clili { font-family: test700; }
+.w2 .cli { font-family: test700; }
+.w2 .cnor { font-family: test700; }
+.w2 .cbo { font-family: test700; }
+.w2 .cbobo { font-family: test700; }
+
+.w3 .clili { font-family: test700; }
+.w3 .cli { font-family: test700; }
+.w3 .cnor { font-family: test700; }
+.w3 .cbo { font-family: test700; }
+.w3 .cbobo { font-family: test700; }
+
+.w4 .clili { font-family: test700; }
+.w4 .cli { font-family: test700; }
+.w4 .cnor { font-family: test700; }
+.w4 .cbo { font-family: test700; }
+.w4 .cbobo { font-family: test700; }
+
+.w5 .clili { font-family: test700; }
+.w5 .cli { font-family: test700; }
+.w5 .cnor { font-family: test700; }
+.w5 .cbo { font-family: test700; }
+.w5 .cbobo { font-family: test700; }
+
+.w6 .clili { font-family: test700; }
+.w6 .cli { font-family: test700; }
+.w6 .cnor { font-family: test700; }
+.w6 .cbo { font-family: test700; }
+.w6 .cbobo { font-family: test700; }
+
+.w7 .clili { font-family: test700; }
+.w7 .cli { font-family: test700; }
+.w7 .cnor { font-family: test700; }
+.w7 .cbo { font-family: test700; }
+.w7 .cbobo { font-family: test700; }
+
+.w8 .clili { font-family: test700; }
+.w8 .cli { font-family: test700; }
+.w8 .cnor { font-family: test700; }
+.w8 .cbo { font-family: test700; }
+.w8 .cbobo { font-family: test700; }
+
+.w9 .clili { font-family: test700; }
+.w9 .cli { font-family: test700; }
+.w9 .cnor { font-family: test700; }
+.w9 .cbo { font-family: test700; }
+.w9 .cbobo { font-family: test700; }
+
+.w1 th { font-weight: 100; }
+.w2 th { font-weight: 200; }
+.w3 th { font-weight: 300; }
+.w4 th { font-weight: 400; }
+.w5 th { font-weight: 500; }
+.w6 th { font-weight: 600; }
+.w7 th { font-weight: 700; }
+.w8 th { font-weight: 800; }
+.w9 th { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 700 weight</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th>500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th class="red">700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/weightmapping-7.html b/layout/reftests/font-matching/weightmapping-7.html
new file mode 100644
index 000000000..6b2ad74ee
--- /dev/null
+++ b/layout/reftests/font-matching/weightmapping-7.html
@@ -0,0 +1,163 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Weight mapping tests</title>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  
+<style type="text/css">
+
+body {
+  margin: 50px;
+  font-family: Futura, Verdana, sans-serif;
+}
+
+h3, h4 { font-weight: normal; }
+
+/* make all the spans blocks to avoid influence of what's outside them
+   on line-height calculations */
+span { display: block; }
+
+@font-face {
+  font-family: test;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: test700;
+  src: url(../fonts/mplus/mplus-1p-bold.ttf);
+}
+
+table {
+  border-collapse: collapse;
+  font-family: test;
+  font-size: 20px;
+}
+
+td {
+  padding: 0; margin: 0;
+}
+
+th {
+  font-weight: inherit;
+}
+
+.red { color: red; }
+
+th.cnor { font-weight: inherit; }
+th.cbo { font-weight: bolder; }
+th.cbobo, th.cbobo span { font-weight: bolder; }
+th.cli { font-weight: lighter; }
+th.clili, th.clili span { font-weight: lighter; }
+
+td.cnor { font-weight: inherit; }
+td.cbo { font-weight: bolder; }
+td.cbobo, td.cbobo span { font-weight: bolder; }
+td.cli { font-weight: lighter; }
+td.clili, td.clili span { font-weight: lighter; }
+
+thead { font-weight: 400; font-size: 75%; }
+
+.w1 { font-weight: 100; }
+.w2 { font-weight: 200; }
+.w3 { font-weight: 300; }
+.w4 { font-weight: 400; }
+.w5 { font-weight: 500; }
+.w6 { font-weight: 600; }
+.w7 { font-weight: 700; }
+.w8 { font-weight: 800; }
+.w9 { font-weight: 900; }
+
+</style>
+</head>
+<body>
+
+<h3>Font family with 700 weight</h3>
+
+<table>
+<thead>
+<th></th>
+<th class="clili"><span>lighter lighter</span></th>
+<th class="cli"><span>lighter</span></th>
+<th class="cnor"><span>normal</span></th>
+<th class="cbo"><span>bolder</span></th>
+<th class="cbobo"><span>bolder bolder</span></th>
+</thead>
+<tr class="w1">
+<th>100</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w2">
+<th>200</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w3">
+<th>300</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w4">
+<th>400</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w5">
+<th>500</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w6">
+<th>600</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w7">
+<th class="red">700</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w8">
+<th>800</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+<tr class="w9">
+<th>900</th>
+<td class="clili"><span>東京特許許可局</span></td>
+<td class="cli"><span>東京特許許可局</span></td>
+<td class="cnor"><span>東京特許許可局</span></td>
+<td class="cbo"><span>東京特許許可局</span></td>
+<td class="cbobo"><span>東京特許許可局</span></td>
+</tr>
+</table>
+
+<p>tokyotokkyokyokakyoku</p>
+
+</body>
+</html>
-- 
cgit v1.2.3