3 files changed, 9 insertions, 17 deletions
diff --git a/layout/reftests/forms/select/vertical-centering-ref.html b/layout/reftests/forms/select/vertical-centering-ref.html
index f5d8554563..82bbb7d3d0 100644
--- a/layout/reftests/forms/select/vertical-centering-ref.html
+++ b/layout/reftests/forms/select/vertical-centering-ref.html
@@ -7,15 +7,12 @@
   select {
     -moz-appearance: none;
     border: none;
-    font-family: Ahem;
-    font-size: 20px;
+    font: 20px/1 Ahem;
     box-sizing: content-box;
-    /*
-     * Why are these top/bottom paddings 7px rather than 10px?  1px each is
-     * eaten up by padding on the combobox display area, but I have no idea
-     * where the extra 4px somewhere else are coming from...
-     */
-    padding: 7px 0 7px 0;
+    /* The testcase has 20px-tall text, which should be centered in a 40px-tall
+     content-box (with 10px of extra space above and below).  We emulate that
+     by having explicit 10px of padding on top and bottom. */
+    padding: 10px 0 10px 0;
   }
 </style>
 <select>
diff --git a/layout/reftests/forms/select/vertical-centering.html b/layout/reftests/forms/select/vertical-centering.html
index 6a2daa9e7b..fb464395d5 100644
--- a/layout/reftests/forms/select/vertical-centering.html
+++ b/layout/reftests/forms/select/vertical-centering.html
@@ -7,11 +7,10 @@
   select {
     -moz-appearance: none;
     border: none;
-    font-family: Ahem;
-    font-size: 20px;
-    padding: 0;
+    font: 20px/1 Ahem;
     box-sizing: content-box;
     height: 40px;
+    padding: 0;
   }
 </style>
 <select>
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css
index b0b171a892..a808822c89 100644
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -251,6 +251,8 @@ select {
   display: inline-block;
   page-break-inside: avoid;
   overflow-clip-box: padding-box !important; /* bug 992447 */
+  padding-block-start: 1px;
+  padding-block-end: 1px;
 }
 
 /* Need the "select[size][multiple]" selector to override the settings on
@@ -263,8 +265,6 @@ select[size][multiple] {
   background-color: -moz-Field;
   color: -moz-FieldText;
   vertical-align: text-bottom;
-  padding-block-start: 1px;
-  padding-block-end: 1px;
   padding-inline-start: 0;
   padding-inline-end: 0;
   -moz-appearance: listbox;
@@ -327,10 +327,6 @@ select:empty {
 
 *|*::-moz-display-comboboxcontrol-frame {
   overflow: -moz-hidden-unscrollable;
-  /* This block-start/end padding plus the combobox block-start/end border need to
-     add up to the block-start/end borderpadding of text inputs and buttons */
-  padding-block-start: 1px;
-  padding-block-end: 1px;
   padding-inline-start: 4px;
   padding-inline-end: 0;
   color: inherit;