--- a/layout/base/nsCSSFrameConstructor.cpp
+++ b/layout/base/nsCSSFrameConstructor.cpp
@@ -3357,59 +3357,52 @@ nsCSSFrameConstructor::ConstructFieldSet
 
 nsIFrame*
 nsCSSFrameConstructor::ConstructDetailsFrame(nsFrameConstructorState& aState,
                                              FrameConstructionItem& aItem,
                                              nsContainerFrame* aParentFrame,
                                              const nsStyleDisplay* aStyleDisplay,
                                              nsFrameItems& aFrameItems)
 {
+  if (!aStyleDisplay->IsScrollableOverflow()) {
+    return ConstructNonScrollableBlockWithConstructor(aState, aItem, aParentFrame,
+                                                      aStyleDisplay, aFrameItems,
+                                                      NS_NewDetailsFrame);
+  }
+
   nsIContent* const content = aItem.mContent;
   nsStyleContext* const styleContext = aItem.mStyleContext;
   nsContainerFrame* geometricParent =
     aState.GetGeometricParent(aStyleDisplay, aParentFrame);
 
   nsContainerFrame* detailsFrame = NS_NewDetailsFrame(mPresShell, styleContext);
-  nsIFrame* frameToReturn = nullptr;
 
   // Build a scroll frame to wrap details frame if necessary.
-  if (aStyleDisplay->IsScrollableOverflow()) {
-    nsContainerFrame* scrollFrame = nullptr;
-
-    RefPtr<nsStyleContext> detailsStyle =
-      BeginBuildingScrollFrame(aState, content, styleContext, geometricParent ,
-                               nsCSSAnonBoxes::scrolledContent, false,
-                               scrollFrame);
-
-    aState.AddChild(scrollFrame, aFrameItems, content, styleContext,
-                    aParentFrame);
-
-    nsFrameItems scrollFrameItems;
-    ConstructBlock(aState, content, scrollFrame, scrollFrame,
-                   detailsStyle, &detailsFrame, scrollFrameItems,
-                   aStyleDisplay->IsAbsPosContainingBlock(scrollFrame) ?
-                     scrollFrame : nullptr,
-                   aItem.mPendingBinding);
-
-    MOZ_ASSERT(scrollFrameItems.OnlyChild() == detailsFrame);
-
-    FinishBuildingScrollFrame(scrollFrame, detailsFrame);
-
-    frameToReturn = scrollFrame;
-  } else {
-    ConstructBlock(aState, content, geometricParent, aParentFrame, styleContext,
-                   &detailsFrame, aFrameItems,
-                   aStyleDisplay->IsAbsPosContainingBlock(detailsFrame) ?
-                     detailsFrame : nullptr,
-                   aItem.mPendingBinding);
-
-    frameToReturn = detailsFrame;
-  }
-
-  return frameToReturn;
+  nsContainerFrame* scrollFrame = nullptr;
+
+  RefPtr<nsStyleContext> detailsStyle =
+    BeginBuildingScrollFrame(aState, content, styleContext, geometricParent ,
+                             nsCSSAnonBoxes::scrolledContent, false,
+                             scrollFrame);
+
+  aState.AddChild(scrollFrame, aFrameItems, content, styleContext,
+                  aParentFrame);
+
+  nsFrameItems scrollFrameItems;
+  ConstructBlock(aState, content, scrollFrame, scrollFrame,
+                 detailsStyle, &detailsFrame, scrollFrameItems,
+                 aStyleDisplay->IsAbsPosContainingBlock(scrollFrame) ?
+                   scrollFrame : nullptr,
+                 aItem.mPendingBinding);
+
+  MOZ_ASSERT(scrollFrameItems.OnlyChild() == detailsFrame);
+
+  FinishBuildingScrollFrame(scrollFrame, detailsFrame);
+
+  return scrollFrame;
 }
 
 static nsIFrame*
 FindAncestorWithGeneratedContentPseudo(nsIFrame* aFrame)
 {
   for (nsIFrame* f = aFrame->GetParent(); f; f = f->GetParent()) {
     NS_ASSERTION(f->IsGeneratedContentFrame(),
                  "should not have exited generated content");
@@ -4413,20 +4406,19 @@ nsCSSFrameConstructor::FindXULLabelData(
   static const FrameConstructionData sLabelData =
     SIMPLE_XUL_FCDATA(NS_NewXULLabelFrame);
   return &sLabelData;
 }
 
 static nsIFrame*
 NS_NewXULDescriptionFrame(nsIPresShell* aPresShell, nsStyleContext *aContext)
 {
-  // XXXbz do we really need to set those flags?  If the parent is not
-  // a block we'll get them anyway, and if it is, do we want them?
-  return NS_NewBlockFrame(aPresShell, aContext,
-                          NS_BLOCK_FLOAT_MGR | NS_BLOCK_MARGIN_ROOT);
+  // XXXbz do we really need to set up the block formatting context root? If the
+  // parent is not a block we'll get it anyway, and if it is, do we want it?
+  return NS_NewBlockFormattingContext(aPresShell, aContext);
 }
 
 /* static */
 const nsCSSFrameConstructor::FrameConstructionData*
 nsCSSFrameConstructor::FindXULDescriptionData(Element* aElement,
                                               nsStyleContext* /* unused */)
 {
   if (aElement->HasAttr(kNameSpaceID_None, nsGkAtoms::value)) {
@@ -4881,38 +4873,52 @@ nsCSSFrameConstructor::ConstructScrollab
 
 nsIFrame*
 nsCSSFrameConstructor::ConstructNonScrollableBlock(nsFrameConstructorState& aState,
                                                    FrameConstructionItem&   aItem,
                                                    nsContainerFrame*        aParentFrame,
                                                    const nsStyleDisplay*    aDisplay,
                                                    nsFrameItems&            aFrameItems)
 {
+  return ConstructNonScrollableBlockWithConstructor(aState, aItem, aParentFrame,
+                                                    aDisplay, aFrameItems,
+                                                    NS_NewBlockFrame);
+}
+
+nsIFrame*
+nsCSSFrameConstructor::ConstructNonScrollableBlockWithConstructor(
+  nsFrameConstructorState& aState,
+  FrameConstructionItem& aItem,
+  nsContainerFrame* aParentFrame,
+  const nsStyleDisplay* aDisplay,
+  nsFrameItems& aFrameItems,
+  BlockFrameCreationFunc aConstructor)
+{
   nsStyleContext* const styleContext = aItem.mStyleContext;
 
   // We want a block formatting context root in paginated contexts for
   // every block that would be scrollable in a non-paginated context.
   // We mark our blocks with a bit here if this condition is true, so
   // we can check it later in nsFrame::ApplyPaginatedOverflowClipping.
   bool clipPaginatedOverflow =
     (aItem.mFCData->mBits & FCDATA_FORCED_NON_SCROLLABLE_BLOCK) != 0;
-  nsContainerFrame* newFrame;
+  nsFrameState flags = nsFrameState(0);
   if ((aDisplay->IsAbsolutelyPositionedStyle() ||
        aDisplay->IsFloatingStyle() ||
        StyleDisplay::InlineBlock == aDisplay->mDisplay ||
        clipPaginatedOverflow) &&
       !aParentFrame->IsSVGText()) {
-    newFrame = NS_NewBlockFormattingContext(mPresShell, styleContext);
+    flags = NS_BLOCK_FLOAT_MGR | NS_BLOCK_MARGIN_ROOT;
     if (clipPaginatedOverflow) {
-      newFrame->AddStateBits(NS_BLOCK_CLIP_PAGINATED_OVERFLOW);
-    }
-  } else {
-    newFrame = NS_NewBlockFrame(mPresShell, styleContext);
-  }
-
+      flags |= NS_BLOCK_CLIP_PAGINATED_OVERFLOW;
+    }
+  }
+
+  nsContainerFrame* newFrame = aConstructor(mPresShell, styleContext);
+  newFrame->AddStateBits(flags);
   ConstructBlock(aState, aItem.mContent,
                  aState.GetGeometricParent(aDisplay, aParentFrame),
                  aParentFrame, styleContext, &newFrame,
                  aFrameItems,
                  aDisplay->IsAbsPosContainingBlock(newFrame) ? newFrame : nullptr,
                  aItem.mPendingBinding);
   return newFrame;
 }

--- a/layout/base/nsCSSFrameConstructor.h
+++ b/layout/base/nsCSSFrameConstructor.h
@@ -560,16 +560,17 @@ private:
      is responsible for initializing the object, adding it to frame lists,
      constructing frames for the children, etc.
 
      @param nsIPresShell the presshell whose arena should be used to allocate
                          the frame.
      @param nsStyleContext the style context to use for the frame. */
   typedef nsIFrame* (* FrameCreationFunc)(nsIPresShell*, nsStyleContext*);
   typedef nsContainerFrame* (* ContainerFrameCreationFunc)(nsIPresShell*, nsStyleContext*);
+  typedef nsBlockFrame* (* BlockFrameCreationFunc)(nsIPresShell*, nsStyleContext*);
 
   /* A function that can be used to get a FrameConstructionData.  Such
      a function is allowed to return null.
 
      @param nsIContent the node for which the frame is being constructed.
      @param nsStyleContext the style context to be used for the frame.
   */
   struct FrameConstructionData;
@@ -1561,16 +1562,28 @@ private:
    */
   nsIFrame* ConstructNonScrollableBlock(nsFrameConstructorState& aState,
                                         FrameConstructionItem&   aItem,
                                         nsContainerFrame*        aParentFrame,
                                         const nsStyleDisplay*    aDisplay,
                                         nsFrameItems&            aFrameItems);
 
   /**
+   * Construct a non-scrollable block frame using the given block frame creation
+   * function.
+   */
+  nsIFrame* ConstructNonScrollableBlockWithConstructor(
+    nsFrameConstructorState& aState,
+    FrameConstructionItem& aItem,
+    nsContainerFrame* aParentFrame,
+    const nsStyleDisplay* aDisplay,
+    nsFrameItems& aFrameItems,
+    BlockFrameCreationFunc aConstructor);
+
+  /**
    * This adds FrameConstructionItem objects to aItemsToConstruct for the
    * anonymous content returned by an nsIAnonymousContentCreator::
    * CreateAnonymousContent implementation.
    */
   void AddFCItemsForAnonymousContent(
             nsFrameConstructorState& aState,
             nsContainerFrame* aFrame,
             nsTArray<nsIAnonymousContentCreator::ContentInfo>& aAnonymousItems,

--- a/layout/generic/DetailsFrame.cpp
+++ b/layout/generic/DetailsFrame.cpp
@@ -17,17 +17,17 @@ using namespace mozilla::dom;
 
 NS_IMPL_FRAMEARENA_HELPERS(DetailsFrame)
 
 NS_QUERYFRAME_HEAD(DetailsFrame)
   NS_QUERYFRAME_ENTRY(DetailsFrame)
   NS_QUERYFRAME_ENTRY(nsIAnonymousContentCreator)
 NS_QUERYFRAME_TAIL_INHERITING(nsBlockFrame)
 
-DetailsFrame*
+nsBlockFrame*
 NS_NewDetailsFrame(nsIPresShell* aPresShell, nsStyleContext* aContext)
 {
   return new (aPresShell) DetailsFrame(aContext);
 }
 
 DetailsFrame::DetailsFrame(nsStyleContext* aContext)
   : nsBlockFrame(aContext)
 {

--- a/layout/generic/nsBlockFrame.cpp
+++ b/layout/generic/nsBlockFrame.cpp
@@ -275,21 +275,28 @@ NS_DECLARE_FRAME_PROPERTY_FRAMELIST(Over
 NS_DECLARE_FRAME_PROPERTY_FRAMELIST(PushedFloatProperty)
 NS_DECLARE_FRAME_PROPERTY_FRAMELIST(OutsideBulletProperty)
 NS_DECLARE_FRAME_PROPERTY_WITHOUT_DTOR(InsideBulletProperty, nsBulletFrame)
 NS_DECLARE_FRAME_PROPERTY_SMALL_VALUE(BlockEndEdgeOfChildrenProperty, nscoord)
 
 //----------------------------------------------------------------------
 
 nsBlockFrame*
-NS_NewBlockFrame(nsIPresShell* aPresShell, nsStyleContext* aContext, nsFrameState aFlags)
-{
-  nsBlockFrame* it = new (aPresShell) nsBlockFrame(aContext);
-  it->SetFlags(aFlags);
-  return it;
+NS_NewBlockFrame(nsIPresShell* aPresShell, nsStyleContext* aContext)
+{
+  return new (aPresShell) nsBlockFrame(aContext);
+}
+
+nsBlockFrame*
+NS_NewBlockFormattingContext(nsIPresShell* aPresShell,
+                             nsStyleContext* aStyleContext)
+{
+  nsBlockFrame* blockFrame = NS_NewBlockFrame(aPresShell, aStyleContext);
+  blockFrame->AddStateBits(NS_BLOCK_FLOAT_MGR | NS_BLOCK_MARGIN_ROOT);
+  return blockFrame;
 }
 
 NS_IMPL_FRAMEARENA_HELPERS(nsBlockFrame)
 
 nsBlockFrame::~nsBlockFrame()
 {
 }
 

--- a/layout/generic/nsBlockFrame.h
+++ b/layout/generic/nsBlockFrame.h
@@ -95,18 +95,17 @@ public:
   reverse_line_iterator rbegin_lines() { return mLines.rbegin(); }
   reverse_line_iterator rend_lines() { return mLines.rend(); }
   const_reverse_line_iterator rbegin_lines() const { return mLines.rbegin(); }
   const_reverse_line_iterator rend_lines() const { return mLines.rend(); }
   line_iterator line(nsLineBox* aList) { return mLines.begin(aList); }
   reverse_line_iterator rline(nsLineBox* aList) { return mLines.rbegin(aList); }
 
   friend nsBlockFrame* NS_NewBlockFrame(nsIPresShell* aPresShell,
-                                        nsStyleContext* aContext,
-                                        nsFrameState aFlags);
+                                        nsStyleContext* aContext);
 
   // nsQueryFrame
   NS_DECL_QUERYFRAME
 
   // nsIFrame
   virtual void Init(nsIContent*       aContent,
                     nsContainerFrame* aParent,
                     nsIFrame*         aPrevInFlow) override;

--- a/layout/generic/nsHTMLParts.h
+++ b/layout/generic/nsHTMLParts.h
@@ -43,39 +43,35 @@ class nsTableColFrame;
                              NS_BLOCK_HAS_FIRST_LETTER_CHILD   | \
                              NS_BLOCK_FRAME_HAS_INSIDE_BULLET)
 
 // Factory methods for creating html layout objects
 
 // Create a frame that supports "display: block" layout behavior
 class nsBlockFrame;
 nsBlockFrame*
-NS_NewBlockFrame(nsIPresShell* aPresShell, nsStyleContext* aContext, nsFrameState aFlags = nsFrameState(0));
+NS_NewBlockFrame(nsIPresShell* aPresShell, nsStyleContext* aContext);
 
 // Special Generated Content Node. It contains text taken from an
 // attribute of its *grandparent* content node. 
 nsresult
 NS_NewAttributeContent(nsNodeInfoManager *aNodeInfoManager,
                        int32_t aNameSpaceID, nsIAtom* aAttrName,
                        nsIContent** aResult);
 
 // Create a basic area frame but the GetFrameForPoint is overridden to always
 // return the option frame 
 // By default, area frames will extend
 // their height to cover any children that "stick out".
 nsContainerFrame*
 NS_NewSelectsAreaFrame(nsIPresShell* aPresShell, nsStyleContext* aContext, nsFrameState aFlags);
 
 // Create a block formatting context blockframe
-inline nsBlockFrame* NS_NewBlockFormattingContext(nsIPresShell* aPresShell,
-                                                  nsStyleContext* aStyleContext)
-{
-  return NS_NewBlockFrame(aPresShell, aStyleContext,
-                          NS_BLOCK_FLOAT_MGR | NS_BLOCK_MARGIN_ROOT);
-}
+nsBlockFrame*
+NS_NewBlockFormattingContext(nsIPresShell* aPresShell, nsStyleContext* aStyleContext);
 
 nsIFrame*
 NS_NewBRFrame(nsIPresShell* aPresShell, nsStyleContext* aContext);
 
 nsIFrame*
 NS_NewCommentFrame(nsIPresShell* aPresShell, nsStyleContext* aContext);
 
 // <frame> and <iframe> 
@@ -170,18 +166,17 @@ NS_NewComboboxControlFrame(nsIPresShell*
 nsIFrame*
 NS_NewProgressFrame(nsIPresShell* aPresShell, nsStyleContext* aContext);
 nsIFrame*
 NS_NewMeterFrame(nsIPresShell* aPresShell, nsStyleContext* aContext);
 nsIFrame*
 NS_NewRangeFrame(nsIPresShell* aPresShell, nsStyleContext* aContext);
 nsIFrame*
 NS_NewNumberControlFrame(nsIPresShell* aPresShell, nsStyleContext* aContext);
-class DetailsFrame;
-DetailsFrame*
+nsBlockFrame*
 NS_NewDetailsFrame(nsIPresShell* aPresShell, nsStyleContext* aContext);
 
 // Table frame factories
 class nsTableWrapperFrame;
 nsTableWrapperFrame*
 NS_NewTableWrapperFrame(nsIPresShell* aPresShell, nsStyleContext* aContext);
 class nsTableFrame;
 nsTableFrame*

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-left-and-float-details-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: left;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  div#details {
+    float: left;
+    background-color: orange;
+  }
+  div#summary {
+    background-color: green;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <div id="details">
+      <div id="summary">Summary</div>
+      <!-- No content due to closed details -->
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-left-and-float-details.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: left;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  details {
+    float: left;
+    background-color: orange;
+  }
+  summary {
+    background-color: green;
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+  }
+  </style>
+  <body>
+    <!-- This tall float block is necessary to reproduce the incorrect height of the details. -->
+    <div id="float"></div>
+    <details>
+      <summary>Summary</summary>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </details>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-left-and-float-open-details-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: left;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  div#details {
+    float: left;
+    background-color: orange;
+  }
+  div#summary {
+    background-color: green;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <div id="details">
+      <div id="summary">Summary</div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-left-and-float-open-details.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: left;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  details {
+    float: left;
+    background-color: orange;
+  }
+  summary {
+    background-color: green;
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+  }
+  </style>
+  <body>
+    <!-- This tall float block is necessary to reproduce the incorrect height of the details. -->
+    <div id="float"></div>
+    <details open>
+      <summary>Summary</summary>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </details>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-left-and-inflow-details-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: left;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  div#details {
+    background-color: orange;
+  }
+  div#summary {
+    background-color: green;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <div id="details">
+      <div id="summary">Summary</div>
+      <!-- No content due to closed details -->
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-left-and-inflow-details.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: left;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  details {
+    background-color: orange;
+  }
+  summary {
+    background-color: green;
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <details>
+      <summary>Summary</summary>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </details>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-left-and-inflow-open-details-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: left;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  div#details {
+    background-color: orange;
+  }
+  div#summary {
+    background-color: green;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <div id="details">
+      <div id="summary">Summary</div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-left-and-inflow-open-details.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: left;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  details {
+    background-color: orange;
+  }
+  summary {
+    background-color: green;
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <details open>
+      <summary>Summary</summary>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </details>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-open-details-contains-float-left-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: left;
+    width: 200px;
+    height: 400px;
+    background-color: lightgreen;
+  }
+  div#details {
+    float: left;
+    background-color: orange;
+  }
+  div#summary {
+    background-color: green;
+  }
+  </style>
+  <body>
+    <div id="details">
+      <div id="summary">Summary</div>
+      <div id="float"></div>
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-open-details-contains-float-left.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: left;
+    width: 200px;
+    height: 400px;
+    background-color: lightgreen;
+  }
+  details {
+    float: left;
+    background-color: orange;
+  }
+  summary {
+    background-color: green;
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+  }
+  </style>
+  <body>
+    <details open>
+      <summary>Summary</summary>
+      <div id="float"></div>
+    </details>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-open-details-contains-float-right-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: right;
+    width: 200px;
+    height: 400px;
+    background-color: lightgreen;
+  }
+  div#details {
+    float: right;
+    background-color: orange;
+  }
+  div#summary {
+    background-color: green;
+  }
+  </style>
+  <body>
+    <div id="details">
+      <div id="summary">Summary</div>
+      <div id="float"></div>
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-open-details-contains-float-right.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: right;
+    width: 200px;
+    height: 400px;
+    background-color: lightgreen;
+  }
+  details {
+    float: right;
+    background-color: orange;
+  }
+  summary {
+    background-color: green;
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+  }
+  </style>
+  <body>
+    <details open>
+      <summary>Summary</summary>
+      <div id="float"></div>
+    </details>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-right-and-float-details-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: right;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  div#details {
+    float: right;
+    background-color: orange;
+  }
+  div#summary {
+    background-color: green;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <div id="details">
+      <div id="summary">Summary</div>
+      <!-- No content due to closed details -->
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-right-and-float-details.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: right;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  details {
+    float: right;
+    background-color: orange;
+  }
+  summary {
+    background-color: green;
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+  }
+  </style>
+  <body>
+    <!-- This tall float block is necessary to reproduce the incorrect height of the details. -->
+    <div id="float"></div>
+    <details>
+      <summary>Summary</summary>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </details>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-right-and-float-open-details-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: right;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  div#details {
+    float: right;
+    background-color: orange;
+  }
+  div#summary {
+    background-color: green;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <div id="details">
+      <div id="summary">Summary</div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-right-and-float-open-details.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: right;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  details {
+    float: right;
+    background-color: orange;
+  }
+  summary {
+    background-color: green;
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+  }
+  </style>
+  <body>
+    <!-- This tall float block is necessary to reproduce the incorrect height of the details. -->
+    <div id="float"></div>
+    <details open>
+      <summary>Summary</summary>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </details>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-right-and-inflow-details-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: right;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  div#details {
+    background-color: orange;
+  }
+  div#summary {
+    background-color: green;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <div id="details">
+      <div id="summary">Summary</div>
+      <!-- No content due to closed details -->
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-right-and-inflow-details.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: right;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  details {
+    background-color: orange;
+  }
+  summary {
+    background-color: green;
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <details>
+      <summary>Summary</summary>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </details>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-right-and-inflow-open-details-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: right;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  div#details {
+    background-color: orange;
+  }
+  div#summary {
+    background-color: green;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <div id="details">
+      <div id="summary">Summary</div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </div>
+  </body>
+</html>

new file mode 100644
--- /dev/null
+++ b/layout/reftests/details-summary/float-right-and-inflow-open-details.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<html>
+  <style>
+  body {
+    width: 400px;
+  }
+  div#float {
+    float: right;
+    width: 200px;
+    height: 200px;
+    background-color: lightgreen;
+  }
+  details {
+    background-color: orange;
+  }
+  summary {
+    background-color: green;
+    /* Hide the triangle for comparing with div in reftest. */
+    list-style-type: none;
+  }
+  </style>
+  <body>
+    <div id="float"></div>
+    <details open>
+      <summary>Summary</summary>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </details>
+  </body>
+</html>

--- a/layout/reftests/details-summary/reftest.list
+++ b/layout/reftests/details-summary/reftest.list
@@ -45,16 +45,28 @@ pref(dom.details_element.enabled,false) 
 == overflow-scroll-details.html overflow-scroll-details-ref.html
 
 # With pagination property
 == details-page-break-after-1.html details-two-pages.html
 == details-page-break-after-2.html details-two-pages.html
 == details-page-break-before-1.html details-two-pages.html
 == details-page-break-before-2.html details-two-pages.html
 
+# With 'float' property
+== float-left-and-float-details.html float-left-and-float-details-ref.html
+== float-left-and-inflow-details.html float-left-and-inflow-details-ref.html
+== float-left-and-float-open-details.html float-left-and-float-open-details-ref.html
+== float-left-and-inflow-open-details.html float-left-and-inflow-open-details-ref.html
+== float-right-and-float-details.html float-right-and-float-details-ref.html
+== float-right-and-inflow-details.html float-right-and-inflow-details-ref.html
+== float-right-and-float-open-details.html float-right-and-float-open-details-ref.html
+== float-right-and-inflow-open-details.html float-right-and-inflow-open-details-ref.html
+== float-open-details-contains-float-left.html float-open-details-contains-float-left-ref.html
+== float-open-details-contains-float-right.html float-open-details-contains-float-right-ref.html
+
 # Various properties on details or summary
 == details-display-inline.html details-display-inline-ref.html
 == details-percentage-height-children.html details-percentage-height-children-ref.html
 == details-absolute-children.html details-absolute-children-ref.html
 == details-three-columns.html details-three-columns-ref.html
 == details-writing-mode.html details-writing-mode-ref.html
 == details-in-ol.html details-in-ol-ref.html
 == summary-three-columns.html summary-three-columns-ref.html