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

---
 layout/reftests/forms/button/disabled-1-ref.html   | 16 +++++
 layout/reftests/forms/button/disabled-1.html       | 15 +++++
 layout/reftests/forms/button/disabled-2-ref.html   | 17 ++++++
 layout/reftests/forms/button/disabled-2.html       | 17 ++++++
 .../reftests/forms/button/disabled-3-notref.html   |  9 +++
 layout/reftests/forms/button/disabled-3.html       |  9 +++
 .../reftests/forms/button/disabled-4-notref.html   |  9 +++
 layout/reftests/forms/button/disabled-4.html       |  9 +++
 .../reftests/forms/button/disabled-5-notref.html   |  9 +++
 layout/reftests/forms/button/disabled-5.html       |  9 +++
 .../reftests/forms/button/disabled-6-notref.html   |  9 +++
 layout/reftests/forms/button/disabled-6.html       |  9 +++
 .../button/display-grid-flex-columnset-ref.html    | 61 +++++++++++++++++++
 .../forms/button/display-grid-flex-columnset.html  | 61 +++++++++++++++++++
 .../forms/button/first-letter-1-noref.html         |  5 ++
 .../reftests/forms/button/first-letter-1-ref.html  |  7 +++
 layout/reftests/forms/button/first-letter-1.html   |  6 ++
 .../button/focus-area-percent-units-1-ref.html     | 52 +++++++++++++++++
 .../forms/button/focus-area-percent-units-1.html   | 62 ++++++++++++++++++++
 .../button/focus-area-percent-units-2-ref.html     | 68 ++++++++++++++++++++++
 .../forms/button/focus-area-percent-units-2.html   | 51 ++++++++++++++++
 .../forms/button/line-height-button-0.5.html       |  7 +++
 .../forms/button/line-height-button-1.0.html       |  7 +++
 .../forms/button/line-height-button-1.5.html       |  7 +++
 .../forms/button/line-height-input-0.5.html        |  7 +++
 .../forms/button/line-height-input-1.0.html        |  7 +++
 .../forms/button/line-height-input-1.5.html        |  7 +++
 layout/reftests/forms/button/max-height-ref.html   | 11 ++++
 layout/reftests/forms/button/max-height.html       | 11 ++++
 layout/reftests/forms/button/min-height-ref.html   | 17 ++++++
 layout/reftests/forms/button/min-height.html       | 22 +++++++
 .../forms/button/overflow-areas-1-ref.html         | 48 +++++++++++++++
 layout/reftests/forms/button/overflow-areas-1.html | 51 ++++++++++++++++
 .../forms/button/percent-height-child-1-ref.html   | 52 +++++++++++++++++
 .../forms/button/percent-height-child-1.html       | 60 +++++++++++++++++++
 .../forms/button/percent-height-child-2-ref.html   | 54 +++++++++++++++++
 .../forms/button/percent-height-child-2.html       | 63 ++++++++++++++++++++
 .../forms/button/percent-width-child-1-ref.html    | 53 +++++++++++++++++
 .../forms/button/percent-width-child-1.html        | 59 +++++++++++++++++++
 .../forms/button/percent-width-child-2-ref.html    | 55 +++++++++++++++++
 .../forms/button/percent-width-child-2.html        | 62 ++++++++++++++++++++
 layout/reftests/forms/button/reftest-stylo.list    | 61 +++++++++++++++++++
 layout/reftests/forms/button/reftest.list          | 48 +++++++++++++++
 .../forms/button/vertical-centering-ref.html       | 23 ++++++++
 .../reftests/forms/button/vertical-centering.html  | 33 +++++++++++
 .../forms/button/width-auto-size-em-ltr-ref.html   | 19 ++++++
 .../forms/button/width-auto-size-em-ltr.html       | 20 +++++++
 .../forms/button/width-auto-size-em-rtl-ref.html   | 20 +++++++
 .../forms/button/width-auto-size-em-rtl.html       | 21 +++++++
 .../forms/button/width-auto-size-ltr-ref.html      | 20 +++++++
 .../reftests/forms/button/width-auto-size-ltr.html | 20 +++++++
 .../forms/button/width-auto-size-rtl-ref.html      | 21 +++++++
 .../reftests/forms/button/width-auto-size-rtl.html | 21 +++++++
 .../width-erode-all-focuspadding-ltr-ref.html      | 20 +++++++
 .../button/width-erode-all-focuspadding-ltr.html   | 21 +++++++
 .../width-erode-all-focuspadding-rtl-ref.html      | 21 +++++++
 .../button/width-erode-all-focuspadding-rtl.html   | 22 +++++++
 .../width-erode-overflow-focuspadding-ltr-ref.html | 20 +++++++
 .../width-erode-overflow-focuspadding-ltr.html     | 21 +++++++
 .../width-erode-overflow-focuspadding-rtl-ref.html | 21 +++++++
 .../width-erode-overflow-focuspadding-rtl.html     | 22 +++++++
 .../width-erode-part-focuspadding-ltr-ref.html     | 20 +++++++
 .../button/width-erode-part-focuspadding-ltr.html  | 21 +++++++
 .../width-erode-part-focuspadding-rtl-ref.html     | 21 +++++++
 .../button/width-erode-part-focuspadding-rtl.html  | 22 +++++++
 .../reftests/forms/button/width-exact-fit-ltr.html | 21 +++++++
 .../reftests/forms/button/width-exact-fit-rtl.html | 22 +++++++
 67 files changed, 1792 insertions(+)
 create mode 100644 layout/reftests/forms/button/disabled-1-ref.html
 create mode 100644 layout/reftests/forms/button/disabled-1.html
 create mode 100644 layout/reftests/forms/button/disabled-2-ref.html
 create mode 100644 layout/reftests/forms/button/disabled-2.html
 create mode 100644 layout/reftests/forms/button/disabled-3-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-3.html
 create mode 100644 layout/reftests/forms/button/disabled-4-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-4.html
 create mode 100644 layout/reftests/forms/button/disabled-5-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-5.html
 create mode 100644 layout/reftests/forms/button/disabled-6-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-6.html
 create mode 100644 layout/reftests/forms/button/display-grid-flex-columnset-ref.html
 create mode 100644 layout/reftests/forms/button/display-grid-flex-columnset.html
 create mode 100644 layout/reftests/forms/button/first-letter-1-noref.html
 create mode 100644 layout/reftests/forms/button/first-letter-1-ref.html
 create mode 100644 layout/reftests/forms/button/first-letter-1.html
 create mode 100644 layout/reftests/forms/button/focus-area-percent-units-1-ref.html
 create mode 100644 layout/reftests/forms/button/focus-area-percent-units-1.html
 create mode 100644 layout/reftests/forms/button/focus-area-percent-units-2-ref.html
 create mode 100644 layout/reftests/forms/button/focus-area-percent-units-2.html
 create mode 100644 layout/reftests/forms/button/line-height-button-0.5.html
 create mode 100644 layout/reftests/forms/button/line-height-button-1.0.html
 create mode 100644 layout/reftests/forms/button/line-height-button-1.5.html
 create mode 100644 layout/reftests/forms/button/line-height-input-0.5.html
 create mode 100644 layout/reftests/forms/button/line-height-input-1.0.html
 create mode 100644 layout/reftests/forms/button/line-height-input-1.5.html
 create mode 100644 layout/reftests/forms/button/max-height-ref.html
 create mode 100644 layout/reftests/forms/button/max-height.html
 create mode 100644 layout/reftests/forms/button/min-height-ref.html
 create mode 100644 layout/reftests/forms/button/min-height.html
 create mode 100644 layout/reftests/forms/button/overflow-areas-1-ref.html
 create mode 100644 layout/reftests/forms/button/overflow-areas-1.html
 create mode 100644 layout/reftests/forms/button/percent-height-child-1-ref.html
 create mode 100644 layout/reftests/forms/button/percent-height-child-1.html
 create mode 100644 layout/reftests/forms/button/percent-height-child-2-ref.html
 create mode 100644 layout/reftests/forms/button/percent-height-child-2.html
 create mode 100644 layout/reftests/forms/button/percent-width-child-1-ref.html
 create mode 100644 layout/reftests/forms/button/percent-width-child-1.html
 create mode 100644 layout/reftests/forms/button/percent-width-child-2-ref.html
 create mode 100644 layout/reftests/forms/button/percent-width-child-2.html
 create mode 100644 layout/reftests/forms/button/reftest-stylo.list
 create mode 100644 layout/reftests/forms/button/reftest.list
 create mode 100644 layout/reftests/forms/button/vertical-centering-ref.html
 create mode 100644 layout/reftests/forms/button/vertical-centering.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-ltr.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-rtl.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-ltr.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-rtl.html
 create mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
 create mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
 create mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
 create mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
 create mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
 create mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
 create mode 100644 layout/reftests/forms/button/width-exact-fit-ltr.html
 create mode 100644 layout/reftests/forms/button/width-exact-fit-rtl.html

(limited to 'layout/reftests/forms/button')

diff --git a/layout/reftests/forms/button/disabled-1-ref.html b/layout/reftests/forms/button/disabled-1-ref.html
new file mode 100644
index 000000000..c408ec16f
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test button "disabled" text style</title>
+<style>
+  button {
+    color: GrayText;
+    border-width: 0;
+    background: transparent;
+  }
+</style>
+</head>
+<body>
+  <button>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-1.html b/layout/reftests/forms/button/disabled-1.html
new file mode 100644
index 000000000..6bcba667b
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test button "disabled" text style</title>
+<style>
+  button {
+    border-width: 0;
+    background: transparent;
+  }
+</style>
+</head>
+<body>
+  <button disabled>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-2-ref.html b/layout/reftests/forms/button/disabled-2-ref.html
new file mode 100644
index 000000000..53958f76b
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test all types of buttons look similar when disabled</title>
+</head>
+<body>
+  <button>Some text</button>
+  <button>Some text</button>
+  <button>Reset</button>
+  <button>Submit Query</button>
+  <br>
+  <button disabled>Some text</button>
+  <button disabled>Some text</button>
+  <button disabled>Reset</button>
+  <button disabled>Submit Query</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-2.html b/layout/reftests/forms/button/disabled-2.html
new file mode 100644
index 000000000..a77287dfe
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test all types of buttons look similar when disabled</title>
+</head>
+<body>
+  <button>Some text</button>
+  <input type="button" value="Some text">
+  <input type="reset">
+  <input type="submit">
+  <br>
+  <button disabled>Some text</button>
+  <input disabled type="button" value="Some text">
+  <input disabled type="reset">
+  <input disabled type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-3-notref.html b/layout/reftests/forms/button/disabled-3-notref.html
new file mode 100644
index 000000000..bd8b45774
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-3-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <button disabled>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-3.html b/layout/reftests/forms/button/disabled-3.html
new file mode 100644
index 000000000..440d43b53
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-3.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <button>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-4-notref.html b/layout/reftests/forms/button/disabled-4-notref.html
new file mode 100644
index 000000000..41fe9e610
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-4-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input disabled type="button" value="Some text">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-4.html b/layout/reftests/forms/button/disabled-4.html
new file mode 100644
index 000000000..38f71544a
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-4.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input type="button" value="Some text">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-5-notref.html b/layout/reftests/forms/button/disabled-5-notref.html
new file mode 100644
index 000000000..d944d0421
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-5-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input disabled type="reset">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-5.html b/layout/reftests/forms/button/disabled-5.html
new file mode 100644
index 000000000..ded7c1905
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-5.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input type="reset">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-6-notref.html b/layout/reftests/forms/button/disabled-6-notref.html
new file mode 100644
index 000000000..c6f0abce6
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-6-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input disabled type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-6.html b/layout/reftests/forms/button/disabled-6.html
new file mode 100644
index 000000000..2a1d9cfa7
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-6.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/display-grid-flex-columnset-ref.html b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html
new file mode 100644
index 000000000..a176dd3e8
--- /dev/null
+++ b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 984869</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+
+.grid, .igrid {
+  display: grid;
+  grid: 20px / 20px 20px;
+}
+.igrid { display:inline-grid; }
+
+.flex, .iflex {
+  display: flex;
+}
+.iflex { display:inline-flex; }
+
+.columnset, .block-columnset {
+     -moz-columns: 2;
+      -ms-columns: 2;
+  -webkit-columns: 2;
+          columns: 2;
+}
+
+.block-columnset, .b { display: block; }
+
+a {
+  position: absolute;
+  right:0; bottom:0;
+  width:5px; height:5px;
+  background: lime;
+}
+.rel { position:relative; }
+
+button { vertical-align: bottom; }
+    </style>
+</head>
+<body>
+
+<button><wrap class="grid">x<span>y</span>z</wrap></button>
+<button><wrap class="iflex">x<span>y</span>z</wrap></button>
+<button><wrap class="b columnset">x<br><span>y</span>z</wrap></button>
+
+<button class="rel"><wrap class="grid">x<span>y</span>z<a></a></wrap></button>
+<button class="rel"><wrap class="iflex">x<span>y</span>z<a></a></wrap></button>
+<button class="rel"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button>
+
+<button class="b"><wrap class="grid">x<span>y</span>z</wrap></button>
+<button class="b"><wrap class="flex">x<span>y</span>z</wrap></button>
+<button class="b"><wrap class="b columnset">x<br><span>y</span>z</wrap></button>
+
+<button class="rel b"><wrap class="grid">x<span>y</span>z<a></a></wrap></button>
+<button class="rel b"><wrap class="flex">x<span>y</span>z<a></a></wrap></button>
+<button class="rel b"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/display-grid-flex-columnset.html b/layout/reftests/forms/button/display-grid-flex-columnset.html
new file mode 100644
index 000000000..86c8f587a
--- /dev/null
+++ b/layout/reftests/forms/button/display-grid-flex-columnset.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 984869</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+
+.grid, .igrid {
+  display: grid;
+  grid: 20px / 20px 20px;
+}
+.igrid { display:inline-grid; }
+
+.flex, .iflex {
+  display: flex;
+}
+.iflex { display:inline-flex; }
+
+.columnset {
+     -moz-columns: 2;
+      -ms-columns: 2;
+  -webkit-columns: 2;
+          columns: 2;
+}
+
+.b { display: block; }
+
+a {
+  position: absolute;
+  right:0; bottom:0;
+  width:5px; height:5px;
+  background: lime;
+}
+.rel { position:relative; }
+
+button { vertical-align: bottom; }
+    </style>
+</head>
+<body>
+
+<button class="igrid">x<span>y</span>z</button>
+<button class="iflex">x<span>y</span>z</button>
+<button class="columnset">x<br><span>y</span>z</button>
+
+<button class="rel igrid">x<span>y</span>z<a></a></button>
+<button class="rel iflex">x<span>y</span>z<a></a></button>
+<button class="rel columnset">x<br><span>y</span>z<a></a></button>
+
+<button class="grid">x<span>y</span>z</button>
+<button class="flex">x<span>y</span>z</button>
+<button class="b columnset">x<br><span>y</span>z</button>
+
+<button class="rel grid">x<span>y</span>z<a></a></button>
+<button class="rel flex">x<span>y</span>z<a></a></button>
+<button class="rel b columnset">x<br><span>y</span>z<a></a></button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/first-letter-1-noref.html b/layout/reftests/forms/button/first-letter-1-noref.html
new file mode 100644
index 000000000..d59db575f
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1-noref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<style>
+  body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/first-letter-1-ref.html b/layout/reftests/forms/button/first-letter-1-ref.html
new file mode 100644
index 000000000..34ffa64f2
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+  button { display: block; }
+  button::first-letter { color: green; }
+  body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/first-letter-1.html b/layout/reftests/forms/button/first-letter-1.html
new file mode 100644
index 000000000..3dbf1667f
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<style>
+  button::first-letter { color: green; }
+  body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-1-ref.html b/layout/reftests/forms/button/focus-area-percent-units-1-ref.html
new file mode 100644
index 000000000..6c66d5f17
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-1-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>Reference case for bug 1272983</title>
+  <style>
+    /* Set explicit font size so that em units are predictable: */
+    body, button { font: 10px sans-serif; }
+
+    /* Set margin to 0 for all cases. In the first 6, that's how we expect
+       the testcase to render; and in the 7th and 8th, our reference margin
+       will be applied via a child div instead of via the pseudo-element. */
+    button.mfi1::-moz-focus-inner,
+    button.mfi2::-moz-focus-inner,
+    button.mfi3::-moz-focus-inner,
+    button.mfi4::-moz-focus-inner,
+    button.mfi5::-moz-focus-inner,
+    button.mfi6::-moz-focus-inner,
+    button.mfi7::-moz-focus-inner,
+    button.mfi8::-moz-focus-inner { margin: 0; }
+
+    /* Use an explicit div instead of pseudo-element, for reference case's
+       version of margin values that we actually expect to take effect: */
+    button.mfi7 > div { margin: 10px; }
+    button.mfi8 > div { margin: 20px; /* = 2em * 20px/em */ }
+  </style>
+</head>
+<body>
+  <button class="mfi1">mfi1</button>
+  <button class="mfi2">mfi2</button>
+  <button class="mfi3">mfi3</button>
+  <button class="mfi4">mfi4</button>
+  <br>
+  <button class="mfi5">mfi5</button>
+  <button class="mfi6">mfi6</button>
+  <button class="mfi7"><div>mfi7</div></button>
+  <button class="mfi8"><div>mfi8</div></button>
+  <br>
+
+  <button class="mfo1">mfo1</button>
+  <button class="mfo2">mfo2</button>
+  <button class="mfo3">mfo3</button>
+  <button class="mfo4">mfo4</button>
+  <br>
+  <button class="mfo5">mfo5</button>
+  <button class="mfo6">mfo6</button>
+  <button class="mfo7">mfo7</button>
+  <button class="mfo8">mfo8</button>
+  <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-1.html b/layout/reftests/forms/button/focus-area-percent-units-1.html
new file mode 100644
index 000000000..17d65b3b0
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-1.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<!-- The ::-moz-focus-inner & ::-moz-focus-outer button pseudo-elements only
+     support CSS "margin" values that contain absolute lengths.  Any percent or
+     "auto" margin values will simply make the margin collapse to zero.
+     This test verifies that this is indeed what happens (not anything worse).
+-->
+<head>
+  <title>Testcase for bug 1272983</title>
+  <style>
+    /* Set explicit font size so that em units are predictable: */
+    body, button { font: 10px sans-serif; }
+
+    /* Testing percent and auto margin values on "-moz-focus-inner": */
+    button.mfi1::-moz-focus-inner { margin: 50%; }
+    button.mfi2::-moz-focus-inner { margin: 50% 10px; }
+    button.mfi3::-moz-focus-inner { margin: 10px 50%; }
+    button.mfi4::-moz-focus-inner { margin: auto; }
+    button.mfi5::-moz-focus-inner { margin: auto 10px; }
+    button.mfi6::-moz-focus-inner { margin: 10px auto; }
+    button.mfi7::-moz-focus-inner { margin: 10px; }
+    button.mfi8::-moz-focus-inner { margin: 2em; }
+
+    /* Testing percent and auto margin values on "-moz-focus-outer":
+       (just for completeness -- really, 'margin' has no effect on
+       the behavior of -moz-focus-outer) */
+    button.mfo1::-moz-focus-outer { margin: 50%; }
+    button.mfo2::-moz-focus-outer { margin: 50% 10px; }
+    button.mfo3::-moz-focus-outer { margin: 10px 50%; }
+    button.mfo4::-moz-focus-outer { margin: auto; }
+    button.mfo5::-moz-focus-outer { margin: auto 10px; }
+    button.mfo6::-moz-focus-outer { margin: 10px auto; }
+    button.mfo7::-moz-focus-outer { margin: 10px; }
+    button.mfo8::-moz-focus-outer { margin: 2em; }
+  </style>
+</head>
+<body>
+  <button class="mfi1">mfi1</button>
+  <button class="mfi2">mfi2</button>
+  <button class="mfi3">mfi3</button>
+  <button class="mfi4">mfi4</button>
+  <br>
+  <button class="mfi5">mfi5</button>
+  <button class="mfi6">mfi6</button>
+  <button class="mfi7">mfi7</button>
+  <button class="mfi8">mfi8</button>
+  <br>
+
+  <button class="mfo1">mfo1</button>
+  <button class="mfo2">mfo2</button>
+  <button class="mfo3">mfo3</button>
+  <button class="mfo4">mfo4</button>
+  <br>
+  <button class="mfo5">mfo5</button>
+  <button class="mfo6">mfo6</button>
+  <button class="mfo7">mfo7</button>
+  <button class="mfo8">mfo8</button>
+  <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-2-ref.html b/layout/reftests/forms/button/focus-area-percent-units-2-ref.html
new file mode 100644
index 000000000..6b6a6056d
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-2-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>Reference case for bug 1272983</title>
+  <style>
+    /* Set explicit font size so that em units are predictable: */
+    body, button { font: 10px sans-serif; }
+
+    /* Add outline to help visualize the padding outside of buttons: */
+    button { outline: 1px solid black; }
+
+    /* Set padding to 0 for all cases. In the first 3, that's how we expect
+       the testcase to render; and in the 4th and 5th, our reference padding
+       will be applied via a child div instead of via the pseudo-element. */
+    button.mfi1::-moz-focus-inner,
+    button.mfi2::-moz-focus-inner,
+    button.mfi3::-moz-focus-inner,
+    button.mfi4::-moz-focus-inner,
+    button.mfi5::-moz-focus-inner { padding: 0; }
+
+    /* Use an explicit div instead of pseudo-element, for reference case's
+       version of padding values that we actually expect to take effect: */
+    button.mfi4 > div { padding: 10px; }
+    button.mfi5 > div { padding: 2em; }
+
+    /* As above, set padding to 0 for all cases: */
+    button.mfo1::-moz-focus-outer,
+    button.mfo2::-moz-focus-outer,
+    button.mfo3::-moz-focus-outer,
+    button.mfo4::-moz-focus-outer,
+    button.mfo5::-moz-focus-outer { padding: 0; }
+
+    /* To make reference for -moz-focus-outer padding that we expect to
+       take effect, we'll put the padding on a wrapper-div (and bump the
+       button's outline to that div). */
+    div.mfo4-wrapper { padding: 10px; }
+    div.mfo5-wrapper { padding: 20px; /* = 2em * 10px/em */ }
+
+    button.mfo4,
+    button.mfo5 { outline: none; }
+    div.mfo4-wrapper,
+    div.mfo5-wrapper { display: inline-block; outline: 1px solid black; }
+  </style>
+</head>
+<body>
+  <button class="mfi1">mfi1</button>
+  <button class="mfi2">mfi2</button>
+  <button class="mfi3">mfi3</button>
+  <br>
+  <button class="mfi4"><div>mfi4</div></button>
+  <button class="mfi5"><div>mfi5</div></button>
+  <br>
+
+  <button class="mfo1">mfo1</button>
+  <button class="mfo2">mfo2</button>
+  <button class="mfo3">mfo3</button>
+  <br>
+  <div class="mfo4-wrapper">
+    <button class="mfo4">mfo4</button>
+  </div>
+  <div class="mfo5-wrapper">
+    <button class="mfo5">mfo5</button>
+  </div>
+  <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-2.html b/layout/reftests/forms/button/focus-area-percent-units-2.html
new file mode 100644
index 000000000..3c0cb8612
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-2.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<!-- The ::-moz-focus-inner & ::-moz-focus-outer button pseudo-elements only
+     support CSS "padding" values that contain absolute lengths.  Any percent
+     padding values will simply make the padding collapse to zero.
+     This test verifies that this is indeed what happens (not anything worse).
+-->
+<head>
+  <title>Testcase for bug 1272983</title>
+  <style>
+    /* Set explicit font size so that em units are predictable: */
+    body, button { font: 10px sans-serif; }
+
+    /* Add outline to help visualize the padding outside of buttons: */
+    button { outline: 1px solid black; }
+
+    /* Testing percent and auto padding values on "-moz-focus-inner": */
+    button.mfi1::-moz-focus-inner { padding: 50%; }
+    button.mfi2::-moz-focus-inner { padding: 50% 10px; }
+    button.mfi3::-moz-focus-inner { padding: 10px 50%; }
+    button.mfi4::-moz-focus-inner { padding: 10px; }
+    button.mfi5::-moz-focus-inner { padding: 2em; }
+
+    /* Testing percent and auto padding values on "-moz-focus-outer": */
+    button.mfo1::-moz-focus-outer { padding: 50%; }
+    button.mfo2::-moz-focus-outer { padding: 50% 10px; }
+    button.mfo3::-moz-focus-outer { padding: 10px 50%; }
+    button.mfo4::-moz-focus-outer { padding: 10px; }
+    button.mfo5::-moz-focus-outer { padding: 2em; }
+  </style>
+</head>
+<body>
+  <button class="mfi1">mfi1</button>
+  <button class="mfi2">mfi2</button>
+  <button class="mfi3">mfi3</button>
+  <br>
+  <button class="mfi4">mfi4</button>
+  <button class="mfi5">mfi5</button>
+  <br>
+
+  <button class="mfo1">mfo1</button>
+  <button class="mfo2">mfo2</button>
+  <button class="mfo3">mfo3</button>
+  <br>
+  <button class="mfo4">mfo4</button>
+  <button class="mfo5">mfo5</button>
+  <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/line-height-button-0.5.html b/layout/reftests/forms/button/line-height-button-0.5.html
new file mode 100644
index 000000000..e3343d9e4
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 0.5 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-button-1.0.html b/layout/reftests/forms/button/line-height-button-1.0.html
new file mode 100644
index 000000000..2685624dc
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 1.0 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-button-1.5.html b/layout/reftests/forms/button/line-height-button-1.5.html
new file mode 100644
index 000000000..f86839fc3
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-1.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 1.5 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-input-0.5.html b/layout/reftests/forms/button/line-height-input-0.5.html
new file mode 100644
index 000000000..e3b6dd920
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 0.5 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/line-height-input-1.0.html b/layout/reftests/forms/button/line-height-input-1.0.html
new file mode 100644
index 000000000..18f8b4646
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.0 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/line-height-input-1.5.html b/layout/reftests/forms/button/line-height-input-1.5.html
new file mode 100644
index 000000000..ea486d14e
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-1.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.5 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/max-height-ref.html b/layout/reftests/forms/button/max-height-ref.html
new file mode 100644
index 000000000..ea12a8668
--- /dev/null
+++ b/layout/reftests/forms/button/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  button {
+    height: 50px;
+    padding: 23px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/max-height.html b/layout/reftests/forms/button/max-height.html
new file mode 100644
index 000000000..87ac8a979
--- /dev/null
+++ b/layout/reftests/forms/button/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  button {
+    max-height: 50px;
+    padding: 23px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/min-height-ref.html b/layout/reftests/forms/button/min-height-ref.html
new file mode 100644
index 000000000..5f0f2d654
--- /dev/null
+++ b/layout/reftests/forms/button/min-height-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+.btn1, .btn2 {
+    border: 5px solid green;
+    background-color: blue;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<input type='submit' class='btn1' value='' />
+<input type='submit' class='btn2' value='' />
+</body>
+</html>
diff --git a/layout/reftests/forms/button/min-height.html b/layout/reftests/forms/button/min-height.html
new file mode 100644
index 000000000..cadffa78d
--- /dev/null
+++ b/layout/reftests/forms/button/min-height.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+.btn1, .btn2 {
+    border: 5px solid green;
+    background-color: blue;
+}
+.btn1 {
+    min-height: 50px;
+}
+.btn2 {
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<input type='submit' class='btn1' value='' />
+<input type='submit' class='btn2' value='' />
+</body>
+</html>
diff --git a/layout/reftests/forms/button/overflow-areas-1-ref.html b/layout/reftests/forms/button/overflow-areas-1-ref.html
new file mode 100644
index 000000000..a1eb50575
--- /dev/null
+++ b/layout/reftests/forms/button/overflow-areas-1-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>Reference case</title>
+  <style>
+    input, button {
+      border: 0;             /* Combined, these mean the gray area is the */
+      background: lightgray; /* border-box size. */
+
+      outline: 2px solid black; /* The outlined area is the overflow area. */
+      width: 1px;   /* (To attempt to trigger overflow) */
+
+      display: block;     /* Put each button on its own line, w/ some margin, */
+      margin-bottom: 5px; /* so that any overflow doesn't get stomped on.     */
+
+      font: 8px serif; /* (This just lets the testcase fit better on mobile.) */
+    }
+
+    .oh { overflow: hidden }
+  </style>
+</head>
+<body>
+  <!-- For the reference case, we just put "overflow:hidden" on everything. -->
+  <input class="oh" type="reset">
+  <input class="oh" type="submit">
+  <input class="oh" type="button" value="InputTypeButton">
+  <!-- ...with one exception: button with (default) overflow:visible.
+       Such buttons *do* actually allow their contents to overflow. -->
+  <button>ActualButton</button>
+
+  <input  class="oh" type="reset">
+  <input  class="oh" type="submit">
+  <input  class="oh" type="button" value="InputTypeButton">
+  <button class="oh">ActualButton</button>
+
+  <input  class="oh" type="reset">
+  <input  class="oh" type="submit">
+  <input  class="oh" type="button" value="InputTypeButton">
+  <button class="oh">ActualButton</button>
+
+  <input  class="oh" type="reset">
+  <input  class="oh" type="submit">
+  <input  class="oh" type="button" value="InputTypeButton">
+  <button class="oh">ActualButton</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/overflow-areas-1.html b/layout/reftests/forms/button/overflow-areas-1.html
new file mode 100644
index 000000000..b1a34dfe4
--- /dev/null
+++ b/layout/reftests/forms/button/overflow-areas-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<!-- For buttons whose painting gets clipped to their border-box area,
+     we should *also* clip their overflow area (as exposed via 'outline').
+     This test exposes these areas so they can be visualized, and checks that
+     they match when we expect them to. -->
+<head>
+  <title>Testcase for bug 1261284</title>
+  <style>
+    input, button {
+      border: 0;             /* Combined, these mean the gray area is the */
+      background: lightgray; /* border-box size. */
+
+      outline: 2px solid black; /* The outlined area is the overflow area. */
+      width: 1px;   /* (To attempt to trigger overflow) */
+
+      display: block;     /* Put each button on its own line, w/ some margin, */
+      margin-bottom: 5px; /* so that any overflow doesn't get stomped on.     */
+
+      font: 8px serif; /* (This just lets the testcase fit better on mobile.) */
+    }
+
+    .oh { overflow: hidden }
+    .oa { overflow: auto }
+    .os { overflow: scroll }
+  </style>
+</head>
+<body>
+  <input type="reset">
+  <input type="submit">
+  <input type="button" value="InputTypeButton">
+  <button>ActualButton</button>
+
+  <input  class="oh" type="reset">
+  <input  class="oh" type="submit">
+  <input  class="oh" type="button" value="InputTypeButton">
+  <button class="oh">ActualButton</button>
+
+  <input  class="oa" type="reset">
+  <input  class="oa" type="submit">
+  <input  class="oa" type="button" value="InputTypeButton">
+  <button class="oa">ActualButton</button>
+
+  <input  class="os" type="reset">
+  <input  class="os" type="submit">
+  <input  class="os" type="button" value="InputTypeButton">
+  <button class="os">ActualButton</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-1-ref.html b/layout/reftests/forms/button/percent-height-child-1-ref.html
new file mode 100644
index 000000000..b2b810958
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-1-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+    display: inline-block;
+    width: 80px;
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    text-align: center;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+}
+
+div.p80 {
+    background: pink;
+}
+
+div.p100 {
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<div class="button" style="height: 100px">
+  <div class="p80" style="margin-top: 10px; height: 80px">abc</div>
+</div>
+
+<div class="button" style="height: 100px">
+  <div class="p100" style="height: 100px">abc</div>
+</div>
+
+<!--Button is using intrinsic height: -->
+<div class="button">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button">
+  <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-1.html b/layout/reftests/forms/button/percent-height-child-1.html
new file mode 100644
index 000000000..c676715c2
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-1.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent heights on content inside of
+     a <button> element (resolving the percent against the <button>).
+     (In this testcase, the button has no focus-border/padding.) -->
+<html>
+<head>
+<style>
+button {
+    width: 80px;
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+    -moz-appearance: none;
+}
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+div.p80 {
+    height: 80%;
+    background: pink;
+}
+
+div.p100 {
+    height: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<button style="height: 100px">
+  <div class="p80">abc</div>
+</button>
+
+<button style="height: 100px">
+  <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic height: -->
+<button>
+  <div class="p80">abc</div>
+</button>
+
+<button>
+  <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-2-ref.html b/layout/reftests/forms/button/percent-height-child-2-ref.html
new file mode 100644
index 000000000..7491ed71e
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-2-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+    display: inline-block;
+    width: 78px;
+    border: 0;
+
+    /* Padding to match the -moz-focus-inner border/padding in testcase: */
+    padding: 7px 1px 3px;
+
+    font: 10px sans-serif;
+    text-align: center;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+}
+
+div.p80 {
+    background: pink;
+}
+
+div.p100 {
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<div class="button" style="height: 100px">
+  <div class="p80" style="margin-top: 10px; height: 80px">abc</div>
+</div>
+
+<div class="button" style="height: 100px">
+  <div class="p100" style="height: 100px">abc</div>
+</div>
+
+<!--Button is using intrinsic height: -->
+<div class="button">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button">
+  <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-2.html b/layout/reftests/forms/button/percent-height-child-2.html
new file mode 100644
index 000000000..7eecea1ad
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-2.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent heights on content inside of
+     a <button> element (resolving the percent against the <button>).
+     (In this testcase, the button has some focus-border/padding, which
+     occupies part of the button's content-box and which we'll have to
+     subtract out from the button's size before using it to resolve
+     percentages sizes.) -->
+<html>
+<head>
+<style>
+button {
+    width: 80px;
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+    -moz-appearance: none;
+}
+button::-moz-focus-inner {
+    padding: 6px 0 2px;
+    border: 1px dotted transparent;
+}
+
+div.p80 {
+    height: 80%;
+    background: pink;
+}
+
+div.p100 {
+    height: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<button style="height: 110px">
+  <div class="p80">abc</div>
+</button>
+
+<button style="height: 110px">
+  <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic height: -->
+<button>
+  <div class="p80">abc</div>
+</button>
+
+<button>
+  <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-1-ref.html b/layout/reftests/forms/button/percent-width-child-1-ref.html
new file mode 100644
index 000000000..dcc228994
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-1-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+    display: inline-block;
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    text-align: center;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+}
+
+div.p80 {
+    width: 80%;
+    background: pink;
+}
+
+div.p100 {
+    width: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<div class="button" style="width: 100px">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button" style="width: 100px">
+  <div class="p100">abc</div>
+</div>
+
+<!--Button is using intrinsic width: -->
+<div class="button">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button">
+  <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-1.html b/layout/reftests/forms/button/percent-width-child-1.html
new file mode 100644
index 000000000..fdd2b4923
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-1.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent widths on content inside of
+     a <button> element (resolving the percent against the <button>).
+     (In this testcase, the button has no focus-border/padding.) -->
+<html>
+<head>
+<style>
+button {
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+    -moz-appearance: none;
+}
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+div.p80 {
+    width: 80%;
+    background: pink;
+}
+
+div.p100 {
+    width: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<button style="width: 100px">
+  <div class="p80">abc</div>
+</button>
+
+<button style="width: 100px">
+  <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic width: -->
+<button>
+  <div class="p80">abc</div>
+</button>
+
+<button>
+  <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-2-ref.html b/layout/reftests/forms/button/percent-width-child-2-ref.html
new file mode 100644
index 000000000..19a24a737
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-2-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+    display: inline-block;
+    border: 0;
+
+    /* Padding to match the -moz-focus-inner border/padding in testcase: */
+    padding: 1px 7px 1px 3px;
+
+    font: 10px sans-serif;
+    text-align: center;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+}
+
+div.p80 {
+    width: 80%;
+    background: pink;
+}
+
+div.p100 {
+    width: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<div class="button" style="width: 100px">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button" style="width: 100px">
+  <div class="p100">abc</div>
+</div>
+
+<!--Button is using intrinsic width: -->
+<div class="button">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button">
+  <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-2.html b/layout/reftests/forms/button/percent-width-child-2.html
new file mode 100644
index 000000000..d46ff62af
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent widths on content inside of
+     a <button> element (resolving the percent against the <button>).
+     (In this testcase, the button has some focus-border/padding, which
+     occupies part of the button's content-box and which we'll have to
+     subtract out from the button's size before using it to resolve
+     percentages sizes.) -->
+<html>
+<head>
+<style>
+button {
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+    -moz-appearance: none;
+}
+button::-moz-focus-inner {
+    padding: 0 6px 0 2px;
+    border: 1px dotted transparent;
+}
+
+div.p80 {
+    width: 80%;
+    background: pink;
+}
+
+div.p100 {
+    width: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<button style="width: 110px">
+  <div class="p80">abc</div>
+</button>
+
+<button style="width: 110px">
+  <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic width: -->
+<button>
+  <div class="p80">abc</div>
+</button>
+
+<button>
+  <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/reftest-stylo.list b/layout/reftests/forms/button/reftest-stylo.list
new file mode 100644
index 000000000..c76d15c91
--- /dev/null
+++ b/layout/reftests/forms/button/reftest-stylo.list
@@ -0,0 +1,61 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== first-letter-1.html first-letter-1.html
+== first-letter-1.html first-letter-1.html
+
+== focus-area-percent-units-1.html focus-area-percent-units-1.html
+== focus-area-percent-units-2.html focus-area-percent-units-2.html
+
+== max-height.html max-height.html
+== min-height.html min-height.html
+== overflow-areas-1.html overflow-areas-1.html
+
+# The buttons in these tests have some fancy shading applied to their corners
+# on B2G, despite their "-moz-appearance: none; background: gray", so they
+# don't quite match the reference case's normal <div>. That's why they're fuzzy.
+fuzzy-if(B2G||Mulet||Android,125,20) == percent-height-child-1.html percent-height-child-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+pref(browser.display.focus_ring_width,1) fuzzy-if(B2G||Mulet||Android,125,80) == percent-height-child-2.html percent-height-child-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(B2G||Mulet||Android,125,20) == percent-width-child-1.html percent-width-child-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+pref(browser.display.focus_ring_width,1) fuzzy-if(B2G||Mulet||Android,125,80) == percent-width-child-2.html percent-width-child-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+== vertical-centering.html vertical-centering.html
+
+== line-height-button-0.5.html line-height-button-0.5.html
+== line-height-button-1.5.html line-height-button-1.5.html
+== line-height-input-0.5.html line-height-input-0.5.html
+== line-height-input-1.5.html line-height-input-1.5.html
+
+# Looks like Android and B2G change the text color, but to something slightly
+# different from ColorGray
+fails-if(Android||B2G||Mulet) == disabled-1.html disabled-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== disabled-2.html disabled-2.html
+
+== disabled-3.html disabled-3.html
+== disabled-4.html disabled-4.html
+== disabled-5.html disabled-5.html
+== disabled-6.html disabled-6.html
+
+fails-if(B2G||Mulet) == width-auto-size-em-ltr.html width-auto-size-em-ltr.html
+# Bug 1145672
+# Bug 1150486
+fails-if(B2G||Mulet) == width-auto-size-ltr.html width-auto-size-ltr.html
+# Bug 1145672
+# Bug 1150486
+== width-exact-fit-ltr.html width-exact-fit-ltr.html
+== width-erode-part-focuspadding-ltr.html width-erode-part-focuspadding-ltr.html
+== width-erode-all-focuspadding-ltr.html width-erode-all-focuspadding-ltr.html
+== width-erode-overflow-focuspadding-ltr.html width-erode-overflow-focuspadding-ltr.html
+fails-if(B2G||Mulet) == width-auto-size-em-rtl.html width-auto-size-em-rtl.html
+# Bug 1145672
+# Bug 1150486
+fails-if(B2G||Mulet) == width-auto-size-rtl.html width-auto-size-rtl.html
+# Bug 1145672
+# Bug 1150486
+== width-exact-fit-rtl.html width-exact-fit-rtl.html
+== width-erode-part-focuspadding-rtl.html width-erode-part-focuspadding-rtl.html
+== width-erode-all-focuspadding-rtl.html width-erode-all-focuspadding-rtl.html
+== width-erode-overflow-focuspadding-rtl.html width-erode-overflow-focuspadding-rtl.html
diff --git a/layout/reftests/forms/button/reftest.list b/layout/reftests/forms/button/reftest.list
new file mode 100644
index 000000000..cefec2e85
--- /dev/null
+++ b/layout/reftests/forms/button/reftest.list
@@ -0,0 +1,48 @@
+== first-letter-1.html first-letter-1-ref.html
+!= first-letter-1.html first-letter-1-noref.html
+
+== focus-area-percent-units-1.html focus-area-percent-units-1-ref.html
+== focus-area-percent-units-2.html focus-area-percent-units-2-ref.html
+
+== max-height.html max-height-ref.html
+== min-height.html min-height-ref.html
+== overflow-areas-1.html overflow-areas-1-ref.html
+
+# The buttons in these tests have some fancy shading applied to their corners
+# on Android, despite their "-moz-appearance: none; background: gray", so they
+# don't quite match the reference case's normal <div>. That's why they're fuzzy.
+fuzzy-if(Android,125,20) == percent-height-child-1.html percent-height-child-1-ref.html
+pref(browser.display.focus_ring_width,1) fuzzy-if(Android,125,80) == percent-height-child-2.html percent-height-child-2-ref.html
+fuzzy-if(Android,125,20) == percent-width-child-1.html  percent-width-child-1-ref.html
+pref(browser.display.focus_ring_width,1) fuzzy-if(Android,125,80) == percent-width-child-2.html  percent-width-child-2-ref.html
+
+== vertical-centering.html vertical-centering-ref.html
+
+!= line-height-button-0.5.html line-height-button-1.0.html
+!= line-height-button-1.5.html line-height-button-1.0.html
+!= line-height-input-0.5.html line-height-input-1.0.html
+!= line-height-input-1.5.html line-height-input-1.0.html
+
+# Looks like Android changes the text color, but to something slightly
+# different from ColorGray
+fails-if(Android) == disabled-1.html disabled-1-ref.html
+== disabled-2.html disabled-2-ref.html
+
+!= disabled-3.html disabled-3-notref.html
+!= disabled-4.html disabled-4-notref.html
+!= disabled-5.html disabled-5-notref.html
+!= disabled-6.html disabled-6-notref.html
+
+== width-auto-size-em-ltr.html width-auto-size-em-ltr-ref.html
+== width-auto-size-ltr.html width-auto-size-ltr-ref.html
+== width-exact-fit-ltr.html width-auto-size-ltr-ref.html
+== width-erode-part-focuspadding-ltr.html width-erode-part-focuspadding-ltr-ref.html
+== width-erode-all-focuspadding-ltr.html width-erode-all-focuspadding-ltr-ref.html
+== width-erode-overflow-focuspadding-ltr.html width-erode-overflow-focuspadding-ltr-ref.html
+== width-auto-size-em-rtl.html width-auto-size-em-rtl-ref.html
+== width-auto-size-rtl.html width-auto-size-rtl-ref.html
+== width-exact-fit-rtl.html width-auto-size-rtl-ref.html
+== width-erode-part-focuspadding-rtl.html width-erode-part-focuspadding-rtl-ref.html
+== width-erode-all-focuspadding-rtl.html width-erode-all-focuspadding-rtl-ref.html
+== width-erode-overflow-focuspadding-rtl.html width-erode-overflow-focuspadding-rtl-ref.html
+== display-grid-flex-columnset.html display-grid-flex-columnset-ref.html
diff --git a/layout/reftests/forms/button/vertical-centering-ref.html b/layout/reftests/forms/button/vertical-centering-ref.html
new file mode 100644
index 000000000..aa6d76367
--- /dev/null
+++ b/layout/reftests/forms/button/vertical-centering-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    height: 100px;
+    display: inline-block;
+    border: 0;
+    padding: 0;
+
+    font: 2em/100px sans-serif;
+    text-align: center;
+
+    background: transparent;
+    color: black;
+}
+</style>
+</head>
+<body>
+<div>button</div>
+<div>button</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/vertical-centering.html b/layout/reftests/forms/button/vertical-centering.html
new file mode 100644
index 000000000..08ca38519
--- /dev/null
+++ b/layout/reftests/forms/button/vertical-centering.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+input, div {
+    height: 100px;
+    display: inline-block;
+    border: 0;
+    padding: 0;
+
+    font: 2em sans-serif;
+
+    background: transparent;
+    color: black;
+}
+input {
+    -moz-appearance: none;
+}
+input::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+div {
+    line-height: 100px;
+    text-align: center;
+}
+</style>
+</head>
+<body>
+<input type='button' value='button' />
+<div>button</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
new file mode 100644
index 000000000..1e7ab40bb
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+  margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr.html b/layout/reftests/forms/button/width-auto-size-em-ltr.html
new file mode 100644
index 000000000..3285c3e95
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 1em;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
new file mode 100644
index 000000000..121471474
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+  margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl.html b/layout/reftests/forms/button/width-auto-size-em-rtl.html
new file mode 100644
index 000000000..fb72ef97e
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 1em;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
new file mode 100644
index 000000000..c1ba89860
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-ltr.html b/layout/reftests/forms/button/width-auto-size-ltr.html
new file mode 100644
index 000000000..c8f3f7d11
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-ltr.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
new file mode 100644
index 000000000..3e09016dc
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-rtl.html b/layout/reftests/forms/button/width-auto-size-rtl.html
new file mode 100644
index 000000000..7ae3092f9
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
new file mode 100644
index 000000000..c85da00e3
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 0px; /* for implicit focuspadding, fully eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
new file mode 100644
index 000000000..4978a57e4
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 62px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
new file mode 100644
index 000000000..762e443f8
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 0px; /* for implicit focuspadding, fully eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
new file mode 100644
index 000000000..d4b028b48
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 62px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
new file mode 100644
index 000000000..6f7047cce
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px -2px 1px 0; /* for implicit focuspadding, fully eroded and overflowed */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
new file mode 100644
index 000000000..daecef56e
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 60px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
new file mode 100644
index 000000000..1b36154cf
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 0 1px -2px; /* for implicit focuspadding, fully eroded and overflowed */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
new file mode 100644
index 000000000..b76a3957a
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 60px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
new file mode 100644
index 000000000..59cbd0208
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 2px; /* for implicit focuspadding, partly eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
new file mode 100644
index 000000000..c0d64b279
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 66px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
new file mode 100644
index 000000000..0765a673d
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 2px; /* for implicit focuspadding, partly eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
new file mode 100644
index 000000000..9b8826938
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 66px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-exact-fit-ltr.html b/layout/reftests/forms/button/width-exact-fit-ltr.html
new file mode 100644
index 000000000..58db0aa70
--- /dev/null
+++ b/layout/reftests/forms/button/width-exact-fit-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 68px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-exact-fit-rtl.html b/layout/reftests/forms/button/width-exact-fit-rtl.html
new file mode 100644
index 000000000..996a69d83
--- /dev/null
+++ b/layout/reftests/forms/button/width-exact-fit-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 68px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
-- 
cgit v1.2.3