Bug 1299753 Part 2 - Create block formatting context for DetailsFrame if needed. r=bz
authorTing-Yu Lin <tlin@mozilla.com>
Wed, 07 Sep 2016 14:45:42 +0800
changeset 313295 31f1b0aa5308eebc39635a76db6016e0598e33ad
parent 313294 8d8754d431f311605926dbb8414337aa39ba059b
child 313296 37577db303680328e0e0293ed4d9e156cb5b2fa9
push id32161
push usertlin@mozilla.com
push dateFri, 09 Sep 2016 07:06:30 +0000
treeherderautoland@37577db30368 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz
bugs1299753
milestone51.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1299753 Part 2 - Create block formatting context for DetailsFrame if needed. r=bz nsCSSFrameConstructor::ConstructNonScrollableBlock() has logic to determine whether to create a block formatting context for a block frame. I refactor the function to make it reusable by nsCSSFrameConstructor::ConstructDetailsFrame(). Also, make NS_NewBlockFrame() accept two arguments as other frame factory functions so that it could be pointed by BlockFrameCreationFunc. NS_NewBlockFormattingContext is changed accordingly. The construction for a scrollable DetailsFrame will be further revised in Part 3. MozReview-Commit-ID: 8TwG9YMyGva
layout/base/nsCSSFrameConstructor.cpp
layout/base/nsCSSFrameConstructor.h
layout/generic/DetailsFrame.cpp
layout/generic/nsBlockFrame.cpp
layout/generic/nsBlockFrame.h
layout/generic/nsHTMLParts.h
layout/reftests/details-summary/float-left-and-float-details-ref.html
layout/reftests/details-summary/float-left-and-float-details.html
layout/reftests/details-summary/float-left-and-float-open-details-ref.html
layout/reftests/details-summary/float-left-and-float-open-details.html
layout/reftests/details-summary/float-left-and-inflow-details-ref.html
layout/reftests/details-summary/float-left-and-inflow-details.html
layout/reftests/details-summary/float-left-and-inflow-open-details-ref.html
layout/reftests/details-summary/float-left-and-inflow-open-details.html
layout/reftests/details-summary/float-open-details-contains-float-left-ref.html
layout/reftests/details-summary/float-open-details-contains-float-left.html
layout/reftests/details-summary/float-open-details-contains-float-right-ref.html
layout/reftests/details-summary/float-open-details-contains-float-right.html
layout/reftests/details-summary/float-right-and-float-details-ref.html
layout/reftests/details-summary/float-right-and-float-details.html
layout/reftests/details-summary/float-right-and-float-open-details-ref.html
layout/reftests/details-summary/float-right-and-float-open-details.html
layout/reftests/details-summary/float-right-and-inflow-details-ref.html
layout/reftests/details-summary/float-right-and-inflow-details.html
layout/reftests/details-summary/float-right-and-inflow-open-details-ref.html
layout/reftests/details-summary/float-right-and-inflow-open-details.html
layout/reftests/details-summary/reftest.list
--- 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