From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/reftests/font-matching/1367860-1.htm        |  20 +
 layout/reftests/font-matching/1367860-2.htm        |  20 +
 layout/reftests/font-matching/1367860-3.htm        |  20 +
 layout/reftests/font-matching/1367860-ref.htm      |  15 +
 layout/reftests/font-matching/1394311-ref.htm      |  22 +
 layout/reftests/font-matching/1394311.htm          |  22 +
 layout/reftests/font-matching/1458158-1-ref.html   |  26 ++
 layout/reftests/font-matching/1458158-1.html       |  22 +
 layout/reftests/font-matching/1850672-1-ref.html   |  11 +
 layout/reftests/font-matching/1850672-1.html       |  11 +
 .../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 +
 .../font-matching/descriptor-ranges-ref.html       |  19 +
 .../reftests/font-matching/descriptor-ranges.html  |  20 +
 layout/reftests/font-matching/descriptor-ranges.js |  79 ++++
 .../font-matching/emoji-fallback-1-ref.html        |  21 +
 .../reftests/font-matching/emoji-fallback-1.html   |  20 +
 .../font-matching/emoji-fallback-2-ref.html        |  21 +
 .../reftests/font-matching/emoji-fallback-2.html   |  24 +
 .../font-matching/emoji-fallback-3-ref.html        |  21 +
 .../reftests/font-matching/emoji-fallback-3.html   |  24 +
 .../font-matching/emoji-keycap-2-notref.html       |   3 +
 layout/reftests/font-matching/emoji-keycap-2.html  |   3 +
 .../font-matching/emoji-keycap-notref.html         |  20 +
 layout/reftests/font-matching/emoji-keycap.html    |  20 +
 .../reftests/font-matching/emoji-skintone-ref.html |  19 +
 layout/reftests/font-matching/emoji-skintone.html  |  19 +
 .../font-matching/emoji-subregion-flag-notref.html |   4 +
 .../font-matching/emoji-subregion-flag.html        |   4 +
 .../fallback-respects-generic-1-ref.html           |  12 +
 .../font-matching/fallback-respects-generic-1.html |  12 +
 .../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 ++
 .../font-matching/hiragino-kaku-1-notref.html      |   2 +
 layout/reftests/font-matching/hiragino-kaku-1.html |   3 +
 .../font-matching/illformed-lang-tags-1.html       |  55 +++
 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 +
 .../font-matching/legacy-family-names-1-ref.html   |   9 +
 .../font-matching/legacy-family-names-1.html       |   9 +
 .../font-matching/legacy-family-names-2-ref.html   |   9 +
 .../font-matching/legacy-family-names-2.html       |   9 +
 .../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            |  47 ++
 .../font-matching/localized-family-names-003.html  |  47 ++
 .../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 ++
 .../font-matching/osaka-mono-exists-ref.html       |  21 +
 .../reftests/font-matching/osaka-mono-exists.html  |  25 +
 layout/reftests/font-matching/osaka-mono-ref.html  |  10 +
 layout/reftests/font-matching/osaka-mono.html      |  10 +
 layout/reftests/font-matching/reftest.list         | 201 ++++++++
 .../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 ++
 .../reftests/font-matching/system-font-pref.html   |   2 +
 .../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/system-ui-fallback-2-ref.html    |   2 +
 .../font-matching/system-ui-fallback-2.html        |   2 +
 .../font-matching/system-ui-fallback-notref.html   |   2 +
 .../reftests/font-matching/system-ui-fallback.html |   9 +
 .../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 +++++++
 .../reftests/font-matching/wingdings-1-notref.html |   9 +
 layout/reftests/font-matching/wingdings-1-ref.html |  13 +
 layout/reftests/font-matching/wingdings-1.html     |  12 +
 174 files changed, 9041 insertions(+)
 create mode 100644 layout/reftests/font-matching/1367860-1.htm
 create mode 100644 layout/reftests/font-matching/1367860-2.htm
 create mode 100644 layout/reftests/font-matching/1367860-3.htm
 create mode 100644 layout/reftests/font-matching/1367860-ref.htm
 create mode 100644 layout/reftests/font-matching/1394311-ref.htm
 create mode 100644 layout/reftests/font-matching/1394311.htm
 create mode 100644 layout/reftests/font-matching/1458158-1-ref.html
 create mode 100644 layout/reftests/font-matching/1458158-1.html
 create mode 100644 layout/reftests/font-matching/1850672-1-ref.html
 create mode 100644 layout/reftests/font-matching/1850672-1.html
 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/descriptor-ranges-ref.html
 create mode 100644 layout/reftests/font-matching/descriptor-ranges.html
 create mode 100644 layout/reftests/font-matching/descriptor-ranges.js
 create mode 100644 layout/reftests/font-matching/emoji-fallback-1-ref.html
 create mode 100644 layout/reftests/font-matching/emoji-fallback-1.html
 create mode 100644 layout/reftests/font-matching/emoji-fallback-2-ref.html
 create mode 100644 layout/reftests/font-matching/emoji-fallback-2.html
 create mode 100644 layout/reftests/font-matching/emoji-fallback-3-ref.html
 create mode 100644 layout/reftests/font-matching/emoji-fallback-3.html
 create mode 100644 layout/reftests/font-matching/emoji-keycap-2-notref.html
 create mode 100644 layout/reftests/font-matching/emoji-keycap-2.html
 create mode 100644 layout/reftests/font-matching/emoji-keycap-notref.html
 create mode 100644 layout/reftests/font-matching/emoji-keycap.html
 create mode 100644 layout/reftests/font-matching/emoji-skintone-ref.html
 create mode 100644 layout/reftests/font-matching/emoji-skintone.html
 create mode 100644 layout/reftests/font-matching/emoji-subregion-flag-notref.html
 create mode 100644 layout/reftests/font-matching/emoji-subregion-flag.html
 create mode 100644 layout/reftests/font-matching/fallback-respects-generic-1-ref.html
 create mode 100644 layout/reftests/font-matching/fallback-respects-generic-1.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/hiragino-kaku-1-notref.html
 create mode 100644 layout/reftests/font-matching/hiragino-kaku-1.html
 create mode 100644 layout/reftests/font-matching/illformed-lang-tags-1.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/legacy-family-names-1-ref.html
 create mode 100644 layout/reftests/font-matching/legacy-family-names-1.html
 create mode 100644 layout/reftests/font-matching/legacy-family-names-2-ref.html
 create mode 100644 layout/reftests/font-matching/legacy-family-names-2.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/osaka-mono-exists-ref.html
 create mode 100644 layout/reftests/font-matching/osaka-mono-exists.html
 create mode 100644 layout/reftests/font-matching/osaka-mono-ref.html
 create mode 100644 layout/reftests/font-matching/osaka-mono.html
 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-font-pref.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/system-ui-fallback-2-ref.html
 create mode 100644 layout/reftests/font-matching/system-ui-fallback-2.html
 create mode 100644 layout/reftests/font-matching/system-ui-fallback-notref.html
 create mode 100644 layout/reftests/font-matching/system-ui-fallback.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
 create mode 100644 layout/reftests/font-matching/wingdings-1-notref.html
 create mode 100644 layout/reftests/font-matching/wingdings-1-ref.html
 create mode 100644 layout/reftests/font-matching/wingdings-1.html

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

diff --git a/layout/reftests/font-matching/1367860-1.htm b/layout/reftests/font-matching/1367860-1.htm
new file mode 100644
index 0000000000..53516dfe86
--- /dev/null
+++ b/layout/reftests/font-matching/1367860-1.htm
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!--
+Reftest for Bug 1367860
+Case 1: Language tag on ancestor / font-family on descendant
+  (passes before patch)
+-->
+
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <div lang="ja" style="font-family: InvalidFontName;">
+    These two lines should be exactly the same.
+  </div>
+  <div lang="ja"><div style="font-family: InvalidFontName;">
+    These two lines should be exactly the same.
+  </div></div>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/1367860-2.htm b/layout/reftests/font-matching/1367860-2.htm
new file mode 100644
index 0000000000..977743989e
--- /dev/null
+++ b/layout/reftests/font-matching/1367860-2.htm
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!--
+Reftest for Bug 1367860
+Case 2: Language tag on descendant / font-family on ancestor
+  (fails before patch)
+-->
+
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <div lang="ja" style="font-family: InvalidFontName;">
+    These two lines should be exactly the same.
+  </div>
+  <div style="font-family: InvalidFontName;"><div lang="ja">
+    These two lines should be exactly the same.
+  </div></div>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/1367860-3.htm b/layout/reftests/font-matching/1367860-3.htm
new file mode 100644
index 0000000000..6791e2f167
--- /dev/null
+++ b/layout/reftests/font-matching/1367860-3.htm
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!--
+Reftest for Bug 1367860
+Case 3: No font-family
+  (fails before patch)
+-->
+
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <div lang="ja" style="font-family: InvalidFontName;">
+    These two lines should be exactly the same.
+  </div>
+  <div lang="ja">
+    These two lines should be exactly the same.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/1367860-ref.htm b/layout/reftests/font-matching/1367860-ref.htm
new file mode 100644
index 0000000000..c78ead43ab
--- /dev/null
+++ b/layout/reftests/font-matching/1367860-ref.htm
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!--
+Reftest for Bug 1367860
+Reference for all cases
+-->
+
+<html>
+<head>
+  <meta charset="UTF-8">
+</head>
+<body lang="ja" style="font-family: InvalidFontName;">
+  <div>These two lines should be exactly the same.</div>
+  <div>These two lines should be exactly the same.</div>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/1394311-ref.htm b/layout/reftests/font-matching/1394311-ref.htm
new file mode 100644
index 0000000000..f5ef6ef41f
--- /dev/null
+++ b/layout/reftests/font-matching/1394311-ref.htm
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--
+Reftest for Bug 1394311 (reference file)
+-->
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+span {
+  font-family: Foo;  /* insert a bogus font-family to avoid Bug 1367860 */
+  font-weight: bold;
+  border: 2px solid black;
+}
+</style>
+</head>
+<body style="font-size: xx-large">
+  <span lang="zh-cn">述</span><span lang="zh-cn">述</span><span lang="zh-hans">述</span><span lang="zh-hans">述</span><br>
+  <span lang="zh-tw">述</span><span lang="zh-tw">述</span><span lang="zh-hant">述</span><span lang="zh-hant">述</span><br>
+  <span lang="ja-jp">述</span><span lang="ja-jp">述</span><br>
+  <span lang="ko-kr">述</span><span lang="ko-kr">述</span><br>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/1394311.htm b/layout/reftests/font-matching/1394311.htm
new file mode 100644
index 0000000000..186ae11cb4
--- /dev/null
+++ b/layout/reftests/font-matching/1394311.htm
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--
+Reftest for Bug 1394311
+-->
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+span {
+  font-family: Foo;  /* insert a bogus font-family to avoid Bug 1367860 */
+  font-weight: bold;
+  border: 2px solid black;
+}
+</style>
+</head>
+<body style="font-size: xx-large">
+  <span lang="zh-CN">述</span><span lang="ZH-CN">述</span><span lang="zh-Hans">述</span><span lang="ZH-HANS">述</span><br>
+  <span lang="zh-TW">述</span><span lang="ZH-TW">述</span><span lang="zh-Hant">述</span><span lang="ZH-HANT">述</span><br>
+  <span lang="ja-JP">述</span><span lang="JA-JP">述</span><br>
+  <span lang="ko-KR">述</span><span lang="KO-KR">述</span><br>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/1458158-1-ref.html b/layout/reftests/font-matching/1458158-1-ref.html
new file mode 100644
index 0000000000..18af0c3352
--- /dev/null
+++ b/layout/reftests/font-matching/1458158-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+    @font-face {
+        font-family: arial_bold;
+        font-weight: bold;
+        src: local("Arial Bold");
+    }
+    @font-face {
+        font-family: arial_black;
+        font-weight: 900;
+        src: local("Arial Black");
+    }
+    h1 {
+        font-family: arial_bold;
+    }
+    b {
+        font-family: arial_black, arial_bold;
+    }
+    x {
+        font-family: Arial;
+        font-size: 2em;
+        color: transparent;
+    }
+</style>
+<h1>bold العربي <b>bolder العربي</b><x>A</x></h1>
diff --git a/layout/reftests/font-matching/1458158-1.html b/layout/reftests/font-matching/1458158-1.html
new file mode 100644
index 0000000000..b4d04a18c4
--- /dev/null
+++ b/layout/reftests/font-matching/1458158-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+    @font-face {
+        font-family: arial_black;
+        font-weight: 900;
+        src: local("Arial Black");
+    }
+    h1 {
+        font-family: Arial;
+        font-weight: bold;
+    }
+    /* We include an extra-large invisible character in the test line
+       to ensure a consistent baseline; otherwise differing metrics
+       between the various Arial faces can disrupt it. */
+    x {
+        font-family: Arial;
+        font-size: 2em;
+        color: transparent;
+    }
+</style>
+<h1>bold العربي <b>bolder العربي</b><x>A</x></h1>
diff --git a/layout/reftests/font-matching/1850672-1-ref.html b/layout/reftests/font-matching/1850672-1-ref.html
new file mode 100644
index 0000000000..af7c90d773
--- /dev/null
+++ b/layout/reftests/font-matching/1850672-1-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset=utf-8>
+<p>Both lines should look the same:</p>
+<div style="font-size:xxx-large;">
+<div style="font-family:'Yu Gothic', serif;">
+lorem ipsum
+</div>
+<div style="font-family:'Yu Gothic', serif;">
+lorem ipsum
+</div>
+</body>
\ No newline at end of file
diff --git a/layout/reftests/font-matching/1850672-1.html b/layout/reftests/font-matching/1850672-1.html
new file mode 100644
index 0000000000..3d411c121b
--- /dev/null
+++ b/layout/reftests/font-matching/1850672-1.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset=utf-8>
+<p>Both lines should look the same:</p>
+<div style="font-size:xxx-large;">
+<div style="font-family:'Yu Gothic', serif;">
+lorem ipsum
+</div>
+<div style="font-family:'游ゴシック', serif;">
+lorem ipsum
+</div>
+</body>
\ No newline at end of file
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 0000000000..fb00a9aa95
--- /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 0000000000..a3dcdba69c
--- /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 0000000000..b216a4ff50
--- /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 0000000000..ba92206f17
--- /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 0000000000..f5665f6c53
--- /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 0000000000..5f363ca261
--- /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 0000000000..5956b40c8d
--- /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 0000000000..72c93ef9b8
--- /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 0000000000..04c8c8601a
--- /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 0000000000..a6daf7157b
--- /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 0000000000..625a51a49c
--- /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 0000000000..ce1ca3ffc7
--- /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 0000000000..843851d254
--- /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 0000000000..a52d97daa6
--- /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 0000000000..583c5d51d7
--- /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 0000000000..73d2371282
--- /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 0000000000..60fba9530e
--- /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 0000000000..0dd1e3b407
--- /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 0000000000..3b765c3801
--- /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 0000000000..728bead4fc
--- /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 0000000000..c9ab0231c3
--- /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 0000000000..c9ab0231c3
--- /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 0000000000..92469691e7
--- /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 0000000000..c6f8709f2e
--- /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 0000000000..037f7306e3
--- /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 0000000000..2a019c6de6
--- /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 0000000000..40400a846e
--- /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 0000000000..8d4de33951
--- /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 0000000000..d8db0d7d9c
--- /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 0000000000..76d4ca0e52
--- /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 0000000000..9930095dcb
--- /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 0000000000..18629c8052
--- /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 0000000000..d25f250fae
--- /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 0000000000..3487e2eea8
--- /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 0000000000..0d7d4d0560
--- /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 0000000000..fb0c3d5429
--- /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 0000000000..ff3ad7b822
--- /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/descriptor-ranges-ref.html b/layout/reftests/font-matching/descriptor-ranges-ref.html
new file mode 100644
index 0000000000..b76460fb98
--- /dev/null
+++ b/layout/reftests/font-matching/descriptor-ranges-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+
+<style id="dynamicStyles">
+</style>
+
+<div id="testContents" style="columns: 2; font-size: 10px;">
+</div>
+
+<script>
+/* Reference file creates only a single face in each test font-family,
+   so that it will always have the expected rendering without relying
+   on the font-matching algorithm to choose between faces. */
+function createFontFaceRules(family, descriptor, expectedMatch, unexpectedMatch) {
+    return `@font-face { font-family: ${family}; src: url(../fonts/Chunkfive.otf); ${descriptor}: ${expectedMatch}; }\n`;
+}
+</script>
+
+<script src="descriptor-ranges.js"></script>
diff --git a/layout/reftests/font-matching/descriptor-ranges.html b/layout/reftests/font-matching/descriptor-ranges.html
new file mode 100644
index 0000000000..573e4398da
--- /dev/null
+++ b/layout/reftests/font-matching/descriptor-ranges.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+
+<style id="dynamicStyles">
+</style>
+
+<div id="testContents" style="columns: 2; font-size: 10px;">
+</div>
+
+<script>
+/* Create font-family with two faces; the testcase to use the face with the
+   'expectedMatch' descriptor, and not the 'unexpectedMatch'. So any testcase
+   whose text is replaced by Ahem glyphs has failed font-matching. */
+function createFontFaceRules(family, descriptor, expectedMatch, unexpectedMatch) {
+    return `@font-face { font-family: ${family}; src: url(../fonts/Chunkfive.otf); ${descriptor}: ${expectedMatch}; }\n` +
+           `@font-face { font-family: ${family}; src: url(../fonts/Ahem.ttf); ${descriptor}: ${unexpectedMatch}; }\n`;
+}
+</script>
+
+<script src="descriptor-ranges.js"></script>
diff --git a/layout/reftests/font-matching/descriptor-ranges.js b/layout/reftests/font-matching/descriptor-ranges.js
new file mode 100644
index 0000000000..e59bd0d45c
--- /dev/null
+++ b/layout/reftests/font-matching/descriptor-ranges.js
@@ -0,0 +1,79 @@
+/* Script used by descriptor-ranges.html and descriptor-ranges-ref.html
+   to create @font-face rules and test elements for a collection of
+   font-matching testcases. */
+
+// To create unique font-family names for each testcase.
+let serial = 0;
+
+// Accumulators for the lists of @font-face rules and test elements.
+let fontFaceRules = "";
+let testElements = "";
+
+// Create a <div> element with the font properties to match. Its text reports
+// the property-value and corresponding pair of descriptors being tested.
+// (The associated createFontFaceRules() function is defined separately in the
+// test and reference files.)
+function createTestElement(family, weight, style, stretch, value, expected, unexpected) {
+    return `<div style="font-family:${family}; font-weight:${weight}; font-style:${style}; font-stretch:${stretch};">` +
+           `${family} ${value} (${expected} vs ${unexpected})</div>\n`;
+}
+
+// Create testcases for the given descriptor.
+// Each testcase has a test property value, and a list of @font-face descriptors
+// to be matched against the property, where each descriptor in the list should
+// be preferred over the next.
+function testDescriptor(descriptorName, testCases) {
+    testElements += `<div style="background:yellow;padding:0.5em">Tests of ${descriptorName} descriptor:</div>\n`;
+    testCases.forEach(function (testCase) {
+        // Go though test cases, checking each descriptor has higher priority than next in the list
+        for (let i = 0; i < testCase.testDescriptors.length - 1; i++) {
+            serial++;
+            let expectedMatch   = testCase.testDescriptors[i];
+            let unexpectedMatch = testCase.testDescriptors[i + 1];
+            let familyName = "test_" + serial;
+            fontFaceRules += createFontFaceRules(familyName, descriptorName, expectedMatch, unexpectedMatch);
+            let testWeight  = (descriptorName == "font-weight")  ? testCase.value : "normal";
+            let testStyle   = (descriptorName == "font-style")   ? testCase.value : "normal";
+            let testStretch = (descriptorName == "font-stretch") ? testCase.value : "normal";
+            testElements += createTestElement(familyName, testWeight, testStyle, testStretch,
+                                              testCase.value, expectedMatch, unexpectedMatch);
+        }
+    });
+}
+
+// Testcases (from web-platform/tests/css/css-fonts/variations/at-font-face-font-matching.html,
+// with a couple of extras). In each case, for the given property value, the testDescriptors
+// are listed from 'best' to 'worse' match, as evaluated by the font-matching algorithm in
+// https://drafts.csswg.org/css-fonts-4/#font-style-matching.
+testDescriptor("font-weight", [
+    { value: "400", testDescriptors: ["400", "450 460", "500", "350 399", "351 398", "501 550", "502 560"] },
+    { value: "430", testDescriptors: ["420 440", "450 460", "500", "400 425", "350 399", "340 398", "501 550", "502 560"] },
+    { value: "500", testDescriptors: ["500", "450 460", "400", "350 399", "351 398", "501 550", "502 560"] },
+    { value: "501", testDescriptors: ["501", "502 510", "503 520", "500", "450 460", "390 410", "300 350"] },
+    { value: "399", testDescriptors: ["350 399", "340 360", "200 300", "400", "450 460", "500 501", "502 510"] },
+    { value: "350", testDescriptors: ["200 300", "250 280", "420 450", "430 440", "445"] },
+    { value: "550", testDescriptors: ["600 800", "700 900", "420 450", "430 440", "425"] }
+]);
+
+testDescriptor("font-stretch", [
+    { value: "100%", testDescriptors: ["100%", "110% 120%", "115% 116%"] },
+    { value: "110%", testDescriptors: ["110% 120%", "115% 116%", "105%", "100%", "50% 80%", "60% 70%"] },
+    { value: "90%",  testDescriptors: ["90% 100%", "50% 80%", "60% 70%", "110% 140%", "120% 130%"] },
+]);
+
+testDescriptor("font-style", [
+    { value: "normal",         testDescriptors: ["normal", "oblique 0deg", "oblique 10deg 40deg", "oblique 20deg 30deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
+    { value: "italic",         testDescriptors: ["italic", "oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 5deg 10deg", "oblique 5deg", "normal", "oblique 0deg", "oblique -60deg -30deg", "oblique -50deg -40deg" ] },
+    { value: "oblique 20deg",  testDescriptors: ["oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
+    { value: "oblique 21deg",  testDescriptors: ["oblique 21deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 20deg", "oblique 10deg", "italic", "oblique 0deg",  "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
+    { value: "oblique 10deg",  testDescriptors: ["oblique 10deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
+    { value: "oblique 0deg",   testDescriptors: ["oblique 0deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
+    { value: "oblique -10deg", testDescriptors: ["oblique -10deg", "oblique -5deg", "oblique -1deg 0deg", "oblique -20deg -15deg", "oblique -60deg -30deg", "oblique -50deg -40deg", "italic", "oblique 0deg 10deg", "oblique 40deg 50deg" ] },
+    { value: "oblique -20deg", testDescriptors: ["oblique -20deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },
+    { value: "oblique -21deg", testDescriptors: ["oblique -21deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },
+]);
+
+// Stuff the @font-face rules and test elements into the document.
+// Any testcases that render Ahem glyphs are failures.
+document.getElementById("dynamicStyles").innerHTML = fontFaceRules;
+document.getElementById("testContents").innerHTML = testElements;
diff --git a/layout/reftests/font-matching/emoji-fallback-1-ref.html b/layout/reftests/font-matching/emoji-fallback-1-ref.html
new file mode 100644
index 0000000000..d7c6eb6a83
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-fallback-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>emoji fallback</title>
+<style>
+div {
+  font-size: 48pt;
+}
+#test {
+  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji';
+  font-size: 24pt;
+}
+</style>
+</head>
+<body>
+
+<div><span id=test>&#x231a;&#x231b;&#x1f300;&#x1f301;</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/emoji-fallback-1.html b/layout/reftests/font-matching/emoji-fallback-1.html
new file mode 100644
index 0000000000..57fda93275
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-fallback-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>emoji fallback</title>
+<style>
+div {
+  font-size: 48pt;
+}
+#test {
+  font-size: 24pt;
+}
+</style>
+</head>
+<body>
+
+<div><span id=test>&#x231a;&#x231b;&#x1f300;&#x1f301;</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/emoji-fallback-2-ref.html b/layout/reftests/font-matching/emoji-fallback-2-ref.html
new file mode 100644
index 0000000000..144f08f1b8
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-fallback-2-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>emoji fallback to text font</title>
+<style>
+div {
+  font-size: 48pt;
+}
+#test {
+  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols';
+  font-size: 24pt;
+}
+</style>
+</head>
+<body>
+
+<div><span id=test>&#x231a;&#xfe0e;&#x231b;&#xfe0e;&#x1f300;&#xfe0e;&#x1f301;&#xfe0e;</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/emoji-fallback-2.html b/layout/reftests/font-matching/emoji-fallback-2.html
new file mode 100644
index 0000000000..e9aa618d6a
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-fallback-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>emoji fallback to text font</title>
+<style>
+div {
+  font-size: 48pt;
+}
+#test {
+  /* Because of the presence of the U+FE0E variation selectors, we should prefer the
+     the monochrome fonts even though color-emoji fonts are listed first. */
+  font-family: 'Segoe UI Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Noto Color Emoji',
+               'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols';
+  font-size: 24pt;
+}
+</style>
+</head>
+<body>
+
+<div><span id=test>&#x231a;&#xfe0e;&#x231b;&#xfe0e;&#x1f300;&#xfe0e;&#x1f301;&#xfe0e;</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/emoji-fallback-3-ref.html b/layout/reftests/font-matching/emoji-fallback-3-ref.html
new file mode 100644
index 0000000000..94fee73901
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-fallback-3-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>emoji fallback to color font</title>
+<style>
+div {
+  font-size: 48pt;
+}
+#test {
+  font-family: 'Segoe UI Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Noto Color Emoji';
+  font-size: 24pt;
+}
+</style>
+</head>
+<body>
+
+<div><span id=test>&#x1f170;&#x1f171;</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/emoji-fallback-3.html b/layout/reftests/font-matching/emoji-fallback-3.html
new file mode 100644
index 0000000000..42f4d09ec7
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-fallback-3.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>emoji fallback to color font</title>
+<style>
+div {
+  font-size: 48pt;
+}
+#test {
+  /* Because of the presence of the U+FE0F variation selectors, we should find
+     a color-emoji font even though the b/w symbol fonts are listed first. */
+  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols',
+               'Segoe UI Emoji', 'Twemoji Mozilla', 'Apple Color Emoji', 'Noto Color Emoji';
+  font-size: 24pt;
+}
+</style>
+</head>
+<body>
+
+<div><span id=test>&#x1f170;&#xfe0f;&#x1f171;&#xfe0f;</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/emoji-keycap-2-notref.html b/layout/reftests/font-matching/emoji-keycap-2-notref.html
new file mode 100644
index 0000000000..78ca47f02e
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-keycap-2-notref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<div style="font: 100px/2 serif, Segoe UI Emoji">0&#xfe0f;&#x20e3;</div>
diff --git a/layout/reftests/font-matching/emoji-keycap-2.html b/layout/reftests/font-matching/emoji-keycap-2.html
new file mode 100644
index 0000000000..16b9f6ab63
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-keycap-2.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<div style="font: 100px/2 serif, Twemoji Mozilla, Segoe UI Emoji">0&#xfe0f;&#x20e3;</div>
diff --git a/layout/reftests/font-matching/emoji-keycap-notref.html b/layout/reftests/font-matching/emoji-keycap-notref.html
new file mode 100644
index 0000000000..d4ec6f4003
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-keycap-notref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>keycap emoji</title>
+<style>
+#test {
+    font-size: 24pt;
+}
+</style>
+</head>
+<body>
+
+<div id=test>
+<div>&#x23;&#x20e3;&#x30;&#x20e3;</div>
+<div>&#x23;&#x23;&#x20e3;&#x30;&#x20e3;</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/emoji-keycap.html b/layout/reftests/font-matching/emoji-keycap.html
new file mode 100644
index 0000000000..5bc803566e
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-keycap.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>keycap emoji</title>
+<style>
+#test {
+    font-size: 24pt;
+}
+</style>
+</head>
+<body>
+
+<div id=test>
+<div>&#x23;&#xfe0f;&#x20e3;&#x30;&#xfe0f;&#x20e3;</div>
+<div>&#x23;&#x23;&#xfe0f;&#x20e3;&#x30;&#xfe0f;&#x20e3;</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/emoji-skintone-ref.html b/layout/reftests/font-matching/emoji-skintone-ref.html
new file mode 100644
index 0000000000..77efa66820
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-skintone-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>emoji with skintone</title>
+<style>
+#test {
+    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', 'Noto Sans Symbols';
+}
+</style>
+</head>
+<body>
+
+<div id=test>
+<span>&#x261d;&#x1f3fb;&#x261d;&#xfe0e;&#x261d;&#x1f3fb;</span><br>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/emoji-skintone.html b/layout/reftests/font-matching/emoji-skintone.html
new file mode 100644
index 0000000000..dcb4f106df
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-skintone.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+<meta charset="utf-8">
+<title>emoji with skintone</title>
+<style>
+#test {
+    font-family: 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', 'Noto Sans Symbols', 'Segoe UI Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji';
+}
+</style>
+</head>
+<body>
+
+<div id=test>
+<span>&#x261d;&#x1f3fb;&#x261d;&#xfe0e;&#x261d;&#x1f3fb;</span><br>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/font-matching/emoji-subregion-flag-notref.html b/layout/reftests/font-matching/emoji-subregion-flag-notref.html
new file mode 100644
index 0000000000..83d4c9a5de
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-subregion-flag-notref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<h1>England: &#x1f3f4;</h1>
+
diff --git a/layout/reftests/font-matching/emoji-subregion-flag.html b/layout/reftests/font-matching/emoji-subregion-flag.html
new file mode 100644
index 0000000000..9ba29cf276
--- /dev/null
+++ b/layout/reftests/font-matching/emoji-subregion-flag.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<h1>England: &#x1f3f4;&#xe0067;&#xe0062;&#xe0065;&#xe006e;&#xe0067;&#xe007f;</h1>
+
diff --git a/layout/reftests/font-matching/fallback-respects-generic-1-ref.html b/layout/reftests/font-matching/fallback-respects-generic-1-ref.html
new file mode 100644
index 0000000000..c812c5a03b
--- /dev/null
+++ b/layout/reftests/font-matching/fallback-respects-generic-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<meta charset="utf-8">
+<style>
+.a { font: 32px serif; }
+.b { font: 32px sans-serif; }
+strut { font-size: 2em; }
+</style>
+<p>The first Chinese line should use the <tt>serif</tt> font setting from prefs;
+the second should use the <tt>sans-serif</tt> font setting.</p>
+<p class="a"><span lang="zh-CN">你好吗？</span><strut>&nbsp;</strut></p>
+<p class="b"><span lang="zh-CN">你好吗？</span><strut>&nbsp;</strut></p>
diff --git a/layout/reftests/font-matching/fallback-respects-generic-1.html b/layout/reftests/font-matching/fallback-respects-generic-1.html
new file mode 100644
index 0000000000..a4b504e289
--- /dev/null
+++ b/layout/reftests/font-matching/fallback-respects-generic-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<meta charset="utf-8">
+<style>
+.a { font: 32px serif; }
+.b { font: 32px sans-serif; }
+strut { font-size: 2em; } /* to force stable line height/baseline position */
+</style>
+<p>The first Chinese line should use the <tt>serif</tt> font setting from prefs;
+the second should use the <tt>sans-serif</tt> font setting.</p>
+<p class="a">你好吗？<strut>&nbsp;</strut></p>
+<p class="b">你好吗？<strut>&nbsp;</strut></p>
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 0000000000..2f54eb85a7
--- /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 0000000000..0a328d6b13
--- /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 0000000000..1ac3073bf5
--- /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 0000000000..2fe8f2cf31
--- /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 0000000000..ca86a08ed9
--- /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 0000000000..35e5911db3
--- /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 0000000000..ebccfcac81
--- /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 0000000000..3bec8c0147
--- /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 0000000000..408d5f7537
--- /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/hiragino-kaku-1-notref.html b/layout/reftests/font-matching/hiragino-kaku-1-notref.html
new file mode 100644
index 0000000000..c0f052d4b8
--- /dev/null
+++ b/layout/reftests/font-matching/hiragino-kaku-1-notref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="font: 36px serif">こんにちは</div>
diff --git a/layout/reftests/font-matching/hiragino-kaku-1.html b/layout/reftests/font-matching/hiragino-kaku-1.html
new file mode 100644
index 0000000000..a3eee129db
--- /dev/null
+++ b/layout/reftests/font-matching/hiragino-kaku-1.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<!-- check that the legacy Hiragino Kaku Gothic name is recognized -->
+<div style="font: 36px Hiragino Kaku Gothic ProN, serif">こんにちは</div>
diff --git a/layout/reftests/font-matching/illformed-lang-tags-1.html b/layout/reftests/font-matching/illformed-lang-tags-1.html
new file mode 100644
index 0000000000..31ae0914b7
--- /dev/null
+++ b/layout/reftests/font-matching/illformed-lang-tags-1.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<style>
+body {
+  font: 32px sans-serif;
+}
+.description {
+  font: 16px serif;
+}
+div {
+  position: relative;
+  height: 3em;
+}
+div p {
+  position: absolute;
+  color: red;
+}
+p + p {
+  color: green;
+}
+.red {
+  color: red;
+}
+.green {
+  color: green;
+}
+</style>
+<body>
+<p class=description>In each line, the <span class=green>green</span> glyphs should exactly overlay the <span class=red>red</span> ones:</p>
+</body>
+<script>
+// Some ideographs that should have lang-specific font variants (examples found in
+// https://en.wikipedia.org/wiki/Han_unification).
+const doingTest = (location.search != "?ref");
+const testStr = "今令免入全关具刃化外情才抵次海直真示神空者草蔥角道雇骨";
+["zh-CN", "zh-HK", "zh-TW", "ja-JP", "ko-KR", "ja-JP-alalc97"].forEach((lang) => {
+  let div = document.createElement("div");
+  document.body.appendChild(div);
+  // Create two layers of text, red and then green. In the test rendering, one layer
+  // has the "correct" lang tag, and the other has an ill-formed version with underscore;
+  // nevertheless we want it to render identically.
+  let p1 = document.createElement("p");
+  p1.lang = lang;
+  p1.textContent = testStr;
+  div.appendChild(p1);
+  if (doingTest) {
+    lang = lang.replace("-", "_");
+  }
+  let p2 = document.createElement("p");
+  p2.lang = lang;
+  p2.textContent = testStr;
+  div.appendChild(p2);
+});
+</script>
diff --git a/layout/reftests/font-matching/impact-bold.html b/layout/reftests/font-matching/impact-bold.html
new file mode 100644
index 0000000000..78a17c14cc
--- /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 0000000000..c0c273ce40
--- /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 0000000000..ce6a3ca7df
--- /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 0000000000..f9e378a0b4
--- /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 0000000000..4644a88e7b
--- /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 0000000000..ae7e70fa6b
--- /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 0000000000..f5ae4c33b5
--- /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 0000000000..5d1c95bfe6
--- /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 0000000000..92438c6a19
--- /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 0000000000..d71ffa7803
--- /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 0000000000..3d249c504b
--- /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 0000000000..3064fa534c
--- /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 0000000000..13783610dd
--- /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 0000000000..a669682abf
--- /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 0000000000..4499ebc0b4
--- /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 0000000000..f465d247e4
--- /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 0000000000..d1fc2939cb
--- /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/legacy-family-names-1-ref.html b/layout/reftests/font-matching/legacy-family-names-1-ref.html
new file mode 100644
index 0000000000..71be452695
--- /dev/null
+++ b/layout/reftests/font-matching/legacy-family-names-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<meta charset=utf-8>
+<style>
+body { font-family: Avenir Next, serif; font-weight: 900; }
+</style>
+<body>
+Hello world
+</body>
diff --git a/layout/reftests/font-matching/legacy-family-names-1.html b/layout/reftests/font-matching/legacy-family-names-1.html
new file mode 100644
index 0000000000..7cec0ffd45
--- /dev/null
+++ b/layout/reftests/font-matching/legacy-family-names-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<meta charset=utf-8>
+<style>
+body { font-family: Avenir Next Heavy, serif; }
+</style>
+<body>
+Hello world
+</body>
diff --git a/layout/reftests/font-matching/legacy-family-names-2-ref.html b/layout/reftests/font-matching/legacy-family-names-2-ref.html
new file mode 100644
index 0000000000..2a9ba84246
--- /dev/null
+++ b/layout/reftests/font-matching/legacy-family-names-2-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<meta charset=utf-8>
+<style>
+body { font-family: Arial, serif; font-weight: 900; }
+</style>
+<body>
+Hello world
+</body>
diff --git a/layout/reftests/font-matching/legacy-family-names-2.html b/layout/reftests/font-matching/legacy-family-names-2.html
new file mode 100644
index 0000000000..112a540742
--- /dev/null
+++ b/layout/reftests/font-matching/legacy-family-names-2.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<meta charset=utf-8>
+<style>
+body { font-family: Arial Black, serif; }
+</style>
+<body>
+Hello world
+</body>
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 0000000000..6cd0c22188
--- /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 0000000000..d5396a62b1
--- /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 0000000000..6ab9a06e39
--- /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 0000000000..5a7fffc2aa
--- /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 0000000000..c1be37bdae
--- /dev/null
+++ b/layout/reftests/font-matching/localized-family-names-003-ref.html
@@ -0,0 +1,47 @@
+<!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;
+  line-height: 1.8em;
+}
+
+#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 0000000000..e7a2cf1548
--- /dev/null
+++ b/layout/reftests/font-matching/localized-family-names-003.html
@@ -0,0 +1,47 @@
+<!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;
+  line-height: 1.8em;
+}
+
+#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 0000000000..6ef138d8be
--- /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 0000000000..52ff487485
--- /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 0000000000..9b17188cd5
--- /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 0000000000..2d9c82104a
--- /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 0000000000..1403a8ee9e
--- /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 0000000000..7125faeaac
--- /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 0000000000..f200475225
--- /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 0000000000..33925b92dd
--- /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 0000000000..b8b8df4ce2
--- /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 0000000000..7a29c5a66d
--- /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/osaka-mono-exists-ref.html b/layout/reftests/font-matching/osaka-mono-exists-ref.html
new file mode 100644
index 0000000000..5e3ab9d467
--- /dev/null
+++ b/layout/reftests/font-matching/osaka-mono-exists-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: local("Ahem"), url("../fonts/Ahem.ttf");
+  unicode-range: U+0-7F; /* ASCII only */
+}
+div { font-size: 50px; line-height: 100px; }
+.ref { font-family: Ahem, "Osaka", serif; writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p>The two Japanese characters below should use the same font:
+if "Osaka" is present, the name "Osaka-Mono" should also work.</p>
+<div><span class=ref>絵</div>
+<div><span class=ref>絵</div>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/osaka-mono-exists.html b/layout/reftests/font-matching/osaka-mono-exists.html
new file mode 100644
index 0000000000..d73ac216e6
--- /dev/null
+++ b/layout/reftests/font-matching/osaka-mono-exists.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: local("Ahem"), url("../fonts/Ahem.ttf");
+  unicode-range: U+0-7F; /* ASCII only */
+}
+div { font-size: 50px; line-height: 100px; }
+/* We use vertical writing-mode because in horizontal mode, the Regular and Mono
+   faces have slightly different line-height metrics, and so although the glyph
+   would match, its positioning would differ. */
+.ref { font-family: Ahem, "Osaka", serif; writing-mode: vertical-rl; }
+.test { font-family: Ahem, "Osaka-Mono", serif; writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+<p>The two Japanese characters below should use the same font:
+if "Osaka" is present, the name "Osaka-Mono" should also work.</p>
+<div><span class=ref>絵</div>
+<div><span class=test>絵</div>
+</body>
+</html>
diff --git a/layout/reftests/font-matching/osaka-mono-ref.html b/layout/reftests/font-matching/osaka-mono-ref.html
new file mode 100644
index 0000000000..ae6e6468f4
--- /dev/null
+++ b/layout/reftests/font-matching/osaka-mono-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<style type="text/css">
+textarea { font-family: "Osaka-Mono"; font-size: 72pt; }
+</style>
+</head>
+<body><textarea>海の絵</textarea></body>
+</html>
diff --git a/layout/reftests/font-matching/osaka-mono.html b/layout/reftests/font-matching/osaka-mono.html
new file mode 100644
index 0000000000..9202df1f86
--- /dev/null
+++ b/layout/reftests/font-matching/osaka-mono.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<style type="text/css">
+textarea { font-size: 72pt; }
+</style>
+</head>
+<body><textarea>海の絵</textarea></body>
+</html>
diff --git a/layout/reftests/font-matching/reftest.list b/layout/reftests/font-matching/reftest.list
new file mode 100644
index 0000000000..fe5f3a2065
--- /dev/null
+++ b/layout/reftests/font-matching/reftest.list
@@ -0,0 +1,201 @@
+# Font-matching reftests may fail intermittently/transiently due to asynch fallback,
+# so we disable the async mechanism for this directory.
+defaults pref(gfx.font_rendering.fallback.async,false)
+
+== CSS21-t1502-no-inherited-font-family.xhtml CSS21-t1502-no-inherited-font-family-ref.xhtml
+
+# tests for bug 1394311 (case-insensitive lang tag processing)
+# (First attempt is random-if(windows 7), due to intermittent failure with a
+# single missing character - see bug 1451723 & more generally bug 1392106.)
+pref(font.default.zh-CN,"serif") pref(font.default.zh-TW,"serif") pref(font.default.ja,"serif") pref(font.default.ko,"serif") == 1394311.htm 1394311-ref.htm
+pref(font.default.zh-CN,"sans-serif") pref(font.default.zh-TW,"sans-serif") pref(font.default.ja,"sans-serif") pref(font.default.ko,"sans-serif") == 1394311.htm 1394311-ref.htm
+
+# tests for bug 1367860 (correct default generic font based on language)
+== 1367860-1.htm 1367860-ref.htm
+== 1367860-2.htm 1367860-ref.htm
+== 1367860-3.htm 1367860-ref.htm
+
+# Test for bug 1458158: Arabic text in Arial weight 900 should fall back to Bold rather than Regular.
+# Limited to Windows because this is specific to the fonts shipped on Windows by default.
+skip-if(!winWidget) == 1458158-1.html 1458158-1-ref.html
+
+# 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 # Bug 1392106
+== localized-family-names-002.html localized-family-names-002-ref.html
+== localized-family-names-003.html localized-family-names-003-ref.html # Bug 1392106
+== 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(gtkWidget) == familyname-escapedidents.html familyname-escapedidents-ref.html # bug 1309425, bug 1328771
+
+# weight mapping tests
+== normalmedium.html normalmedium-ref.html
+!= normalmedium.html normalmedium-notref.html
+
+# Linux fails due to bug 604815
+== weightmapping-12.html weightmapping-12-ref.html
+== weightmapping-25.html weightmapping-25-ref.html
+== weightmapping-45.html weightmapping-45-ref.html
+== weightmapping-458.html weightmapping-458-ref.html
+== weightmapping-478.html weightmapping-478-ref.html
+== weightmapping-7.html weightmapping-7-ref.html
+== weightmapping-12579.html weightmapping-12579-ref.html
+
+== stretchmapping-all.html stretchmapping-all-ref.html
+== stretchmapping-reverse.html stretchmapping-reverse-ref.html
+fuzzy-if(Android,0-4,0-8) == stretchmapping-35.html stretchmapping-35-ref.html
+== stretchmapping-137.html stretchmapping-137-ref.html
+
+# test for font-stretch using @font-face
+== font-stretch-1.html font-stretch-1-ref.html
+== 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
+fails-if(geckoview) != synthetic-style-1.html synthetic-style-1-notref.html # Bug 1558513 for GV
+fails-if(geckoview) != synthetic-style-2.html synthetic-style-2-notref.html # Bug 1558513 for GV
+
+# 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) 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
+
+== font-synthesis-1.html font-synthesis-1-ref.html
+== 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) != 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
+
+# GTK and Windows 7 don't have full emoji and symbol font, so emoji-fallback-2
+# don't work well.
+== emoji-fallback-1.html emoji-fallback-1-ref.html
+skip-if(gtkWidget) == emoji-fallback-2.html emoji-fallback-2-ref.html
+== emoji-fallback-3.html emoji-fallback-3-ref.html
+!= emoji-keycap.html emoji-keycap-notref.html
+# Dependent on Windows emoji font names, so not expected to be meaningful on other platforms:
+skip-if(!winWidget) != emoji-keycap-2.html emoji-keycap-2-notref.html
+== emoji-skintone.html emoji-skintone-ref.html
+# Random on Android because font availability varies depending on the version/device.
+random-if(Android) != emoji-subregion-flag.html emoji-subregion-flag-notref.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) == system-generic-fallback-2.html system-generic-fallback-2-ref.html
+# random-if(!OSX) == system-generic-fallback-3.html system-generic-fallback-3-ref.html
+# random-if(!OSX) == 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
+
+# Tests for legacy font family name (GDI-model families) matching;
+# these depend on specific fonts that are available as standard on macOS and Windows,
+# and are not expected to pass on platforms that don't have those same fonts.
+skip-if(!cocoaWidget) == legacy-family-names-1.html legacy-family-names-1-ref.html
+skip-if(!winWidget) == legacy-family-names-2.html legacy-family-names-2-ref.html
+
+== descriptor-ranges.html descriptor-ranges-ref.html
+
+# Test that prefs font fallback respects the CSS generic from content (bug 1687426)
+skip-if(Android) == fallback-respects-generic-1.html fallback-respects-generic-1-ref.html # fonts present on Android are too unpredictable for easy testing
+
+skip-if(Android) != system-ui-fallback.html system-ui-fallback-notref.html # Roboto supports the characters in the reftest, and that's better behavior.
+== system-ui-fallback-2.html system-ui-fallback-2-ref.html
+
+# Japanese monospace font on macOS is Osaka-mono
+# If Osaka is present then Osaka-mono should also be available.
+skip-if(!cocoaWidget) == osaka-mono-exists.html osaka-mono-exists-ref.html
+# Disabled because Osaka-Mono isn't available on automation.
+# skip-if(!cocoaWidget) == osaka-mono.html osaka-mono-ref.html
+
+# Try to use Wingdings font (assumed present on Windows and macOS)
+random-if(!winWidget&&!cocoaWidget) == wingdings-1.html wingdings-1-ref.html
+random-if(!winWidget&&!cocoaWidget) != wingdings-1.html wingdings-1-notref.html
+
+== illformed-lang-tags-1.html illformed-lang-tags-1.html?ref
+
+# Test for legacy name of Hiragino Sans, expected to work on macOS only
+skip-if(!cocoaWidget) != hiragino-kaku-1.html hiragino-kaku-1-notref.html
+
+pref(ui.font.menu,"serif") == system-font-pref.html system-font-pref.html
+# These make some assumptions about the menu font that seem to hold across
+# platforms, like menu being a sans font by default.
+test-pref(ui.font.menu,"serif") != system-font-pref.html system-font-pref.html
+pref(ui.font.menu,"serif") test-pref(ui.font.menu.italic,true) != system-font-pref.html system-font-pref.html
+pref(ui.font.menu,"serif") test-pref(ui.font.menu.size,"2.0") != system-font-pref.html system-font-pref.html
+pref(ui.font.menu,"serif") test-pref(ui.font.menu.weight,"800") != system-font-pref.html system-font-pref.html
+
+# Check that localized font name works, even when visibility level is restricted.
+# (Assumes Windows has Yu Gothic present.)
+skip-if(!winWidget) pref(layout.css.font-visibility,1) == 1850672-1.html 1850672-1-ref.html
+
+# Reset default prefs.
+defaults
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 0000000000..d021f51d02
--- /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 0000000000..cb4671f4d8
--- /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 0000000000..a42b81c836
--- /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 0000000000..81f45f66de
--- /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 0000000000..2124a68742
--- /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 0000000000..a6c1245b39
--- /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 0000000000..267e50b4ca
--- /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 0000000000..904fcd8f3b
--- /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 0000000000..2a8fde16cb
--- /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 0000000000..ef3b0b1ed1
--- /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 0000000000..9d5b28369f
--- /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 0000000000..77588b06bb
--- /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 0000000000..b5a8f0d69e
--- /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 0000000000..7da903c146
--- /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 0000000000..0cc51da48f
--- /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 0000000000..4db379273c
--- /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 0000000000..e3fa7fb6af
--- /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 0000000000..3885119112
--- /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 0000000000..2065e31583
--- /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 0000000000..bb856c0c36
--- /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-font-pref.html b/layout/reftests/font-matching/system-font-pref.html
new file mode 100644
index 0000000000..97411bb8f9
--- /dev/null
+++ b/layout/reftests/font-matching/system-font-pref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<div style="font: menu">Hey
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 0000000000..84deb813a1
--- /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 0000000000..d06d5259cb
--- /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 0000000000..efe6f93739
--- /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 0000000000..2e1b02655c
--- /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 0000000000..0ddd8c5d94
--- /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 0000000000..a704d234c4
--- /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 0000000000..5961caaf53
--- /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 0000000000..d7ffee3e97
--- /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 0000000000..844200111f
--- /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 0000000000..526ab817d8
--- /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 0000000000..afcabb396c
--- /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 0000000000..64cc1aded5
--- /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/system-ui-fallback-2-ref.html b/layout/reftests/font-matching/system-ui-fallback-2-ref.html
new file mode 100644
index 0000000000..6e60fefe18
--- /dev/null
+++ b/layout/reftests/font-matching/system-ui-fallback-2-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<h1 style="font-family: system-ui">&#1576;</h1>
diff --git a/layout/reftests/font-matching/system-ui-fallback-2.html b/layout/reftests/font-matching/system-ui-fallback-2.html
new file mode 100644
index 0000000000..a39c4e2a2d
--- /dev/null
+++ b/layout/reftests/font-matching/system-ui-fallback-2.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<h1 style="font-family: nonexistent, system-ui">&#1576;</h1>
diff --git a/layout/reftests/font-matching/system-ui-fallback-notref.html b/layout/reftests/font-matching/system-ui-fallback-notref.html
new file mode 100644
index 0000000000..6484bd2e6d
--- /dev/null
+++ b/layout/reftests/font-matching/system-ui-fallback-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<div style="font:36px system-ui, sans-serif">你好</div>
diff --git a/layout/reftests/font-matching/system-ui-fallback.html b/layout/reftests/font-matching/system-ui-fallback.html
new file mode 100644
index 0000000000..1710dc1405
--- /dev/null
+++ b/layout/reftests/font-matching/system-ui-fallback.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<!--
+  NOTE(emilio): The rendering _could_ be the same if the system-ui font
+  supported the glyphs, but we rely on it not doing so for now.
+
+  When we implement proper multi-lingual font support (at least on macOS), this
+  is expected to render the same
+-->
+<div style="font:36px system-ui, serif">你好</div>
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 0000000000..f985dac4f6
--- /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 0000000000..d64a716f21
--- /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 0000000000..a7b27d312a
--- /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 0000000000..bdce065ecf
--- /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 0000000000..8f216c27f3
--- /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 0000000000..360d875ad5
--- /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 0000000000..4115999093
--- /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 0000000000..49647aea01
--- /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 0000000000..56cf4d7432
--- /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 0000000000..4c4461ab03
--- /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 0000000000..a170d3a35b
--- /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 0000000000..9c61689c45
--- /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 0000000000..53888decd0
--- /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 0000000000..6b2ad74ee7
--- /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>
diff --git a/layout/reftests/font-matching/wingdings-1-notref.html b/layout/reftests/font-matching/wingdings-1-notref.html
new file mode 100644
index 0000000000..83acbacd0e
--- /dev/null
+++ b/layout/reftests/font-matching/wingdings-1-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+body {
+  font: 16px/2 sans-serif;
+}
+</style>
+<body>
+Trying the Wingdings font: <span>abcdef 12345</span>
diff --git a/layout/reftests/font-matching/wingdings-1-ref.html b/layout/reftests/font-matching/wingdings-1-ref.html
new file mode 100644
index 0000000000..898559baa3
--- /dev/null
+++ b/layout/reftests/font-matching/wingdings-1-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+body {
+  font: 16px/2 sans-serif;
+}
+span {
+  font-family: Wingdings, sans-serif;
+}
+</style>
+<body>
+Trying the Wingdings font:
+<span>&#xf061;&#xf062;&#xf063;&#xf064;&#xf065;&#xf066;&#xf020;&#xf031;&#xf032;&#xf033;&#xf034;&#xf035;</span>
diff --git a/layout/reftests/font-matching/wingdings-1.html b/layout/reftests/font-matching/wingdings-1.html
new file mode 100644
index 0000000000..f3dd3e68bd
--- /dev/null
+++ b/layout/reftests/font-matching/wingdings-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+body {
+  font: 16px/2 sans-serif;
+}
+span {
+  font-family: Wingdings, sans-serif;
+}
+</style>
+<body>
+Trying the Wingdings font: <span>abcdef 12345</span>
-- 
cgit v1.2.3