Bug 1093316 part 1: Backout changeset aece7f9f944c (i.e. backout bug 1032922 part 2). a=lmandel
authorDaniel Holbert <dholbert@cs.stanford.edu>
Mon, 03 Nov 2014 14:28:10 -0800
changeset 225951 af442befe914
parent 225950 0430d2b93ed3
child 225952 6f460d9ed80d
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)
reviewerslmandel
bugs1093316, 1032922
milestone34.0
Bug 1093316 part 1: Backout changeset aece7f9f944c (i.e. backout bug 1032922 part 2). a=lmandel
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/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
@@ -1100,24 +1100,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;
 }
 
 .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 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
@@ -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 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 {
@@ -246,17 +246,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;
 }
 
@@ -464,17 +464,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
@@ -66,17 +66,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"
@@ -4158,29 +4157,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"
 
 using namespace mozilla;
 using namespace mozilla::layout;
 
 // Convenience typedefs for helper classes that we forward-declare in .h file
@@ -567,18 +566,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:
@@ -1159,20 +1157,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());
   }
 
@@ -1216,17 +1214,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
@@ -24,17 +24,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"
@@ -4089,30 +4088,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-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 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-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 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-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 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-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 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-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 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-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 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-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-1.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-1.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-1.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-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 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-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 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-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 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-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 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-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 main-size;
+      flex: 1 auto;
     }
     .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 main-size;
+      flex: 1 auto;
     }
     .heightTall {
       height: 40px;
       background: purple;
     }
     .heightAuto {
       background: teal;
     }
--- a/layout/style/nsCSSKeywordList.h
+++ b/layout/style/nsCSSKeywordList.h
@@ -335,17 +335,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
@@ -7404,22 +7404,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
@@ -7467,25 +7466,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
@@ -1125,17 +1125,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
@@ -7547,28 +7547,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
@@ -587,22 +587,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
@@ -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.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
@@ -537,39 +537,16 @@ 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,33 +105,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);
-
   /*
    *  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,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
@@ -3889,28 +3889,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",
@@ -3929,25 +3924,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,