Bug 984869 - Add support for display:flex/grid and columnset layout to <button>. r=tn

layout/base/nsCSSFrameConstructor.cpp

@@ -3879,34 +3879,68 @@ nsCSSFrameConstructor::ConstructFrameFromItemInternal(FrameConstructionItem& aIt
     nsIFrame* maybeAbsoluteContainingBlock = newFrame;
     nsIFrame* possiblyLeafFrame = newFrame;
     if (bits & FCDATA_CREATE_BLOCK_WRAPPER_FOR_ALL_KIDS) {
-      RefPtr<nsStyleContext> blockContext;
-      blockContext =
+      RefPtr<nsStyleContext> outerSC =
         mPresShell->StyleSet()->ResolveAnonymousBoxStyle(*data->mAnonBoxPseudo,
                                                          styleContext);
-      nsIFrame* blockFrame =
-        NS_NewBlockFormattingContext(mPresShell, blockContext);
-
 #ifdef DEBUG
       nsContainerFrame* containerFrame = do_QueryFrame(newFrame);
       MOZ_ASSERT(containerFrame);
 #endif
       nsContainerFrame* container = static_cast<nsContainerFrame*>(newFrame);
-      InitAndRestoreFrame(aState, content, container, blockFrame);
-
-      SetInitialSingleChild(container, blockFrame);
-
-      // Now figure out whether newFrame or blockFrame should be the
-      // absolute container.  It should be the latter if it's
-      // positioned, otherwise the former.
-      const nsStyleDisplay* blockDisplay = blockContext->StyleDisplay();
-      if (blockDisplay->IsAbsPosContainingBlock(blockFrame)) {
-        maybeAbsoluteContainingBlockDisplay = blockDisplay;
-        maybeAbsoluteContainingBlock = blockFrame;
-        maybeAbsoluteContainingBlockStyleFrame = blockFrame;
+      nsContainerFrame* outerFrame;
+      nsContainerFrame* innerFrame;
+      switch (display->mDisplay) {
+        case StyleDisplay::Flex:
+        case StyleDisplay::InlineFlex:
+          outerFrame = NS_NewFlexContainerFrame(mPresShell, outerSC);
+          InitAndRestoreFrame(aState, content, container, outerFrame);
+          innerFrame = outerFrame;
+          break;
+        case StyleDisplay::Grid:
+        case StyleDisplay::InlineGrid:
+          outerFrame = NS_NewGridContainerFrame(mPresShell, outerSC);
+          InitAndRestoreFrame(aState, content, container, outerFrame);
+          innerFrame = outerFrame;
+          break;
+        default: {
+          nsContainerFrame* columnSetFrame = nullptr;
+          RefPtr<nsStyleContext> innerSC = outerSC;
+          const nsStyleColumn* columns = outerSC->StyleColumn();
+          if (columns->mColumnCount != NS_STYLE_COLUMN_COUNT_AUTO ||
+              columns->mColumnWidth.GetUnit() != eStyleUnit_Auto) {
+            columnSetFrame =
+              NS_NewColumnSetFrame(mPresShell, outerSC, nsFrameState(0));
+            InitAndRestoreFrame(aState, content, container, columnSetFrame);
+            innerSC = mPresShell->StyleSet()->ResolveAnonymousBoxStyle(
+              nsCSSAnonBoxes::columnContent, outerSC);
+          }
+          innerFrame = NS_NewBlockFormattingContext(mPresShell, innerSC);
+          if (columnSetFrame) {
+            InitAndRestoreFrame(aState, content, columnSetFrame, innerFrame);
+            SetInitialSingleChild(columnSetFrame, innerFrame);
+            outerFrame = columnSetFrame;
+          } else {
+            InitAndRestoreFrame(aState, content, container, innerFrame);
+            outerFrame = innerFrame;
+          }
+          break;
+        }
       }
 
-      // Our kids should go into the blockFrame
-      newFrame = blockFrame;
+      SetInitialSingleChild(container, outerFrame);
+
+      // Now figure out whether newFrame or outerFrame should be the
+      // absolute container.
+      auto outerDisplay = outerSC->StyleDisplay();
+      if (outerDisplay->IsAbsPosContainingBlock(outerFrame)) {
+        maybeAbsoluteContainingBlockDisplay = outerDisplay;
+        maybeAbsoluteContainingBlock = outerFrame;
+        maybeAbsoluteContainingBlockStyleFrame = outerFrame;
+        innerFrame->AddStateBits(NS_FRAME_CAN_HAVE_ABSPOS_CHILDREN);
+      }
+
+      // Our kids should go into the innerFrame.
+      newFrame = innerFrame;
     }
 
     aState.AddChild(frameToAddToList, aFrameItems, content, styleContext,

layout/generic/nsFlexContainerFrame.cpp

@@ -106,9 +106,11 @@ IsLegacyBox(const nsStyleDisplay* aStyleDisp,
   if (aStyleDisp->mDisplay == mozilla::StyleDisplay::Block) {
     nsStyleContext* parentStyleContext = aStyleContext->GetParent();
     NS_ASSERTION(parentStyleContext &&
-                 aStyleContext->GetPseudo() == nsCSSAnonBoxes::scrolledContent,
+                 (aStyleContext->GetPseudo() == nsCSSAnonBoxes::buttonContent ||
+                  aStyleContext->GetPseudo() == nsCSSAnonBoxes::scrolledContent),
                  "The only way a nsFlexContainerFrame can have 'display:block' "
-                 "should be if it's the inner part of a scrollable element");
+                 "should be if it's the inner part of a scrollable or button "
+                 "element");
     if (IsDisplayValueLegacyBox(parentStyleContext->StyleDisplay())) {
       return true;
     }

layout/style/res/forms.css

@@ -19,7 +19,7 @@
   padding: inherit;
   block-size: 100%; /* Need this so percentage block-sizes of kids work right */
   /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
-     ::-moz-scrolled-content in ua.css */
+     ::-moz-scrolled-content in ua.css and ::-moz-button-content below. */
   /* Multicol container */
   -moz-column-count: inherit;
   -moz-column-width: inherit;
@@ -661,6 +661,31 @@ button {
 
 *|*::-moz-button-content {
   display: block;
+  /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
+     ::-moz-scrolled-content in ua.css and ::-moz-fieldset-content above. */
+  /* Multicol container */
+  -moz-column-count: inherit;
+  -moz-column-width: inherit;
+  -moz-column-gap: inherit;
+  -moz-column-rule: inherit;
+  -moz-column-fill: inherit;
+  /* Flex container */
+  flex-direction: inherit;
+  flex-wrap: inherit;
+  /* Grid container */
+  grid-auto-columns: inherit;
+  grid-auto-rows: inherit;
+  grid-auto-flow: inherit;
+  grid-column-gap: inherit;
+  grid-row-gap: inherit;
+  grid-template-areas: inherit;
+  grid-template-columns: inherit;
+  grid-template-rows: inherit;
+  /* CSS Align */
+  align-content: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  justify-items: inherit;
 }
 
 button:hover,

layout/style/res/ua.css

@@ -171,7 +171,7 @@
   unicode-bidi: inherit;
   text-overflow: inherit;
   /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
-     ::-moz-fieldset-content in forms.css */
+     ::-moz-fieldset-content/::-moz-button-content in forms.css */
   /* Multicol container */
   -moz-column-count: inherit;
   -moz-column-width: inherit;