Bug 1093316 part 1: Backout changeset aece7f9f944c (i.e. backout bug 1032922 part 2), to reflect CSSWG removing "flex-basis: main-size" from the flexbox spec.
authorDaniel Holbert <dholbert@cs.stanford.edu>
Tue, 25 Nov 2014 11:28:15 -0800
changeset 241846 6625f6d27396c74f5980cbcadd9577ca901c6d94
parent 241845 4d18de1eb6b36f2f6fa57bbff7cfa6d178c112d7
child 241847 4f830e8fb84b7903a41acfbdbf3746f661ade5b5
push id4311
push userraliiev@mozilla.com
push dateMon, 12 Jan 2015 19:37:41 +0000
treeherdermozilla-beta@150c9fed433b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1093316, 1032922
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1093316 part 1: Backout changeset aece7f9f944c (i.e. backout bug 1032922 part 2), to reflect CSSWG removing "flex-basis: main-size" from the flexbox spec.
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-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001.html
layout/style/nsCSSKeywordList.h
layout/style/nsCSSParser.cpp
layout/style/nsCSSProps.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/property_database.js
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
@@ -1103,24 +1103,24 @@ toolbarpaletteitem[dragover] {
 
 #customization-palette-container {
   display: flex;
   flex-direction: column;
 }
 
 #customization-palette:not([hidden]) {
   display: block;
-  flex: 1 1 main-size;
+  flex: 1 1 auto;
   overflow: auto;
   min-height: 3em;
 }
 
 #customization-footer-spacer,
 #customization-spacer {
-  flex: 1 1 main-size;
+  flex: 1 1 auto;
 }
 
 #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 main-size;
+  flex: 1 1 auto;
 
   /* Keep the editor away from the markup view floating scrollbars */
   -moz-margin-end: 12px;
 }
 
 .html-editor iframe {
   height: 100%;
   width: 100%;
--- 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 main-size;
+    flex: 1 1 auto;
 }
 
 #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 main-size;
+    flex: 1 1 auto;
     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 main-size;
+    flex: 1 1 auto;
 }
 
 /* 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 main-size;
+    flex: 0 1 auto;
     float: right;
 }
 
 #new-pref-container .pref-button.cancel,
 #new-pref-container .pref-button.create {
     display: inline-block;
     opacity: 1;
-    flex: 1 1 main-size;
+    flex: 1 1 auto;
 }
 
 .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
@@ -250,17 +250,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 main-size;
+  flex: 1 0 auto;
   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 main-size;
+  flex: 1 1 auto;
   vertical-align: middle;
 }
 
 .message-flex-body > .message-location {
   margin-top: 0;
 }
 
 .jsterm-input-container {
@@ -234,17 +234,17 @@ a {
   display: flex;
 }
 
 .message[category=network] .method {
   flex: none;
 }
 
 .message[category=network]:not(.navigation-marker) .url {
-  flex: 1 1 main-size;
+  flex: 1 1 auto;
   /* 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;
 }
 
@@ -452,17 +452,17 @@ a {
 
 .stacktrace li {
   display: flex;
   margin: 0;
 }
 
 .stacktrace .function {
   display: block;
-  flex: 1 1 main-size;
+  flex: 1 1 auto;
 }
 
 .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
@@ -70,17 +70,16 @@
 #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"
@@ -4467,29 +4466,42 @@ 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:main-size", in which case they use their main-size property
-    // after all.
+    // "flex-basis:auto", 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 (!nsStyleUtil::IsFlexBasisMainSize(*flexBasis, isInlineFlexItem)) {
-      (isInlineFlexItem ? inlineStyleCoord : blockStyleCoord) = flexBasis;
+    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;
+        }
+      }
     }
   }
 
   // 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,17 +12,16 @@
 #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"
 #include "mozilla/FloatingPoint.h"
 
 using namespace mozilla;
 using namespace mozilla::layout;
 
@@ -568,18 +567,17 @@ 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. if we have a vertical flex item with "flex-basis:auto",
-  // "flex-basis:main-size;height:auto", or "min-height:auto")
+  // (e.g. for "flex-basis:auto;height:auto" & "min-height:auto")
   nscoord mFlexBaseSize;
   nscoord mMainMinSize;
   nscoord mMainMaxSize;
 
   const nscoord mCrossMinSize;
   const nscoord mCrossMaxSize;
 
   // Values that we compute after constructor:
@@ -1160,20 +1158,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 'main-size':
-  const nsStyleCoord& flexBasis = aItemReflowState.mStylePosition->mFlexBasis;
-  const bool isHorizontal = IsAxisHorizontal(aAxisTracker.GetMainAxis());
-  if (nsStyleUtil::IsFlexBasisMainSize(flexBasis, isHorizontal) &&
+  // * 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() &&
       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());
   }
 
@@ -1217,17 +1215,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' [We have this, if we're here.]
+  //  - a [used] flex-basis of 'main-size' [auto?] [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
@@ -27,17 +27,16 @@
 #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"
@@ -4154,30 +4153,42 @@ 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:main-size", in which case they use their main-size property
-    // after all.
+    // "flex-basis:auto", 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 (!nsStyleUtil::IsFlexBasisMainSize(*flexBasis, isInlineFlexItem)) {
-      (isInlineFlexItem ?
-       inlineStyleCoord : blockStyleCoord) = flexBasis;
+    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;
+        }
+      }
     }
   }
 
   // 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 main-size;
+        flex: 1 0 auto;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        flex: 2 0 main-size;
+        flex: 2 0 auto;
         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 main-size;
+        flex: 1 0 auto;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        flex: 2 0 main-size;
+        flex: 2 0 auto;
         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 main-size;
+        flex: 1 0 auto;
         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 main-size;
+        flex: 1 0 auto;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        flex: 2 0 main-size;
+        flex: 2 0 auto;
         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 main-size;
+        flex: 1 0 auto;
         width: 30px;
         height: 100px;
         background: lightgreen;
       }
       div.b {
-        flex: 2 0 main-size;
+        flex: 2 0 auto;
         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 main-size;
+        flex: 1 0 auto;
         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-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001.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 main-size"/>
-      <canvas style="width: 13px; flex: 3 main-size"/>
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <canvas style="width: 100px; flex: 1 3 main-size"/>
+      <canvas style="width: 150px; flex: 1 4 auto"/>
+      <canvas style="width: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
-      <canvas style="width: 13px; max-width: 90px; flex: 3 main-size"/>
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </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 main-size"/>
-      <canvas style="width: 13px; min-width: 150px; flex: 3 main-size"/>
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001.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 main-size"/>
-      <canvas style="height: 13px; flex: 3 main-size"/>
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <canvas style="height: 100px; flex: 1 3 main-size"/>
+      <canvas style="height: 150px; flex: 1 4 auto"/>
+      <canvas style="height: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
-      <canvas style="height: 13px; max-height: 90px; flex: 3 main-size"/>
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </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 main-size"/>
-      <canvas style="height: 13px; min-height: 150px; flex: 3 main-size"/>
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001.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 main-size"/>
-      <fieldset style="width: 13px; flex: 3 main-size"/>
+      <fieldset style="width: 33px; flex: 2 auto"/>
+      <fieldset style="width: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <fieldset style="width: 100px; flex: 1 3 main-size"/>
+      <fieldset style="width: 150px; flex: 1 4 auto"/>
+      <fieldset style="width: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
-      <fieldset style="width: 13px; max-width: 90px; flex: 3 main-size"/>
+      <fieldset style="width: 33px; flex: 2 auto"/>
+      <fieldset style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </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 main-size"/>
-      <fieldset style="width: 13px; min-width: 150px; flex: 3 main-size"/>
+      <fieldset style="width: 33px; flex: 2 auto"/>
+      <fieldset style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001.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 main-size"/>
-      <fieldset style="height: 13px; flex: 3 main-size"/>
+      <fieldset style="height: 33px; flex: 2 auto"/>
+      <fieldset style="height: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <fieldset style="height: 100px; flex: 1 3 main-size"/>
+      <fieldset style="height: 150px; flex: 1 4 auto"/>
+      <fieldset style="height: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
-      <fieldset style="height: 13px; max-height: 90px; flex: 3 main-size"/>
+      <fieldset style="height: 33px; flex: 2 auto"/>
+      <fieldset style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </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 main-size"/>
-      <fieldset style="height: 13px; min-height: 150px; flex: 3 main-size"/>
+      <fieldset style="height: 33px; flex: 2 auto"/>
+      <fieldset style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001.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 main-size"/>
-      <iframe style="width: 13px; flex: 3 main-size"/>
+      <iframe style="width: 33px; flex: 2 auto"/>
+      <iframe style="width: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <iframe style="width: 100px; flex: 1 3 main-size"/>
+      <iframe style="width: 150px; flex: 1 4 auto"/>
+      <iframe style="width: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
-      <iframe style="width: 13px; max-width: 90px; flex: 3 main-size"/>
+      <iframe style="width: 33px; flex: 2 auto"/>
+      <iframe style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </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 main-size"/>
-      <iframe style="width: 13px; min-width: 150px; flex: 3 main-size"/>
+      <iframe style="width: 33px; flex: 2 auto"/>
+      <iframe style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001.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 main-size"/>
-      <iframe style="height: 13px; flex: 3 main-size"/>
+      <iframe style="height: 33px; flex: 2 auto"/>
+      <iframe style="height: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <iframe style="height: 100px; flex: 1 3 main-size"/>
+      <iframe style="height: 150px; flex: 1 4 auto"/>
+      <iframe style="height: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
-      <iframe style="height: 13px; max-height: 90px; flex: 3 main-size"/>
+      <iframe style="height: 33px; flex: 2 auto"/>
+      <iframe style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </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 main-size"/>
-      <iframe style="height: 13px; min-height: 150px; flex: 3 main-size"/>
+      <iframe style="height: 33px; flex: 2 auto"/>
+      <iframe style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001.xhtml
@@ -57,49 +57,47 @@
     <!-- 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 main-size"/>
-      <img src="support/solidblue.png" style="width: 13px; flex: 3 main-size"/>
+      <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png" style="width: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <img src="support/solidblue.png"
-           style="width: 100px; flex: 1 3 main-size"/>
+      <img src="support/solidblue.png" style="width: 150px; flex: 1 4 auto"/>
+      <img src="support/solidblue.png" style="width: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
+      <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
       <img src="support/solidblue.png"
-           style="width: 13px; max-width: 90px; flex: 3 main-size"/>
+           style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </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 main-size"/>
+      <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
       <img src="support/solidblue.png"
-           style="width: 13px; min-width: 150px; flex: 3 main-size"/>
+           style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001.xhtml
@@ -59,49 +59,47 @@
     <!-- 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 main-size"/>
-      <img src="support/solidblue.png" style="height: 13px; flex: 3 main-size"/>
+      <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png" style="height: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <img src="support/solidblue.png"
-           style="height: 100px; flex: 1 3 main-size"/>
+      <img src="support/solidblue.png" style="height: 150px; flex: 1 4 auto"/>
+      <img src="support/solidblue.png" style="height: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
+      <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
       <img src="support/solidblue.png"
-           style="height: 13px; max-height: 90px; flex: 3 main-size"/>
+           style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </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 main-size"/>
+      <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
       <img src="support/solidblue.png"
-           style="height: 13px; min-height: 150px; flex: 3 main-size"/>
+           style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001.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 main-size"/>
-      <textarea style="width: 13px; flex: 3 main-size"/>
+      <textarea style="width: 33px; flex: 2 auto"/>
+      <textarea style="width: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <textarea style="width: 100px; flex: 1 3 main-size"/>
+      <textarea style="width: 150px; flex: 1 4 auto"/>
+      <textarea style="width: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
+      <textarea style="width: 33px; flex: 2 auto"/>
       <textarea
-         style="width: 13px; max-width: 90px; flex: 3 main-size"/>
+         style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </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 main-size"/>
+      <textarea style="width: 33px; flex: 2 auto"/>
       <textarea
-         style="width: 13px; min-width: 150px; flex: 3 main-size"/>
+         style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001.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 main-size"/>
-      <textarea style="height: 13px; flex: 3 main-size"/>
+      <textarea style="height: 33px; flex: 2 auto"/>
+      <textarea style="height: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <textarea style="height: 100px; flex: 1 3 main-size"/>
+      <textarea style="height: 150px; flex: 1 4 auto"/>
+      <textarea style="height: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
+      <textarea style="height: 33px; flex: 2 auto"/>
       <textarea
-         style="height: 13px; max-height: 90px; flex: 3 main-size"/>
+         style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </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 main-size"/>
+      <textarea style="height: 33px; flex: 2 auto"/>
       <textarea
-         style="height: 13px; min-height: 150px; flex: 3 main-size"/>
+         style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001.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 main-size"/>
-      <video style="width: 13px; flex: 3 main-size"/>
+      <video style="width: 33px; flex: 2 auto"/>
+      <video style="width: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <video style="width: 100px; flex: 1 3 main-size"/>
+      <video style="width: 150px; flex: 1 4 auto"/>
+      <video style="width: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
-      <video style="width: 13px; max-width: 90px; flex: 3 main-size"/>
+      <video style="width: 33px; flex: 2 auto"/>
+      <video style="width: 13px; max-width: 90px; flex: 3 auto"/>
     </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 main-size"/>
-      <video style="width: 13px; min-width: 150px; flex: 3 main-size"/>
+      <video style="width: 33px; flex: 2 auto"/>
+      <video style="width: 13px; min-width: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001.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 main-size"/>
-      <video style="height: 13px; flex: 3 main-size"/>
+      <video style="height: 33px; flex: 2 auto"/>
+      <video style="height: 13px; flex: 3 auto"/>
     </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 main-size"/>
-      <video style="height: 100px; flex: 1 3 main-size"/>
+      <video style="height: 150px; flex: 1 4 auto"/>
+      <video style="height: 100px; flex: 1 3 auto"/>
     </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 main-size"/>
-      <video style="height: 13px; max-height: 90px; flex: 3 main-size"/>
+      <video style="height: 33px; flex: 2 auto"/>
+      <video style="height: 13px; max-height: 90px; flex: 3 auto"/>
     </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 main-size"/>
-      <video style="height: 13px; min-height: 150px; flex: 3 main-size"/>
+      <video style="height: 33px; flex: 2 auto"/>
+      <video style="height: 13px; min-height: 150px; flex: 3 auto"/>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001-ref.html
@@ -25,17 +25,17 @@
       /* All flex items have 20px base size */
       width: 20px;
     }
     .collapse {
       flex-basis: 0;
       height: 20px;
     }
     .flexible {
-      flex: 1 main-size;
+      flex: 1 auto;
     }
     .heightTall {
       height: 40px;
       background: purple;
     }
     .heightAuto {
       background: teal;
     }
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001.html
@@ -21,17 +21,17 @@
     .flexContainer > * {
       /* All flex items have 20px base size */
       width: 20px;
     }
     .collapse {
       visibility: collapse;
     }
     .flexible {
-      flex: 1 main-size;
+      flex: 1 auto;
     }
     .heightTall {
       height: 40px;
       background: purple;
     }
     .heightAuto {
       background: teal;
     }
--- a/layout/style/nsCSSKeywordList.h
+++ b/layout/style/nsCSSKeywordList.h
@@ -339,17 +339,16 @@ 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
@@ -7496,22 +7496,21 @@ 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 main-size'
+  // Next, check for 'none' == '0 0 auto'
   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(NS_STYLE_FLEX_BASIS_MAIN_SIZE, eCSSUnit_Enumerated));
+    AppendValue(eCSSProperty_flex_basis, nsCSSValue(eCSSUnit_Auto));
     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
@@ -7559,25 +7558,16 @@ 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;
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -1163,17 +1163,16 @@ const KTableValue nsCSSProps::kAlignSelf
   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,
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -7673,28 +7673,20 @@ 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.)
-  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);
-    }
-  }
+  SetCoord(*aRuleData->ValueForFlexBasis(), pos->mFlexBasis, parentPos->mFlexBasis,
+           SETCOORD_LPAEH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
+             SETCOORD_UNSET_INITIAL,
+           aContext, mPresContext, canStoreInRuleTree);
 
   // 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
@@ -616,22 +616,16 @@ 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
@@ -1392,17 +1392,17 @@ nsStylePosition::nsStylePosition(void)
   mOffset.SetRight(autoCoord);
   mOffset.SetBottom(autoCoord);
   mWidth.SetAutoValue();
   mMinWidth.SetAutoValue();
   mMaxWidth.SetNoneValue();
   mHeight.SetAutoValue();
   mMinHeight.SetAutoValue();
   mMaxHeight.SetNoneValue();
-  mFlexBasis.SetIntValue(NS_STYLE_FLEX_BASIS_MAIN_SIZE, eStyleUnit_Enumerated);
+  mFlexBasis.SetAutoValue();
 
   // 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
@@ -592,39 +592,16 @@ nsStyleUtil::IsSignificantChild(nsIConte
     return true;
   }
 
   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;
-}
-
 // For a replaced element whose concrete object size is no larger than the
 // element's content-box, this method checks whether the given
 // "object-position" coordinate might cause overflow in its dimension.
 typedef nsStyleBackground::Position::PositionCoord PositionCoord;
 static bool
 ObjectPositionCoordMightCauseOverflow(const PositionCoord& aCoord)
 {
   // Any nonzero length in "object-position" can push us to overflow
--- a/layout/style/nsStyleUtil.h
+++ b/layout/style/nsStyleUtil.h
@@ -109,33 +109,16 @@ 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);
-
   /**
    * Returns true if our object-fit & object-position properties might cause
    * a replaced element's contents to overflow its content-box (requiring
    * clipping), or false if we can be sure that this won't happen.
    *
    * This lets us optimize by skipping clipping when we can tell it's
    * unnecessary (particularly with the default values of these properties).
    *
--- a/layout/style/test/flexbox_layout_testcases.js
+++ b/layout/style/test/flexbox_layout_testcases.js
@@ -474,18 +474,17 @@ 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 main-size") on one flex item, w/ a mix of
- // flex-grow/flex-basis values on the other flex items.
+ // Trying "flex: auto" (== "1 1 auto") w/ a mix of flex-grow/flex-basis values
  {
    items:
      [
        {
          "flex": "auto",
          "_main-size": [ null, "45px" ]
        },
        {
@@ -706,17 +705,17 @@ var gFlexboxTestcases =
    items:
      [
        {
          "flex": "auto",
          "_min-main-size": "20px",
          "_main-size": [ null,  "20px" ]
        },
        {
-         "flex": "9 main-size",
+         "flex": "9 auto",
          "_min-main-size": "150px",
          "_main-size": [ "50px",  "180px" ]
        },
      ]
  },
  {
    items:
      [
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -3952,28 +3952,23 @@ var gCSSProperties = {
     domProp: "flex",
     inherited: false,
     type: CSS_TYPE_TRUE_SHORTHAND,
     subproperties: [
       "flex-grow",
       "flex-shrink",
       "flex-basis"
     ],
-    initial_values: [ "0 1 main-size", "main-size 0 1", "0 main-size", "main-size 0" ],
+    initial_values: [ "0 1 auto", "auto 0 1", "0 auto", "auto 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",
@@ -3992,25 +3987,23 @@ var gCSSProperties = {
       "-1",
       "1 -1"
     ]
   },
   "flex-basis": {
     domProp: "flexBasis",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ "main-size" ],
+    initial_values: [ " auto" ],
         // 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: [
-      "auto",
-      "15px", "3em", "15%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
+    other_values: [ "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 )",
--- a/layout/style/test/test_flexbox_flex_shorthand.html
+++ b/layout/style/test/test_flexbox_flex_shorthand.html
@@ -63,41 +63,32 @@ 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":  "main-size",
+    "flex-basis":  "auto",
   },
   {
     "flex":        "initial",
     "flex-grow":   "0",
     "flex-shrink": "1",
-    "flex-basis":  "main-size",
+    "flex-basis":  "auto",
   },
 
-  // Special keyword "none" --> "0 0 main-size"
+  // Special keyword "none" --> "0 0 auto"
   // -------------------------------------
   {
     "flex":        "none",
     "flex-grow":   "0",
     "flex-shrink": "0",
-    "flex-basis":  "main-size",
-  },
-
-  // Special keyword "auto" --> "1 1 main-size"
-  // -------------------------------------
-  {
-    "flex":        "auto",
-    "flex-grow":   "1",
-    "flex-shrink": "1",
-    "flex-basis":  "main-size",
+    "flex-basis":  "auto",
   },
 
   // One Value (numeric) --> sets flex-grow
   // --------------------------------------
   {
     "flex":        "0",
     "flex-grow":   "0",
   },
@@ -132,31 +123,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",
   },
@@ -209,21 +200,16 @@ 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 main-size;
+  flex: 1 0 auto;
   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 main-size;
+    flex: 1 1 auto;
 }
 
 #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 main-size;
+    flex: 1 1 auto;
     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 main-size;
+    flex: 1 1 auto;
 }
 
 #new-pref-container .pref-button.toggle {
     display: inline-block;
     opacity: 1;
-    flex: 0 1 main-size;
+    flex: 0 1 auto;
     float: right;
 }
 
 #new-pref-container .pref-button.cancel,
 #new-pref-container .pref-button.create {
     display: inline-block;
     opacity: 1;
-    flex: 1 1 main-size;
+    flex: 1 1 auto;
 }
 
 .pref-item-line {
     pointer-events: none;
 }
 
 #new-pref-container .pref-item-line,
 .pref-item.selected .pref-item-line,