CSS: inline-block with a display:block <input> child element has a wrong baseline (HTML forms)

20 files changed, 990 insertions, 29 deletions

diff --git a/image/DrawResult.h b/image/DrawResult.h
index 8240ede26..912f59dc3 100644
--- a/image/DrawResult.h
+++ b/image/DrawResult.h
@@ -6,6 +6,7 @@
 #ifndef mozilla_image_DrawResult_h
 #define mozilla_image_DrawResult_h
 
+#include <cstdint> // for uint8_t
 #include "mozilla/Attributes.h"
 #include "mozilla/Likely.h"
 
diff --git a/layout/forms/nsFieldSetFrame.cpp b/layout/forms/nsFieldSetFrame.cpp
index befd41ee2..fc9f0571b 100644
--- a/layout/forms/nsFieldSetFrame.cpp
+++ b/layout/forms/nsFieldSetFrame.cpp
@@ -5,26 +5,22 @@
 
 #include "nsFieldSetFrame.h"
 
+#include <algorithm>
 #include "mozilla/gfx/2D.h"
+#include "mozilla/Likely.h"
+#include "mozilla/Maybe.h"
 #include "nsCSSAnonBoxes.h"
-#include "nsLayoutUtils.h"
-#include "nsLegendFrame.h"
 #include "nsCSSRendering.h"
-#include <algorithm>
-#include "nsIFrame.h"
-#include "nsPresContext.h"
-#include "mozilla/RestyleManager.h"
-#include "nsGkAtoms.h"
-#include "nsStyleConsts.h"
 #include "nsDisplayList.h"
+#include "nsGkAtoms.h"
+#include "nsIFrameInlines.h"
+#include "nsLayoutUtils.h"
+#include "nsLegendFrame.h"
 #include "nsRenderingContext.h"
-#include "nsIScrollableFrame.h"
-#include "mozilla/Likely.h"
-#include "mozilla/Maybe.h"
+#include "nsStyleConsts.h"
 
 using namespace mozilla;
 using namespace mozilla::gfx;
-using namespace mozilla::image;
 using namespace mozilla::layout;
 
 nsContainerFrame*
@@ -126,7 +122,7 @@ void
 nsDisplayFieldSetBorderBackground::Paint(nsDisplayListBuilder* aBuilder,
                                          nsRenderingContext* aCtx)
 {
-  DrawResult result = static_cast<nsFieldSetFrame*>(mFrame)->
+  image::DrawResult result = static_cast<nsFieldSetFrame*>(mFrame)->
     PaintBorder(aBuilder, *aCtx, ToReferenceFrame(), mVisibleRect);
 
   nsDisplayItemGenericImageGeometry::UpdateDrawResult(this, result);
@@ -210,7 +206,7 @@ nsFieldSetFrame::BuildDisplayList(nsDisplayListBuilder*   aBuilder,
   contentDisplayItems.MoveTo(aLists);
 }
 
-DrawResult
+image::DrawResult
 nsFieldSetFrame::PaintBorder(
   nsDisplayListBuilder* aBuilder,
   nsRenderingContext& aRenderingContext,
@@ -695,9 +691,50 @@ nsFieldSetFrame::AccessibleType()
 #endif
 
 nscoord
-nsFieldSetFrame::GetLogicalBaseline(WritingMode aWritingMode) const
+nsFieldSetFrame::GetLogicalBaseline(WritingMode aWM) const
+{
+  switch (StyleDisplay()->mDisplay) {
+    case mozilla::StyleDisplay::Grid:
+    case mozilla::StyleDisplay::InlineGrid:
+    case mozilla::StyleDisplay::Flex:
+    case mozilla::StyleDisplay::InlineFlex:
+      return BaselineBOffset(aWM, BaselineSharingGroup::eFirst,
+                             AlignmentContext::eInline);
+    default:
+      return BSize(aWM) - BaselineBOffset(aWM, BaselineSharingGroup::eLast,
+                                          AlignmentContext::eInline);
+  }
+}
+
+bool
+nsFieldSetFrame::GetVerticalAlignBaseline(WritingMode aWM,
+                                          nscoord* aBaseline) const
 {
   nsIFrame* inner = GetInner();
-  return inner->BStart(aWritingMode, GetParent()->GetSize()) +
-    inner->GetLogicalBaseline(aWritingMode);
+  MOZ_ASSERT(!inner->GetWritingMode().IsOrthogonalTo(aWM));
+  if (!inner->GetVerticalAlignBaseline(aWM, aBaseline)) {
+    return false;
+  }
+  nscoord innerBStart = inner->BStart(aWM, GetSize());
+  *aBaseline += innerBStart;
+  return true;
+}
+
+bool
+nsFieldSetFrame::GetNaturalBaselineBOffset(WritingMode          aWM,
+                                           BaselineSharingGroup aBaselineGroup,
+                                           nscoord*             aBaseline) const
+{
+  nsIFrame* inner = GetInner();
+  MOZ_ASSERT(!inner->GetWritingMode().IsOrthogonalTo(aWM));
+  if (!inner->GetNaturalBaselineBOffset(aWM, aBaselineGroup, aBaseline)) {
+    return false;
+  }
+  nscoord innerBStart = inner->BStart(aWM, GetSize());
+  if (aBaselineGroup == BaselineSharingGroup::eFirst) {
+    *aBaseline += innerBStart;
+  } else {
+    *aBaseline += BSize(aWM) - (innerBStart + inner->BSize(aWM));
+  }
+  return true;
 }
diff --git a/layout/forms/nsFieldSetFrame.h b/layout/forms/nsFieldSetFrame.h
index 54eaf678f..39d862278 100644
--- a/layout/forms/nsFieldSetFrame.h
+++ b/layout/forms/nsFieldSetFrame.h
@@ -7,7 +7,7 @@
 #define nsFieldSetFrame_h___
 
 #include "mozilla/Attributes.h"
-#include "imgIContainer.h"
+#include "DrawResult.h"
 #include "nsContainerFrame.h"
 
 class nsFieldSetFrame final : public nsContainerFrame
@@ -46,6 +46,13 @@ public:
                       const ReflowInput& aReflowInput,
                       nsReflowStatus&          aStatus) override;
                                
+  nscoord GetLogicalBaseline(mozilla::WritingMode aWM) const override;
+  bool GetVerticalAlignBaseline(mozilla::WritingMode aWM,
+                                nscoord* aBaseline) const override;
+  bool GetNaturalBaselineBOffset(mozilla::WritingMode aWM,
+                                 BaselineSharingGroup aBaselineGroup,
+                                 nscoord* aBaseline) const override;
+
   virtual void BuildDisplayList(nsDisplayListBuilder*   aBuilder,
                                 const nsRect&           aDirtyRect,
                                 const nsDisplayListSet& aLists) override;
diff --git a/layout/forms/nsHTMLButtonControlFrame.cpp b/layout/forms/nsHTMLButtonControlFrame.cpp
index ef9459ef2..2e4fa9f67 100644
--- a/layout/forms/nsHTMLButtonControlFrame.cpp
+++ b/layout/forms/nsHTMLButtonControlFrame.cpp
@@ -418,6 +418,47 @@ nsHTMLButtonControlFrame::ReflowButtonContents(nsPresContext* aPresContext,
   aButtonDesiredSize.SetOverflowAreasToDesiredBounds();
 }
 
+bool
+nsHTMLButtonControlFrame::GetVerticalAlignBaseline(mozilla::WritingMode aWM,
+                                                   nscoord* aBaseline) const
+{
+  nsIFrame* inner = mFrames.FirstChild();
+  if (MOZ_UNLIKELY(inner->GetWritingMode().IsOrthogonalTo(aWM))) {
+    return false;
+  }
+  if (!inner->GetVerticalAlignBaseline(aWM, aBaseline)) {
+    // <input type=color> has an empty block frame as inner frame
+    *aBaseline = inner->
+      SynthesizeBaselineBOffsetFromBorderBox(aWM, BaselineSharingGroup::eFirst);
+  }
+  nscoord innerBStart = inner->BStart(aWM, GetSize());
+  *aBaseline += innerBStart;
+  return true;
+}
+
+bool
+nsHTMLButtonControlFrame::GetNaturalBaselineBOffset(mozilla::WritingMode aWM,
+                                         BaselineSharingGroup aBaselineGroup,
+                                         nscoord* aBaseline) const
+{
+  nsIFrame* inner = mFrames.FirstChild();
+  if (MOZ_UNLIKELY(inner->GetWritingMode().IsOrthogonalTo(aWM))) {
+    return false;
+  }
+  if (!inner->GetNaturalBaselineBOffset(aWM, aBaselineGroup, aBaseline)) {
+    // <input type=color> has an empty block frame as inner frame
+    *aBaseline = inner->
+      SynthesizeBaselineBOffsetFromBorderBox(aWM, aBaselineGroup);
+  }
+  nscoord innerBStart = inner->BStart(aWM, GetSize());
+  if (aBaselineGroup == BaselineSharingGroup::eFirst) {
+    *aBaseline += innerBStart;
+  } else {
+    *aBaseline += BSize(aWM) - (innerBStart + inner->BSize(aWM));
+  }
+  return true;
+}
+
 nsresult nsHTMLButtonControlFrame::SetFormProperty(nsIAtom* aName, const nsAString& aValue)
 {
   if (nsGkAtoms::value == aName) {
diff --git a/layout/forms/nsHTMLButtonControlFrame.h b/layout/forms/nsHTMLButtonControlFrame.h
index 96ad0f366..432afa12c 100644
--- a/layout/forms/nsHTMLButtonControlFrame.h
+++ b/layout/forms/nsHTMLButtonControlFrame.h
@@ -39,6 +39,13 @@ public:
                       const ReflowInput& aReflowInput,
                       nsReflowStatus&          aStatus) override;
 
+  bool GetVerticalAlignBaseline(mozilla::WritingMode aWM,
+                                nscoord* aBaseline) const override;
+
+  bool GetNaturalBaselineBOffset(mozilla::WritingMode aWM,
+                                 BaselineSharingGroup aBaselineGroup,
+                                 nscoord* aBaseline) const override;
+
   virtual nsresult HandleEvent(nsPresContext* aPresContext, 
                                mozilla::WidgetGUIEvent* aEvent,
                                nsEventStatus* aEventStatus) override;
diff --git a/layout/forms/nsLegendFrame.h b/layout/forms/nsLegendFrame.h
index 5f5e1e03e..a9e11cbbe 100644
--- a/layout/forms/nsLegendFrame.h
+++ b/layout/forms/nsLegendFrame.h
@@ -9,7 +9,8 @@
 #include "mozilla/Attributes.h"
 #include "nsBlockFrame.h"
 
-class nsLegendFrame : public nsBlockFrame {
+class nsLegendFrame final : public nsBlockFrame
+{
 public:
   NS_DECL_QUERYFRAME_TARGET(nsLegendFrame)
   NS_DECL_QUERYFRAME
@@ -30,7 +31,7 @@ public:
   virtual nsresult GetFrameName(nsAString& aResult) const override;
 #endif
 
-  int32_t GetLogicalAlign(WritingMode aCBWM);
+  int32_t GetLogicalAlign(mozilla::WritingMode aCBWM);
 };
 
 
diff --git a/layout/forms/nsTextControlFrame.cpp b/layout/forms/nsTextControlFrame.cpp
index f85bc2a80..a7f7d40a8 100644
--- a/layout/forms/nsTextControlFrame.cpp
+++ b/layout/forms/nsTextControlFrame.cpp
@@ -106,6 +106,7 @@ private:
 
 nsTextControlFrame::nsTextControlFrame(nsStyleContext* aContext)
   : nsContainerFrame(aContext)
+  , mFirstBaseline(NS_INTRINSIC_WIDTH_UNKNOWN)
   , mEditorHasBeenInitialized(false)
   , mIsProcessing(false)
 #ifdef DEBUG
@@ -538,20 +539,20 @@ nsTextControlFrame::Reflow(nsPresContext*   aPresContext,
               aReflowInput.ComputedLogicalBorderPadding().BStartEnd(wm));
   aDesiredSize.SetSize(wm, finalSize);
 
-  // computation of the ascent wrt the input height
+  // Calculate the baseline and store it in mFirstBaseline.
   nscoord lineHeight = aReflowInput.ComputedBSize();
   float inflation = nsLayoutUtils::FontSizeInflationFor(this);
   if (!IsSingleLineTextControl()) {
     lineHeight = ReflowInput::CalcLineHeight(GetContent(), StyleContext(),
-                                                   NS_AUTOHEIGHT, inflation);
+                                             NS_AUTOHEIGHT, inflation);
   }
   RefPtr<nsFontMetrics> fontMet =
     nsLayoutUtils::GetFontMetricsForFrame(this, inflation);
-  // now adjust for our borders and padding
-  aDesiredSize.SetBlockStartAscent(
+  mFirstBaseline =
     nsLayoutUtils::GetCenteredFontBaseline(fontMet, lineHeight,
                                            wm.IsLineInverted()) +
-    aReflowInput.ComputedLogicalBorderPadding().BStart(wm));
+    aReflowInput.ComputedLogicalBorderPadding().BStart(wm);
+  aDesiredSize.SetBlockStartAscent(mFirstBaseline);
 
   // overflow handling
   aDesiredSize.SetOverflowAreasToDesiredBounds();
diff --git a/layout/forms/nsTextControlFrame.h b/layout/forms/nsTextControlFrame.h
index a76cba514..9d4d0b77c 100644
--- a/layout/forms/nsTextControlFrame.h
+++ b/layout/forms/nsTextControlFrame.h
@@ -62,6 +62,29 @@ public:
                       const ReflowInput& aReflowInput,
                       nsReflowStatus&          aStatus) override;
 
+  bool GetVerticalAlignBaseline(mozilla::WritingMode aWM,
+                                nscoord* aBaseline) const override
+  {
+    return GetNaturalBaselineBOffset(aWM, BaselineSharingGroup::eFirst, aBaseline);
+  }
+
+  bool GetNaturalBaselineBOffset(mozilla::WritingMode aWM,
+                                 BaselineSharingGroup aBaselineGroup,
+                                 nscoord* aBaseline) const override
+  {
+    if (!IsSingleLineTextControl()) {
+      return false;
+    }
+    NS_ASSERTION(mFirstBaseline != NS_INTRINSIC_WIDTH_UNKNOWN,
+                 "please call Reflow before asking for the baseline");
+    if (aBaselineGroup == BaselineSharingGroup::eFirst) {
+      *aBaseline = mFirstBaseline;
+    } else {
+      *aBaseline = BSize(aWM) - mFirstBaseline;
+    }
+    return true;
+  }
+
   virtual nsSize GetXULMinSize(nsBoxLayoutState& aBoxLayoutState) override;
   virtual bool IsXULCollapsed() override;
 
@@ -87,6 +110,14 @@ public:
       ~(nsIFrame::eReplaced | nsIFrame::eReplacedContainsBlock));
   }
 
+#ifdef DEBUG
+  void MarkIntrinsicISizesDirty() override
+  {
+    // Need another Reflow to have a correct baseline value again.
+    mFirstBaseline = NS_INTRINSIC_WIDTH_UNKNOWN;
+  }
+#endif
+
   // nsIAnonymousContentCreator
   virtual nsresult CreateAnonymousContent(nsTArray<ContentInfo>& aElements) override;
   virtual void AppendAnonymousContentTo(nsTArray<nsIContent*>& aElements,
@@ -300,6 +331,10 @@ private:
   }
 
 private:
+  // Our first baseline, or NS_INTRINSIC_WIDTH_UNKNOWN if we have a pending
+  // Reflow.
+  nscoord mFirstBaseline;
+
   // these packed bools could instead use the high order bits on mState, saving 4 bytes 
   bool mEditorHasBeenInitialized;
   bool mIsProcessing;
diff --git a/layout/reftests/bugs/315920-17.html b/layout/reftests/bugs/315920-17.html
index 1681754a5..6d9180144 100644
--- a/layout/reftests/bugs/315920-17.html
+++ b/layout/reftests/bugs/315920-17.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="reftest-wait">
   <head>
     <style>
       input ~ label {color: red}
@@ -8,9 +8,7 @@
       input:checked:default + label {color: green}
     </style>
   </head>
-  <body onload='document.getElementById("two").setAttribute("checked", "true");
-                document.getElementById("one").setAttribute("checked", "checked");
-                document.getElementById("two").removeAttribute("checked");'>
+  <body>
     <form>
       <input type="checkbox" name="group1" id="one" value="1"/>
       <label for="one">Should be no red</label><br>
@@ -19,5 +17,14 @@
       <input type="checkbox" name="group1" id="three" value="3"/>
       <label for="three">Should be no red</label>
     </form>
+<script>
+function doTest() {
+  document.getElementById("two").setAttribute("checked", "true");
+  document.getElementById("one").setAttribute("checked", "checked");
+  document.getElementById("two").removeAttribute("checked");
+  setTimeout(function () { document.documentElement.removeAttribute("class"); }, 0);
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
   </body>
 </html>
diff --git a/layout/reftests/forms/display-block-baselines-1-ref.html b/layout/reftests/forms/display-block-baselines-1-ref.html
new file mode 100644
index 000000000..d01c086b5
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-1-ref.html
@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testcase #1 for bug 1330962</title>
+  <style type="text/css">
+@font-face {
+ src: url(../fonts/Ahem.ttf);
+ font-family: Ahem;
+}
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+* { font:16px/1 Ahem; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 20px 0;
+  border: none;
+  background: white;
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+
+.no-scroll {
+  overflow: visible;
+}
+
+  </style>
+</head>
+<body>
+
+<div>
+  <div style="display:inline-grid">
+    A<img class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-grid">
+    A
+    <input type="image" class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <div style="display:inline-block"><input type="text" value="text"></div>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <div style="display:inline-block"><input type="text" value="text"></div>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <div style="display:inline-block"><input type="text"></div>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <div style="display:inline-block"><input class="no-theme" type="text" value="text"></div>
+  </div>
+  B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-1.html b/layout/reftests/forms/display-block-baselines-1.html
new file mode 100644
index 000000000..96ebdad71
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-1.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Testcase #1 for bug 1330962</title>
+  <style type="text/css">
+@font-face {
+ src: url(../fonts/Ahem.ttf);
+ font-family: Ahem;
+}
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+* { font:16px/1 Ahem; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 20px 0;
+  border: none;
+  background: white;
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+
+.no-scroll {
+  overflow: visible;
+}
+
+  </style>
+</head>
+<body>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <img class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input type="image" class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input class="block" type="text" value="text">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input class="block scroll" type="text" value="text">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input class="block" type="text">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input class="block no-theme" type="text" value="text">
+  </div>
+  B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-2-ref.html b/layout/reftests/forms/display-block-baselines-2-ref.html
new file mode 100644
index 000000000..441a927b4
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-2-ref.html
@@ -0,0 +1,100 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testcase #2 for bug 1330962</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 20px 0;
+  border: none;
+  background: white;
+  color: black;
+  text-align: start;
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+
+.no-scroll {
+  overflow: visible;
+}
+
+  </style>
+</head>
+<body>
+
+<div>
+  <div style="display:inline-block">
+    A<div>
+    <div style="display:inline-block"><input type="button" value="button"></div></div>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <div style="display:inline-block"><button>button</button></div>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <div style="display:inline-block"><input class="no-theme" type="button" value="button"></div>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <button class="no-theme">button-first<div style="font-size:10px">button-last</div></button>
+  </div>
+  B
+  <div class="no-theme" style="display:inline-block">button-first<div style="font-size:10px">button-last</div></div>
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <button class="no-theme" style="display:inline-grid">button-first<x style="font-size:10px">button-last</x></button>
+  </div>
+  B
+  <div class="no-theme" style="display:inline-grid">button-first<x style="font-size:10px">button-last</x></div>
+</div>
+
+<div>
+  <div style="display:inline-grid">
+    A
+    <input type="checkbox" class="block" checked>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-grid">
+    A
+    <input type="radio" class="block" checked>
+  </div>
+  B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-2.html b/layout/reftests/forms/display-block-baselines-2.html
new file mode 100644
index 000000000..78253fe4c
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-2.html
@@ -0,0 +1,100 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Testcase #2 for bug 1330962</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 20px 0;
+  border: none;
+  background: white;
+  color: black;
+  text-align: start;
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+
+.no-scroll {
+  overflow: visible;
+}
+
+  </style>
+</head>
+<body>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input class="block" type="button" value="button">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <button class="block">button</button>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input class="block no-theme" type="button" value="button">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <button class="block no-theme">button-first<div style="font-size:10px">button-last</div></button>
+  </div>
+  B
+  <button class="no-theme">button-first<div style="font-size:10px">button-last</div></button>
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <button class="grid no-theme">button-first<x style="font-size:10px">button-last</x></button>
+  </div>
+  B
+  <button class="no-theme" style="display:inline-grid">button-first<x style="font-size:10px">button-last</x></button>
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input type="checkbox" class="block" checked>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input type="radio" class="block" checked>
+  </div>
+  B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-3-ref.html b/layout/reftests/forms/display-block-baselines-3-ref.html
new file mode 100644
index 000000000..ce277b50c
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-3-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testcase #3 for bug 1330962</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 20px 0;
+  border: none;
+  background: white;
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+
+.no-scroll {
+  overflow: visible;
+}
+
+  </style>
+</head>
+<body>
+
+<div>
+  <div style="display:inline-grid">
+    A
+    <textarea class="block">textarea</textarea>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-grid">
+    A
+    <textarea class="block no-theme">textarea</textarea>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-grid">
+    A
+    <textarea class="block no-theme no-scroll">textarea</textarea>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <div style="display:inline-block"><fieldset style="display:inline">fieldset-first<br>fieldset-last</fieldset></div>
+  </div>
+  B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-3.html b/layout/reftests/forms/display-block-baselines-3.html
new file mode 100644
index 000000000..9f3c2b110
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-3.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Testcase #3 for bug 1330962</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 20px 0;
+  border: none;
+  background: white;
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+
+.no-scroll {
+  overflow: visible;
+}
+
+  </style>
+</head>
+<body>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <textarea class="block">textarea</textarea>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <textarea class="block no-theme">textarea</textarea>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <textarea class="block no-theme no-scroll">textarea</textarea>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <fieldset class="block">fieldset-first<br>fieldset-last</fieldset>
+  </div>
+  B
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-4-ref.html b/layout/reftests/forms/display-block-baselines-4-ref.html
new file mode 100644
index 000000000..5015d50c4
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-4-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testcase #4 for bug 1330962</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 20px 0;
+  border: none;
+  background: white;
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+
+.no-scroll {
+  overflow: visible;
+}
+
+  </style>
+</head>
+<body>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <div style="display:inline-block"><fieldset style="display:inline"><legend>legend</legend>
+fieldset-first<br>fieldset-last</fieldset></div>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <fieldset style="display:inline-grid">grid-fieldset-first<x>grid-fieldset-last</x></fieldset>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <fieldset style="display:inline" class="no-theme">fieldset-first<br>fieldset-last</fieldset>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <fieldset style="display:inline" class="no-theme scroll">fieldset-first<br>fieldset-last</fieldset>
+  </div>
+  B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-4.html b/layout/reftests/forms/display-block-baselines-4.html
new file mode 100644
index 000000000..1bfd344b0
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Testcase #4 for bug 1330962</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 20px 0;
+  border: none;
+  background: white;
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+
+.no-scroll {
+  overflow: visible;
+}
+
+  </style>
+</head>
+<body>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <fieldset class="block"><legend>legend</legend>
+fieldset-first<br>fieldset-last</fieldset>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <fieldset class="grid"><x style="order:2">grid-fieldset-last</x>grid-fieldset-first</fieldset>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <fieldset class="block no-theme">fieldset-first<br>fieldset-last</fieldset>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <fieldset class="block no-theme scroll">fieldset-first<br>fieldset-last</fieldset>
+  </div>
+  B
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-5-ref.html b/layout/reftests/forms/display-block-baselines-5-ref.html
new file mode 100644
index 000000000..0dce47f59
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-5-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Testcase #5 for bug 1330962</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 20px 0;
+  border: none;
+  background: white;
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+
+.no-scroll {
+  overflow: visible;
+}
+
+  </style>
+</head>
+<body>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <input type="color">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <input type="color" class="no-theme">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <select><option>select</select>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A<br>
+    <select class="no-theme"><option>select</select>
+  </div>
+  B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-5.html b/layout/reftests/forms/display-block-baselines-5.html
new file mode 100644
index 000000000..0359c8a6f
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-5.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Testcase #5 for bug 1330962</title>
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+     -moz-appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
+  padding: 20px 0;
+  border: none;
+  background: white;
+}
+
+.scroll {
+  overflow-y: scroll;
+}
+
+.no-scroll {
+  overflow: visible;
+}
+
+  </style>
+</head>
+<body>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input type="color" class="block">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <input type="color" class="block no-theme">
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <select class="block"><option>select</select>
+  </div>
+  B
+</div>
+
+<div>
+  <div style="display:inline-block">
+    A
+    <select class="block no-theme"><option>select</select>
+  </div>
+  B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/reftest.list b/layout/reftests/forms/reftest.list
index d45db276f..c7532077b 100644
--- a/layout/reftests/forms/reftest.list
+++ b/layout/reftests/forms/reftest.list
@@ -1,4 +1,9 @@
 fuzzy-if(skiaContent,1,10) HTTP(..) == text-control-baseline-1.html text-control-baseline-1-ref.html
+fuzzy-if(cocoaWidget,16,64) fuzzy-if(Android,52,64) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),104,224) fuzzy-if(/^Windows\x20NT\x206\.2/.test(http.oscpu),57,400) == display-block-baselines-1.html display-block-baselines-1-ref.html # anti-aliasing issues
+== display-block-baselines-2.html display-block-baselines-2-ref.html
+== display-block-baselines-3.html display-block-baselines-3-ref.html
+== display-block-baselines-4.html display-block-baselines-4-ref.html
+fuzzy-if(Android,4,8) == display-block-baselines-5.html display-block-baselines-5-ref.html
 
 # button element
 include button/reftest.list