Revert changesets d04d205b6c1 and b4e9b4dab577 because they landed with the wrong bug number.
authorDaniel Holbert <dholbert@cs.stanford.edu>
Wed, 05 Nov 2014 13:41:21 -0800
changeset 225950 0430d2b93ed3
parent 225949 d9f441a027e5
child 225951 af442befe914
push id4080
push userdholbert@mozilla.com
push date2014-11-05 21:45 +0000
treeherdermozilla-beta@6f460d9ed80d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
milestone34.0
Revert changesets d04d205b6c1 and b4e9b4dab577 because they landed with the wrong bug number.
browser/base/content/browser.css
browser/devtools/markupview/markup-view.css
browser/metro/theme/config.css
browser/themes/shared/customizableui/panelUIOverlay.inc.css
browser/themes/shared/devtools/webconsole.inc.css
layout/base/nsLayoutUtils.cpp
layout/generic/nsFlexContainerFrame.cpp
layout/generic/nsFrame.cpp
layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-1.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1.html
layout/style/nsCSSKeywordList.h
layout/style/nsCSSParser.cpp
layout/style/nsCSSPropList.h
layout/style/nsCSSProps.cpp
layout/style/nsCSSProps.h
layout/style/nsComputedDOMStyle.cpp
layout/style/nsRuleNode.cpp
layout/style/nsStyleConsts.h
layout/style/nsStyleStruct.cpp
layout/style/nsStyleUtil.cpp
layout/style/nsStyleUtil.h
layout/style/test/flexbox_layout_testcases.js
layout/style/test/mochitest.ini
layout/style/test/property_database.js
layout/style/test/test_flexbox_flex_basis_values.html
layout/style/test/test_flexbox_flex_shorthand.html
mobile/android/themes/core/aboutReader.css
mobile/android/themes/core/config.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1100,24 +1100,24 @@ toolbarpaletteitem[dragover] {
 
 #customization-palette-container {
   display: flex;
   flex-direction: column;
 }
 
 #customization-palette:not([hidden]) {
   display: block;
-  flex: 1 1 auto;
+  flex: 1 1 main-size;
   overflow: auto;
   min-height: 3em;
 }
 
 #customization-footer-spacer,
 #customization-spacer {
-  flex: 1 1 auto;
+  flex: 1 1 main-size;
 }
 
 #customization-footer {
   display: flex;
   flex-shrink: 0;
   flex-wrap: wrap;
 }
 
--- a/browser/devtools/markupview/markup-view.css
+++ b/browser/devtools/markupview/markup-view.css
@@ -30,17 +30,17 @@
    * the editor covers up any content to the left (including expander arrows
    * and hover effects). */
   margin-left: -1000em;
   padding-left: 1000em;
 }
 
 .html-editor-inner {
   border: solid .1px;
-  flex: 1 1 auto;
+  flex: 1 1 main-size;
 }
 
 .html-editor iframe {
   height: 100%;
   width: 100%;
   border: none;
   margin: 0;
   padding: 0;
--- a/browser/metro/theme/config.css
+++ b/browser/metro/theme/config.css
@@ -52,17 +52,17 @@ body {
     border: none;
     background-image: none;
     background-color: transparent;
     display: inline-block;
     width: 12em;
     min-width: 0;
     color: #000000;
     opacity: 1;
-    flex: 1 1 auto;
+    flex: 1 1 main-size;
 }
 
 #filter-input:-moz-placeholder {
     color: rgba(255,255,255,0.5);
 }
 
 .toolbar input {
     display: inline-block;
@@ -188,17 +188,17 @@ li {
     text-align: left;
     text-overflow: ellipsis;
     overflow: hidden;
     background-image: none;
 }
 
 .pref-value {
     color: rgba(0,0,0,0.5);
-    flex: 1 1 auto;
+    flex: 1 1 main-size;
     border: none;
     -moz-appearance: none;
     background-image: none;
     background-color: transparent;
 }
 
 .pref-name[locked] {
     padding-right: 20px;
@@ -222,37 +222,37 @@ li {
 .pref-item-line {
     border-top: 1px solid rgba(0,0,0,0.05);
     color: rgba(0,0,0,0.5);
     display: flex;
     flex-direction: row;
 }
 
 #new-pref-value-boolean {
-    flex: 1 1 auto;
+    flex: 1 1 main-size;
 }
 
 /* Disable newPref dialog spinbuttons, use custom version from Android */
 /* Filed Bug 962359 to enhance the default spinbutton style to be touch-friendly */
 #new-pref-value-int {
     -moz-appearance: textfield;
 }
 
 #new-pref-container .pref-button.toggle {
     display: inline-block;
     opacity: 1;
-    flex: 0 1 auto;
+    flex: 0 1 main-size;
     float: right;
 }
 
 #new-pref-container .pref-button.cancel,
 #new-pref-container .pref-button.create {
     display: inline-block;
     opacity: 1;
-    flex: 1 1 auto;
+    flex: 1 1 main-size;
 }
 
 .pref-item-line {
     pointer-events: none;
 }
 
 #new-pref-container .pref-item-line,
 .pref-item.selected .pref-item-line,
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -243,17 +243,17 @@ panelview:not([mainview]) .toolbarbutton
 }
 
 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
   padding-bottom: 0;
 }
 
 #PanelUI-contents {
   display: block;
-  flex: 1 0 auto;
+  flex: 1 0 main-size;
   margin-left: auto;
   margin-right: auto;
   padding: .5em 0;
   max-width: @menuPanelWidth@;
 }
 
 #PanelUI-contents-scroller {
   overflow-y: auto;
--- a/browser/themes/shared/devtools/webconsole.inc.css
+++ b/browser/themes/shared/devtools/webconsole.inc.css
@@ -119,17 +119,17 @@ a {
 
 .message-body {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
 
 .message-flex-body > .message-body {
   display: block;
-  flex: 1 1 auto;
+  flex: 1 1 main-size;
   vertical-align: middle;
 }
 
 .message-flex-body > .message-location {
   margin-top: 0;
 }
 
 .jsterm-input-container {
@@ -246,17 +246,17 @@ a {
   display: flex;
 }
 
 .message[category=network] .method {
   flex: none;
 }
 
 .message[category=network]:not(.navigation-marker) .url {
-  flex: 1 1 auto;
+  flex: 1 1 main-size;
   /* Make sure the URL is very small initially, let flex change width as needed. */
   width: 100px;
   min-width: 5em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -464,17 +464,17 @@ a {
 
 .stacktrace li {
   display: flex;
   margin: 0;
 }
 
 .stacktrace .function {
   display: block;
-  flex: 1 1 auto;
+  flex: 1 1 main-size;
 }
 
 .cm-s-mozilla a[class] {
   font-style: italic;
   text-decoration: none;
 }
 
 .cm-s-mozilla a[class]:hover,
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -66,16 +66,17 @@
 #include "nsTextFrame.h"
 #include "nsFontFaceList.h"
 #include "nsFontInflationData.h"
 #include "nsSVGUtils.h"
 #include "SVGImageContext.h"
 #include "SVGTextFrame.h"
 #include "nsStyleStructInlines.h"
 #include "nsStyleTransformMatrix.h"
+#include "nsStyleUtil.h"
 #include "nsIFrameInlines.h"
 #include "ImageContainer.h"
 #include "nsComputedDOMStyle.h"
 #include "ActiveLayerTracker.h"
 #include "mozilla/gfx/2D.h"
 #include "gfx2DGlue.h"
 #include "mozilla/LookAndFeel.h"
 #include "UnitTransforms.h"
@@ -4157,42 +4158,29 @@ nsLayoutUtils::ComputeSizeWithIntrinsicD
     aWM.IsVertical() ? &stylePos->mWidth : &stylePos->mHeight;
 
   bool isFlexItem = aFrame->IsFlexItem();
   bool isInlineFlexItem = false;
 
   if (isFlexItem) {
     // Flex items use their "flex-basis" property in place of their main-size
     // property (e.g. "width") for sizing purposes, *unless* they have
-    // "flex-basis:auto", in which case they use their main-size property after
-    // all.
+    // "flex-basis:main-size", in which case they use their main-size property
+    // after all.
     uint32_t flexDirection =
       aFrame->GetParent()->StylePosition()->mFlexDirection;
     isInlineFlexItem =
       flexDirection == NS_STYLE_FLEX_DIRECTION_ROW ||
       flexDirection == NS_STYLE_FLEX_DIRECTION_ROW_REVERSE;
 
     // NOTE: The logic here should match the similar chunk for determining
     // inlineStyleCoord and blockStyleCoord in nsFrame::ComputeSize().
     const nsStyleCoord* flexBasis = &(stylePos->mFlexBasis);
-    if (flexBasis->GetUnit() != eStyleUnit_Auto) {
-      if (isInlineFlexItem) {
-        inlineStyleCoord = flexBasis;
-      } else {
-        // One caveat for vertical flex items: We don't support enumerated
-        // values (e.g. "max-content") for height properties yet. So, if our
-        // computed flex-basis is an enumerated value, we'll just behave as if
-        // it were "auto", which means "use the main-size property after all"
-        // (which is "height", in this case).
-        // NOTE: Once we support intrinsic sizing keywords for "height",
-        // we should remove this check.
-        if (flexBasis->GetUnit() != eStyleUnit_Enumerated) {
-          blockStyleCoord = flexBasis;
-        }
-      }
+    if (!nsStyleUtil::IsFlexBasisMainSize(*flexBasis, isInlineFlexItem)) {
+      (isInlineFlexItem ? inlineStyleCoord : blockStyleCoord) = flexBasis;
     }
   }
 
   // Handle intrinsic sizes and their interaction with
   // {min-,max-,}{width,height} according to the rules in
   // http://www.w3.org/TR/CSS21/visudet.html#min-max-widths
 
   // Note: throughout the following section of the function, I avoid
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -12,16 +12,17 @@
 #include "nsCSSAnonBoxes.h"
 #include "nsDisplayList.h"
 #include "nsIFrameInlines.h"
 #include "nsLayoutUtils.h"
 #include "nsPlaceholderFrame.h"
 #include "nsPresContext.h"
 #include "nsRenderingContext.h"
 #include "nsStyleContext.h"
+#include "nsStyleUtil.h"
 #include "prlog.h"
 #include <algorithm>
 #include "mozilla/LinkedList.h"
 
 using namespace mozilla;
 using namespace mozilla::layout;
 
 // Convenience typedefs for helper classes that we forward-declare in .h file
@@ -566,17 +567,18 @@ protected:
   const float mFlexGrow;
   const float mFlexShrink;
 
   const nsMargin mBorderPadding;
   nsMargin mMargin; // non-const because we need to resolve auto margins
 
   // These are non-const so that we can lazily update them with the item's
   // intrinsic size (obtained via a "measuring" reflow), when necessary.
-  // (e.g. for "flex-basis:auto;height:auto" & "min-height:auto")
+  // (e.g. if we have a vertical flex item with "flex-basis:auto",
+  // "flex-basis:main-size;height:auto", or "min-height:auto")
   nscoord mFlexBaseSize;
   nscoord mMainMinSize;
   nscoord mMainMaxSize;
 
   const nscoord mCrossMinSize;
   const nscoord mCrossMaxSize;
 
   // Values that we compute after constructor:
@@ -1157,20 +1159,20 @@ PartiallyResolveAutoMinSize(const FlexIt
 {
   MOZ_ASSERT(aFlexItem.NeedsMinSizeAutoResolution(),
              "only call for FlexItems that need min-size auto resolution");
 
   nscoord minMainSize = nscoord_MAX; // Intentionally huge; we'll shrink it
                                      // from here, w/ std::min().
 
   // We need the smallest of:
-  // * the used flex-basis, if the computed flex-basis was 'auto':
-  // XXXdholbert ('auto' might be renamed to 'main-size'; see bug 1032922)
-  if (eStyleUnit_Auto ==
-      aItemReflowState.mStylePosition->mFlexBasis.GetUnit() &&
+  // * the used flex-basis, if the computed flex-basis was 'main-size':
+  const nsStyleCoord& flexBasis = aItemReflowState.mStylePosition->mFlexBasis;
+  const bool isHorizontal = IsAxisHorizontal(aAxisTracker.GetMainAxis());
+  if (nsStyleUtil::IsFlexBasisMainSize(flexBasis, isHorizontal) &&
       aFlexItem.GetFlexBaseSize() != NS_AUTOHEIGHT) {
     // NOTE: We skip this if the flex base size depends on content & isn't yet
     // resolved. This is OK, because the caller is responsible for computing
     // the min-content height and min()'ing it with the value we return, which
     // is equivalent to what would happen if we min()'d that at this point.
     minMainSize = std::min(minMainSize, aFlexItem.GetFlexBaseSize());
   }
 
@@ -1214,17 +1216,17 @@ ResolveAutoFlexBasisFromRatio(FlexItem& 
                               const nsHTMLReflowState& aItemReflowState,
                               const nsSize& aIntrinsicRatio,
                               const FlexboxAxisTracker& aAxisTracker)
 {
   MOZ_ASSERT(NS_AUTOHEIGHT == aFlexItem.GetFlexBaseSize(),
              "Should only be called to resolve an 'auto' flex-basis");
   // If the flex item has ...
   //  - an intrinsic aspect ratio,
-  //  - a [used] flex-basis of 'main-size' [auto?] [We have this, if we're here.]
+  //  - a [used] flex-basis of 'main-size' [We have this, if we're here.]
   //  - a definite cross size
   // then the flex base size is calculated from its inner cross size and the
   // flex item’s intrinsic aspect ratio.
   if (aAxisTracker.GetCrossComponent(aIntrinsicRatio) != 0) {
     // We have a usable aspect ratio. (not going to divide by 0)
     const bool useMinSizeIfCrossSizeIsIndefinite = false;
     nscoord crossSizeToUseWithRatio =
       CrossSizeToUseWithRatio(aFlexItem, aItemReflowState,
--- a/layout/generic/nsFrame.cpp
+++ b/layout/generic/nsFrame.cpp
@@ -24,16 +24,17 @@
 #include "nsReadableUtils.h"
 #include "nsStyleContext.h"
 #include "nsTableOuterFrame.h"
 #include "nsView.h"
 #include "nsViewManager.h"
 #include "nsIScrollableFrame.h"
 #include "nsPresContext.h"
 #include "nsStyleConsts.h"
+#include "nsStyleUtil.h"
 #include "nsIPresShell.h"
 #include "prlog.h"
 #include "prprf.h"
 #include "nsFrameManager.h"
 #include "nsLayoutUtils.h"
 #include "RestyleManager.h"
 
 #include "nsIDOMNode.h"
@@ -4088,42 +4089,30 @@ nsFrame::ComputeSize(nsRenderingContext 
   }
 
   bool isFlexItem = IsFlexItem();
   bool isInlineFlexItem = false;
  
   if (isFlexItem) {
     // Flex items use their "flex-basis" property in place of their main-size
     // property (e.g. "width") for sizing purposes, *unless* they have
-    // "flex-basis:auto", in which case they use their main-size property after
-    // all.
+    // "flex-basis:main-size", in which case they use their main-size property
+    // after all.
     uint32_t flexDirection = GetParent()->StylePosition()->mFlexDirection;
     isInlineFlexItem =
       flexDirection == NS_STYLE_FLEX_DIRECTION_ROW ||
       flexDirection == NS_STYLE_FLEX_DIRECTION_ROW_REVERSE;
 
     // NOTE: The logic here should match the similar chunk for determining
     // inlineStyleCoord and blockStyleCoord in
     // nsLayoutUtils::ComputeSizeWithIntrinsicDimensions().
     const nsStyleCoord* flexBasis = &(stylePos->mFlexBasis);
-    if (flexBasis->GetUnit() != eStyleUnit_Auto) {
-      if (isInlineFlexItem) {
-        inlineStyleCoord = flexBasis;
-      } else {
-        // One caveat for vertical flex items: We don't support enumerated
-        // values (e.g. "max-content") for height properties yet. So, if our
-        // computed flex-basis is an enumerated value, we'll just behave as if
-        // it were "auto", which means "use the main-size property after all"
-        // (which is "height", in this case).
-        // NOTE: Once we support intrinsic sizing keywords for "height",
-        // we should remove this check.
-        if (flexBasis->GetUnit() != eStyleUnit_Enumerated) {
-          blockStyleCoord = flexBasis;
-        }
-      }
+    if (!nsStyleUtil::IsFlexBasisMainSize(*flexBasis, isInlineFlexItem)) {
+      (isInlineFlexItem ?
+       inlineStyleCoord : blockStyleCoord) = flexBasis;
     }
   }
 
   // Compute inline-axis size
 
   if (inlineStyleCoord->GetUnit() != eStyleUnit_Auto) {
     result.ISize(aWM) =
       nsLayoutUtils::ComputeWidthValue(aRenderingContext, this,
--- a/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-absolute-1.xhtml
@@ -23,23 +23,23 @@
         border: 2px dotted black;
       }
       div.flexbox {
         width: 200px;
         height: 100px;
         display: flex;
       }
       div.a {
-        flex: 1 0 auto;
+        flex: 1 0 main-size;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        flex: 2 0 auto;
+        flex: 2 0 main-size;
         width: 20px;
         height: 100px;
         background: yellow;
       }
       div.inflex {
         flex: none;
         width: 20px;
         height: 100px;
--- a/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-absolute-2.xhtml
@@ -24,23 +24,23 @@
         border: 2px dotted black;
       }
       div.flexbox {
         width: 200px;
         height: 100px;
         display: flex;
       }
       div.a {
-        flex: 1 0 auto;
+        flex: 1 0 main-size;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        flex: 2 0 auto;
+        flex: 2 0 main-size;
         width: 20px;
         height: 100px;
         background: yellow;
       }
       div.inflex {
         flex: none;
         width: 20px;
         height: 100px;
--- a/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-absolute-4.xhtml
@@ -27,17 +27,17 @@
         left: 40px;
         width: 200px;
         height: 100px;
         display: flex;
         position: absolute;
         border: 1px solid black;
       }
       div.a {
-        flex: 1 0 auto;
+        flex: 1 0 main-size;
         width:  30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
         flex: 2 0 20px;
         height: 100px;
         background: yellow;
--- a/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-fixed-1.xhtml
@@ -23,23 +23,23 @@
         border: 2px dotted black;
       }
       div.flexbox {
         width: 200px;
         height: 100px;
         display: flex;
       }
       div.a {
-        flex: 1 0 auto;
+        flex: 1 0 main-size;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        flex: 2 0 auto;
+        flex: 2 0 main-size;
         width: 20px;
         height: 100px;
         background: yellow;
       }
       div.inflex {
         flex: none;
         width: 20px;
         height: 100px;
--- a/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-fixed-2.xhtml
@@ -24,23 +24,23 @@
         border: 2px dotted black;
       }
       div.flexbox {
         width: 200px;
         height: 100px;
         display: flex;
       }
       div.a {
-        flex: 1 0 auto;
+        flex: 1 0 main-size;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        flex: 2 0 auto;
+        flex: 2 0 main-size;
         width: 20px;
         height: 100px;
         background: yellow;
       }
       div.inflex {
         flex: none;
         width: 20px;
         height: 100px;
--- a/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
+++ b/layout/reftests/flexbox/flexbox-position-fixed-4.xhtml
@@ -27,17 +27,17 @@
         left: 40px;
         width: 200px;
         height: 100px;
         display: flex;
         position: fixed;
         border: 2px dashed teal;
       }
       div.a {
-        flex: 1 0 auto;
+        flex: 1 0 main-size;
         width:  30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
         flex: 2 0 20px;
         height: 100px;
         background: yellow;
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-1.xhtml
@@ -57,45 +57,45 @@
     <!-- D) Two canvas elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <canvas style="width: 33px; flex: 2 auto"/>
-      <canvas style="width: 13px; flex: 3 auto"/>
+      <canvas style="width: 33px; flex: 2 main-size"/>
+      <canvas style="width: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <canvas style="width: 150px; flex: 1 4 auto"/>
-      <canvas style="width: 100px; flex: 1 3 auto"/>
+      <canvas style="width: 150px; flex: 1 4 main-size"/>
+      <canvas style="width: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <canvas style="width: 33px; flex: 2 auto"/>
-      <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
+      <canvas style="width: 33px; flex: 2 main-size"/>
+      <canvas style="width: 13px; max-width: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <canvas style="width: 33px; flex: 2 auto"/>
-      <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
+      <canvas style="width: 33px; flex: 2 main-size"/>
+      <canvas style="width: 13px; min-width: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-1.xhtml
@@ -59,45 +59,45 @@
     <!-- D) Two canvas elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <canvas style="height: 33px; flex: 2 auto"/>
-      <canvas style="height: 13px; flex: 3 auto"/>
+      <canvas style="height: 33px; flex: 2 main-size"/>
+      <canvas style="height: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <canvas style="height: 150px; flex: 1 4 auto"/>
-      <canvas style="height: 100px; flex: 1 3 auto"/>
+      <canvas style="height: 150px; flex: 1 4 main-size"/>
+      <canvas style="height: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <canvas style="height: 33px; flex: 2 auto"/>
-      <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
+      <canvas style="height: 33px; flex: 2 main-size"/>
+      <canvas style="height: 13px; max-height: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <canvas style="height: 33px; flex: 2 auto"/>
-      <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
+      <canvas style="height: 33px; flex: 2 main-size"/>
+      <canvas style="height: 13px; min-height: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-1.xhtml
@@ -61,45 +61,45 @@
     <!-- D) Two fieldset elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <fieldset style="width: 33px; flex: 2 auto"/>
-      <fieldset style="width: 13px; flex: 3 auto"/>
+      <fieldset style="width: 33px; flex: 2 main-size"/>
+      <fieldset style="width: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <fieldset style="width: 150px; flex: 1 4 auto"/>
-      <fieldset style="width: 100px; flex: 1 3 auto"/>
+      <fieldset style="width: 150px; flex: 1 4 main-size"/>
+      <fieldset style="width: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <fieldset style="width: 33px; flex: 2 auto"/>
-      <fieldset style="width: 13px; max-width: 90px; flex: 3 auto"/>
+      <fieldset style="width: 33px; flex: 2 main-size"/>
+      <fieldset style="width: 13px; max-width: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <fieldset style="width: 33px; flex: 2 auto"/>
-      <fieldset style="width: 13px; min-width: 150px; flex: 3 auto"/>
+      <fieldset style="width: 33px; flex: 2 main-size"/>
+      <fieldset style="width: 13px; min-width: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-1.xhtml
@@ -63,45 +63,45 @@
     <!-- D) Two fieldset elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <fieldset style="height: 33px; flex: 2 auto"/>
-      <fieldset style="height: 13px; flex: 3 auto"/>
+      <fieldset style="height: 33px; flex: 2 main-size"/>
+      <fieldset style="height: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <fieldset style="height: 150px; flex: 1 4 auto"/>
-      <fieldset style="height: 100px; flex: 1 3 auto"/>
+      <fieldset style="height: 150px; flex: 1 4 main-size"/>
+      <fieldset style="height: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <fieldset style="height: 33px; flex: 2 auto"/>
-      <fieldset style="height: 13px; max-height: 90px; flex: 3 auto"/>
+      <fieldset style="height: 33px; flex: 2 main-size"/>
+      <fieldset style="height: 13px; max-height: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <fieldset style="height: 33px; flex: 2 auto"/>
-      <fieldset style="height: 13px; min-height: 150px; flex: 3 auto"/>
+      <fieldset style="height: 33px; flex: 2 main-size"/>
+      <fieldset style="height: 13px; min-height: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-1.xhtml
@@ -58,45 +58,45 @@
     <!-- D) Two iframe elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <iframe style="width: 33px; flex: 2 auto"/>
-      <iframe style="width: 13px; flex: 3 auto"/>
+      <iframe style="width: 33px; flex: 2 main-size"/>
+      <iframe style="width: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <iframe style="width: 150px; flex: 1 4 auto"/>
-      <iframe style="width: 100px; flex: 1 3 auto"/>
+      <iframe style="width: 150px; flex: 1 4 main-size"/>
+      <iframe style="width: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <iframe style="width: 33px; flex: 2 auto"/>
-      <iframe style="width: 13px; max-width: 90px; flex: 3 auto"/>
+      <iframe style="width: 33px; flex: 2 main-size"/>
+      <iframe style="width: 13px; max-width: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <iframe style="width: 33px; flex: 2 auto"/>
-      <iframe style="width: 13px; min-width: 150px; flex: 3 auto"/>
+      <iframe style="width: 33px; flex: 2 main-size"/>
+      <iframe style="width: 13px; min-width: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-1.xhtml
@@ -60,45 +60,45 @@
     <!-- D) Two iframe elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <iframe style="height: 33px; flex: 2 auto"/>
-      <iframe style="height: 13px; flex: 3 auto"/>
+      <iframe style="height: 33px; flex: 2 main-size"/>
+      <iframe style="height: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <iframe style="height: 150px; flex: 1 4 auto"/>
-      <iframe style="height: 100px; flex: 1 3 auto"/>
+      <iframe style="height: 150px; flex: 1 4 main-size"/>
+      <iframe style="height: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <iframe style="height: 33px; flex: 2 auto"/>
-      <iframe style="height: 13px; max-height: 90px; flex: 3 auto"/>
+      <iframe style="height: 33px; flex: 2 main-size"/>
+      <iframe style="height: 13px; max-height: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <iframe style="height: 33px; flex: 2 auto"/>
-      <iframe style="height: 13px; min-height: 150px; flex: 3 auto"/>
+      <iframe style="height: 33px; flex: 2 main-size"/>
+      <iframe style="height: 13px; min-height: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-1.xhtml
@@ -57,47 +57,49 @@
     <!-- D) Two img elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
-      <img src="support/solidblue.png" style="width: 13px; flex: 3 auto"/>
+      <img src="support/solidblue.png" style="width: 33px; flex: 2 main-size"/>
+      <img src="support/solidblue.png" style="width: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 150px; flex: 1 4 auto"/>
-      <img src="support/solidblue.png" style="width: 100px; flex: 1 3 auto"/>
+      <img src="support/solidblue.png"
+           style="width: 150px; flex: 1 4 main-size"/>
+      <img src="support/solidblue.png"
+           style="width: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png" style="width: 33px; flex: 2 main-size"/>
       <img src="support/solidblue.png"
-           style="width: 13px; max-width: 90px; flex: 3 auto"/>
+           style="width: 13px; max-width: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png" style="width: 33px; flex: 2 main-size"/>
       <img src="support/solidblue.png"
-           style="width: 13px; min-width: 150px; flex: 3 auto"/>
+           style="width: 13px; min-width: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-1.xhtml
@@ -59,47 +59,49 @@
     <!-- D) Two img elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
-      <img src="support/solidblue.png" style="height: 13px; flex: 3 auto"/>
+      <img src="support/solidblue.png" style="height: 33px; flex: 2 main-size"/>
+      <img src="support/solidblue.png" style="height: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="height: 150px; flex: 1 4 auto"/>
-      <img src="support/solidblue.png" style="height: 100px; flex: 1 3 auto"/>
+      <img src="support/solidblue.png"
+           style="height: 150px; flex: 1 4 main-size"/>
+      <img src="support/solidblue.png"
+           style="height: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png" style="height: 33px; flex: 2 main-size"/>
       <img src="support/solidblue.png"
-           style="height: 13px; max-height: 90px; flex: 3 auto"/>
+           style="height: 13px; max-height: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png" style="height: 33px; flex: 2 main-size"/>
       <img src="support/solidblue.png"
-           style="height: 13px; min-height: 150px; flex: 3 auto"/>
+           style="height: 13px; min-height: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-1.xhtml
@@ -62,47 +62,47 @@
     <!-- D) Two textarea elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <textarea style="width: 33px; flex: 2 auto"/>
-      <textarea style="width: 13px; flex: 3 auto"/>
+      <textarea style="width: 33px; flex: 2 main-size"/>
+      <textarea style="width: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <textarea style="width: 150px; flex: 1 4 auto"/>
-      <textarea style="width: 100px; flex: 1 3 auto"/>
+      <textarea style="width: 150px; flex: 1 4 main-size"/>
+      <textarea style="width: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <textarea style="width: 33px; flex: 2 auto"/>
+      <textarea style="width: 33px; flex: 2 main-size"/>
       <textarea
-         style="width: 13px; max-width: 90px; flex: 3 auto"/>
+         style="width: 13px; max-width: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <textarea style="width: 33px; flex: 2 auto"/>
+      <textarea style="width: 33px; flex: 2 main-size"/>
       <textarea
-         style="width: 13px; min-width: 150px; flex: 3 auto"/>
+         style="width: 13px; min-width: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-1.xhtml
@@ -65,47 +65,47 @@
     <!-- D) Two textarea elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <textarea style="height: 33px; flex: 2 auto"/>
-      <textarea style="height: 13px; flex: 3 auto"/>
+      <textarea style="height: 33px; flex: 2 main-size"/>
+      <textarea style="height: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <textarea style="height: 150px; flex: 1 4 auto"/>
-      <textarea style="height: 100px; flex: 1 3 auto"/>
+      <textarea style="height: 150px; flex: 1 4 main-size"/>
+      <textarea style="height: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <textarea style="height: 33px; flex: 2 auto"/>
+      <textarea style="height: 33px; flex: 2 main-size"/>
       <textarea
-         style="height: 13px; max-height: 90px; flex: 3 auto"/>
+         style="height: 13px; max-height: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <textarea style="height: 33px; flex: 2 auto"/>
+      <textarea style="height: 33px; flex: 2 main-size"/>
       <textarea
-         style="height: 13px; min-height: 150px; flex: 3 auto"/>
+         style="height: 13px; min-height: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-1.xhtml
@@ -57,45 +57,45 @@
     <!-- D) Two video elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <video style="width: 33px; flex: 2 auto"/>
-      <video style="width: 13px; flex: 3 auto"/>
+      <video style="width: 33px; flex: 2 main-size"/>
+      <video style="width: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <video style="width: 150px; flex: 1 4 auto"/>
-      <video style="width: 100px; flex: 1 3 auto"/>
+      <video style="width: 150px; flex: 1 4 main-size"/>
+      <video style="width: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-width -->
     <!-- Same as (D), except we've added a max-width on the second element.
       -->
     <div class="flexbox">
-      <video style="width: 33px; flex: 2 auto"/>
-      <video style="width: 13px; max-width: 90px; flex: 3 auto"/>
+      <video style="width: 33px; flex: 2 main-size"/>
+      <video style="width: 13px; max-width: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-width -->
     <!-- Same as (C), except we've added a min-width on the second element.
       -->
     <div class="flexbox">
-      <video style="width: 33px; flex: 2 auto"/>
-      <video style="width: 13px; min-width: 150px; flex: 3 auto"/>
+      <video style="width: 33px; flex: 2 main-size"/>
+      <video style="width: 13px; min-width: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-1.xhtml
@@ -59,45 +59,45 @@
     <!-- D) Two video elements, getting stretched by different ratios, from
          different flex bases.
 
          Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
          1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
          1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
       -->
     <div class="flexbox">
-      <video style="height: 33px; flex: 2 auto"/>
-      <video style="height: 13px; flex: 3 auto"/>
+      <video style="height: 33px; flex: 2 main-size"/>
+      <video style="height: 13px; flex: 3 main-size"/>
     </div>
 
     <!-- E) Two flex items, getting shrunk by different amounts.
 
          Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
          First element scaled flex ratio = 4 * 150 = 600
          Second element scaled flex ratio = 3 * 100 = 300
            * So, total flexibility is 600 + 300 = 900
 
          1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
          2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
       -->
     <div class="flexbox">
-      <video style="height: 150px; flex: 1 4 auto"/>
-      <video style="height: 100px; flex: 1 3 auto"/>
+      <video style="height: 150px; flex: 1 4 main-size"/>
+      <video style="height: 100px; flex: 1 3 main-size"/>
     </div>
 
     <!-- F) Making sure we don't grow past max-height -->
     <!-- Same as (D), except we've added a max-height on the second element.
       -->
     <div class="flexbox">
-      <video style="height: 33px; flex: 2 auto"/>
-      <video style="height: 13px; max-height: 90px; flex: 3 auto"/>
+      <video style="height: 33px; flex: 2 main-size"/>
+      <video style="height: 13px; max-height: 90px; flex: 3 main-size"/>
     </div>
 
     <!-- G) Making sure we grow at least as large as min-height -->
     <!-- Same as (C), except we've added a min-height on the second element.
       -->
     <div class="flexbox">
-      <video style="height: 33px; flex: 2 auto"/>
-      <video style="height: 13px; min-height: 150px; flex: 3 auto"/>
+      <video style="height: 33px; flex: 2 main-size"/>
+      <video style="height: 13px; min-height: 150px; flex: 3 main-size"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1-ref.html
@@ -25,17 +25,17 @@
       /* All flex items have 20px base size */
       width: 20px;
     }
     .collapse {
       flex-basis: 0;
       height: 20px;
     }
     .flexible {
-      flex: 1 auto;
+      flex: 1 main-size;
     }
     .heightTall {
       height: 40px;
       background: purple;
     }
     .heightAuto {
       background: teal;
     }
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1.html
@@ -21,17 +21,17 @@
     .flexContainer > * {
       /* All flex items have 20px base size */
       width: 20px;
     }
     .collapse {
       visibility: collapse;
     }
     .flexible {
-      flex: 1 auto;
+      flex: 1 main-size;
     }
     .heightTall {
       height: 40px;
       background: purple;
     }
     .heightAuto {
       background: teal;
     }
--- a/layout/style/nsCSSKeywordList.h
+++ b/layout/style/nsCSSKeywordList.h
@@ -335,16 +335,17 @@ CSS_KEY(lining-nums, lining_nums)
 CSS_KEY(list-item, list_item)
 CSS_KEY(local, local)
 CSS_KEY(logical, logical)
 CSS_KEY(looped, looped)
 CSS_KEY(lowercase, lowercase)
 CSS_KEY(ltr, ltr)
 CSS_KEY(luminance, luminance)
 CSS_KEY(luminosity, luminosity)
+CSS_KEY(main-size, main_size)
 CSS_KEY(manipulation, manipulation)
 CSS_KEY(manual, manual)
 CSS_KEY(margin-box, margin_box)
 CSS_KEY(markers, markers)
 CSS_KEY(matrix, matrix)
 CSS_KEY(matrix3d, matrix3d)
 CSS_KEY(max-content, max_content)
 CSS_KEY(medium, medium)
--- a/layout/style/nsCSSParser.cpp
+++ b/layout/style/nsCSSParser.cpp
@@ -7404,21 +7404,22 @@ CSSParserImpl::ParseFlex()
   nsCSSValue tmpVal;
   if (ParseVariant(tmpVal, VARIANT_INHERIT, nullptr)) {
     AppendValue(eCSSProperty_flex_grow, tmpVal);
     AppendValue(eCSSProperty_flex_shrink, tmpVal);
     AppendValue(eCSSProperty_flex_basis, tmpVal);
     return true;
   }
 
-  // Next, check for 'none' == '0 0 auto'
+  // Next, check for 'none' == '0 0 main-size'
   if (ParseVariant(tmpVal, VARIANT_NONE, nullptr)) {
     AppendValue(eCSSProperty_flex_grow, nsCSSValue(0.0f, eCSSUnit_Number));
     AppendValue(eCSSProperty_flex_shrink, nsCSSValue(0.0f, eCSSUnit_Number));
-    AppendValue(eCSSProperty_flex_basis, nsCSSValue(eCSSUnit_Auto));
+    AppendValue(eCSSProperty_flex_basis,
+                nsCSSValue(NS_STYLE_FLEX_BASIS_MAIN_SIZE, eCSSUnit_Enumerated));
     return true;
   }
 
   // OK, try parsing our value as individual per-subproperty components:
   //   [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
 
   // Each subproperty has a default value that it takes when it's omitted in a
   // "flex" shorthand value. These default values are *only* for the shorthand
@@ -7448,17 +7449,17 @@ CSSParserImpl::ParseFlex()
   //
   // NOTE: if we encounter unitless 0 here, we *must* interpret it as a
   // 'flex-grow' value (a number), *not* as a 'flex-basis' value (a length).
   // Conveniently, that's the behavior this combined variant-mask gives us --
   // it'll treat unitless 0 as a number. The flexbox spec requires this:
   // "a unitless zero that is not already preceded by two flex factors must be
   //  interpreted as a flex factor.
   if (!ParseNonNegativeVariant(tmpVal, flexBasisVariantMask | VARIANT_NUMBER,
-                               nsCSSProps::kWidthKTable)) {
+                               nsCSSProps::kFlexBasisKTable)) {
     // First component was not a valid flex-basis or flex-grow value. Fail.
     return false;
   }
 
   // Record what we just parsed as either flex-basis or flex-grow:
   bool wasFirstComponentFlexBasis = (tmpVal.GetUnit() != eCSSUnit_Number);
   (wasFirstComponentFlexBasis ? flexBasis : flexGrow) = tmpVal;
 
@@ -7466,16 +7467,25 @@ CSSParserImpl::ParseFlex()
   bool doneParsing = false;
   if (wasFirstComponentFlexBasis) {
     if (ParseNonNegativeVariant(tmpVal, VARIANT_NUMBER, nullptr)) {
       flexGrow = tmpVal;
     } else {
       // Failed to parse anything after our flex-basis -- that's fine. We can
       // skip the remaining parsing.
       doneParsing = true;
+      if (flexBasis.GetUnit() == eCSSUnit_Auto) {
+        // We've just parsed "flex:auto", without a number after "auto".  In
+        // this case, "auto" is *not* actually the flex-basis -- it's a special
+        // keyword for the "flex" shorthand, which expands to "1 1 main-size".
+        // Fortunately, the variables flexGrow & flexShrink are already set to
+        // 1, so we don't need to adjust them; we just need to set flexBasis.
+        flexBasis.SetIntValue(NS_STYLE_FLEX_BASIS_MAIN_SIZE,
+                              eCSSUnit_Enumerated);
+      }
     }
   }
 
   if (!doneParsing) {
     // (c) OK -- the last thing we parsed was flex-grow, so look for a
     //     flex-shrink in the next position.
     if (ParseNonNegativeVariant(tmpVal, VARIANT_NUMBER, nullptr)) {
       flexShrink = tmpVal;
@@ -7496,17 +7506,17 @@ CSSParserImpl::ParseFlex()
     // accepted this unitless 0 as the 'flex-shrink' value, up above (since
     // it's a valid flex-shrink value), and we'd have moved on to the next
     // token (if any). And of course, if we instead had a unitless 0 preceded
     // by *no* flex factors (if it were the first token), we would've already
     // parsed it in our very first call to ParseNonNegativeVariant().  So, any
     // unitless 0 encountered here *must* have been preceded by 2 flex factors.
     if (!wasFirstComponentFlexBasis &&
         ParseNonNegativeVariant(tmpVal, flexBasisVariantMask,
-                                nsCSSProps::kWidthKTable)) {
+                                nsCSSProps::kFlexBasisKTable)) {
       flexBasis = tmpVal;
     }
   }
 
   AppendValue(eCSSProperty_flex_grow,   flexGrow);
   AppendValue(eCSSProperty_flex_shrink, flexShrink);
   AppendValue(eCSSProperty_flex_basis,  flexBasis);
 
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -1652,17 +1652,17 @@ CSS_PROP_POSITION(
     CSS_PROPERTY_PARSE_VALUE |
         CSS_PROPERTY_VALUE_NONNEGATIVE |
         CSS_PROPERTY_STORES_CALC,
     "",
     // NOTE: The parsing implementation for the 'flex' shorthand property has
     // its own code to parse each subproperty. It does not depend on the
     // longhand parsing defined here.
     VARIANT_AHKLP | VARIANT_CALC,
-    kWidthKTable,
+    kFlexBasisKTable,
     offsetof(nsStylePosition, mFlexBasis),
     eStyleAnimType_Coord)
 CSS_PROP_POSITION(
     flex-direction,
     flex_direction,
     FlexDirection,
     CSS_PROPERTY_PARSE_VALUE,
     "",
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -1120,16 +1120,25 @@ const KTableValue nsCSSProps::kAlignSelf
   eCSSKeyword_flex_end,   NS_STYLE_ALIGN_ITEMS_FLEX_END,
   eCSSKeyword_center,     NS_STYLE_ALIGN_ITEMS_CENTER,
   eCSSKeyword_baseline,   NS_STYLE_ALIGN_ITEMS_BASELINE,
   eCSSKeyword_stretch,    NS_STYLE_ALIGN_ITEMS_STRETCH,
   eCSSKeyword_auto,       NS_STYLE_ALIGN_SELF_AUTO,
   eCSSKeyword_UNKNOWN,-1
 };
 
+const KTableValue nsCSSProps::kFlexBasisKTable[] = {
+  eCSSKeyword__moz_max_content, NS_STYLE_WIDTH_MAX_CONTENT,
+  eCSSKeyword__moz_min_content, NS_STYLE_WIDTH_MIN_CONTENT,
+  eCSSKeyword__moz_fit_content, NS_STYLE_WIDTH_FIT_CONTENT,
+  eCSSKeyword__moz_available,   NS_STYLE_WIDTH_AVAILABLE,
+  eCSSKeyword_main_size,        NS_STYLE_FLEX_BASIS_MAIN_SIZE,
+  eCSSKeyword_UNKNOWN,-1
+};
+
 const KTableValue nsCSSProps::kFlexDirectionKTable[] = {
   eCSSKeyword_row,            NS_STYLE_FLEX_DIRECTION_ROW,
   eCSSKeyword_row_reverse,    NS_STYLE_FLEX_DIRECTION_ROW_REVERSE,
   eCSSKeyword_column,         NS_STYLE_FLEX_DIRECTION_COLUMN,
   eCSSKeyword_column_reverse, NS_STYLE_FLEX_DIRECTION_COLUMN_REVERSE,
   eCSSKeyword_UNKNOWN,-1
 };
 
--- a/layout/style/nsCSSProps.h
+++ b/layout/style/nsCSSProps.h
@@ -561,16 +561,17 @@ public:
   // Not const because we modify its entries when the pref
   // "layout.css.grid.enabled" changes:
   static KTableValue kDisplayKTable[];
   static const KTableValue kElevationKTable[];
   static const KTableValue kEmptyCellsKTable[];
   static const KTableValue kAlignContentKTable[];
   static const KTableValue kAlignItemsKTable[];
   static const KTableValue kAlignSelfKTable[];
+  static const KTableValue kFlexBasisKTable[];
   static const KTableValue kFlexDirectionKTable[];
   static const KTableValue kFlexWrapKTable[];
   static const KTableValue kJustifyContentKTable[];
   static const KTableValue kFloatKTable[];
   static const KTableValue kFloatEdgeKTable[];
   static const KTableValue kFontKTable[];
   static const KTableValue kFontKerningKTable[];
   static const KTableValue kFontSizeKTable[];
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -3666,17 +3666,17 @@ nsComputedDOMStyle::DoGetFlexBasis()
   //     if (my flex container is horizontal) {
   //       percentageBaseGetter = &nsComputedDOMStyle::GetCBContentWidth;
   //     } else {
   //       percentageBaseGetter = &nsComputedDOMStyle::GetCBContentHeight;
   //     }
   //   }
 
   SetValueToCoord(val, StylePosition()->mFlexBasis, true,
-                  nullptr, nsCSSProps::kWidthKTable);
+                  nullptr, nsCSSProps::kFlexBasisKTable);
   return val;
 }
 
 CSSValue*
 nsComputedDOMStyle::DoGetFlexDirection()
 {
   nsROCSSPrimitiveValue* val = new nsROCSSPrimitiveValue;
   val->SetIdent(
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -7547,20 +7547,28 @@ nsRuleNode::ComputePositionData(void* aS
                 SETDSC_ENUMERATED | SETDSC_UNSET_INITIAL,
                 parentPos->mAlignSelf, // (unused -- we handled inherit above)
                 NS_STYLE_ALIGN_SELF_AUTO, // initial == auto
                 0, 0, 0, 0);
   }
 
   // flex-basis: auto, length, percent, enum, calc, inherit, initial
   // (Note: The flags here should match those used for 'width' property above.)
-  SetCoord(*aRuleData->ValueForFlexBasis(), pos->mFlexBasis, parentPos->mFlexBasis,
-           SETCOORD_LPAEH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
-             SETCOORD_UNSET_INITIAL,
-           aContext, mPresContext, canStoreInRuleTree);
+  const nsCSSValue* flexBasisValue = aRuleData->ValueForFlexBasis();
+  if (!SetCoord(*flexBasisValue,
+                pos->mFlexBasis, parentPos->mFlexBasis,
+                SETCOORD_LPAEH | SETCOORD_STORE_CALC,
+                aContext, mPresContext, canStoreInRuleTree)) {
+    if (eCSSUnit_Initial == flexBasisValue->GetUnit() ||
+        eCSSUnit_Unset == flexBasisValue->GetUnit()) {
+      // flex-basis initial value is "main-size"
+      pos->mFlexBasis.SetIntValue(NS_STYLE_FLEX_BASIS_MAIN_SIZE,
+                                  eStyleUnit_Enumerated);
+    }
+  }
 
   // flex-direction: enum, inherit, initial
   SetDiscrete(*aRuleData->ValueForFlexDirection(),
               pos->mFlexDirection, canStoreInRuleTree,
               SETDSC_ENUMERATED | SETDSC_UNSET_INITIAL,
               parentPos->mFlexDirection,
               NS_STYLE_FLEX_DIRECTION_ROW, 0, 0, 0, 0);
 
--- a/layout/style/nsStyleConsts.h
+++ b/layout/style/nsStyleConsts.h
@@ -587,16 +587,22 @@ static inline mozilla::css::Side operato
 #define NS_MATHML_DISPLAYSTYLE_INLINE           0
 #define NS_MATHML_DISPLAYSTYLE_BLOCK            1
 
 // See nsStylePosition::mWidth, mMinWidth, mMaxWidth
 #define NS_STYLE_WIDTH_MAX_CONTENT              0
 #define NS_STYLE_WIDTH_MIN_CONTENT              1
 #define NS_STYLE_WIDTH_FIT_CONTENT              2
 #define NS_STYLE_WIDTH_AVAILABLE                3
+// NOTE: The "main-size" keyword here is really for the "flex-basis" property,
+// not for width / min-width / max-width.  I'm listing it here with the "width"
+// keywords' enumerated values, because we need to make sure it doesn't collide
+// with any "width" enumerated values (because "flex-basis" accepts all valid
+// "width" keywords, in addition to accepting "main-size").
+#define NS_STYLE_FLEX_BASIS_MAIN_SIZE           4
 
 // See nsStyleDisplay.mPosition
 #define NS_STYLE_POSITION_STATIC                0
 #define NS_STYLE_POSITION_RELATIVE              1
 #define NS_STYLE_POSITION_ABSOLUTE              2
 #define NS_STYLE_POSITION_FIXED                 3
 #define NS_STYLE_POSITION_STICKY                4
 
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -1230,17 +1230,17 @@ nsStylePosition::nsStylePosition(void)
   mOffset.SetRight(autoCoord);
   mOffset.SetBottom(autoCoord);
   mWidth.SetAutoValue();
   mMinWidth.SetAutoValue();
   mMaxWidth.SetNoneValue();
   mHeight.SetAutoValue();
   mMinHeight.SetAutoValue();
   mMaxHeight.SetNoneValue();
-  mFlexBasis.SetAutoValue();
+  mFlexBasis.SetIntValue(NS_STYLE_FLEX_BASIS_MAIN_SIZE, eStyleUnit_Enumerated);
 
   // The initial value of grid-auto-columns and grid-auto-rows is 'auto',
   // which computes to 'minmax(min-content, max-content)'.
   mGridAutoColumnsMin.SetIntValue(NS_STYLE_GRID_TRACK_BREADTH_MIN_CONTENT,
                                   eStyleUnit_Enumerated);
   mGridAutoColumnsMax.SetIntValue(NS_STYLE_GRID_TRACK_BREADTH_MAX_CONTENT,
                                   eStyleUnit_Enumerated);
   mGridAutoRowsMin.SetIntValue(NS_STYLE_GRID_TRACK_BREADTH_MIN_CONTENT,
--- a/layout/style/nsStyleUtil.cpp
+++ b/layout/style/nsStyleUtil.cpp
@@ -537,16 +537,39 @@ nsStyleUtil::IsSignificantChild(nsIConte
   }
 
   return aTextIsSignificant && isText && aChild->TextLength() != 0 &&
          (aWhitespaceIsSignificant ||
           !aChild->TextIsOnlyWhitespace());
 }
 
 /* static */ bool
+nsStyleUtil::IsFlexBasisMainSize(const nsStyleCoord& aFlexBasis,
+                                 bool aIsMainAxisHorizontal)
+{
+  // "main-size" is stored as an enumerated value; so if we're not enumerated,
+  // we're not "main-size".
+  if (aFlexBasis.GetUnit() != eStyleUnit_Enumerated) {
+    return false;
+  }
+
+  if (!aIsMainAxisHorizontal) {
+    // Special case for vertical flex items: We don't support any enumerated
+    // values (e.g. "-moz-max-content") for "height"-flavored properties
+    // yet. So, if our computed flex-basis is *any* enumerated value, we'll
+    // just behave as if it were "main-size" (the initial value of flex-basis).
+    // NOTE: Once we support intrinsic sizing keywords for "height",
+    // we can remove this special-case.
+    return true;
+  }
+
+  return aFlexBasis.GetIntValue() == NS_STYLE_FLEX_BASIS_MAIN_SIZE;
+}
+
+/* static */ bool
 nsStyleUtil::CSPAllowsInlineStyle(nsIContent* aContent,
                                   nsIPrincipal* aPrincipal,
                                   nsIURI* aSourceURI,
                                   uint32_t aLineNumber,
                                   const nsSubstring& aStyleText,
                                   nsresult* aRv)
 {
   nsresult rv;
--- a/layout/style/nsStyleUtil.h
+++ b/layout/style/nsStyleUtil.h
@@ -105,16 +105,33 @@ public:
   static float ColorComponentToFloat(uint8_t aAlpha);
 
   /*
    * Does this child count as significant for selector matching?
    */
   static bool IsSignificantChild(nsIContent* aChild,
                                    bool aTextIsSignificant,
                                    bool aWhitespaceIsSignificant);
+
+  /*
+   * Should we treat the given "flex-basis" value as "main-size"?
+   *
+   * In a horizontal flex container, this is merely a check for whether
+   * aFlexBasis has the enumerated value NS_STYLE_FLEX_BASIS_MAIN_SIZE.
+   *
+   * In a vertical flex container, we *also* treat other enumerated
+   * values (like "NS_STYLE_WIDTH_MAX_CONTENT") as if they were "main-size"
+   * (and return true from this function), because we don't currently support
+   * those other values for vertical/height-flavored properties. So, if we
+   * encounter them, we fall back to behaving as if we had flex-basis's initial
+   * value.
+   */
+  static bool IsFlexBasisMainSize(const nsStyleCoord& aFlexBasis,
+                                  bool aIsMainAxisHorizontal);
+
   /*
    *  Does this principal have a CSP that blocks the application of
    *  inline styles? Returns false if application of the style should
    *  be blocked.
    *
    *  @param aContent
    *      The <style> element that the caller wants to know whether to honor.
    *      Included to check the nonce attribute if one is provided. Allowed to
--- a/layout/style/test/flexbox_layout_testcases.js
+++ b/layout/style/test/flexbox_layout_testcases.js
@@ -474,17 +474,18 @@ var gFlexboxTestcases =
          "flex": "2999998",
          // NOTE: Expected value is off slightly, from float error when
          // resolving flexible lengths & when generating computed value string:
          "_main-size": [ null,  "3000000px" ]
        },
      ]
  },
 
- // Trying "flex: auto" (== "1 1 auto") w/ a mix of flex-grow/flex-basis values
+ // Trying "flex: auto" (== "1 1 main-size") on one flex item, w/ a mix of
+ // flex-grow/flex-basis values on the other flex items.
  {
    items:
      [
        {
          "flex": "auto",
          "_main-size": [ null, "45px" ]
        },
        {
@@ -705,17 +706,17 @@ var gFlexboxTestcases =
    items:
      [
        {
          "flex": "auto",
          "_min-main-size": "20px",
          "_main-size": [ null,  "20px" ]
        },
        {
-         "flex": "9 auto",
+         "flex": "9 main-size",
          "_min-main-size": "150px",
          "_main-size": [ "50px",  "180px" ]
        },
      ]
  },
  {
    items:
      [
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -119,16 +119,17 @@ skip-if = toolkit == 'android' #bug 5366
 [test_css_supports_variables.html]
 [test_default_bidi_css.html]
 [test_descriptor_storage.html]
 [test_descriptor_syntax_errors.html]
 [test_dont_use_document_colors.html]
 [test_extra_inherit_initial.html]
 [test_flexbox_align_self_auto.html]
 [test_flexbox_child_display_values.xhtml]
+[test_flexbox_flex_basis_values.html]
 [test_flexbox_flex_grow_and_shrink.html]
 [test_flexbox_flex_shorthand.html]
 [test_flexbox_layout.html]
 support-files = flexbox_layout_testcases.js
 [test_flexbox_min_size_auto.html]
 [test_flexbox_order.html]
 [test_flexbox_order_table.html]
 [test_font_face_parser.html]
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -3889,23 +3889,28 @@ var gCSSProperties = {
     domProp: "flex",
     inherited: false,
     type: CSS_TYPE_TRUE_SHORTHAND,
     subproperties: [
       "flex-grow",
       "flex-shrink",
       "flex-basis"
     ],
-    initial_values: [ "0 1 auto", "auto 0 1", "0 auto", "auto 0" ],
+    initial_values: [ "0 1 main-size", "main-size 0 1", "0 main-size", "main-size 0" ],
     other_values: [
       "none",
+      "auto",
       "1",
       "0",
       "0 1",
       "0.5",
+      "5px",
+      "15%",
+      "calc(5px)",
+      "main-size",
       "1.2 3.4",
       "0 0 0",
       "0 0 0px",
       "0px 0 0",
       "5px 0 0",
       "2 auto",
       "auto 4",
       "auto 5.6 7.8",
@@ -3924,23 +3929,25 @@ var gCSSProperties = {
       "-1",
       "1 -1"
     ]
   },
   "flex-basis": {
     domProp: "flexBasis",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ " auto" ],
+    initial_values: [ "main-size" ],
         // NOTE: This is cribbed directly from the "width" chunk, since this
         // property takes the exact same values as width (albeit with
         // different semantics on 'auto').
         // XXXdholbert (Maybe these should get separated out into
         // a reusable array defined at the top of this file?)
-    other_values: [ "15px", "3em", "15%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
+    other_values: [
+      "auto",
+      "15px", "3em", "15%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
       // valid calc() values
       "calc(-2px)",
       "calc(2px)",
       "calc(50%)",
       "calc(50% + 2px)",
       "calc( 50% + 2px)",
       "calc(50% + 2px )",
       "calc( 50% + 2px )",
new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_flexbox_flex_basis_values.html
@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1032922
+-->
+<head>
+  <meta charset="utf-8">
+  <title>
+    Test that 'flex-basis' accepts all valid values for 'width' and 'height'
+    (helper for Bug 1032922)
+  </title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="property_database.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<p id="display"></p>
+<div id="content" style="display: none">
+
+<div id="testnode"></div>
+
+</div>
+<pre id="test">
+<script type="text/javascript;version=1.7">
+"use strict";
+
+/**
+ * Test that 'flex-basis' accepts all valid values for 'width' and 'height'
+ * (helper for Bug 1032922)
+ *
+ * PEDANTIC NOTE: Technically, the flexbox spec's "value" definition for
+ * "flex-basis" only says it accepts "main-size | <'width'>" -- there's no
+ * mention of <'height'>.
+ *
+ * However, the prose later on is clear that all valid "height" values are
+ * supposed to be accepted as well:
+ *  # The flex-basis property [...] accepts the same values
+ *  # as the 'width' and 'height' property.
+ * http://dev.w3.org/csswg/css-flexbox/#propdef-flex-basis
+ *
+ * Presumably the spec's value-definition omits <'height'> just for brevity's
+ * sake, since <'width'> already covers the full range of valid "height"
+ * values (for now at least; and probably forever).
+ *
+ * In any case: in this test, we ensure that flex-basis really does accept all
+ * of property_database's valid sample-values for both "width" *and* "height",
+ * to be on the safe side.
+ */
+
+function check_accepted(decl, origPropName, val)
+{
+  decl.setProperty("flex-basis", val, "");
+
+  // Note: decl.getPropertyValue() will return something non-empty here if the
+  // value was parsed successfully. Otherwise (i.e. if the value is rejected),
+  // it'll return the empty string.
+  isnot(decl.getPropertyValue("flex-basis"), "",
+       "value '" + val + "' which is valid for '" + origPropName +
+       "' should also be valid for 'flex-basis' ");
+
+  decl.removeProperty("flex-basis");
+}
+
+function main()
+{
+  let decl = document.getElementById("testnode").style;
+
+  let props = [ "width", "height" ];
+  props.forEach(function(prop) {
+    let info = gCSSProperties[prop];
+    let all_values = info.initial_values.concat(info.other_values);
+    all_values.forEach(function(value) {
+      check_accepted(decl, prop, value);
+    });
+  });
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
--- a/layout/style/test/test_flexbox_flex_shorthand.html
+++ b/layout/style/test/test_flexbox_flex_shorthand.html
@@ -63,32 +63,41 @@ let gFlexShorthandTestcases = [
   // Initial values of subproperties:
   // --------------------------------
   // (checked by another test that uses property_database.js, too, but
   // might as well check here, too, for thoroughness).
   {
     "flex":        "",
     "flex-grow":   "0",
     "flex-shrink": "1",
-    "flex-basis":  "auto",
+    "flex-basis":  "main-size",
   },
   {
     "flex":        "initial",
     "flex-grow":   "0",
     "flex-shrink": "1",
-    "flex-basis":  "auto",
+    "flex-basis":  "main-size",
   },
 
-  // Special keyword "none" --> "0 0 auto"
+  // Special keyword "none" --> "0 0 main-size"
   // -------------------------------------
   {
     "flex":        "none",
     "flex-grow":   "0",
     "flex-shrink": "0",
-    "flex-basis":  "auto",
+    "flex-basis":  "main-size",
+  },
+
+  // Special keyword "auto" --> "1 1 main-size"
+  // -------------------------------------
+  {
+    "flex":        "auto",
+    "flex-grow":   "1",
+    "flex-shrink": "1",
+    "flex-basis":  "main-size",
   },
 
   // One Value (numeric) --> sets flex-grow
   // --------------------------------------
   {
     "flex":        "0",
     "flex-grow":   "0",
   },
@@ -123,31 +132,31 @@ let gFlexShorthandTestcases = [
     "flex":        "25px",
     "flex-basis":  "25px",
   },
   {
     "flex":        "5%",
     "flex-basis":  "5%",
   },
   {
-    "flex":        "auto",
-    "flex-basis":  "auto",
-  },
-  {
     "flex":        "-moz-fit-content",
     "flex-basis":  "-moz-fit-content",
   },
   {
     "flex":        "calc(5px + 6px)",
     "flex-basis":  "11px",
   },
   {
     "flex":        "calc(15% + 30px)",
     "flex-basis":  "calc(30px + 15%)",
   },
+  {
+    "flex":        "main-size",
+    "flex-basis":  "main-size",
+  },
 
   // Two Values (numeric) --> sets flex-grow, flex-shrink
   // ----------------------------------------------------
   {
     "flex":        "0 0",
     "flex-grow":   "0",
     "flex-shrink": "0",
   },
@@ -200,16 +209,21 @@ let gFlexShorthandTestcases = [
     "flex-basis":  "99%",
   },
   {
     "flex":        "auto 5",
     "flex-grow":   "5",
     "flex-basis":  "auto",
   },
   {
+    "flex":        "main-size 5",
+    "flex-grow":   "5",
+    "flex-basis":  "main-size",
+  },
+  {
     "flex":        "5 -moz-fit-content",
     "flex-grow":   "5",
     "flex-basis":  "-moz-fit-content",
   },
   {
     "flex":        "calc(5% + 10px) 3",
     "flex-grow":   "3",
     "flex-basis":  "calc(10px + 5%)",
--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -425,17 +425,17 @@ body {
   list-style: none;
   padding: 10px 5px;
   white-space: nowrap;
 }
 
 #font-type-buttons > li,
 .segmented-button > li {
   width: 50px; /* combined with flex, this acts as a minimum width */
-  flex: 1 0 auto;
+  flex: 1 0 main-size;
   text-align: center;
   line-height: 20px;
 }
 
 #font-type-buttons > li {
   padding: 10px 0;
 }
 
--- a/mobile/android/themes/core/config.css
+++ b/mobile/android/themes/core/config.css
@@ -52,17 +52,17 @@ body {
     border: none;
     background-image: none;
     background-color: transparent;
     display: inline-block;
     width: 12em;
     min-width: 0;
     color: #000000;
     opacity: 1;
-    flex: 1 1 auto;
+    flex: 1 1 main-size;
 }
 
 #filter-input:-moz-placeholder {
     color: rgba(255,255,255,0.5);
 }
 
 .toolbar input {
     display: inline-block;
@@ -188,17 +188,17 @@ li {
     text-align: left;
     text-overflow: ellipsis;
     overflow: hidden;
     background-image: none;
 }
 
 .pref-value {
     color: rgba(0,0,0,0.5);
-    flex: 1 1 auto;
+    flex: 1 1 main-size;
     border: none;
     -moz-appearance: none;
     background-image: none;
     background-color: transparent;
 }
 
 .pref-name[locked] {
     padding-right: 20px;
@@ -222,31 +222,31 @@ li {
 .pref-item-line {
     border-top: 1px solid rgba(0,0,0,0.05);
     color: rgba(0,0,0,0.5);
     display: flex;
     flex-direction: row;
 }
 
 #new-pref-value-boolean {
-    flex: 1 1 auto;
+    flex: 1 1 main-size;
 }
 
 #new-pref-container .pref-button.toggle {
     display: inline-block;
     opacity: 1;
-    flex: 0 1 auto;
+    flex: 0 1 main-size;
     float: right;
 }
 
 #new-pref-container .pref-button.cancel,
 #new-pref-container .pref-button.create {
     display: inline-block;
     opacity: 1;
-    flex: 1 1 auto;
+    flex: 1 1 main-size;
 }
 
 .pref-item-line {
     pointer-events: none;
 }
 
 #new-pref-container .pref-item-line,
 .pref-item.selected .pref-item-line,