From d73c4c046d46cfc794f0eaf6444e14a958b32bb9 Mon Sep 17 00:00:00 2001
From: Moonchild <moonchild@palemoon.org>
Date: Fri, 22 Jul 2022 16:38:07 +0000
Subject: Issue #1970 - Part 3: Update reftests.

---
 layout/reftests/bugs/491180-1-ref.html             |  2 +-
 layout/reftests/bugs/491180-2-ref.html             |  2 +-
 .../grid-item-intrinsic-size-normal-001-ref.html   | 82 +++++++++++-----------
 ...ntrinsic-with-percents-across-elements-ref.html |  8 +--
 .../button/focus-area-percent-units-1-ref.html     | 41 -----------
 .../forms/button/focus-area-percent-units-1.html   | 39 ----------
 .../button/focus-area-percent-units-2-ref.html     | 38 ----------
 .../forms/button/focus-area-percent-units-2.html   | 36 ----------
 .../forms/button/percent-height-child-2-ref.html   | 54 --------------
 .../forms/button/percent-height-child-2.html       | 63 -----------------
 .../forms/button/percent-width-child-2-ref.html    | 55 ---------------
 .../forms/button/percent-width-child-2.html        | 62 ----------------
 layout/reftests/forms/button/reftest.list          |  9 ---
 .../forms/button/width-auto-size-em-ltr-ref.html   |  1 -
 .../forms/button/width-auto-size-em-rtl-ref.html   |  1 -
 .../forms/button/width-auto-size-ltr-ref.html      |  1 -
 .../forms/button/width-auto-size-rtl-ref.html      |  1 -
 .../width-erode-all-focuspadding-ltr-ref.html      | 20 ------
 .../button/width-erode-all-focuspadding-ltr.html   | 21 ------
 .../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 |  2 +-
 .../reftests/forms/button/width-exact-fit-rtl.html |  2 +-
 .../writing-mode/ua-style-sheet-button-1a-ref.html |  4 +-
 .../ua-style-sheet-input-color-1-ref.html          |  4 +-
 31 files changed, 53 insertions(+), 663 deletions(-)
 delete mode 100644 layout/reftests/forms/button/focus-area-percent-units-1-ref.html
 delete mode 100644 layout/reftests/forms/button/focus-area-percent-units-1.html
 delete mode 100644 layout/reftests/forms/button/focus-area-percent-units-2-ref.html
 delete mode 100644 layout/reftests/forms/button/focus-area-percent-units-2.html
 delete mode 100644 layout/reftests/forms/button/percent-height-child-2-ref.html
 delete mode 100644 layout/reftests/forms/button/percent-height-child-2.html
 delete mode 100644 layout/reftests/forms/button/percent-width-child-2-ref.html
 delete mode 100644 layout/reftests/forms/button/percent-width-child-2.html
 delete mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
 delete mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
 delete mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
 delete mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
 delete mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
 delete mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
 delete mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
 delete mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
 delete mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
 delete mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html

(limited to 'layout/reftests')

diff --git a/layout/reftests/bugs/491180-1-ref.html b/layout/reftests/bugs/491180-1-ref.html
index 2cf61ad165..e9dcf7cc56 100644
--- a/layout/reftests/bugs/491180-1-ref.html
+++ b/layout/reftests/bugs/491180-1-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
 <html>
-  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 0; height: 0; font: inherit; padding: 1px 0">
+  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 0; height: 0; font: inherit; padding: 0">
     Some text <div style="background: green; width: 100px; height: 100px"></div>
   </div>
diff --git a/layout/reftests/bugs/491180-2-ref.html b/layout/reftests/bugs/491180-2-ref.html
index 2b7a85630d..7ab4aa58c5 100644
--- a/layout/reftests/bugs/491180-2-ref.html
+++ b/layout/reftests/bugs/491180-2-ref.html
@@ -1,4 +1,4 @@
 <!DOCTYPE html>
 <html>
-  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 20px; font: inherit; padding: 1px 0; white-space: pre; overflow: hidden">Some text</div>
+  <div style="padding: 0; margin: 0; border: none; background: transparent; -moz-appearance: none; width: 20px; font: inherit; padding: 0; white-space: pre; overflow: hidden">Some text</div>
   </div>
diff --git a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
index 98cd026d6d..c0dbcbac03 100644
--- a/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-intrinsic-size-normal-001-ref.html
@@ -147,79 +147,79 @@ button {
 var buttonSizes =
 [
   ['32px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['2px', '4px'],
+  ['0px', '0px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
   ['32px', '20px'],
   ['10px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
   ['32px', '4px'],
   ['10px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['2px', '4px'],
-  ['4px', '32px'],
-  ['2px', '32px'],
-  ['4px', '4px'],
-  ['2px', '4px'],
-  ['4px', '32px'],
-  ['2px', '32px'],
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
+  ['0px', '4px'],
   ['4px', '32px'],
   ['2px', '32px'],
+  ['0px', '0px'],
+  ['2px', '0px'],
+  ['0px', '32px'],
+  ['0px', '32px'],
+  ['0px', '32px'],
+  ['0px', '32px'],
   ['20px', '32px'],
   ['20px', '10px'],
-  ['20px', '4px'],
-  ['20px', '4px'],
+  ['20px', '0px'],
+  ['20px', '0px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['4px', '32px'],
   ['4px', '10px'],
-  ['8px', '4px'],
-  ['8px', '4px'],
-  ['8px', '32px'],
-  ['8px', '10px'],
-  ['8px', '32px'],
-  ['8px', '10px'],
-  ['20px', '4px'],
-  ['20px', '4px'],
+  ['0px', '0px'],
+  ['0px', '0px'],
+  ['0px', '32px'],
+  ['0px', '10px'],
+  ['0px', '32px'],
+  ['0px', '10px'],
   ['20px', '4px'],
   ['20px', '4px'],
+  ['20px', '0px'],
+  ['20px', '0px'],
   ['20px', '4px'],
   ['20px', '2px'],
   ['20px', '4px'],
   ['20px', '2px'],
-  ['20px', '4px'],
-  ['20px', '4px'],
-  ['20px', '4px'],
-  ['20px', '4px'],
+  ['20px', '0px'],
+  ['20px', '0px'],
+  ['20px', '0px'],
+  ['20px', '0px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['20px', '32px'],
   ['20px', '10px'],
   ['32px', '20px'],
   ['10px', '20px'],
-  ['8px', '20px'],
-  ['8px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
   ['32px', '20px'],
   ['10px', '20px'],
   ['32px', '20px'],
   ['10px', '20px'],
   ['4px', '20px'],
   ['2px', '20px'],
-  ['4px', '20px'],
-  ['4px', '20px'],
+  ['0px', '20px'],
+  ['0px', '20px'],
   ['4px', '20px'],
   ['2px', '20px'],
   ['4px', '20px'],
diff --git a/layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements-ref.html b/layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements-ref.html
index dbd50f8f4b..57dd5ac56c 100644
--- a/layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements-ref.html
+++ b/layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements-ref.html
@@ -89,14 +89,14 @@ canvas {
 </tr></table>
 
 <table><tr>
-  <!-- 2px border, 2px padding, 4px ::-moz-focus-inner padding, 2px ::-moz-focus-inner border -->
-  <td><div style="width: 10px"><input type="button" style="width: 5px"></div></td>
+  <!-- 2px border, 2px padding -->
+  <td><div style="width: 4px"><input type="button" style="width: 2px"></div></td>
   <td>empty input type="button", width: 50%</td>
 </tr></table>
 
 <table><tr>
-  <!-- 2px border, 2px padding, 4px ::-moz-focus-inner padding, 2px ::-moz-focus-inner border -->
-  <td><div style="width: 10px"><input type="button" style="width: 5px"></div></td>
+  <!-- 2px border, 2px padding -->
+  <td><div style="width: 4px"><input type="button" style="width: 2px"></div></td>
   <td>empty input type="button", max-width: 50%</td>
 </tr></table>
 
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
deleted file mode 100644
index a5c4c95f51..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-1-ref.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!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>
-</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
deleted file mode 100644
index 23c97ab713..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-1.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-<html>
-<!-- The ::-moz-focus-inner button pseudo-element only supports
-     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; }
-  </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>
-</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
deleted file mode 100644
index b17db2753e..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-2-ref.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!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; }
-  </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>
-</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
deleted file mode 100644
index 8ebf30343c..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-2.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<!-- Any copyright is dedicated to the Public Domain.
-   - http://creativecommons.org/publicdomain/zero/1.0/ -->
-<html>
-<!-- The ::-moz-focus-inner button pseudo-element only supports
-     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; }
-  </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>
-</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
deleted file mode 100644
index 7491ed71e4..0000000000
--- a/layout/reftests/forms/button/percent-height-child-2-ref.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!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
deleted file mode 100644
index 7eecea1ad4..0000000000
--- a/layout/reftests/forms/button/percent-height-child-2.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!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-2-ref.html b/layout/reftests/forms/button/percent-width-child-2-ref.html
deleted file mode 100644
index 19a24a7375..0000000000
--- a/layout/reftests/forms/button/percent-width-child-2-ref.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!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
deleted file mode 100644
index d46ff62af5..0000000000
--- a/layout/reftests/forms/button/percent-width-child-2.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!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.list b/layout/reftests/forms/button/reftest.list
index db314516df..7492c8f08c 100644
--- a/layout/reftests/forms/button/reftest.list
+++ b/layout/reftests/forms/button/reftest.list
@@ -1,9 +1,6 @@
 == 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
@@ -31,13 +28,7 @@ pref(browser.display.focus_ring_width,1) == percent-width-child-2.html  percent-
 == 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/width-auto-size-em-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
index 1e7ab40bba..4a998c3435 100644
--- a/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
@@ -11,7 +11,6 @@ div.button {
 span {
   display: inline-block; vertical-align: middle;
   height: 2em; width: 5em; border: 2px solid blue;
-  margin: 1px 3px; /* for implicit focuspadding */
 }
 
 </style>
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
index 1214714744..59f3ba424b 100644
--- a/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
@@ -12,7 +12,6 @@ div.button {
 span {
   display: inline-block; vertical-align: middle;
   height: 2em; width: 5em; border: 2px solid blue;
-  margin: 1px 3px; /* for implicit focuspadding */
 }
 
 </style>
diff --git a/layout/reftests/forms/button/width-auto-size-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
index c1ba89860e..48372131ea 100644
--- a/layout/reftests/forms/button/width-auto-size-ltr-ref.html
+++ b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
@@ -12,7 +12,6 @@ div.button {
 span {
   display: inline-block; vertical-align: middle;
   height: 20px; width: 50px; border: 2px solid blue;
-  margin: 1px 3px; /* for implicit focuspadding */
 }
 
 </style>
diff --git a/layout/reftests/forms/button/width-auto-size-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
index 3e09016dc3..f644a196f2 100644
--- a/layout/reftests/forms/button/width-auto-size-rtl-ref.html
+++ b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
@@ -13,7 +13,6 @@ div.button {
 span {
   display: inline-block; vertical-align: middle;
   height: 20px; width: 50px; border: 2px solid blue;
-  margin: 1px 3px; /* for implicit focuspadding */
 }
 
 </style>
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
deleted file mode 100644
index c85da00e3c..0000000000
--- a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!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
deleted file mode 100644
index 4978a57e4e..0000000000
--- a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!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-overflow-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
deleted file mode 100644
index 6f7047cce3..0000000000
--- a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!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
deleted file mode 100644
index daecef56e4..0000000000
--- a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!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
deleted file mode 100644
index 1b36154cfc..0000000000
--- a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!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
deleted file mode 100644
index b76a3957a5..0000000000
--- a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!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
deleted file mode 100644
index 59cbd02086..0000000000
--- a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!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
deleted file mode 100644
index c0d64b2797..0000000000
--- a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!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
deleted file mode 100644
index 0765a673df..0000000000
--- a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!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
deleted file mode 100644
index 9b88269385..0000000000
--- a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!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
index 58db0aa70c..4978a57e4e 100644
--- a/layout/reftests/forms/button/width-exact-fit-ltr.html
+++ b/layout/reftests/forms/button/width-exact-fit-ltr.html
@@ -7,7 +7,7 @@ button {
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 10px;
-  width: 68px;
+  width: 62px;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
diff --git a/layout/reftests/forms/button/width-exact-fit-rtl.html b/layout/reftests/forms/button/width-exact-fit-rtl.html
index 996a69d831..d4b028b48e 100644
--- a/layout/reftests/forms/button/width-exact-fit-rtl.html
+++ b/layout/reftests/forms/button/width-exact-fit-rtl.html
@@ -8,7 +8,7 @@ button {
   border: 2px solid fuchsia;
   padding: 2px;
   font-size: 10px;
-  width: 68px;
+  width: 62px;
   border-radius: 0; /* override mobile/android/themes/core/content.css */
 }
 
diff --git a/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
index 1c3bc73906..7567da08a6 100644
--- a/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-button-1a-ref.html
@@ -10,12 +10,12 @@
 .rtl button,
 .ltr input[type="button"],
 .rtl input[type="button"] {
-  padding: 0px 6px;
+  padding: 0px 8px;
 }
 
 .v-rl button,
 .v-rl input[type="button"] {
-  padding: 6px 0px;
+  padding: 8px 0px;
 }
 </style>
 <div class=ltr>
diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
index ddd3c7ec43..9b6bfe1a87 100644
--- a/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
@@ -10,13 +10,13 @@
 .rtl input[type="color"]:-moz-system-metric(color-picker-available) {
   width: 64px;
   height: 23px;
-  padding: 0px 6px;
+  padding: 0px 8px;
 }
 
 .v-rl input[type="color"]:-moz-system-metric(color-picker-available) {
   height: 64px;
   width: 23px;
-  padding: 6px 0px;
+  padding: 8px 0px;
 }
 </style>
 <div class=ltr>
-- 
cgit v1.2.3