--- 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
