Merge branch '1970-form-focusring-styling'

46 files changed, 196 insertions, 1015 deletions

diff --git a/layout/forms/nsButtonFrameRenderer.cpp b/layout/forms/nsButtonFrameRenderer.cpp
index 5372acb7fb..5113572995 100644
--- a/layout/forms/nsButtonFrameRenderer.cpp
+++ b/layout/forms/nsButtonFrameRenderer.cpp
@@ -36,9 +36,6 @@ nsButtonFrameRenderer::~nsButtonFrameRenderer()
   if (mInnerFocusStyle) {
     mInnerFocusStyle->FrameRelease();
   }
-  if (mOuterFocusStyle) {
-    mOuterFocusStyle->FrameRelease();
-  }
 #endif
 }
 
@@ -244,10 +241,9 @@ void nsDisplayButtonForeground::Paint(nsDisplayListBuilder* aBuilder,
       !presContext->GetTheme()->ThemeDrawsFocusForWidget(disp->mAppearance)) {
     nsRect r = nsRect(ToReferenceFrame(), mFrame->GetSize());
 
-    // Draw the focus and outline borders.
+    // Draw the -moz-focus-inner border
     DrawResult result =
-      mBFR->PaintOutlineAndFocusBorders(aBuilder, presContext, *aCtx,
-                                        mVisibleRect, r);
+      mBFR->PaintInnerFocusBorder(aBuilder, presContext, *aCtx, mVisibleRect, r);
 
     nsDisplayItemGenericImageGeometry::UpdateDrawResult(this, result);
   }
@@ -274,28 +270,48 @@ nsButtonFrameRenderer::DisplayButton(nsDisplayListBuilder* aBuilder,
 
   // Only display focus rings if we actually have them. Since at most one
   // button would normally display a focus ring, most buttons won't have them.
-  if ((mOuterFocusStyle && mOuterFocusStyle->StyleBorder()->HasBorder()) ||
-      (mInnerFocusStyle && mInnerFocusStyle->StyleBorder()->HasBorder())) {
+  if (mInnerFocusStyle && mInnerFocusStyle->StyleBorder()->HasBorder()) {
     aForeground->AppendNewToTop(new (aBuilder)
       nsDisplayButtonForeground(aBuilder, this));
   }
   return NS_OK;
 }
 
+void
+nsButtonFrameRenderer::GetButtonInnerFocusRect(const nsRect& aRect, nsRect& aResult)
+{
+  GetButtonRect(aRect, aResult);
+  aResult.Deflate(mFrame->GetUsedBorderAndPadding());
+
+  if (mInnerFocusStyle) {
+    nsMargin innerFocusPadding(0,0,0,0);
+    mInnerFocusStyle->StylePadding()->GetPadding(innerFocusPadding);
+    
+    nsMargin framePadding = mFrame->GetUsedPadding();
+
+    innerFocusPadding.top = std::min(innerFocusPadding.top,
+                                     framePadding.top);
+    innerFocusPadding.right = std::min(innerFocusPadding.right,
+                                       framePadding.right);
+    innerFocusPadding.bottom = std::min(innerFocusPadding.bottom,
+                                        framePadding.bottom);
+    innerFocusPadding.left = std::min(innerFocusPadding.left,
+                                      framePadding.left);
+
+    aResult.Inflate(innerFocusPadding);
+  }
+}
+
 DrawResult
-nsButtonFrameRenderer::PaintOutlineAndFocusBorders(
+nsButtonFrameRenderer::PaintInnerFocusBorder(
   nsDisplayListBuilder* aBuilder,
   nsPresContext* aPresContext,
   nsRenderingContext& aRenderingContext,
   const nsRect& aDirtyRect,
   const nsRect& aRect)
 {
-  // once we have all that we'll draw the focus if we have it. We will
-  // need to draw 2 focuses, the inner and the outer. This is so we
-  // can do any kind of look and feel. Some buttons have focus on the
-  // outside like mac and motif. While others like windows have it
-  // inside (dotted line).  Usually only one will be specifed. But I
-  // guess you could have both if you wanted to.
+  // we draw the -moz-focus-inner border just inside the button's
+  // normal border and padding, to match Windows themes.
 
   nsRect rect;
 
@@ -305,19 +321,7 @@ nsButtonFrameRenderer::PaintOutlineAndFocusBorders(
 
   DrawResult result = DrawResult::SUCCESS;
 
-  if (mOuterFocusStyle) {
-    // ---------- paint the outer focus border -------------
-
-    GetButtonOuterFocusRect(aRect, rect);
-
-    result &=
-      nsCSSRendering::PaintBorder(aPresContext, aRenderingContext, mFrame,
-                                  aDirtyRect, rect, mOuterFocusStyle, flags);
-  }
-
   if (mInnerFocusStyle) { 
-    // ---------- paint the inner focus border -------------
-
     GetButtonInnerFocusRect(aRect, rect);
 
     result &=
@@ -358,83 +362,12 @@ nsButtonFrameRenderer::PaintBorder(
 
 
 void
-nsButtonFrameRenderer::GetButtonOuterFocusRect(const nsRect& aRect, nsRect& focusRect)
-{
-  focusRect = aRect;
-}
-
-void
 nsButtonFrameRenderer::GetButtonRect(const nsRect& aRect, nsRect& r)
 {
   r = aRect;
-  r.Deflate(GetButtonOuterFocusBorderAndPadding());
-}
-
-
-void
-nsButtonFrameRenderer::GetButtonInnerFocusRect(const nsRect& aRect, nsRect& focusRect)
-{
-  GetButtonRect(aRect, focusRect);
-  focusRect.Deflate(GetButtonBorderAndPadding());
-  focusRect.Deflate(GetButtonInnerFocusMargin());
 }
 
 
-nsMargin
-nsButtonFrameRenderer::GetButtonOuterFocusBorderAndPadding()
-{
-  nsMargin result(0,0,0,0);
-
-  if (mOuterFocusStyle) {
-    mOuterFocusStyle->StylePadding()->GetPadding(result);
-    result += mOuterFocusStyle->StyleBorder()->GetComputedBorder();
-  }
-
-  return result;
-}
-
-nsMargin
-nsButtonFrameRenderer::GetButtonBorderAndPadding()
-{
-  return mFrame->GetUsedBorderAndPadding();
-}
-
-/**
- * Gets the size of the buttons border this is the union of the normal and disabled borders.
- */
-nsMargin
-nsButtonFrameRenderer::GetButtonInnerFocusMargin()
-{
-  nsMargin innerFocusMargin(0,0,0,0);
-
-  if (mInnerFocusStyle) {
-    const nsStyleMargin* margin = mInnerFocusStyle->StyleMargin();
-    margin->GetMargin(innerFocusMargin);
-  }
-
-  return innerFocusMargin;
-}
-
-nsMargin
-nsButtonFrameRenderer::GetButtonInnerFocusBorderAndPadding()
-{
-  nsMargin result(0,0,0,0);
-
-  if (mInnerFocusStyle) {
-    mInnerFocusStyle->StylePadding()->GetPadding(result);
-    result += mInnerFocusStyle->StyleBorder()->GetComputedBorder();
-  }
-
-  return result;
-}
-
-// gets all the focus borders and padding that will be added to the regular border
-nsMargin
-nsButtonFrameRenderer::GetAddedButtonBorderAndPadding()
-{
-  return GetButtonOuterFocusBorderAndPadding() + GetButtonInnerFocusMargin() + GetButtonInnerFocusBorderAndPadding();
-}
-
 /**
  * Call this when styles change
  */
@@ -449,30 +382,18 @@ nsButtonFrameRenderer::ReResolveStyles(nsPresContext* aPresContext)
   if (mInnerFocusStyle) {
     mInnerFocusStyle->FrameRelease();
   }
-  if (mOuterFocusStyle) {
-    mOuterFocusStyle->FrameRelease();
-  }
 #endif
 
-  // style for the inner such as a dotted line (Windows)
+  // get styles assigned to -moz-focus-inner (ie dotted border on Windows)
   mInnerFocusStyle =
     styleSet->ProbePseudoElementStyle(mFrame->GetContent()->AsElement(),
                                       CSSPseudoElementType::mozFocusInner,
                                       context);
 
-  // style for outer focus like a ridged border (MAC).
-  mOuterFocusStyle =
-    styleSet->ProbePseudoElementStyle(mFrame->GetContent()->AsElement(),
-                                      CSSPseudoElementType::mozFocusOuter,
-                                      context);
-
 #ifdef DEBUG
   if (mInnerFocusStyle) {
     mInnerFocusStyle->FrameAddRef();
   }
-  if (mOuterFocusStyle) {
-    mOuterFocusStyle->FrameAddRef();
-  }
 #endif
 }
 
@@ -482,8 +403,6 @@ nsButtonFrameRenderer::GetStyleContext(int32_t aIndex) const
   switch (aIndex) {
   case NS_BUTTON_RENDERER_FOCUS_INNER_CONTEXT_INDEX:
     return mInnerFocusStyle;
-  case NS_BUTTON_RENDERER_FOCUS_OUTER_CONTEXT_INDEX:
-    return mOuterFocusStyle;
   default:
     return nullptr;
   }
@@ -501,14 +420,6 @@ nsButtonFrameRenderer::SetStyleContext(int32_t aIndex, nsStyleContext* aStyleCon
 #endif
     mInnerFocusStyle = aStyleContext;
     break;
-  case NS_BUTTON_RENDERER_FOCUS_OUTER_CONTEXT_INDEX:
-#ifdef DEBUG
-    if (mOuterFocusStyle) {
-      mOuterFocusStyle->FrameRelease();
-    }
-#endif
-    mOuterFocusStyle = aStyleContext;
-    break;
   }
 #ifdef DEBUG
   aStyleContext->FrameAddRef();
diff --git a/layout/forms/nsButtonFrameRenderer.h b/layout/forms/nsButtonFrameRenderer.h
index 8662c52e05..d21303efaf 100644
--- a/layout/forms/nsButtonFrameRenderer.h
+++ b/layout/forms/nsButtonFrameRenderer.h
@@ -20,8 +20,7 @@ class nsStyleContext;
 
 
 #define NS_BUTTON_RENDERER_FOCUS_INNER_CONTEXT_INDEX  0
-#define NS_BUTTON_RENDERER_FOCUS_OUTER_CONTEXT_INDEX  1
-#define NS_BUTTON_RENDERER_LAST_CONTEXT_INDEX   NS_BUTTON_RENDERER_FOCUS_OUTER_CONTEXT_INDEX
+#define NS_BUTTON_RENDERER_LAST_CONTEXT_INDEX   NS_BUTTON_RENDERER_FOCUS_INNER_CONTEXT_INDEX
 
 class nsButtonFrameRenderer {
   typedef mozilla::image::DrawResult DrawResult;
@@ -38,11 +37,11 @@ public:
                          nsDisplayList* aBackground, nsDisplayList* aForeground);
 
 
-  DrawResult PaintOutlineAndFocusBorders(nsDisplayListBuilder* aBuilder,
-                                         nsPresContext* aPresContext,
-                                         nsRenderingContext& aRenderingContext,
-                                         const nsRect& aDirtyRect,
-                                         const nsRect& aRect);
+  DrawResult PaintInnerFocusBorder(nsDisplayListBuilder* aBuilder,
+                                   nsPresContext* aPresContext,
+                                   nsRenderingContext& aRenderingContext,
+                                   const nsRect& aDirtyRect,
+                                   const nsRect& aRect);
 
   DrawResult PaintBorder(nsDisplayListBuilder* aBuilder,
                          nsPresContext* aPresContext,
@@ -57,14 +56,8 @@ public:
   bool isActive();
   bool isDisabled();
 
-  void GetButtonOuterFocusRect(const nsRect& aRect, nsRect& aResult);
   void GetButtonRect(const nsRect& aRect, nsRect& aResult);
   void GetButtonInnerFocusRect(const nsRect& aRect, nsRect& aResult);
-  nsMargin GetButtonOuterFocusBorderAndPadding();
-  nsMargin GetButtonBorderAndPadding();
-  nsMargin GetButtonInnerFocusMargin();
-  nsMargin GetButtonInnerFocusBorderAndPadding();
-  nsMargin GetAddedButtonBorderAndPadding();
 
   nsStyleContext* GetStyleContext(int32_t aIndex) const;
   void SetStyleContext(int32_t aIndex, nsStyleContext* aStyleContext);
@@ -76,9 +69,8 @@ protected:
 
 private:
 
-  // cached styles for focus and outline.
+  // cached style for optional inner focus outline (used on Windows).
   RefPtr<nsStyleContext> mInnerFocusStyle;
-  RefPtr<nsStyleContext> mOuterFocusStyle;
 
   nsFrame* mFrame;
 };
diff --git a/layout/forms/nsComboboxControlFrame.cpp b/layout/forms/nsComboboxControlFrame.cpp
index 459c6f7ecc..2d0395d7a1 100644
--- a/layout/forms/nsComboboxControlFrame.cpp
+++ b/layout/forms/nsComboboxControlFrame.cpp
@@ -1322,7 +1322,8 @@ nsComboboxDisplayFrame::Reflow(nsPresContext*           aPresContext,
     // Note that the only way we can have a computed block size here is
     // if the combobox had a specified block size.  If it didn't, size
     // based on what our rows look like, for lack of anything better.
-    state.SetComputedBSize(mComboBox->mListControlFrame->GetBSizeOfARow());
+    //state.SetComputedBSize(mComboBox->mListControlFrame->GetBSizeOfARow());
+    state.SetLineHeight(state.mParentReflowInput->GetLineHeight());
   }
   WritingMode wm = aReflowInput.GetWritingMode();
   nscoord computedISize = mComboBox->mDisplayISize -
diff --git a/layout/forms/nsHTMLButtonControlFrame.cpp b/layout/forms/nsHTMLButtonControlFrame.cpp
index afedfa7748..1ec0ec6c94 100644
--- a/layout/forms/nsHTMLButtonControlFrame.cpp
+++ b/layout/forms/nsHTMLButtonControlFrame.cpp
@@ -157,10 +157,6 @@ nsHTMLButtonControlFrame::GetMinISize(nsRenderingContext* aRenderingContext)
                                                 kid,
                                                 nsLayoutUtils::MIN_ISIZE);
 
-  result += GetWritingMode().IsVertical()
-    ? mRenderer.GetAddedButtonBorderAndPadding().TopBottom()
-    : mRenderer.GetAddedButtonBorderAndPadding().LeftRight();
-
   return result;
 }
 
@@ -175,10 +171,6 @@ nsHTMLButtonControlFrame::GetPrefISize(nsRenderingContext* aRenderingContext)
                                                 kid,
                                                 nsLayoutUtils::PREF_ISIZE);
 
-  result += GetWritingMode().IsVertical()
-    ? mRenderer.GetAddedButtonBorderAndPadding().TopBottom()
-    : mRenderer.GetAddedButtonBorderAndPadding().LeftRight();
-
   return result;
 }
 
@@ -192,9 +184,6 @@ nsHTMLButtonControlFrame::Reflow(nsPresContext* aPresContext,
   DO_GLOBAL_REFLOW_COUNT("nsHTMLButtonControlFrame");
   DISPLAY_REFLOW(aPresContext, this, aReflowInput, aDesiredSize, aStatus);
 
-  NS_PRECONDITION(aReflowInput.ComputedISize() != NS_INTRINSICSIZE,
-                  "Should have real computed inline-size by now");
-
   if (mState & NS_FRAME_FIRST_REFLOW) {
     nsFormControlFrame::RegUnRegAccessKey(static_cast<nsIFrame*>(this), true);
   }
@@ -237,34 +226,6 @@ nsHTMLButtonControlFrame::Reflow(nsPresContext* aPresContext,
   NS_FRAME_SET_TRUNCATION(aStatus, aReflowInput, aDesiredSize);
 }
 
-// Helper-function that lets us clone the button's reflow state, but with its
-// ComputedWidth and ComputedHeight reduced by the amount of renderer-specific
-// focus border and padding that we're using. (This lets us provide a more
-// appropriate content-box size for descendents' percent sizes to resolve
-// against.)
-static ReflowInput
-CloneReflowInputWithReducedContentBox(
-  const ReflowInput& aButtonReflowInput,
-  const nsMargin& aFocusPadding)
-{
-  nscoord adjustedWidth =
-    aButtonReflowInput.ComputedWidth() - aFocusPadding.LeftRight();
-  adjustedWidth = std::max(0, adjustedWidth);
-
-  // (Only adjust height if it's an actual length.)
-  nscoord adjustedHeight = aButtonReflowInput.ComputedHeight();
-  if (adjustedHeight != NS_INTRINSICSIZE) {
-    adjustedHeight -= aFocusPadding.TopBottom();
-    adjustedHeight = std::max(0, adjustedHeight);
-  }
-
-  ReflowInput clone(aButtonReflowInput);
-  clone.SetComputedWidth(adjustedWidth);
-  clone.SetComputedHeight(adjustedHeight);
-
-  return clone;
-}
-
 void
 nsHTMLButtonControlFrame::ReflowButtonContents(nsPresContext* aPresContext,
                                                ReflowOutput& aButtonDesiredSize,
@@ -275,53 +236,17 @@ nsHTMLButtonControlFrame::ReflowButtonContents(nsPresContext* aPresContext,
   LogicalSize availSize = aButtonReflowInput.ComputedSize(wm);
   availSize.BSize(wm) = NS_INTRINSICSIZE;
 
-  // Buttons have some bonus renderer-determined border/padding,
-  // which occupies part of the button's content-box area:
-  LogicalMargin focusPadding =
-    LogicalMargin(wm, mRenderer.GetAddedButtonBorderAndPadding());
-
-  // See whether out availSize's inline-size is big enough.  If it's
-  // smaller than our intrinsic min iSize, that means that the kid
-  // wouldn't really fit.  In that case, we overflow into our internal
-  // focuspadding (which other browsers don't have) so that there's a
-  // little more space for it.
-  // Note that GetMinISize includes the focusPadding.
-  nscoord IOverflow = GetMinISize(aButtonReflowInput.mRenderingContext) -
-                      aButtonReflowInput.ComputedISize();
-  nscoord IFocusPadding = focusPadding.IStartEnd(wm);
-  nscoord focusPaddingReduction = std::min(IFocusPadding,
-                                           std::max(IOverflow, 0));
-  if (focusPaddingReduction > 0) {
-    nscoord startReduction = focusPadding.IStart(wm);
-    if (focusPaddingReduction != IFocusPadding) {
-      startReduction = NSToCoordRound(startReduction *
-                                      (float(focusPaddingReduction) /
-                                       float(IFocusPadding)));
-    }
-    focusPadding.IStart(wm) -= startReduction;
-    focusPadding.IEnd(wm) -= focusPaddingReduction - startReduction;
-  }
-
   // shorthand for a value we need to use in a bunch of places
   const LogicalMargin& clbp = aButtonReflowInput.ComputedLogicalBorderPadding();
 
-  // Indent the child inside us by the focus border. We must do this separate
-  // from the regular border.
-  availSize.ISize(wm) -= focusPadding.IStartEnd(wm);
-
   LogicalPoint childPos(wm);
-  childPos.I(wm) = focusPadding.IStart(wm) + clbp.IStart(wm);
+  childPos.I(wm) = clbp.IStart(wm);
   availSize.ISize(wm) = std::max(availSize.ISize(wm), 0);
 
-  // Give child a clone of the button's reflow state, with height/width reduced
-  // by focusPadding, so that descendants with height:100% don't protrude.
-  ReflowInput adjustedButtonReflowInput =
-    CloneReflowInputWithReducedContentBox(aButtonReflowInput,
-                                          focusPadding.GetPhysicalMargin(wm));
-
   ReflowInput contentsReflowInput(aPresContext,
-                                        adjustedButtonReflowInput,
-                                        aFirstKid, availSize);
+                                  aButtonReflowInput,
+                                  aFirstKid,
+                                  availSize);
 
   nsReflowStatus contentsReflowStatus;
   ReflowOutput contentsDesiredSize(aButtonReflowInput);
@@ -346,9 +271,8 @@ nsHTMLButtonControlFrame::ReflowButtonContents(nsPresContext* aPresContext,
     buttonContentBox.BSize(wm) = aButtonReflowInput.ComputedBSize();
   } else {
     // Button is intrinsically sized -- it should shrinkwrap the
-    // button-contents' bSize, plus any focus-padding space:
-    buttonContentBox.BSize(wm) =
-      contentsDesiredSize.BSize(wm) + focusPadding.BStartEnd(wm);
+    // button-contents' bSize:
+    buttonContentBox.BSize(wm) = contentsDesiredSize.BSize(wm);
 
     // Make sure we obey min/max-bSize in the case when we're doing intrinsic
     // sizing (we get it for free when we have a non-intrinsic
@@ -363,8 +287,7 @@ nsHTMLButtonControlFrame::ReflowButtonContents(nsPresContext* aPresContext,
   if (aButtonReflowInput.ComputedISize() != NS_INTRINSICSIZE) {
     buttonContentBox.ISize(wm) = aButtonReflowInput.ComputedISize();
   } else {
-    buttonContentBox.ISize(wm) =
-      contentsDesiredSize.ISize(wm) + focusPadding.IStartEnd(wm);
+    buttonContentBox.ISize(wm) = contentsDesiredSize.ISize(wm);
     buttonContentBox.ISize(wm) =
       NS_CSS_MINMAX(buttonContentBox.ISize(wm),
                     aButtonReflowInput.ComputedMinISize(),
@@ -372,16 +295,12 @@ nsHTMLButtonControlFrame::ReflowButtonContents(nsPresContext* aPresContext,
   }
 
   // Center child in the block-direction in the button
-  // (technically, inside of the button's focus-padding area)
-  nscoord extraSpace =
-    buttonContentBox.BSize(wm) - focusPadding.BStartEnd(wm) -
-    contentsDesiredSize.BSize(wm);
+  nscoord extraSpace = buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);
 
   childPos.B(wm) = std::max(0, extraSpace / 2);
 
-  // Adjust childPos.B() to be in terms of the button's frame-rect, instead of
-  // its focus-padding rect:
-  childPos.B(wm) += focusPadding.BStart(wm) + clbp.BStart(wm);
+  // Adjust childPos.B() to be in terms of the button's frame-rect:
+  childPos.B(wm) += clbp.BStart(wm);
 
   nsSize containerSize =
     (buttonContentBox + clbp.Size(wm)).GetPhysicalSize(wm);
diff --git a/layout/forms/test/test_issue1970_manual.html b/layout/forms/test/test_issue1970_manual.html
new file mode 100644
index 0000000000..223c6e845d
--- /dev/null
+++ b/layout/forms/test/test_issue1970_manual.html
@@ -0,0 +1,35 @@
+<!doctype html>

+<html>

+<head>

+<meta charset="utf-8">

+<style>

+.fontA {

+    font-family: "Noto Sans";

+}

+.fontB {

+    font-family: "Noto Sans CJK TC";

+}

+.fontC {

+    font-family: "WenQuanYi Zen Hei";

+}

+</style>

+</head>

+<body>

+<p>No clipping of the font glyphs should occur.</p>

+<select>

+    <option>Latin Text jpg</option>

+</select>

+<select>

+    <option>漢字 jpg</option>

+</select>

+<select class="fontA">

+    <option>漢字 jpg</option>

+</select>

+<select class="fontB">

+    <option>漢字 jpg</option>

+</select>

+<select class="fontC">

+    <option>漢字 jpg</option>

+</select>

+</body>

+</html>
\ No newline at end of file
diff --git a/layout/generic/BlockReflowInput.cpp b/layout/generic/BlockReflowInput.cpp
index 86248ac141..e73ae6331c 100644
--- a/layout/generic/BlockReflowInput.cpp
+++ b/layout/generic/BlockReflowInput.cpp
@@ -43,6 +43,7 @@ BlockReflowInput::BlockReflowInput(const ReflowInput& aReflowInput,
     mOverflowTracker(nullptr),
     mBorderPadding(mReflowInput.ComputedLogicalBorderPadding()),
     mPrevBEndMargin(),
+    mMinLineHeight(aReflowInput.GetLineHeight()),
     mLineNumber(0),
     mFloatBreakType(StyleClear::None),
     mConsumedBSize(aConsumedBSize)
@@ -141,8 +142,6 @@ BlockReflowInput::BlockReflowInput(const ReflowInput& aReflowInput,
 
   mPrevChild = nullptr;
   mCurrentLine = aFrame->LinesEnd();
-
-  mMinLineHeight = aReflowInput.CalcLineHeight();
 }
 
 nscoord
diff --git a/layout/generic/ReflowInput.cpp b/layout/generic/ReflowInput.cpp
index 0c3fef3825..01f36cc9db 100644
--- a/layout/generic/ReflowInput.cpp
+++ b/layout/generic/ReflowInput.cpp
@@ -2798,15 +2798,30 @@ ComputeLineHeight(nsStyleContext* aStyleContext,
   return GetNormalLineHeight(fm);
 }
 
-nscoord
-ReflowInput::CalcLineHeight() const
-{
+nscoord ReflowInput::GetLineHeight() const {
+  if (mLineHeight != NS_AUTOHEIGHT) {
+    return mLineHeight;
+  }
+
   nscoord blockBSize =
     nsLayoutUtils::IsNonWrapperBlock(mFrame) ? ComputedBSize() :
     (mCBReflowInput ? mCBReflowInput->ComputedBSize() : NS_AUTOHEIGHT);
 
-  return CalcLineHeight(mFrame->GetContent(), mFrame->StyleContext(), blockBSize,
-                        nsLayoutUtils::FontSizeInflationFor(mFrame));
+  mLineHeight = CalcLineHeight(mFrame->GetContent(),
+                               mFrame->StyleContext(),
+                               blockBSize,
+                               nsLayoutUtils::FontSizeInflationFor(mFrame));
+}
+
+void ReflowInput::SetLineHeight(nscoord aLineHeight) {
+  MOZ_ASSERT(aLineHeight >= 0, "aLineHeight must be >= 0!");
+
+  if (mLineHeight != aLineHeight) {
+    mLineHeight = aLineHeight;
+    // Setting used line height can change a frame's block-size if mFrame's
+    // block-size behaves as auto.
+    InitResizeFlags(mFrame->PresContext(), mFrame->GetType());
+  }
 }
 
 /* static */ nscoord
diff --git a/layout/generic/ReflowInput.h b/layout/generic/ReflowInput.h
index 1d2df6af68..a70549d8eb 100644
--- a/layout/generic/ReflowInput.h
+++ b/layout/generic/ReflowInput.h
@@ -744,18 +744,24 @@ public:
   nscoord GetContainingBlockContentISize(mozilla::WritingMode aWritingMode) const;
 
   /**
-   * Calculate the used line-height property. The return value will be >= 0.
+   * Get the used line-height property. The return value will be >= 0.
    */
-  nscoord CalcLineHeight() const;
+  nscoord GetLineHeight() const;
+  
+  /**
+   * Set the used line-height. aLineHeight must be >= 0.
+   */
+  void SetLineHeight(nscoord aLineHeight);
 
   /**
-   * Same as CalcLineHeight() above, but doesn't need a reflow state.
+   * Calculate the used line-height property without a reflow input instance.
+   * The return value will be >= 0.
    *
    * @param aBlockBSize The computed block size of the content rect of the block
-   *                     that the line should fill.
-   *                     Only used with line-height:-moz-block-height.
-   *                     NS_AUTOHEIGHT results in a normal line-height for
-   *                     line-height:-moz-block-height.
+   *                    that the line should fill.
+   *                    Only used with line-height:-moz-block-height.
+   *                    NS_AUTOHEIGHT results in a normal line-height for
+   *                    line-height:-moz-block-height.
    * @param aFontSizeInflation The result of the appropriate
    *                           nsLayoutUtils::FontSizeInflationFor call,
    *                           or 1.0 if during intrinsic size
@@ -1000,6 +1006,9 @@ protected:
                                     nscoord* aOutsideBoxSizing) const;
 
   void CalculateBlockSideMargins(nsIAtom* aFrameType);
+
+  // Cache the used line-height property.
+  mutable nscoord mLineHeight = NS_AUTOHEIGHT;
 };
 
 } // namespace mozilla
diff --git a/layout/generic/nsBRFrame.cpp b/layout/generic/nsBRFrame.cpp
index 08c0fe3dda..e02711353a 100644
--- a/layout/generic/nsBRFrame.cpp
+++ b/layout/generic/nsBRFrame.cpp
@@ -125,7 +125,7 @@ BRFrame::Reflow(nsPresContext* aPresContext,
       RefPtr<nsFontMetrics> fm =
         nsLayoutUtils::GetInflatedFontMetricsForFrame(this);
       if (fm) {
-        nscoord logicalHeight = aReflowInput.CalcLineHeight();
+        nscoord logicalHeight = aReflowInput.GetLineHeight();
         finalSize.BSize(wm) = logicalHeight;
         aMetrics.SetBlockStartAscent(nsLayoutUtils::GetCenteredFontBaseline(
                                        fm, logicalHeight, wm.IsLineInverted()));
diff --git a/layout/generic/nsRubyBaseContainerFrame.cpp b/layout/generic/nsRubyBaseContainerFrame.cpp
index 91bbf5de85..ed2a35b417 100644
--- a/layout/generic/nsRubyBaseContainerFrame.cpp
+++ b/layout/generic/nsRubyBaseContainerFrame.cpp
@@ -363,7 +363,7 @@ nsRubyBaseContainerFrame::Reflow(nsPresContext* aPresContext,
     // Line number is useless for ruby text
     // XXX nullptr here may cause problem, see comments for
     //     nsLineLayout::mBlockRI and nsLineLayout::AddFloat
-    lineLayout->Init(nullptr, reflowInput->CalcLineHeight(), -1);
+    lineLayout->Init(nullptr, reflowInput->GetLineHeight(), -1);
     reflowInput->mLineLayout = lineLayout;
 
     // Border and padding are suppressed on ruby text containers.
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 6c66d5f178..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-1-ref.html
+++ /dev/null
@@ -1,52 +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>
-
-  <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
deleted file mode 100644
index 17d65b3b02..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-1.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<!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
deleted file mode 100644
index 6b6a6056d4..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-2-ref.html
+++ /dev/null
@@ -1,68 +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; }
-
-    /* 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
deleted file mode 100644
index 3c0cb8612f..0000000000
--- a/layout/reftests/forms/button/focus-area-percent-units-2.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!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/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/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/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>
diff --git a/layout/style/nsLayoutStylesheetCache.cpp b/layout/style/nsLayoutStylesheetCache.cpp
index 7c09202e6a..9591ad4f4a 100644
--- a/layout/style/nsLayoutStylesheetCache.cpp
+++ b/layout/style/nsLayoutStylesheetCache.cpp
@@ -637,7 +637,6 @@ nsLayoutStylesheetCache::BuildPreferenceSheet(RefPtr<StyleSheet>* aSheet,
           "button::-moz-focus-inner, input[type=\"reset\"]::-moz-focus-inner, "
           "input[type=\"button\"]::-moz-focus-inner, "
           "input[type=\"submit\"]::-moz-focus-inner { "
-          "padding: 1px 2px 1px 2px; "
           "border: %dpx %s transparent !important; }\n",
           focusRingWidth,
           focusRingStyle == 0 ? "solid" : "dotted");
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css
index db75151d48..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;
@@ -627,12 +623,12 @@ input[type="button"],
 input[type="submit"] {
   -moz-appearance: button;
   /* The sum of border and padding on block-start and block-end
-     must be the same here, for text inputs, and for <select>.  For
-     buttons, make sure to include the -moz-focus-inner border/padding. */
+     must be the same here, for text inputs, and for <select>.
+     Note -moz-focus-inner padding does not affect button size. */
   padding-block-start: 0px;
-  padding-inline-end: 6px;
+  padding-inline-end: 8px;
   padding-block-end: 0px;
-  padding-inline-start: 6px;
+  padding-inline-start: 8px;
   border: 2px outset ThreeDLightShadow;
   background-color: ButtonFace;
   cursor: default;
@@ -725,9 +721,9 @@ input[type="button"]:active:hover,
 input[type="submit"]:active:hover {
 %ifndef XP_MACOSX
   padding-block-start: 0px;
-  padding-inline-end: 5px;
+  padding-inline-end: 7px;
   padding-block-end: 0px;
-  padding-inline-start: 7px;
+  padding-inline-start: 9px;
 %endif
   border-style: inset;
   background-color: ButtonFace;
@@ -746,6 +742,7 @@ input[type="reset"]::-moz-focus-inner,
 input[type="button"]::-moz-focus-inner,
 input[type="submit"]::-moz-focus-inner,
 input[type="file"] > button[type="button"]::-moz-focus-inner {
+  /* Note this padding only affects the -moz-focus-inner ring, not the button itself */
   padding-block-start: 0px;
   padding-inline-end: 2px;
   padding-block-end: 0px;
@@ -776,9 +773,9 @@ input[type="submit"]:disabled {
   /* The sum of border and padding on block-start and block-end
      must be the same here and for text inputs */
   padding-block-start: 0px;
-  padding-inline-end: 6px;
+  padding-inline-end: 8px;
   padding-block-end: 0px;
-  padding-inline-start: 6px;
+  padding-inline-start: 8px;
   border: 2px outset ThreeDLightShadow;
   cursor: inherit;
 }
diff --git a/widget/gtk/gtk3drawing.cpp b/widget/gtk/gtk3drawing.cpp
index c592fa51c9..c3216fbf34 100644
--- a/widget/gtk/gtk3drawing.cpp
+++ b/widget/gtk/gtk3drawing.cpp
@@ -2036,9 +2036,6 @@ moz_gtk_get_widget_border(WidgetNodeType widget, gint* left, gint* top,
             if (widget == MOZ_GTK_TOOLBAR_BUTTON)
                 gtk_style_context_restore(style);
 
-            // XXX: Subtract 1 pixel from the border to account for the added
-            // -moz-focus-inner border (Bug 1228281).
-            *left -= 1; *top -= 1; *right -= 1; *bottom -= 1;
             moz_gtk_add_style_border(style, left, top, right, bottom);
 
             ReleaseStyleContext(style);