Adding upstream version 115.7.0esr.upstream/115.7.0esr

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
commit: 36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree: 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/font-inflation
parent: Initial commit. (diff)
download: firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
174 files changed, 3267 insertions, 0 deletions
diff --git a/layout/reftests/font-inflation/bug707855-innerFrame-ref.html b/layout/reftests/font-inflation/bug707855-innerFrame-ref.html
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/layout/reftests/font-inflation/bug707855-innerFrame-ref.html
diff --git a/layout/reftests/font-inflation/bug707855-innerFrame.html b/layout/reftests/font-inflation/bug707855-innerFrame.html
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/layout/reftests/font-inflation/bug707855-innerFrame.html
diff --git a/layout/reftests/font-inflation/bug707855-ref.html b/layout/reftests/font-inflation/bug707855-ref.html
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/layout/reftests/font-inflation/bug707855-ref.html
diff --git a/layout/reftests/font-inflation/bug707855.html b/layout/reftests/font-inflation/bug707855.html
new file mode 100644
index 0000000000..e69de29bb2
--- /dev/null
+++ b/layout/reftests/font-inflation/bug707855.html
diff --git a/layout/reftests/font-inflation/bullet-1-ref.html b/layout/reftests/font-inflation/bullet-1-ref.html
new file mode 100644
index 0000000000..6f87b94075
--- /dev/null
+++ b/layout/reftests/font-inflation/bullet-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<style>
+ul, li { line-height: 1.0; font-size: 35px; }
+ul { width: 500px; margin: 0; padding: 0 }
+li { margin: 0 0 0 50px; padding: 0 }
+</style>
+<ul>
+  <li>item</li>
+</ul>
diff --git a/layout/reftests/font-inflation/bullet-1.html b/layout/reftests/font-inflation/bullet-1.html
new file mode 100644
index 0000000000..6433753fd6
--- /dev/null
+++ b/layout/reftests/font-inflation/bullet-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<style>
+ul, li { line-height: 1.0; font-size: 15px; }
+ul { width: 500px; margin: 0; padding: 0 }
+li { margin: 0 0 0 50px; padding: 0 }
+</style>
+<ul>
+  <li>item</li>
+</ul>
diff --git a/layout/reftests/font-inflation/consecutive-inline-ref.html b/layout/reftests/font-inflation/consecutive-inline-ref.html
new file mode 100644
index 0000000000..9d5d163f01
--- /dev/null
+++ b/layout/reftests/font-inflation/consecutive-inline-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<style>
+  div {
+    width: 450px;
+    font-size: 34px;
+  }
+
+  a {
+    font-weight: bold;
+    line-height: 1.1em;
+    color: blue;
+  }
+
+  a#first {
+    font-size: 34px;
+    font-style: italic;
+  }
+
+  a#second {
+    font-size: 40px;
+  }
+
+</style>
+<!--
+In a 450 px container, the minimum font size at 15em per line is 30px. This
+means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px and 30px
+gets mapped to 40px.
+-->
+<div>
+  <a id="first" href="">Hello</a><a id="second" href="">Worldz</a>
+</div>
diff --git a/layout/reftests/font-inflation/consecutive-inline.html b/layout/reftests/font-inflation/consecutive-inline.html
new file mode 100644
index 0000000000..bb2e4b8c4a
--- /dev/null
+++ b/layout/reftests/font-inflation/consecutive-inline.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<style>
+  div {
+    width: 450px;
+    font-size: 12px;
+  }
+
+  a {
+    font-weight: bold;
+    line-height: 1.1em;
+    color: blue;
+  }
+
+  a#first {
+    font-size: 12px;
+    font-style: italic;
+  }
+
+  a#second {
+    font-size: 30px;
+  }
+
+</style>
+<!--
+In a 450 px container, the minimum font size at 15em per line is 30px. This
+means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px and 30px
+gets mapped to 40px.
+-->
+<div>
+  <a id="first" href="">Hello</a><a id="second" href="">Worldz</a>
+</div>
diff --git a/layout/reftests/font-inflation/container-with-clamping-innerFrame-ref.html b/layout/reftests/font-inflation/container-with-clamping-innerFrame-ref.html
new file mode 100644
index 0000000000..966612ec45
--- /dev/null
+++ b/layout/reftests/font-inflation/container-with-clamping-innerFrame-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<style>
+	div { background: yellow }
+	div { font-size: 20px; line-height: 1.0; width: 450px }
+</style>
+<!--
+Without the patch for bug 707855, we have a 450px container, and the minimum font size
+at 15em per line is 30px. This means we map 0px-45px into 30px-45px, so 12px gets mapped
+to 34px.
+
+With the patch, then we have a 240px container, so the minimum font size
+at 15 em per line is 16px. So, we map 0px-24px into 16px-24px, so 12px gets
+mapped to 20px.
+-->
+<div>Test to see if too large of a container causes a giant escalation of the font size when font inflation is enabled.</div>
diff --git a/layout/reftests/font-inflation/container-with-clamping-innerFrame.html b/layout/reftests/font-inflation/container-with-clamping-innerFrame.html
new file mode 100644
index 0000000000..f6a0cec990
--- /dev/null
+++ b/layout/reftests/font-inflation/container-with-clamping-innerFrame.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<style>
+	div { background: yellow }
+	div { font-size: 12px; line-height: 1.0; width: 450px }
+</style>
+<!--
+Without the patch for bug 707855, we have a 450px container, and the minimum font size
+at 15em per line is 30px. This means we map 0px-45px into 30px-45px, so 12px gets mapped
+to 34px.
+
+With the patch, then we have a 240px container, so the minimum font size
+at 15 em per line is 16px. So, we map 0px-24px into 16px-24px, so 12px gets
+mapped to 20px.
+-->
+<div>Test to see if too large of a container causes a giant escalation of the font size when font inflation is enabled.</div>
diff --git a/layout/reftests/font-inflation/container-with-clamping-ref.html b/layout/reftests/font-inflation/container-with-clamping-ref.html
new file mode 100644
index 0000000000..74e73798eb
--- /dev/null
+++ b/layout/reftests/font-inflation/container-with-clamping-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+div { font-size: 12px; line-height: 1.0; width: 1200px }
+</style>
+<!--
+Without the patch for bug 707855, we have a 450px container, and the minimum font size
+at 15em per line is 30px. This means we map 0px-45px into 30px-45px, so 12px gets mapped
+to 34px.
+
+With the patch, then we have a 240px container, so the minimum font size
+at 15 em per line is 16px. So, we map 0px-24px into 16px-24px, so 12px gets
+mapped to 20px.
+-->
+<iframe src="container-with-clamping-innerFrame-ref.html" width="240" height="400">
+</iframe>
diff --git a/layout/reftests/font-inflation/container-with-clamping.html b/layout/reftests/font-inflation/container-with-clamping.html
new file mode 100644
index 0000000000..69afa734e3
--- /dev/null
+++ b/layout/reftests/font-inflation/container-with-clamping.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<!--
+Without the patch for bug 707855, we have a 450px container, and the minimum font size
+at 15em per line is 30px. This means we map 0px-45px into 30px-45px, so 12px gets mapped
+to 34px.
+
+With the patch, then we have a 240px container, so the minimum font size
+at 15 em per line is 16px. So, we map 0px-24px into 16px-24px, so 12px gets
+mapped to 20px.
+-->
+<iframe src="container-with-clamping-innerFrame.html" width="240" height="400">
+</iframe>
diff --git a/layout/reftests/font-inflation/css-transform-1-ref.html b/layout/reftests/font-inflation/css-transform-1-ref.html
new file mode 100644
index 0000000000..36ea266158
--- /dev/null
+++ b/layout/reftests/font-inflation/css-transform-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; width: 150px; line-height: 1.0; white-space: nowrap }
+span { -moz-transform-origin: 0 0; -moz-transform: scale(1.2); }
+</style>
+<div><span>Hello world</span></div>
diff --git a/layout/reftests/font-inflation/css-transform-1.html b/layout/reftests/font-inflation/css-transform-1.html
new file mode 100644
index 0000000000..7fc0e8fe53
--- /dev/null
+++ b/layout/reftests/font-inflation/css-transform-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; width: 450px; line-height: 1.0 }
+span { -moz-transform-origin: 0 0; -moz-transform: scale(1.2); }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><span>Hello world</span></div>
diff --git a/layout/reftests/font-inflation/css-transform-2-ref.html b/layout/reftests/font-inflation/css-transform-2-ref.html
new file mode 100644
index 0000000000..b0916faad8
--- /dev/null
+++ b/layout/reftests/font-inflation/css-transform-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; width: 150px; line-height: 1.0; white-space: nowrap }
+p { -moz-transform-origin: 0 0; margin: 0; -moz-transform: scale(1.2); }
+</style>
+<div><p>Hello world</p></div>
diff --git a/layout/reftests/font-inflation/css-transform-2.html b/layout/reftests/font-inflation/css-transform-2.html
new file mode 100644
index 0000000000..856ee8e2c6
--- /dev/null
+++ b/layout/reftests/font-inflation/css-transform-2.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; width: 450px; line-height: 1.0 }
+p { -moz-transform-origin: 0 0; margin: 0; -moz-transform: scale(1.2); }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><p>Hello world</p></div>
diff --git a/layout/reftests/font-inflation/decoration-1-ref.html b/layout/reftests/font-inflation/decoration-1-ref.html
new file mode 100644
index 0000000000..ce2b0c0ef0
--- /dev/null
+++ b/layout/reftests/font-inflation/decoration-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+div { font-size: 34px; line-height: 1.0; width: 450px }
+span { font-size: 36px }
+div { text-decoration: underline overline line-through }
+</style>
+<div>Hello <span>world</span></div>
diff --git a/layout/reftests/font-inflation/decoration-1.html b/layout/reftests/font-inflation/decoration-1.html
new file mode 100644
index 0000000000..9392fafcd1
--- /dev/null
+++ b/layout/reftests/font-inflation/decoration-1.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+div { font-size: 12px; line-height: 1.0; width: 450px }
+span { font-size: 18px }
+div { text-decoration: underline overline line-through }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px
+and 18px gets mapped to 36px.
+-->
+<div>Hello <span>world</span></div>
diff --git a/layout/reftests/font-inflation/disable-fontinfl-on-mobile-2.html b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-2.html
new file mode 100644
index 0000000000..d251decdeb
--- /dev/null
+++ b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-2.html
@@ -0,0 +1,20 @@
+<!--
+Without the patch for bug 706198, this website should not show up as inflated. That means
+that with a 450px container, the minimum font size with 15em per line should be 30px.
+So, we map 0px-45px into 30px-45px, and thus 12px gets mapped to 34px.
+
+With the patch, the text should be uninflated, which means that 12px should still be
+12px.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content='True' name='HandheldFriendly' />
+    <style>
+      p { font-size: 12px; line-height: 1.0;}
+    </style>
+    <body>
+      <p>Some uninflated text.</p>
+    </body>
+  </head>
+</html>
diff --git a/layout/reftests/font-inflation/disable-fontinfl-on-mobile-3.html b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-3.html
new file mode 100644
index 0000000000..0bd4eaca7c
--- /dev/null
+++ b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-3.html
@@ -0,0 +1,20 @@
+<!--
+Without the patch for bug 706198, this website should not show up as inflated. That means
+that with a 450px container, the minimum font size with 15em per line should be 30px.
+So, we map 0px-45px into 30px-45px, and thus 12px gets mapped to 34px.
+
+With the patch, the text should be uninflated, which means that 12px should still be
+12px.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
+    <style>
+      p { font-size: 12px; line-height: 1.0;}
+    </style>
+    <body>
+      <p>Some uninflated text.</p>
+    </body>
+  </head>
+</html>
diff --git a/layout/reftests/font-inflation/disable-fontinfl-on-mobile-5.html b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-5.html
new file mode 100644
index 0000000000..40149c9b58
--- /dev/null
+++ b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-5.html
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
+
+<!--
+The <meta name="viewport"> tag takes precedence over the doctype, so this
+should *not* be treated as a "mobile" site (bug 783565).
+-->
+<html>
+  <head>
+    <meta name="viewport" content="width=10000">
+    <style>
+      p { font-size: 12px; line-height: 1.0;}
+    </style>
+    <body>
+      <p>Some uninflated text.</p>
+    </body>
+  </head>
+</html>
diff --git a/layout/reftests/font-inflation/disable-fontinfl-on-mobile-ref.html b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-ref.html
new file mode 100644
index 0000000000..ab35ad7803
--- /dev/null
+++ b/layout/reftests/font-inflation/disable-fontinfl-on-mobile-ref.html
@@ -0,0 +1,19 @@
+<!--
+Without the patch for bug 706198, this website should not show up as inflated. That means
+that with a 450px container, the minimum font size with 15em per line should be 30px.
+So, we map 0px-45px into 30px-45px, and thus 12px gets mapped to 34px.
+
+With the patch, the text should be uninflated, which means that 12px should still be
+12px.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      p { font-size: 12px; line-height: 1.0;}
+    </style>
+    <body>
+      <p>Some uninflated text.</p>
+    </body>
+  </head>
+</html>
diff --git a/layout/reftests/font-inflation/disable-fontinfl-on-mobile.html b/layout/reftests/font-inflation/disable-fontinfl-on-mobile.html
new file mode 100644
index 0000000000..1e182b37f1
--- /dev/null
+++ b/layout/reftests/font-inflation/disable-fontinfl-on-mobile.html
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
+
+<!--
+Without the patch for bug 706198, this website should not show up as inflated. That means
+that with a 450px container, the minimum font size with 15em per line should be 30px.
+So, we map 0px-45px into 30px-45px, and thus 12px gets mapped to 34px.
+
+With the patch, the text should be uninflated, which means that 12px should still be
+12px.
+-->
+<html>
+  <head>
+    <style>
+      p { font-size: 12px; line-height: 1.0;}
+    </style>
+    <body>
+      <p>Some uninflated text.</p>
+    </body>
+  </head>
+</html>
diff --git a/layout/reftests/font-inflation/fixed-height-body-child-ref.html b/layout/reftests/font-inflation/fixed-height-body-child-ref.html
new file mode 100644
index 0000000000..1b492bf5cb
--- /dev/null
+++ b/layout/reftests/font-inflation/fixed-height-body-child-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<!--
+The minimum font size at 15em per line in a 450px container is 30px. This means we map 0px-45px
+into 30px-45px, so 12px gets mapped to 34px.
+-->
+<html>
+  <head>
+    <style>
+      body {
+        height: 100%;
+        /*
+         * We need overflow:hidden because we can't show a scrollbar due
+         * to https://bugzilla.mozilla.org/show_bug.cgi?id=743805 .
+         */
+        overflow: hidden;
+      }
+
+      div {
+        width: 450px;
+      }
+
+      p {
+        line-height: 1.1;
+        font-size: 34px;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <p>Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cookstove, a cupboard for the dishes, a table, three or four chairs, and the beds. Uncle Henry and Aunt Em had a big bed in one corner, and Dorothy a little bed in another corner. There was no garret at all, and no cellar--except a small hole dug in the ground, called a cyclone cellar, where the family could go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the floor, from which a ladder led down into the small, dark hole.</p>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/font-inflation/fixed-height-body-child.html b/layout/reftests/font-inflation/fixed-height-body-child.html
new file mode 100644
index 0000000000..9efb024253
--- /dev/null
+++ b/layout/reftests/font-inflation/fixed-height-body-child.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<!--
+The minimum font size at 15em per line in a 450px container is 30px. This means we map 0px-45px
+into 30px-45px, so 12px gets mapped to 34px.
+-->
+<html>
+  <head>
+    <style>
+      body {
+        height: 100%;
+        /*
+         * We need overflow:hidden because we can't show a scrollbar due
+         * to https://bugzilla.mozilla.org/show_bug.cgi?id=743805 .
+         */
+        overflow: hidden;
+      }
+
+      div {
+        width: 450px;
+      }
+
+      p {
+        line-height: 1.1;
+        font-size: 12px;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <p>Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cookstove, a cupboard for the dishes, a table, three or four chairs, and the beds. Uncle Henry and Aunt Em had a big bed in one corner, and Dorothy a little bed in another corner. There was no garret at all, and no cellar--except a small hole dug in the ground, called a cyclone cellar, where the family could go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the floor, from which a ladder led down into the small, dark hole.</p>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/font-inflation/fixed-height-body-ref.html b/layout/reftests/font-inflation/fixed-height-body-ref.html
new file mode 100644
index 0000000000..785c407b2b
--- /dev/null
+++ b/layout/reftests/font-inflation/fixed-height-body-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<!--
+The minimum font size at 15em per line in a 450px container is 30px. This means we map 0px-45px
+into 30px-45px, so 12px gets mapped to 34px.
+-->
+<html>
+<head>
+  <style>
+    body {
+      height: 100%;
+      width: 450px;
+      line-height: 1.1;
+      font-size: 34px;
+      /*
+       * We need overflow:hidden because we can't show a scrollbar due
+       * to https://bugzilla.mozilla.org/show_bug.cgi?id=743805 .
+       */
+      overflow: hidden;
+    }
+  </style>
+</head>
+  <body>
+    Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cookstove, a cupboard for the dishes, a table, three or four chairs, and the beds. Uncle Henry and Aunt Em had a big bed in one corner, and Dorothy a little bed in another corner. There was no garret at all, and no cellar--except a small hole dug in the ground, called a cyclone cellar, where the family could go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the floor, from which a ladder led down into the small, dark hole.
+  </body>
+</html>
diff --git a/layout/reftests/font-inflation/fixed-height-body.html b/layout/reftests/font-inflation/fixed-height-body.html
new file mode 100644
index 0000000000..37919761ab
--- /dev/null
+++ b/layout/reftests/font-inflation/fixed-height-body.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<!--
+The minimum font size at 15em per line in a 450px container is 30px. This means we map 0px-45px
+into 30px-45px, so 12px gets mapped to 34px.
+-->
+<html>
+<head>
+  <style>
+    body {
+      height: 100%;
+      width: 450px;
+      line-height: 1.1;
+      font-size: 12px;
+      /*
+       * We need overflow:hidden because we can't show a scrollbar due
+       * to https://bugzilla.mozilla.org/show_bug.cgi?id=743805 .
+       */
+      overflow: hidden;
+    }
+  </style>
+</head>
+  <body>
+    Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cookstove, a cupboard for the dishes, a table, three or four chairs, and the beds. Uncle Henry and Aunt Em had a big bed in one corner, and Dorothy a little bed in another corner. There was no garret at all, and no cellar--except a small hole dug in the ground, called a cyclone cellar, where the family could go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the floor, from which a ladder led down into the small, dark hole.
+  </body>
+</html>
diff --git a/layout/reftests/font-inflation/fixed-width-body-viewport-ref.html b/layout/reftests/font-inflation/fixed-width-body-viewport-ref.html
new file mode 100644
index 0000000000..e4858590c4
--- /dev/null
+++ b/layout/reftests/font-inflation/fixed-width-body-viewport-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<!--
+Our body is 2000px wide, but the effective container size for font inflation will be clamped to the
+viewport width of 1000px (this test uses a custom value for browser.viewport.desktopWidth).
+The minimum font size at 20em per line in an 1000px container is 50px. This means we map 0px-75px
+into 50px-75px, so 12px gets mapped to 54px.
+-->
+<html>
+<head>
+  <style>
+    body {
+      width: 2000px;
+      line-height: 1.1;
+      font-size: 54px;
+      overflow: hidden;
+      -moz-text-size-adjust: none;
+    }
+  </style>
+</head>
+  <body>
+    PERSONS attempting to find a motive in this narrative will be prosecuted;
+    persons attempting to find a moral in it will be banished;
+    persons attempting to find a plot in it will be shot.<br>
+    BY ORDER OF THE AUTHOR,<br>
+    Per G.G., Chief of Ordnance.
+  </body>
+</html>
diff --git a/layout/reftests/font-inflation/fixed-width-body-viewport.html b/layout/reftests/font-inflation/fixed-width-body-viewport.html
new file mode 100644
index 0000000000..b33a1d0938
--- /dev/null
+++ b/layout/reftests/font-inflation/fixed-width-body-viewport.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<!--
+Our body is 2000px wide, but the effective container size for font inflation will be clamped to the
+viewport width of 1000px (this test uses a custom value for browser.viewport.desktopWidth).
+The minimum font size at 20em per line in an 1000px container is 50px. This means we map 0px-75px
+into 50px-75px, so 12px gets mapped to 54px.
+-->
+<html>
+<head>
+  <style>
+    body {
+      width: 2000px;
+      line-height: 1.1;
+      font-size: 12px;
+      overflow: hidden;
+    }
+  </style>
+</head>
+  <body>
+    PERSONS attempting to find a motive in this narrative will be prosecuted;
+    persons attempting to find a moral in it will be banished;
+    persons attempting to find a plot in it will be shot.<br>
+    BY ORDER OF THE AUTHOR,<br>
+    Per G.G., Chief of Ordnance.
+  </body>
+</html>
diff --git a/layout/reftests/font-inflation/fixed-width-viewport-inflation-ref.html b/layout/reftests/font-inflation/fixed-width-viewport-inflation-ref.html
new file mode 100644
index 0000000000..30f3bd9c02
--- /dev/null
+++ b/layout/reftests/font-inflation/fixed-width-viewport-inflation-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<html>
+  <head>
+    <meta name="viewport" content="width=801"/>
+    <style>
+      :root { scrollbar-color: transparent transparent; }
+      div { width: 450px; font-size: 34px; line-height: 1.0; }
+    </style>
+    <script>
+      if (location.search)
+        document.documentElement.setAttribute("reftest-zoom", location.search.substr(1))
+    </script>
+  </head>
+  <body>
+    <div id="outer">
+      <div>Some inflated text.</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/font-inflation/fixed-width-viewport-inflation.html b/layout/reftests/font-inflation/fixed-width-viewport-inflation.html
new file mode 100644
index 0000000000..f7fcfb2f2b
--- /dev/null
+++ b/layout/reftests/font-inflation/fixed-width-viewport-inflation.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<html>
+  <head>
+    <meta name="viewport" content="width=801"/>
+    <style>
+      :root { scrollbar-color: transparent transparent; }
+      div { width: 450px; font-size: 12px; line-height: 1.0; }
+    </style>
+    <script>
+      if (location.search)
+        document.documentElement.setAttribute("reftest-zoom", location.search.substr(1))
+    </script>
+  </head>
+  <body>
+    <div id="outer">
+      <div>Some inflated text.</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/font-inflation/fixed-width-viewport-no-inflation.html b/layout/reftests/font-inflation/fixed-width-viewport-no-inflation.html
new file mode 100644
index 0000000000..2e43ad619c
--- /dev/null
+++ b/layout/reftests/font-inflation/fixed-width-viewport-no-inflation.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<html>
+  <head>
+    <meta name="viewport" content="width=800"/>
+    <style>
+      div { width: 450px; font-size: 12px; line-height: 1.0; }
+    </style>
+    <script>
+      if (location.search)
+        document.documentElement.setAttribute("reftest-zoom", location.search.substr(1))
+    </script>
+  </head>
+  <body>
+    <div id="outer">
+      <div>Some uninflated text.</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/font-inflation/form-button-fixed-height-ref.html b/layout/reftests/font-inflation/form-button-fixed-height-ref.html
new file mode 100644
index 0000000000..c59bba5044
--- /dev/null
+++ b/layout/reftests/font-inflation/form-button-fixed-height-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 34px;
+  }
+
+  button {
+    font-size: 12px;
+    height: 20px;
+  }
+</style>
+<!--
+Because this button has a fixed height,
+font inflation should be disabled.
+-->
+<div class="outer">
+  <form><button>Add Comment</button></form>
+</div>
diff --git a/layout/reftests/font-inflation/form-button-fixed-height.html b/layout/reftests/font-inflation/form-button-fixed-height.html
new file mode 100644
index 0000000000..29cb6fa860
--- /dev/null
+++ b/layout/reftests/font-inflation/form-button-fixed-height.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 12px;
+  }
+
+  button {
+    font-size: 12px;
+    height: 20px;
+  }
+
+  .invisible {
+    color: white;
+  }
+</style>
+<!--
+Because this button has a fixed height,
+font inflation should be disabled.
+-->
+<div class="outer">
+  <form><button>Add Comment</button></form>
+  <p class="invisible">Some text to ensure the button gets inflated - if it
+  wasn't size-restricted, that is - but which shouldn't influence the visual
+  result otherwise.</p>
+</div>
diff --git a/layout/reftests/font-inflation/form-button-fixed-width-ref.html b/layout/reftests/font-inflation/form-button-fixed-width-ref.html
new file mode 100644
index 0000000000..e9c564397b
--- /dev/null
+++ b/layout/reftests/font-inflation/form-button-fixed-width-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 34px;
+  }
+
+  button {
+    font-size: 12px;
+    width: 110px;
+  }
+</style>
+<!--
+Because this button has a fixed width,
+font inflation should be disabled.
+-->
+<div class="outer">
+  <form><button>Add Comment</button></form>
+</div>
diff --git a/layout/reftests/font-inflation/form-button-fixed-width.html b/layout/reftests/font-inflation/form-button-fixed-width.html
new file mode 100644
index 0000000000..8cad80deb1
--- /dev/null
+++ b/layout/reftests/font-inflation/form-button-fixed-width.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 12px;
+  }
+
+  button {
+    font-size: 12px;
+    width: 110px;
+  }
+
+  .invisible {
+    color: white;
+  }
+</style>
+<!--
+Because this button has a fixed width,
+font inflation should be disabled.
+-->
+<div class="outer">
+  <form><button>Add Comment</button></form>
+  <p class="invisible">Some text to ensure the button gets inflated - if it
+  wasn't size-restricted, that is - but which shouldn't influence the visual
+  result otherwise.</p>
+</div>
diff --git a/layout/reftests/font-inflation/form-button-ref.html b/layout/reftests/font-inflation/form-button-ref.html
new file mode 100644
index 0000000000..98f5280300
--- /dev/null
+++ b/layout/reftests/font-inflation/form-button-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 34px;
+  }
+
+  button {
+    font-size: 34px;
+  }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div class="outer">
+  <form><button>Add Comment</button></form>
+</div>
diff --git a/layout/reftests/font-inflation/form-button.html b/layout/reftests/font-inflation/form-button.html
new file mode 100644
index 0000000000..68fda9c500
--- /dev/null
+++ b/layout/reftests/font-inflation/form-button.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 12px;
+  }
+
+  button {
+    font-size: 12px;
+  }
+
+  .invisible {
+    color: white;
+  }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div class="outer">
+  <form><button>Add Comment</button></form>
+  <p class="invisible">Some text to ensure the button gets inflated - if it
+  isn't size-restricted, that is - but which shouldn't influence the visual
+  result otherwise.</p>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-1-ref.html b/layout/reftests/font-inflation/height-constraint-percent-1-ref.html
new file mode 100644
index 0000000000..91993e60bb
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; width: 450px }
+#center-block { height: 80%;}
+#center-col { background: yellow; }
+p { margin-top: 0px; }
+
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div id="center-block">
+<div id="center-col">
+    <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-1.html b/layout/reftests/font-inflation/height-constraint-percent-1.html
new file mode 100644
index 0000000000..bab1273640
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { height: 80%; }
+#center-col { background: yellow }
+p { margin-top: 0px; }
+
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div id="center-block">
+<div id="center-col">
+    <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-2-ref.html b/layout/reftests/font-inflation/height-constraint-percent-2-ref.html
new file mode 100644
index 0000000000..ffee64c8a5
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; width: 450px }
+#center-block { max-height: 80%;}
+#center-col { background: yellow; }
+p { margin-top: 0px; }
+
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div id="center-block">
+<div id="center-col">
+    <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-2.html b/layout/reftests/font-inflation/height-constraint-percent-2.html
new file mode 100644
index 0000000000..a54f68fb80
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { max-height: 80%; }
+#center-col { background: yellow }
+p { margin-top: 0px; }
+
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div id="center-block">
+<div id="center-col">
+    <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-3-ref.html b/layout/reftests/font-inflation/height-constraint-percent-3-ref.html
new file mode 100644
index 0000000000..ba31368112
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-3-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; width: 450px }
+#center-block { height: calc(80% + 5%); }
+#center-col { background: yellow; }
+p { margin-top: 0px; }
+
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div id="center-block">
+<div id="center-col">
+    <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-3.html b/layout/reftests/font-inflation/height-constraint-percent-3.html
new file mode 100644
index 0000000000..165fdc70ff
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-3.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { height: calc(80% + 5%); }
+#center-col { background: yellow }
+p { margin-top: 0px; }
+
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div id="center-block">
+<div id="center-col">
+    <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-4-ref.html b/layout/reftests/font-inflation/height-constraint-percent-4-ref.html
new file mode 100644
index 0000000000..440bac443e
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-4-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { height: 80%; }
+#center-col { background: yellow }
+#containing-block { height: 800px; }
+p { margin-top: 0px; }
+
+</style>
+<!--
+Because the height of the containing block is constrained, the percent height should also
+be constrained, resulting in font inflation being disabled.
+-->
+<div id="containing-block">
+  <div id="center-block">
+    <div id="center-col">
+      <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-4.html b/layout/reftests/font-inflation/height-constraint-percent-4.html
new file mode 100644
index 0000000000..440bac443e
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-4.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { height: 80%; }
+#center-col { background: yellow }
+#containing-block { height: 800px; }
+p { margin-top: 0px; }
+
+</style>
+<!--
+Because the height of the containing block is constrained, the percent height should also
+be constrained, resulting in font inflation being disabled.
+-->
+<div id="containing-block">
+  <div id="center-block">
+    <div id="center-col">
+      <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-5-ref.html b/layout/reftests/font-inflation/height-constraint-percent-5-ref.html
new file mode 100644
index 0000000000..eee590dd29
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-5-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { height: 80%; }
+#center-col { background: yellow }
+#containing-block { height: calc(400px + 20px); }
+p { margin-top: 0px; }
+
+</style>
+<!--
+Because the height of the containing block is constrained, the percent height should also
+be constrained, resulting in font inflation being disabled.
+-->
+<div id="containing-block">
+  <div id="center-block">
+    <div id="center-col">
+      <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-5.html b/layout/reftests/font-inflation/height-constraint-percent-5.html
new file mode 100644
index 0000000000..eee590dd29
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-5.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { height: 80%; }
+#center-col { background: yellow }
+#containing-block { height: calc(400px + 20px); }
+p { margin-top: 0px; }
+
+</style>
+<!--
+Because the height of the containing block is constrained, the percent height should also
+be constrained, resulting in font inflation being disabled.
+-->
+<div id="containing-block">
+  <div id="center-block">
+    <div id="center-col">
+      <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-6-ref.html b/layout/reftests/font-inflation/height-constraint-percent-6-ref.html
new file mode 100644
index 0000000000..d770afd6e6
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-6-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; width: 450px }
+#center-block { height: 400px; }
+#center-col { background: yellow; }
+p { margin-top: 0px; }
+
+</style>
+<!--
+Because the height is constrained, this should not be inflated.
+-->
+<div id="center-block">
+<div id="center-col">
+    <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-6.html b/layout/reftests/font-inflation/height-constraint-percent-6.html
new file mode 100644
index 0000000000..cb241fda97
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-6.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { height: 400px; }
+#center-col { background: yellow }
+p { margin-top: 0px; }
+
+</style>
+<!--
+Because the height is constrained, this should not be inflated.
+-->
+<div id="center-block">
+<div id="center-col">
+    <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-7-ref.html b/layout/reftests/font-inflation/height-constraint-percent-7-ref.html
new file mode 100644
index 0000000000..6b74c83b16
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-7-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { max-height: 400px; }
+#center-col { background: yellow }
+p { margin-top: 0px; }
+
+</style>
+<!--
+Because the max height is constrained, this should not be inflated.
+-->
+<div id="center-block">
+<div id="center-col">
+    <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-7.html b/layout/reftests/font-inflation/height-constraint-percent-7.html
new file mode 100644
index 0000000000..6b74c83b16
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-7.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { max-height: 400px; }
+#center-col { background: yellow }
+p { margin-top: 0px; }
+
+</style>
+<!--
+Because the max height is constrained, this should not be inflated.
+-->
+<div id="center-block">
+<div id="center-col">
+    <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-8-ref.html b/layout/reftests/font-inflation/height-constraint-percent-8-ref.html
new file mode 100644
index 0000000000..9f71de00d4
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-8-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 34px; width: 450px }
+#center-block { height: 80%; }
+#containing-block { height: 80%; }
+#center-col { background: yellow }
+p { margin-top: 0px; }
+
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div id="containing-block">
+  <div id="center-block">
+    <div id="center-col">
+      <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/height-constraint-percent-8.html b/layout/reftests/font-inflation/height-constraint-percent-8.html
new file mode 100644
index 0000000000..be5ec15d43
--- /dev/null
+++ b/layout/reftests/font-inflation/height-constraint-percent-8.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+div { margin-top: 0; font-size: 12px; width: 450px }
+#center-block { height: 80%; }
+#containing-block { height: 80%; }
+#center-col { background: yellow }
+p { margin-top: 0px; }
+
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div id="containing-block">
+  <div id="center-block">
+    <div id="center-col">
+      <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/input-checkbox.html b/layout/reftests/font-inflation/input-checkbox.html
new file mode 100644
index 0000000000..8c2edc87aa
--- /dev/null
+++ b/layout/reftests/font-inflation/input-checkbox.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html><head>
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<style>
+body { width: 450px }
+input { font-size: 12px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+</head>
+<body><input type="checkbox">I have a bike</body>
+</html>
+\ No newline at end of file
diff --git a/layout/reftests/font-inflation/input-radio.html b/layout/reftests/font-inflation/input-radio.html
new file mode 100644
index 0000000000..2ee3d2f14d
--- /dev/null
+++ b/layout/reftests/font-inflation/input-radio.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
+</style>
+<div><input type="radio">In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.</div>
+\ No newline at end of file
diff --git a/layout/reftests/font-inflation/input-text-1-height-ref.html b/layout/reftests/font-inflation/input-text-1-height-ref.html
new file mode 100644
index 0000000000..7f50010017
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-1-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; width: 200px }
+input { height: 50px }
+</style>
+<!--
+Because this input has a fixed height (and also a fixed-width), font
+inflation should be disabled.
+-->
+<div><input type="text" value="Hello world"></div>
diff --git a/layout/reftests/font-inflation/input-text-1-height.html b/layout/reftests/font-inflation/input-text-1-height.html
new file mode 100644
index 0000000000..7f50010017
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-1-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; width: 200px }
+input { height: 50px }
+</style>
+<!--
+Because this input has a fixed height (and also a fixed-width), font
+inflation should be disabled.
+-->
+<div><input type="text" value="Hello world"></div>
diff --git a/layout/reftests/font-inflation/input-text-1-noheight-ref.html b/layout/reftests/font-inflation/input-text-1-noheight-ref.html
new file mode 100644
index 0000000000..52132e4f93
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-1-noheight-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; line-height: 1.0; width: 450px }
+input { font-size: 12px; width: 200px }
+</style>
+<!--
+Because the width of the input element is constrained, font inflation
+should be disabled for the input element, but not the div containing
+it.
+-->
+<div>test<input type="text" value="Hello world"></div>
diff --git a/layout/reftests/font-inflation/input-text-1-noheight.html b/layout/reftests/font-inflation/input-text-1-noheight.html
new file mode 100644
index 0000000000..8606b4eb96
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-1-noheight.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; width: 200px }
+</style>
+<!--
+Because the width of the input element is constrained, font inflation
+should be disabled for the input element, but not the div containing
+it.
+-->
+<div>test<input type="text" value="Hello world"></div>
diff --git a/layout/reftests/font-inflation/input-text-2-height-ref.html b/layout/reftests/font-inflation/input-text-2-height-ref.html
new file mode 100644
index 0000000000..055dd5c389
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-2-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
+input { height: 50px }
+</style>
+<!--
+Because this input has a fixed height (and also a fixed width), font
+inflation should be disabled.
+-->
+<div><input type="text" value="Hello world" size="15"></div>
diff --git a/layout/reftests/font-inflation/input-text-2-height.html b/layout/reftests/font-inflation/input-text-2-height.html
new file mode 100644
index 0000000000..055dd5c389
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-2-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
+input { height: 50px }
+</style>
+<!--
+Because this input has a fixed height (and also a fixed width), font
+inflation should be disabled.
+-->
+<div><input type="text" value="Hello world" size="15"></div>
diff --git a/layout/reftests/font-inflation/input-text-2-noheight-ref.html b/layout/reftests/font-inflation/input-text-2-noheight-ref.html
new file mode 100644
index 0000000000..f9f7335b96
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-2-noheight-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; line-height: 1.0; width: 450px }
+input { font-size: 34px; }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><input type="text" value="Hello world" size="15"></div>
diff --git a/layout/reftests/font-inflation/input-text-2-noheight.html b/layout/reftests/font-inflation/input-text-2-noheight.html
new file mode 100644
index 0000000000..331401ef34
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-2-noheight.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><input type="text" value="Hello world" size="15"></div>
diff --git a/layout/reftests/font-inflation/input-text-3-height-ref.html b/layout/reftests/font-inflation/input-text-3-height-ref.html
new file mode 100644
index 0000000000..16a0877f18
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-3-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
+input { height: 50px }
+</style>
+<!--
+Because this input has a fixed height (and also a fixed-width), font
+inflation should be disabled.
+-->
+<div><input type="text" value="Hello world"></div>
diff --git a/layout/reftests/font-inflation/input-text-3-height.html b/layout/reftests/font-inflation/input-text-3-height.html
new file mode 100644
index 0000000000..16a0877f18
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-3-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
+input { height: 50px }
+</style>
+<!--
+Because this input has a fixed height (and also a fixed-width), font
+inflation should be disabled.
+-->
+<div><input type="text" value="Hello world"></div>
diff --git a/layout/reftests/font-inflation/input-text-3-noheight-ref.html b/layout/reftests/font-inflation/input-text-3-noheight-ref.html
new file mode 100644
index 0000000000..6ca0c03f2d
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-3-noheight-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; line-height: 1.0; width: 450px }
+input { font-size: 34px; }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><input type="text" value="Hello world"></div>
diff --git a/layout/reftests/font-inflation/input-text-3-noheight.html b/layout/reftests/font-inflation/input-text-3-noheight.html
new file mode 100644
index 0000000000..6e8c055354
--- /dev/null
+++ b/layout/reftests/font-inflation/input-text-3-noheight.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+input { font-size: 12px; }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><input type="text" value="Hello world"></div>
diff --git a/layout/reftests/font-inflation/intrinsic-fit-1a-ref.html b/layout/reftests/font-inflation/intrinsic-fit-1a-ref.html
new file mode 100644
index 0000000000..389ac58282
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-fit-1a-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 10px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  width: 60px;
+  font: 12px Ahem;
+}
+</style>
+<!--
+In a 60px container, the minimum font size at 15em per line is 4px.
+-->
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-fit-1a.html b/layout/reftests/font-inflation/intrinsic-fit-1a.html
new file mode 100644
index 0000000000..8f4a03dd0b
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-fit-1a.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 10px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  width: -moz-fit-content; /* computes to 60px */
+  font: 12px Ahem;
+}
+</style>
+<!--
+In a 60px container, the minimum font size at 15em per line is 4px.
+-->
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-fit-1b-ref.html b/layout/reftests/font-inflation/intrinsic-fit-1b-ref.html
new file mode 100644
index 0000000000..ee6a28c38c
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-fit-1b-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 450px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  width: 300px;
+  font: 24px Ahem;
+}
+</style>
+<!--
+In a 300px container, the minimum font size at 15em per line is 20px.
+This means we map 0px-30px into 20px-30px, so 12px gets mapped to 24px.
+-->
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-fit-1b.html b/layout/reftests/font-inflation/intrinsic-fit-1b.html
new file mode 100644
index 0000000000..ecd1bc6498
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-fit-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 450px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  width: -moz-fit-content; /* computes to 300px */
+  font: 12px Ahem;
+}
+</style>
+<!--
+In a 300px container, the minimum font size at 15em per line is 20px.
+This means we map 0px-30px into 20px-30px, so 12px gets mapped to 24px.
+-->
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-fit-1c-ref.html b/layout/reftests/font-inflation/intrinsic-fit-1c-ref.html
new file mode 100644
index 0000000000..75bf2ef98e
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-fit-1c-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 150px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  width: 150px;
+  font: 14px Ahem;
+}
+</style>
+<!--
+In a 150px container, the minimum font size at 15em per line is 10px.
+This means we map 0px-15px into 10px-15px, so 12px gets mapped to 14px.
+-->
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-fit-1c.html b/layout/reftests/font-inflation/intrinsic-fit-1c.html
new file mode 100644
index 0000000000..7fdb9380b9
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-fit-1c.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 150px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  width: -moz-fit-content; /* computes to 150px */
+  font: 12px Ahem;
+}
+</style>
+<!--
+In a 150px container, the minimum font size at 15em per line is 10px.
+This means we map 0px-15px into 10px-15px, so 12px gets mapped to 14px.
+-->
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-fit-2a.html b/layout/reftests/font-inflation/intrinsic-fit-2a.html
new file mode 100644
index 0000000000..585bbcf823
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-fit-2a.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 10px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  float: left;
+  width: auto; /* computes to 60px */
+  font: 12px Ahem;
+}
+</style>
+<!--
+In a 60px container, the minimum font size at 15em per line is 4px.
+-->
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-fit-2b.html b/layout/reftests/font-inflation/intrinsic-fit-2b.html
new file mode 100644
index 0000000000..5b121c81b2
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-fit-2b.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 450px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  float: left;
+  width: auto; /* computes to 300px */
+  font: 12px Ahem;
+}
+</style>
+<!--
+In a 300px container, the minimum font size at 15em per line is 20px.
+This means we map 0px-30px into 20px-30px, so 12px gets mapped to 24px.
+-->
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-fit-2c.html b/layout/reftests/font-inflation/intrinsic-fit-2c.html
new file mode 100644
index 0000000000..1614d893ae
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-fit-2c.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 150px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  float: left;
+  width: auto; /* computes to 150px */
+  font: 12px Ahem;
+}
+</style>
+<!--
+In a 150px container, the minimum font size at 15em per line is 10px.
+This means we map 0px-15px into 10px-15px, so 12px gets mapped to 14px.
+-->
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-max-1-ref.html b/layout/reftests/font-inflation/intrinsic-max-1-ref.html
new file mode 100644
index 0000000000..862b0e3f08
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-max-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 450px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  width: 300px;
+  font: 24px Ahem;
+}
+</style>
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-max-1.html b/layout/reftests/font-inflation/intrinsic-max-1.html
new file mode 100644
index 0000000000..2300a124d1
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-max-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 450px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  width: max-content; /* computes to 300px */
+  font: 12px Ahem;
+}
+</style>
+<!--
+In a 300px container, the minimum font size at 15em per line is 20px.
+This means we map 0px-30px into 20px-30px, so 12px gets mapped to 24px.
+-->
+<p>This is tiny bit of text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-min-1-ref.html b/layout/reftests/font-inflation/intrinsic-min-1-ref.html
new file mode 100644
index 0000000000..70a044637d
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-min-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 450px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  width: 60px;
+  font: 12px Ahem;
+}
+</style>
+<!--
+In a 60px container, the minimum font size at 15em per line is 4px.
+-->
+<p>This is some text.</p>
diff --git a/layout/reftests/font-inflation/intrinsic-min-1.html b/layout/reftests/font-inflation/intrinsic-min-1.html
new file mode 100644
index 0000000000..afb98d4405
--- /dev/null
+++ b/layout/reftests/font-inflation/intrinsic-min-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<style>
+@font-face { font-family: Ahem; src: url(../fonts/Ahem.ttf); }
+html, body { margin: 0; padding: 0; }
+body { width: 450px }
+p {
+  margin: 0;
+  background: yellow;
+  color: blue;
+  width: min-content; /* computes to 60px */
+  font: 12px Ahem;
+}
+</style>
+<p>This is some text.</p>
diff --git a/layout/reftests/font-inflation/list-1-ref.html b/layout/reftests/font-inflation/list-1-ref.html
new file mode 100644
index 0000000000..43e66ad903
--- /dev/null
+++ b/layout/reftests/font-inflation/list-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<head>
+<style>
+div { background: yellow; line-height: 1.0; font-size: 12px; width: 480px; border: 1px solid red; }
+ol { padding-left: 120px; width: 400px;}
+li { font-size: 36px; }
+</style>
+</head>
+<!--
+In a 480px container, the minimum font size at 15em per line is 32px.
+This means we map 0px-48px into 32px-48px, so 12px gets mapped to 36px.
+The margins will be a little bit screwy, since we're fiddling with them
+to make the list rendering better.
+-->
+<body>
+<div>
+  <ol>
+    <li>Separate interface design from internals</li>
+    <li>Enable multiple user-interface strategies</li>
+    <li>Enable multiple-platform support</li>
+  </ol>
+</div>
+</body>
diff --git a/layout/reftests/font-inflation/list-1.html b/layout/reftests/font-inflation/list-1.html
new file mode 100644
index 0000000000..73adb1c622
--- /dev/null
+++ b/layout/reftests/font-inflation/list-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<head>
+<style>
+div { background: yellow; line-height: 1.0; border: 1px solid red; font-size: 12px; width: 480px; }
+ol { width: 480px;}
+</style>
+</head>
+<!--
+In a 480px container, the minimum font size at 15em per line is 32px.
+This means we map 0px-48px into 32px-48px, so 12px gets mapped to 36px.
+-->
+<body>
+<div>
+  <ol>
+    <li>Separate interface design from internals</li>
+    <li>Enable multiple user-interface strategies</li>
+    <li>Enable multiple-platform support</li>
+  </ol>
+</div>
+</body>
diff --git a/layout/reftests/font-inflation/maxRatio-1-ref.html b/layout/reftests/font-inflation/maxRatio-1-ref.html
new file mode 100644
index 0000000000..dce6c6d8e3
--- /dev/null
+++ b/layout/reftests/font-inflation/maxRatio-1-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+div { font-size: 24px; width: 450px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+However, because we've enabled the maxRatio at a value of 2.0, the mapping
+function, which would normally return 34px/12px, or about 2.83, now
+returns a ratio capped at 2.0, thus the actual font size is 24px.
+-->
+<div>Hello world</div>
diff --git a/layout/reftests/font-inflation/maxRatio-1.html b/layout/reftests/font-inflation/maxRatio-1.html
new file mode 100644
index 0000000000..0cbc120ae9
--- /dev/null
+++ b/layout/reftests/font-inflation/maxRatio-1.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+div { font-size: 12px; width: 450px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+However, because we've enabled the maxRatio at a value of 2.0, the mapping
+function, which would normally return 34px/12px, or about 2.83, now
+returns a ratio capped at 2.0, thus the actual font size is 24px.
+-->
+<div>Hello world</div>
diff --git a/layout/reftests/font-inflation/min-width-passes-1-ref.html b/layout/reftests/font-inflation/min-width-passes-1-ref.html
new file mode 100644
index 0000000000..1027e29d99
--- /dev/null
+++ b/layout/reftests/font-inflation/min-width-passes-1-ref.html
@@ -0,0 +1,23 @@
+<html>
+<head>
+<title>Bug Reproduction</title>
+</head>
+<style type="text/css">
+html, body {
+  /*
+   * Work around bug 759755 / bug 757179.  Setting overflow hidden
+   * avoids these bugs being triggered due to the hypothetical scrollbar
+   * reflows.
+   */
+  overflow: hidden;
+}
+table { width: 100% }
+body, table, tbody, tr, td {
+  margin: 0; border: none; padding: 0; border-spacing: 0;
+}
+</style>
+<body>
+  <h1 id="welcome">Welcome to Bugzilla</h1>
+  <input type="button" id="find" value="Quick Search"></input>
+</body>
+</html>
diff --git a/layout/reftests/font-inflation/min-width-passes-1.html b/layout/reftests/font-inflation/min-width-passes-1.html
new file mode 100644
index 0000000000..0ab18996d9
--- /dev/null
+++ b/layout/reftests/font-inflation/min-width-passes-1.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+<title>Bug Reproduction</title>
+</head>
+<style type="text/css">
+html, body {
+  /*
+   * Work around bug 759755 / bug 757179.  Setting overflow hidden
+   * avoids these bugs being triggered due to the hypothetical scrollbar
+   * reflows.
+   */
+  overflow: hidden;
+}
+table { width: 100% }
+body, table, tbody, tr, td {
+  margin: 0; border: none; padding: 0; border-spacing: 0;
+}
+</style>
+<body>
+<table><tr><td>
+  <h1 id="welcome">Welcome to Bugzilla</h1>
+  <input type="button" id="find" value="Quick Search"></input>
+</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/font-inflation/preformatted-text-ref.html b/layout/reftests/font-inflation/preformatted-text-ref.html
new file mode 100644
index 0000000000..0a847a8066
--- /dev/null
+++ b/layout/reftests/font-inflation/preformatted-text-ref.html
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+
+<!--
+This text is in a preformatted block, and should therefore not be inflated with the fix for bug 705446.
+-->
+<html>
+  <head>
+    <style>
+      pre { font-size: 12px; line-height: 1.0;}
+    </style>
+    <body>
+      <div>
+        <pre>
+             <div class="line" id="line1"><span style="color: red">Firefox</span> is quite neat</div>
+             <div class="line" id="line2">It browses the web fluidly</div>
+             <div class="line" id="line3">With no cares at all</div>
+        </pre>
+      </div>
+    </body>
+  </head>
+</html>
diff --git a/layout/reftests/font-inflation/preformatted-text.html b/layout/reftests/font-inflation/preformatted-text.html
new file mode 100644
index 0000000000..0a847a8066
--- /dev/null
+++ b/layout/reftests/font-inflation/preformatted-text.html
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html>
+
+<!--
+This text is in a preformatted block, and should therefore not be inflated with the fix for bug 705446.
+-->
+<html>
+  <head>
+    <style>
+      pre { font-size: 12px; line-height: 1.0;}
+    </style>
+    <body>
+      <div>
+        <pre>
+             <div class="line" id="line1"><span style="color: red">Firefox</span> is quite neat</div>
+             <div class="line" id="line2">It browses the web fluidly</div>
+             <div class="line" id="line3">With no cares at all</div>
+        </pre>
+      </div>
+    </body>
+  </head>
+</html>
diff --git a/layout/reftests/font-inflation/reftest.list b/layout/reftests/font-inflation/reftest.list
new file mode 100644
index 0000000000..20548830e7
--- /dev/null
+++ b/layout/reftests/font-inflation/reftest.list
@@ -0,0 +1,134 @@
+# The following tests were written before
+# font.size.inflation.lineThreshold was implemented, and thus assumed
+# that there wasn't a threshold of text required for inflation.  To run
+# them compatibly without having to rewrite all of them, we run them
+# with the lineThreshold preference explicitly set to zero.  However,
+# newer tests should probably focus more on testing nonzero values of
+# that preference.
+
+# The font-inflation code uses the meta-viewport tag as one of its inputs
+# when determining if font-inflation needs to be applied, so enable it for
+# these tests.
+defaults pref(dom.meta-viewport.enabled,true)
+
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) test-pref(font.size.inflation.maxRatio,200) == maxRatio-1.html maxRatio-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == text-1.html text-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == text-2.html text-2-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == text-3.html text-3-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == text-4.html text-4-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-1.html height-constraint-percent-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-2.html height-constraint-percent-2-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-3.html height-constraint-percent-3-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-4.html height-constraint-percent-4-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-5.html height-constraint-percent-5-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-6.html height-constraint-percent-6-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-7.html height-constraint-percent-7-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == height-constraint-percent-8.html height-constraint-percent-8-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == decoration-1.html decoration-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == bullet-1.html bullet-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-1-height.html input-text-1-height-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-1-noheight.html input-text-1-noheight-ref.html # bug 1540176
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-2-height.html input-text-2-height-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-2-noheight.html input-text-2-noheight-ref.html # bug 1540176
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-3-height.html input-text-3-height-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-3-noheight.html input-text-3-noheight-ref.html # bug 1540176
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == textarea-1.html textarea-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == textarea-2.html textarea-2-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == textarea-3.html textarea-3-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == css-transform-1.html css-transform-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) fuzzy(0-1,0-19) == css-transform-2.html css-transform-2-ref.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,0-102,0-1764) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == container-with-clamping.html container-with-clamping-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) load video-1.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-min-1.html intrinsic-min-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-max-1.html intrinsic-max-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-1a.html intrinsic-fit-1a-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-1b.html intrinsic-fit-1b-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-1c.html intrinsic-fit-1c-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-2a.html intrinsic-fit-1a-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-2b.html intrinsic-fit-1b-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == intrinsic-fit-2c.html intrinsic-fit-1c-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == select-listbox-1.html select-listbox-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != select-listbox-1.html select-listbox-1.html
+fuzzy(0-4,0-7) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == select-combobox-1.html select-combobox-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != select-combobox-1.html select-combobox-1.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == select-listbox-2.html select-listbox-2-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != select-listbox-2.html select-listbox-2.html
+fuzzy(0-1,0-4) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == select-combobox-2.html select-combobox-2-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != select-combobox-2.html select-combobox-2.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == select-combobox-3.html select-combobox-3-ref.html
+asserts-if(gtkWidget,0-4) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != input-checkbox.html input-checkbox.html
+asserts-if(gtkWidget,0-4) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != input-radio.html input-radio.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == disable-fontinfl-on-mobile.html disable-fontinfl-on-mobile-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == disable-fontinfl-on-mobile-2.html disable-fontinfl-on-mobile-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == disable-fontinfl-on-mobile-3.html disable-fontinfl-on-mobile-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) != disable-fontinfl-on-mobile-5.html disable-fontinfl-on-mobile-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == preformatted-text.html preformatted-text-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-height-body.html fixed-height-body-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-height-body-child.html fixed-height-body-child-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == consecutive-inline.html consecutive-inline-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == form-button-fixed-height.html form-button-fixed-height-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == form-button-fixed-width.html form-button-fixed-width-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == form-button.html form-button-ref.html
+
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-width-viewport-no-inflation.html     fixed-width-viewport-no-inflation.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-width-viewport-no-inflation.html?0.5 fixed-width-viewport-no-inflation.html?0.5
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-width-viewport-inflation.html        fixed-width-viewport-inflation-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == fixed-width-viewport-inflation.html?2.0    fixed-width-viewport-inflation-ref.html?2.0
+
+# Ordinarily, reftests use a browser.viewport.desktopWidth of 800px, same as the
+# size of the reftest document.  The failure condition of the test below however
+# depends on the initial window size being smaller than the viewport the
+# MobileViewportManager eventually calculates, so we use a bigger value here.
+pref(ui.useOverlayScrollbars,1) test-pref(font.size.inflation.emPerLine,20) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) test-pref(browser.viewport.desktopWidth,1000) == fixed-width-body-viewport.html fixed-width-body-viewport-ref.html
+
+# The tests in the groups below use nonzero values of the lineThreshold
+# preference.
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == text-1.html text-1.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) skip-if(cocoaWidget) == list-1.html list-1-ref.html # Bug 1434812
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-1a.html threshold-1a.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-1b.html threshold-1b-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-1c.html threshold-1c-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-2.html threshold-2-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-3.html threshold-3-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-float-1.html threshold-scope-float-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-float-2.html threshold-scope-float-2-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-float-overflow-1.html threshold-scope-float-overflow-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-float-overflow-2.html threshold-scope-float-overflow-2-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-cell-1.html threshold-scope-cell-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-cell-2.html threshold-scope-cell-2-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-cell-3.html threshold-scope-cell-3-ref.html
+
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-1.html threshold-scope-flex-container-1.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-2.html threshold-scope-flex-container-2.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-grid-container-1.html threshold-scope-grid-container-1.html
+pref(ui.useOverlayScrollbars,1) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-items-1.html threshold-scope-flex-container-items-1.html
+pref(ui.useOverlayScrollbars,1) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-flex-container-items-2.html threshold-scope-flex-container-items-2.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-scope-grid-container-items-1.html threshold-scope-grid-container-items-1.html
+
+fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-textarea-contents-under-1.html threshold-textarea-contents-under-1.html
+fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-textarea-contents-under-2.html threshold-textarea-contents-under-2.html
+fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-textarea-contents-at-1.html threshold-textarea-contents-at-1-ref.html
+fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-textarea-contents-at-2.html threshold-textarea-contents-at-2-ref.html
+fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-under-1.html threshold-input-text-contents-under-1.html
+fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-under-2.html threshold-input-text-contents-under-2.html
+fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-at-1.html threshold-input-text-contents-at-1-ref.html # bug 1540176
+fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-at-2.html threshold-input-text-contents-at-2-ref.html # bug 1540176
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-under-1.html threshold-select-listbox-contents-under-1.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-under-2.html threshold-select-listbox-contents-under-2.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-at-1.html threshold-select-listbox-contents-at-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-at-2.html threshold-select-listbox-contents-at-2-ref.html
+fuzzy-if(gtkWidget,0-1,0-8) fuzzy-if(Android,0-4,0-2) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-combobox-contents-under-1.html threshold-select-combobox-contents-under-1.html
+fuzzy-if(gtkWidget,0-1,0-8) fuzzy-if(Android,0-1,0-2) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) fuzzy-if(geckoview,0-4,0-2) == threshold-select-combobox-contents-under-2.html threshold-select-combobox-contents-under-2.html
+fuzzy(0-1,0-6) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-combobox-contents-at-1.html threshold-select-combobox-contents-at-1-ref.html
+fuzzy(0-1,0-6) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-combobox-contents-at-2.html threshold-select-combobox-contents-at-2-ref.html
+# End of nonzero lineThreshold preference group.
+
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == relevant-width-1.html relevant-width-1-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == relevant-width-overflow-1.html relevant-width-overflow-1-ref.html
+
+pref(font.size.inflation.emPerLine,15) pref(font.size.inflation.forceEnabled,true) pref(font.size.inflation.lineThreshold,0) == min-width-passes-1.html min-width-passes-1-ref.html
+
+random-if(gtkWidget) pref(font.size.inflation.emPerLine,15) pref(font.size.inflation.forceEnabled,true) == xul-reflow-1.html xul-reflow-1-ref.html
+
+# reset the default preferences
+defaults
diff --git a/layout/reftests/font-inflation/relevant-width-1-ref.html b/layout/reftests/font-inflation/relevant-width-1-ref.html
new file mode 100644
index 0000000000..90b67e1b6a
--- /dev/null
+++ b/layout/reftests/font-inflation/relevant-width-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; width: 450px }
+div.inner { width: 300px }
+</style>
+<div class="middle">
+  Text in middle.
+  <div class="inner">Text in inner.</div>
+</div>
diff --git a/layout/reftests/font-inflation/relevant-width-1.html b/layout/reftests/font-inflation/relevant-width-1.html
new file mode 100644
index 0000000000..814917786d
--- /dev/null
+++ b/layout/reftests/font-inflation/relevant-width-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style>
+div.outer { font-size: 12px; width: 600px }
+div.middle { width: 450px; }
+div.inner { width: 300px; }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div class="outer">
+  <div class="middle">
+    Text in middle.
+    <div class="inner">Text in inner.</div>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/relevant-width-overflow-1-ref.html b/layout/reftests/font-inflation/relevant-width-overflow-1-ref.html
new file mode 100644
index 0000000000..96f555569c
--- /dev/null
+++ b/layout/reftests/font-inflation/relevant-width-overflow-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; width: 450px }
+div.inner { width: 300px; overflow: hidden; }
+</style>
+<div class="middle">
+  Text in middle.
+  <div class="inner">Text in inner.</div>
+</div>
diff --git a/layout/reftests/font-inflation/relevant-width-overflow-1.html b/layout/reftests/font-inflation/relevant-width-overflow-1.html
new file mode 100644
index 0000000000..ca6bf57c71
--- /dev/null
+++ b/layout/reftests/font-inflation/relevant-width-overflow-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style>
+div.outer { font-size: 12px; width: 600px }
+div.middle { width: 450px; }
+div.inner { width: 300px; overflow: hidden; }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div class="outer">
+  <div class="middle">
+    Text in middle.
+    <div class="inner">Text in inner.</div>
+  </div>
+</div>
diff --git a/layout/reftests/font-inflation/select-combobox-1-ref.html b/layout/reftests/font-inflation/select-combobox-1-ref.html
new file mode 100644
index 0000000000..17d29405d1
--- /dev/null
+++ b/layout/reftests/font-inflation/select-combobox-1-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+body { width: 450px }
+body, select { font-size: 34px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<select><option>One</option><option>Two</option></select>
diff --git a/layout/reftests/font-inflation/select-combobox-1.html b/layout/reftests/font-inflation/select-combobox-1.html
new file mode 100644
index 0000000000..87b01d9bd9
--- /dev/null
+++ b/layout/reftests/font-inflation/select-combobox-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+body { width: 450px }
+body, select { font-size: 12px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<select><option>One</option><option>Two</option></select>
diff --git a/layout/reftests/font-inflation/select-combobox-2-ref.html b/layout/reftests/font-inflation/select-combobox-2-ref.html
new file mode 100644
index 0000000000..50c12dc928
--- /dev/null
+++ b/layout/reftests/font-inflation/select-combobox-2-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+body { width: 450px }
+body, select { font-size: 34px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<select>
+  <optgroup label="Counties">
+    <option>Arlington
+    <option>Fairfax
+    <option>Loudon
+    <option>Prince William
+  <optgroup label="Cities">
+    <option>Alexandria
+    <option>Falls Church
+    <option>Manassas
+    <option>Manassas Park
+</select>
diff --git a/layout/reftests/font-inflation/select-combobox-2.html b/layout/reftests/font-inflation/select-combobox-2.html
new file mode 100644
index 0000000000..19808ed1b0
--- /dev/null
+++ b/layout/reftests/font-inflation/select-combobox-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+body { width: 450px }
+body, select { font-size: 12px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<select>
+  <optgroup label="Counties">
+    <option>Arlington
+    <option>Fairfax
+    <option>Loudon
+    <option>Prince William
+  <optgroup label="Cities">
+    <option>Alexandria
+    <option>Falls Church
+    <option>Manassas
+    <option>Manassas Park
+</select>
diff --git a/layout/reftests/font-inflation/select-combobox-3-ref.html b/layout/reftests/font-inflation/select-combobox-3-ref.html
new file mode 100644
index 0000000000..3c966264c0
--- /dev/null
+++ b/layout/reftests/font-inflation/select-combobox-3-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+  body { line-height: 1.0; width: 450px; font-size: 34px; }
+  select { vertical-align: top; font-size: 12px; width: 100px; }
+</style>
+<!--
+Because the combobox has constrained width, font inflation
+should be disabled.
+-->
+<select><option>One</Option><option>Two</option></select>
diff --git a/layout/reftests/font-inflation/select-combobox-3.html b/layout/reftests/font-inflation/select-combobox-3.html
new file mode 100644
index 0000000000..3c966264c0
--- /dev/null
+++ b/layout/reftests/font-inflation/select-combobox-3.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+  body { line-height: 1.0; width: 450px; font-size: 34px; }
+  select { vertical-align: top; font-size: 12px; width: 100px; }
+</style>
+<!--
+Because the combobox has constrained width, font inflation
+should be disabled.
+-->
+<select><option>One</Option><option>Two</option></select>
diff --git a/layout/reftests/font-inflation/select-listbox-1-ref.html b/layout/reftests/font-inflation/select-listbox-1-ref.html
new file mode 100644
index 0000000000..e8758855b7
--- /dev/null
+++ b/layout/reftests/font-inflation/select-listbox-1-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+body { width: 450px }
+body, select { font-size: 34px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<select size="3"><option>One</option><option>Two</option></select>
diff --git a/layout/reftests/font-inflation/select-listbox-1.html b/layout/reftests/font-inflation/select-listbox-1.html
new file mode 100644
index 0000000000..a6b073f7f6
--- /dev/null
+++ b/layout/reftests/font-inflation/select-listbox-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+body { width: 450px }
+body, select { font-size: 12px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<select size="3"><option>One</option><option>Two</option></select>
diff --git a/layout/reftests/font-inflation/select-listbox-2-ref.html b/layout/reftests/font-inflation/select-listbox-2-ref.html
new file mode 100644
index 0000000000..d25b802758
--- /dev/null
+++ b/layout/reftests/font-inflation/select-listbox-2-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+body { width: 450px }
+body, select { font-size: 34px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<select size="3">
+  <optgroup label="Counties">
+    <option>Arlington
+    <option>Fairfax
+    <option>Loudon
+    <option>Prince William
+  <optgroup label="Cities">
+    <option>Alexandria
+    <option>Falls Church
+    <option>Manassas
+    <option>Manassas Park
+</select>
diff --git a/layout/reftests/font-inflation/select-listbox-2.html b/layout/reftests/font-inflation/select-listbox-2.html
new file mode 100644
index 0000000000..ba5da11247
--- /dev/null
+++ b/layout/reftests/font-inflation/select-listbox-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+body { width: 450px }
+body, select { font-size: 12px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<select size="3">
+  <optgroup label="Counties">
+    <option>Arlington
+    <option>Fairfax
+    <option>Loudon
+    <option>Prince William
+  <optgroup label="Cities">
+    <option>Alexandria
+    <option>Falls Church
+    <option>Manassas
+    <option>Manassas Park
+</select>
diff --git a/layout/reftests/font-inflation/text-1-ref.html b/layout/reftests/font-inflation/text-1-ref.html
new file mode 100644
index 0000000000..cdf5d85448
--- /dev/null
+++ b/layout/reftests/font-inflation/text-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+div { font-size: 34px; width: 450px }
+</style>
+<div>Hello world</div>
diff --git a/layout/reftests/font-inflation/text-1.html b/layout/reftests/font-inflation/text-1.html
new file mode 100644
index 0000000000..3bc6129d36
--- /dev/null
+++ b/layout/reftests/font-inflation/text-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+div { font-size: 12px; width: 450px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div>Hello world</div>
diff --git a/layout/reftests/font-inflation/text-2-ref.html b/layout/reftests/font-inflation/text-2-ref.html
new file mode 100644
index 0000000000..ea117963c0
--- /dev/null
+++ b/layout/reftests/font-inflation/text-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+div { font-size: 34px; line-height: 1.0; width: 450px }
+</style>
+<div>Hello world</div>
diff --git a/layout/reftests/font-inflation/text-2.html b/layout/reftests/font-inflation/text-2.html
new file mode 100644
index 0000000000..848a40eb3a
--- /dev/null
+++ b/layout/reftests/font-inflation/text-2.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+div { font-size: 12px; line-height: 1.0; width: 450px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div>Hello world</div>
diff --git a/layout/reftests/font-inflation/text-3-ref.html b/layout/reftests/font-inflation/text-3-ref.html
new file mode 100644
index 0000000000..c2565f0c97
--- /dev/null
+++ b/layout/reftests/font-inflation/text-3-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+span { background: aqua }
+div { font-size: 34px; width: 450px }
+</style>
+<div><span>Hello world</span></div>
diff --git a/layout/reftests/font-inflation/text-3.html b/layout/reftests/font-inflation/text-3.html
new file mode 100644
index 0000000000..e410a10ace
--- /dev/null
+++ b/layout/reftests/font-inflation/text-3.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+span { background: aqua }
+div { font-size: 12px; width: 450px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><span>Hello world</span></div>
diff --git a/layout/reftests/font-inflation/text-4-ref.html b/layout/reftests/font-inflation/text-4-ref.html
new file mode 100644
index 0000000000..b8930c1171
--- /dev/null
+++ b/layout/reftests/font-inflation/text-4-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+span { background: aqua }
+div { font-size: 34px; line-height: 1.0; width: 450px }
+</style>
+<div><span>Hello world</span></div>
diff --git a/layout/reftests/font-inflation/text-4.html b/layout/reftests/font-inflation/text-4.html
new file mode 100644
index 0000000000..ba9ab9ef80
--- /dev/null
+++ b/layout/reftests/font-inflation/text-4.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { background: yellow }
+span { background: aqua }
+div { font-size: 12px; line-height: 1.0; width: 450px }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><span>Hello world</span></div>
diff --git a/layout/reftests/font-inflation/textarea-1-ref.html b/layout/reftests/font-inflation/textarea-1-ref.html
new file mode 100644
index 0000000000..78adafb84d
--- /dev/null
+++ b/layout/reftests/font-inflation/textarea-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; line-height: 1.0; width: 450px }
+textarea { font-size: 12px; width: 200px; height: 50px }
+textarea { line-height: 1.0 }
+</style>
+<!--
+Because the textarea has constrained width and height, font
+inflation should be disabled for this case.
+-->
+<div><textarea>Hello world</textarea></div>
diff --git a/layout/reftests/font-inflation/textarea-1.html b/layout/reftests/font-inflation/textarea-1.html
new file mode 100644
index 0000000000..f8bac798c1
--- /dev/null
+++ b/layout/reftests/font-inflation/textarea-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+textarea { font-size: 12px; width: 200px; height: 50px }
+textarea { line-height: 1.0 }
+</style>
+<!--
+Because the textarea has constrained width and height, font
+inflation should be disabled for this case.
+-->
+<div><textarea>Hello world</textarea></div>
diff --git a/layout/reftests/font-inflation/textarea-2-ref.html b/layout/reftests/font-inflation/textarea-2-ref.html
new file mode 100644
index 0000000000..da650e128f
--- /dev/null
+++ b/layout/reftests/font-inflation/textarea-2-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; line-height: 1.0; width: 450px }
+textarea { font-size: 34px; }
+textarea { line-height: 1.0 }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><textarea rows="4" cols="25">Hello world</textarea></div>
diff --git a/layout/reftests/font-inflation/textarea-2.html b/layout/reftests/font-inflation/textarea-2.html
new file mode 100644
index 0000000000..7405f70754
--- /dev/null
+++ b/layout/reftests/font-inflation/textarea-2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+textarea { font-size: 12px; }
+textarea { line-height: 1.0 }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><textarea rows="4" cols="25">Hello world</textarea></div>
diff --git a/layout/reftests/font-inflation/textarea-3-ref.html b/layout/reftests/font-inflation/textarea-3-ref.html
new file mode 100644
index 0000000000..4f9d6065bc
--- /dev/null
+++ b/layout/reftests/font-inflation/textarea-3-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 34px; line-height: 1.0; width: 450px }
+textarea { font-size: 34px; }
+textarea { line-height: 1.0 }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><textarea>Hello world</textarea></div>
diff --git a/layout/reftests/font-inflation/textarea-3.html b/layout/reftests/font-inflation/textarea-3.html
new file mode 100644
index 0000000000..e4ed681f4a
--- /dev/null
+++ b/layout/reftests/font-inflation/textarea-3.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<style>
+div { font-size: 12px; line-height: 1.0; width: 450px }
+textarea { font-size: 12px; }
+textarea { line-height: 1.0 }
+</style>
+<!--
+In a 450px container, the minimum font size at 15em per line is 30px.
+This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
+-->
+<div><textarea>Hello world</textarea></div>
diff --git a/layout/reftests/font-inflation/threshold-1a.html b/layout/reftests/font-inflation/threshold-1a.html
new file mode 100644
index 0000000000..0c204707b2
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-1a.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<p>123456789
+123456789
+123456789
+123456789
+123456789</p>
diff --git a/layout/reftests/font-inflation/threshold-1b-ref.html b/layout/reftests/font-inflation/threshold-1b-ref.html
new file mode 100644
index 0000000000..3f6a472a2c
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-1b-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { font-size: 44px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-1b.html b/layout/reftests/font-inflation/threshold-1b.html
new file mode 100644
index 0000000000..76d7ebd77b
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-1c-ref.html b/layout/reftests/font-inflation/threshold-1c-ref.html
new file mode 100644
index 0000000000..f4ba6ed80d
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-1c-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { font-size: 44px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+123456789
+123456789
+12345678901</p>
diff --git a/layout/reftests/font-inflation/threshold-1c.html b/layout/reftests/font-inflation/threshold-1c.html
new file mode 100644
index 0000000000..9548035ccc
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-1c.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+123456789
+123456789
+12345678901</p>
diff --git a/layout/reftests/font-inflation/threshold-2-ref.html b/layout/reftests/font-inflation/threshold-2-ref.html
new file mode 100644
index 0000000000..8aa266621a
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-2-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: separate blocks count together</title>
+<style>
+body { font-size: 44px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>1234567890</p>
+<p>123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-2.html b/layout/reftests/font-inflation/threshold-2.html
new file mode 100644
index 0000000000..cdd7413eb0
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: separate blocks count together</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>1234567890</p>
+<p>123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-3-ref.html b/layout/reftests/font-inflation/threshold-3-ref.html
new file mode 100644
index 0000000000..5deaac49b8
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-3-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: separate blocks count together</title>
+<style>
+body { font-size: 44px; width: 600px; }
+h1, p { margin: 0 }
+h1 { font-size: 56px; }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>1234567890</p>
+<h1>Heading</h1>
+<p>123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-3.html b/layout/reftests/font-inflation/threshold-3.html
new file mode 100644
index 0000000000..eb842c5110
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-3.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: separate blocks count together</title>
+<style>
+body { font-size: 12px; width: 600px; }
+h1, p { margin: 0 }
+h1 { font-size: 48px; }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>1234567890</p>
+<h1>Heading</h1>
+<p>123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-at-1-ref.html b/layout/reftests/font-inflation/threshold-input-text-contents-at-1-ref.html
new file mode 100644
index 0000000000..472ccc62bc
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-input-text-contents-at-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, input { font-size: 44px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<input size="10" value="hi">
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-at-1.html b/layout/reftests/font-inflation/threshold-input-text-contents-at-1.html
new file mode 100644
index 0000000000..b277c6556c
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-input-text-contents-at-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, input { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<input size="10" value="hi">
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-at-2-ref.html b/layout/reftests/font-inflation/threshold-input-text-contents-at-2-ref.html
new file mode 100644
index 0000000000..639d05e8b9
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-input-text-contents-at-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, input { font-size: 44px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<input size="10" value="this is a lot of text but it doesn't have an effect">
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-at-2.html b/layout/reftests/font-inflation/threshold-input-text-contents-at-2.html
new file mode 100644
index 0000000000..a26f0e92ea
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-input-text-contents-at-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, input { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<input size="10" value="this is a lot of text but it doesn't have an effect">
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-under-1.html b/layout/reftests/font-inflation/threshold-input-text-contents-under-1.html
new file mode 100644
index 0000000000..d464c66ab0
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-input-text-contents-under-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, input { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<input size="9" value="hi">
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-input-text-contents-under-2.html b/layout/reftests/font-inflation/threshold-input-text-contents-under-2.html
new file mode 100644
index 0000000000..adf81cb9e4
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-input-text-contents-under-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, input { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<input size="9" value="this is a lot of text but it doesn't have an effect">
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-cell-1-ref.html b/layout/reftests/font-inflation/threshold-scope-cell-1-ref.html
new file mode 100644
index 0000000000..4e06fa9d83
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-cell-1-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+table { border-spacing: 0 } /* FIXME: why is this needed?  Something to do with ComputeDescendantWidth in nsFontInflationData? */
+td { padding: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<table><tr><td style="width: 600px; font-size: 44px">123456789
+123456789
+123456789
+123456789
+1234567890</td></tr>
+<tr><td>123456789
+123456789
+123456789
+123456789
+123456789</td></tr>
+</table>
+<p>123456789
+123456789
+123456789
+123456789
+123456789</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-cell-1.html b/layout/reftests/font-inflation/threshold-scope-cell-1.html
new file mode 100644
index 0000000000..85e8f6f0da
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-cell-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+table { border-spacing: 0 } /* FIXME: why is this needed?  Something to do with ComputeDescendantWidth in nsFontInflationData? */
+td { padding: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<table><tr><td style="width: 600px">123456789
+123456789
+123456789
+123456789
+1234567890</td></tr>
+<tr><td>123456789
+123456789
+123456789
+123456789
+123456789</td></tr>
+</table>
+<p>123456789
+123456789
+123456789
+123456789
+123456789</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-cell-2-ref.html b/layout/reftests/font-inflation/threshold-scope-cell-2-ref.html
new file mode 100644
index 0000000000..f42a2fc382
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-cell-2-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+table { border-spacing: 0 } /* FIXME: why is this needed?  Something to do with ComputeDescendantWidth in nsFontInflationData? */
+td { padding: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<table><tr><td style="width: 600px">123456789
+123456789
+123456789
+123456789
+123456789</td></tr>
+<tr><td style="font-size: 44px">123456789
+123456789
+123456789
+123456789
+1234567890</td></tr>
+</table>
+<p>123456789
+123456789
+123456789
+123456789
+123456789</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-cell-2.html b/layout/reftests/font-inflation/threshold-scope-cell-2.html
new file mode 100644
index 0000000000..3e485793c5
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-cell-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+table { border-spacing: 0 } /* FIXME: why is this needed?  Something to do with ComputeDescendantWidth in nsFontInflationData? */
+td { padding: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<table><tr><td style="width: 600px">123456789
+123456789
+123456789
+123456789
+123456789</td></tr>
+<tr><td>123456789
+123456789
+123456789
+123456789
+1234567890</td></tr>
+</table>
+<p>123456789
+123456789
+123456789
+123456789
+123456789</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-cell-3-ref.html b/layout/reftests/font-inflation/threshold-scope-cell-3-ref.html
new file mode 100644
index 0000000000..3bb1f74a29
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-cell-3-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<table><tr><td style="width: 600px">123456789
+123456789
+123456789
+123456789
+123456789</td></tr>
+<tr><td>123456789
+123456789
+123456789
+123456789
+123456789</td></tr>
+</table>
+<p style="font-size: 44px">123456789
+123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-cell-3.html b/layout/reftests/font-inflation/threshold-scope-cell-3.html
new file mode 100644
index 0000000000..0d71335c04
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-cell-3.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<table><tr><td style="width: 600px">123456789
+123456789
+123456789
+123456789
+123456789</td></tr>
+<tr><td>123456789
+123456789
+123456789
+123456789
+123456789</td></tr>
+</table>
+<p>123456789
+123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-flex-container-1.html b/layout/reftests/font-inflation/threshold-scope-flex-container-1.html
new file mode 100644
index 0000000000..2499cce7f6
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-flex-container-1.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 12px;
+  }
+
+  .outer > div {
+    display: flex;
+  }
+</style>
+<div class="outer">
+  <div>These</div>
+  <div>separate</div>
+  <div>flex</div>
+  <div>containers</div>
+  <div>shouldn't</div>
+  <div>be</div>
+  <div>inflated,</div>
+  <div>because</div>
+  <div>they</div>
+  <div>each</div>
+  <div>form</div>
+  <div>separate</div>
+  <div>formatting</div>
+  <div>contexts</div>
+  <div>and</div>
+  <div>should</div>
+  <div>therefore</div>
+  <div>be</div>
+  <div>considered</div>
+  <div>individually</div>
+  <div>when</div>
+  <div>evaluating</div>
+  <div>the</div>
+  <div>font</div>
+  <div>inflation</div>
+  <div>text</div>
+  <div>threshold.</div>
+</div>
diff --git a/layout/reftests/font-inflation/threshold-scope-flex-container-2.html b/layout/reftests/font-inflation/threshold-scope-flex-container-2.html
new file mode 100644
index 0000000000..fe228e2c7d
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-flex-container-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 12px;
+  }
+
+  .outer > div {
+    display: inline-flex;
+  }
+</style>
+<div class="outer">
+  <div>These</div>
+  <div>separate</div>
+  <div>flex</div>
+  <div>containers</div>
+  <div>shouldn't</div>
+  <div>be</div>
+  <div>inflated,</div>
+  <div>because</div>
+  <div>they</div>
+  <div>each</div>
+  <div>form</div>
+  <div>separate</div>
+  <div>formatting</div>
+  <div>contexts</div>
+  <div>and</div>
+  <div>should</div>
+  <div>therefore</div>
+  <div>be</div>
+  <div>considered</div>
+  <div>individually</div>
+  <div>when</div>
+  <div>evaluating</div>
+  <div>the</div>
+  <div>font</div>
+  <div>inflation</div>
+  <div>text</div>
+  <div>threshold.</div>
+</div>
diff --git a/layout/reftests/font-inflation/threshold-scope-flex-container-items-1.html b/layout/reftests/font-inflation/threshold-scope-flex-container-items-1.html
new file mode 100644
index 0000000000..a970dd21dd
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-flex-container-items-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 12px;
+    display: flex;
+  }
+
+</style>
+<div class="outer">
+  <div>These</div>
+  <div>separate</div>
+  <div>flex</div>
+  <div>items</div>
+  <div>shouldn't</div>
+  <div>be</div>
+  <div>inflated,</div>
+  <div>because</div>
+  <div>they</div>
+  <div>each</div>
+  <div>form</div>
+  <div>separate</div>
+  <div>formatting</div>
+  <div>contexts</div>
+  <div>and</div>
+  <div>should</div>
+  <div>therefore</div>
+  <div>be</div>
+  <div>considered</div>
+  <div>individually</div>
+  <div>when</div>
+  <div>evaluating</div>
+  <div>the</div>
+  <div>font</div>
+  <div>inflation</div>
+  <div>text</div>
+  <div>threshold.</div>
+</div>
diff --git a/layout/reftests/font-inflation/threshold-scope-flex-container-items-2.html b/layout/reftests/font-inflation/threshold-scope-flex-container-items-2.html
new file mode 100644
index 0000000000..86fee058a3
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-flex-container-items-2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 12px;
+    display: inline-flex;
+  }
+
+</style>
+<div class="outer">
+  <div>These</div>
+  <div>separate</div>
+  <div>flex</div>
+  <div>items</div>
+  <div>shouldn't</div>
+  <div>be</div>
+  <div>inflated,</div>
+  <div>because</div>
+  <div>they</div>
+  <div>each</div>
+  <div>form</div>
+  <div>separate</div>
+  <div>formatting</div>
+  <div>contexts</div>
+  <div>and</div>
+  <div>should</div>
+  <div>therefore</div>
+  <div>be</div>
+  <div>considered</div>
+  <div>individually</div>
+  <div>when</div>
+  <div>evaluating</div>
+  <div>the</div>
+  <div>font</div>
+  <div>inflation</div>
+  <div>text</div>
+  <div>threshold.</div>
+</div>
diff --git a/layout/reftests/font-inflation/threshold-scope-float-1-ref.html b/layout/reftests/font-inflation/threshold-scope-float-1-ref.html
new file mode 100644
index 0000000000..54b1b4de80
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-float-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p style="float:right; width: 600px; font-size: 44px">123456789
+123456789
+123456789
+123456789
+1234567890</p>
+<p>123456789
+123456789
+123456789
+123456789
+123456789</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-float-1.html b/layout/reftests/font-inflation/threshold-scope-float-1.html
new file mode 100644
index 0000000000..75aa541b8f
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-float-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p style="float:right; width: 600px">123456789
+123456789
+123456789
+123456789
+1234567890</p>
+<p>123456789
+123456789
+123456789
+123456789
+123456789</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-float-2-ref.html b/layout/reftests/font-inflation/threshold-scope-float-2-ref.html
new file mode 100644
index 0000000000..7b0f11dfcc
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-float-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p style="float:right; width: 600px">123456789
+123456789
+123456789
+123456789
+123456789</p>
+<p style="font-size: 44px">123456789
+123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-float-2.html b/layout/reftests/font-inflation/threshold-scope-float-2.html
new file mode 100644
index 0000000000..f8078f6b2b
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-float-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p style="float:right; width: 600px">123456789
+123456789
+123456789
+123456789
+123456789</p>
+<p>123456789
+123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-float-overflow-1-ref.html b/layout/reftests/font-inflation/threshold-scope-float-overflow-1-ref.html
new file mode 100644
index 0000000000..4fcb6a40cc
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-float-overflow-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p style="float:right; overflow: hidden; width: 600px; font-size: 44px">123456789
+123456789
+123456789
+123456789
+1234567890</p>
+<p>123456789
+123456789
+123456789
+123456789
+123456789</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-float-overflow-1.html b/layout/reftests/font-inflation/threshold-scope-float-overflow-1.html
new file mode 100644
index 0000000000..11cd34e406
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-float-overflow-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p style="float:right; overflow: hidden; width: 600px">123456789
+123456789
+123456789
+123456789
+1234567890</p>
+<p>123456789
+123456789
+123456789
+123456789
+123456789</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-float-overflow-2-ref.html b/layout/reftests/font-inflation/threshold-scope-float-overflow-2-ref.html
new file mode 100644
index 0000000000..73104b9c8a
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-float-overflow-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p style="float:right; overflow: hidden; width: 600px">123456789
+123456789
+123456789
+123456789
+123456789</p>
+<p style="font-size: 44px">123456789
+123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-float-overflow-2.html b/layout/reftests/font-inflation/threshold-scope-float-overflow-2.html
new file mode 100644
index 0000000000..1b57917a99
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-float-overflow-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test: scope of accumulation</title>
+<style>
+body { font-size: 12px; width: 600px; }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p style="float:right; overflow: hidden; width: 600px">123456789
+123456789
+123456789
+123456789
+123456789</p>
+<p>123456789
+123456789
+123456789
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-scope-grid-container-1.html b/layout/reftests/font-inflation/threshold-scope-grid-container-1.html
new file mode 100644
index 0000000000..0bb87bae46
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-grid-container-1.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 12px;
+  }
+
+  .outer > div {
+    display: grid;
+  }
+</style>
+<div class="outer">
+  <div>These</div>
+  <div>separate</div>
+  <div>grid</div>
+  <div>containers</div>
+  <div>shouldn't</div>
+  <div>be</div>
+  <div>inflated,</div>
+  <div>because</div>
+  <div>they</div>
+  <div>each</div>
+  <div>form</div>
+  <div>separate</div>
+  <div>formatting</div>
+  <div>contexts</div>
+  <div>and</div>
+  <div>should</div>
+  <div>therefore</div>
+  <div>be</div>
+  <div>considered</div>
+  <div>individually</div>
+  <div>when</div>
+  <div>evaluating</div>
+  <div>the</div>
+  <div>font</div>
+  <div>inflation</div>
+  <div>text</div>
+  <div>threshold.</div>
+</div>
diff --git a/layout/reftests/font-inflation/threshold-scope-grid-container-items-1.html b/layout/reftests/font-inflation/threshold-scope-grid-container-items-1.html
new file mode 100644
index 0000000000..8e67935aff
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-scope-grid-container-items-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<style>
+  div.outer {
+    width: 450px;
+    font-size: 12px;
+    display: grid;
+  }
+
+</style>
+<div class="outer">
+  <div>These</div>
+  <div>separate</div>
+  <div>grid</div>
+  <div>items</div>
+  <div>shouldn't</div>
+  <div>be</div>
+  <div>inflated,</div>
+  <div>because</div>
+  <div>they</div>
+  <div>each</div>
+  <div>form</div>
+  <div>separate</div>
+  <div>formatting</div>
+  <div>contexts</div>
+  <div>and</div>
+  <div>should</div>
+  <div>therefore</div>
+  <div>be</div>
+  <div>considered</div>
+  <div>individually</div>
+  <div>when</div>
+  <div>evaluating</div>
+  <div>the</div>
+  <div>font</div>
+  <div>inflation</div>
+  <div>text</div>
+  <div>threshold.</div>
+</div>
diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1-ref.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1-ref.html
new file mode 100644
index 0000000000..9e585c4bc9
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 44px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select>
+  <option>1234567890</option>
+  <option>2</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1.html
new file mode 100644
index 0000000000..8e24ea46ba
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select>
+  <option>1234567890</option>
+  <option>2</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2-ref.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2-ref.html
new file mode 100644
index 0000000000..7ccb43a52c
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 44px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select>
+  <option>1234567890</option>
+  <option>23456789</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2.html
new file mode 100644
index 0000000000..87f5f3cedc
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-at-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select>
+  <option>1234567890</option>
+  <option>23456789</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-under-1.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-under-1.html
new file mode 100644
index 0000000000..a29001f9e2
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-under-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select>
+  <option>123456789</option>
+  <option>2</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-combobox-contents-under-2.html b/layout/reftests/font-inflation/threshold-select-combobox-contents-under-2.html
new file mode 100644
index 0000000000..de5e82b558
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-combobox-contents-under-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select>
+  <option>123456789</option>
+  <option>23456789</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1-ref.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1-ref.html
new file mode 100644
index 0000000000..df3ce97425
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 44px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select size="3">
+  <option>1234567890</option>
+  <option>2</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1.html
new file mode 100644
index 0000000000..b43e209d5b
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select size="3">
+  <option>1234567890</option>
+  <option>2</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2-ref.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2-ref.html
new file mode 100644
index 0000000000..7b79a99882
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 44px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select size="3">
+  <option>1234567890</option>
+  <option>23456789</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2.html
new file mode 100644
index 0000000000..8b7374e692
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-at-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select size="3">
+  <option>1234567890</option>
+  <option>23456789</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-under-1.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-under-1.html
new file mode 100644
index 0000000000..777ac09f3a
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-under-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select size="3">
+  <option>123456789</option>
+  <option>2</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-select-listbox-contents-under-2.html b/layout/reftests/font-inflation/threshold-select-listbox-contents-under-2.html
new file mode 100644
index 0000000000..abfada7e36
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-select-listbox-contents-under-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, select, option { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<select size="3">
+  <option>123456789</option>
+  <option>23456789</option>
+  <option>3</option>
+</select>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-at-1-ref.html b/layout/reftests/font-inflation/threshold-textarea-contents-at-1-ref.html
new file mode 100644
index 0000000000..5728bb0fdf
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-textarea-contents-at-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, textarea { font-size: 44px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<textarea rows="2" cols="10">
+hi
+</textarea>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-at-1.html b/layout/reftests/font-inflation/threshold-textarea-contents-at-1.html
new file mode 100644
index 0000000000..d527e070f4
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-textarea-contents-at-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, textarea { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<textarea rows="2" cols="10">
+hi
+</textarea>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-at-2-ref.html b/layout/reftests/font-inflation/threshold-textarea-contents-at-2-ref.html
new file mode 100644
index 0000000000..27dd261461
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-textarea-contents-at-2-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, textarea { font-size: 44px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<textarea rows="2" cols="10">
+this is a lot of text but it doesn't have an effect
+</textarea>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-at-2.html b/layout/reftests/font-inflation/threshold-textarea-contents-at-2.html
new file mode 100644
index 0000000000..02989efe10
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-textarea-contents-at-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, textarea { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<textarea rows="2" cols="10">
+this is a lot of text but it doesn't have an effect
+</textarea>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-under-1.html b/layout/reftests/font-inflation/threshold-textarea-contents-under-1.html
new file mode 100644
index 0000000000..7b8b623216
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-textarea-contents-under-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, textarea { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<textarea rows="2" cols="9">
+hi
+</textarea>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/threshold-textarea-contents-under-2.html b/layout/reftests/font-inflation/threshold-textarea-contents-under-2.html
new file mode 100644
index 0000000000..82c8faf0fa
--- /dev/null
+++ b/layout/reftests/font-inflation/threshold-textarea-contents-under-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<title>font.size.inflation.lineThreshold test</title>
+<style>
+body { width: 600px; }
+body, textarea { font-size: 12px }
+p { margin: 0 }
+</style>
+<!--
+In a 600px container, the minimum font size at 15em per line is 40px.
+This means we map 0px-60px into 40px-60px, so 12px gets mapped to 44px.
+
+Further, with a lineThreshold of 100, we need 50 characters of 12px
+text to meet the line threshold.
+-->
+<p>123456789
+123456789
+<textarea rows="2" cols="9">
+this is a lot of text but it doesn't have an effect
+</textarea>
+123456789
+1234567890</p>
diff --git a/layout/reftests/font-inflation/video-1.html b/layout/reftests/font-inflation/video-1.html
new file mode 100644
index 0000000000..a8a4780dde
--- /dev/null
+++ b/layout/reftests/font-inflation/video-1.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<video src="../webm-video/black140x100.webm"></video>
diff --git a/layout/reftests/font-inflation/xul-reflow-1-ref.html b/layout/reftests/font-inflation/xul-reflow-1-ref.html
new file mode 100644
index 0000000000..a4ea6e8600
--- /dev/null
+++ b/layout/reftests/font-inflation/xul-reflow-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 764354</title>
+<style>
+#outer {
+  width: 300px;
+  height: 100px;
+  background: yellow; color: black;
+}
+.inner {
+  background: aqua; color: black;
+  text-align: center;
+}
+</style>
+
+<div id="outer">
+  <div class="inner">Text</div>
+  <div class="inner">Text</div>
+</div>
diff --git a/layout/reftests/font-inflation/xul-reflow-1.html b/layout/reftests/font-inflation/xul-reflow-1.html
new file mode 100644
index 0000000000..929fd98837
--- /dev/null
+++ b/layout/reftests/font-inflation/xul-reflow-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 764354</title>
+<style>
+#outer {
+  display: -moz-box;
+  overflow: hidden;
+  -moz-box-orient: vertical;
+  width: 300px;
+  height: 100px;
+  background: yellow; color: black;
+}
+.inner {
+  background: aqua; color: black;
+  text-align: center;
+}
+</style>
+
+<div id="outer">
+  <div class="inner">Text</div>
+  <div class="inner">Text</div>
+</div>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
commit	36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree	105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/font-inflation
parent	Initial commit. (diff)
download	firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip