Bug 921522: Use already-established flex container content-box main size to determine packing space, instead of checking reflow state. r=mats

--HG--
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-1.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-1a.xhtml
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-1.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-1b.xhtml
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-1.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-1a.xhtml
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-1.xhtml => layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-1b.xhtml

layout/generic/nsFlexContainerFrame.cpp

@@ -999,7 +999,8 @@ public:
   MainAxisPositionTracker(nsFlexContainerFrame* aFlexContainerFrame,
                           const FlexboxAxisTracker& aAxisTracker,
                           const nsHTMLReflowState& aReflowState,
-                          const nsTArray<FlexItem>& aItems);
+                          const nsTArray<FlexItem>& aItems,
+                          nscoord aContentBoxMainSize);
 
   ~MainAxisPositionTracker() {
     MOZ_ASSERT(mNumPackingSpacesRemaining == 0,
@@ -1488,31 +1489,24 @@ MainAxisPositionTracker::
   MainAxisPositionTracker(nsFlexContainerFrame* aFlexContainerFrame,
                           const FlexboxAxisTracker& aAxisTracker,
                           const nsHTMLReflowState& aReflowState,
-                          const nsTArray<FlexItem>& aItems)
+                          const nsTArray<FlexItem>& aItems,
+                          nscoord aContentBoxMainSize)
   : PositionTracker(aAxisTracker.GetMainAxis()),
+    mPackingSpaceRemaining(aContentBoxMainSize), // we chip away at this below
     mNumAutoMarginsInMainAxis(0),
     mNumPackingSpacesRemaining(0)
 {
   MOZ_ASSERT(aReflowState.frame == aFlexContainerFrame,
              "Expecting the reflow state for the flex container frame");
 
-  // Set up our state for managing packing space & auto margins.
+  // mPackingSpaceRemaining is initialized to the container's main size.  Now
-  //   * If our main-size is unconstrained, then we just shrinkwrap our
+  // we'll subtract out the main sizes of our flex items, so that it ends up
-  // contents, and we don't have any packing space.
+  // with the *actual* amount of packing space.
-  //   * Otherwise, we subtract our items' margin-box main-sizes from our
+  for (uint32_t i = 0; i < aItems.Length(); i++) {
-  // computed main-size to get our available packing space.
+    nscoord itemMarginBoxMainSize =
-  mPackingSpaceRemaining = GET_MAIN_COMPONENT(aAxisTracker,
+      aItems[i].GetMainSize() +
-                                              aReflowState.ComputedWidth(),
+      aItems[i].GetMarginBorderPaddingSizeInAxis(aAxisTracker.GetMainAxis());
-                                              aReflowState.ComputedHeight());
+    mPackingSpaceRemaining -= itemMarginBoxMainSize;
-  if (mPackingSpaceRemaining == NS_UNCONSTRAINEDSIZE) {
-    mPackingSpaceRemaining = 0;
-  } else {
-    for (uint32_t i = 0; i < aItems.Length(); i++) {
-      nscoord itemMarginBoxMainSize =
-        aItems[i].GetMainSize() +
-        aItems[i].GetMarginBorderPaddingSizeInAxis(aAxisTracker.GetMainAxis());
-      mPackingSpaceRemaining -= itemMarginBoxMainSize;
-    }
   }
 
   if (mPackingSpaceRemaining > 0) {
@@ -2291,7 +2285,8 @@ nsFlexContainerFrame::Reflow(nsPresContext*           aPresContext,
   // Main-Axis Alignment - Flexbox spec section 9.5
   // ==============================================
   MainAxisPositionTracker mainAxisPosnTracker(this, axisTracker,
-                                              aReflowState, items);
+                                              aReflowState, items,
+                                              contentBoxMainSize);
   for (uint32_t i = 0; i < items.Length(); ++i) {
     PositionItemInMainAxis(mainAxisPosnTracker, items[i]);
   }

layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-1a.xhtml

@@ -3,8 +3,8 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Testcase with a variety of 'display: flex' examples
+<!-- Testcase with a series of horizontal flex containers, testing each
-     testing each possible value of the 'justify-content' property. -->
+     possible value of the 'justify-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Test: Testing 'justify-content' in a horizontal flex container</title>

layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-1b.xhtml

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of horizontal flex containers, testing each
+     possible value of the 'justify-content' property. The flex containers'
+     widths are determined by their "min-width" property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a horizontal flex container with "min-width"</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-horiz-1-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        min-width: 200px;
+        display: flex;
+        margin-bottom: 2px;
+
+        /* Use "float" to trigger intrinsic sizing, which in this case will
+            make us clamp to "min-width": */
+        float: left;
+        clear: both;
+      }
+      div.a {
+        height: 20px;
+        flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>

layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-1a.xhtml

@@ -3,8 +3,8 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<!-- Testcase with a series of flex containers, testing each possible value of
+<!-- Testcase with a series of vertical flex containers, testing each
-     the 'justify-content' property. -->
+     possible value of the 'justify-content' property. -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Test: Testing 'justify-content' in a vertical flex container</title>

layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-1b.xhtml

@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of vertical flex containers, testing each
+     possible value of the 'justify-content' property. The flex containers'
+     heights are determined by their "min-height" property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a vertical flex container with "min-height"</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-vert-1-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        min-height: 200px;
+        display: flex;
+        flex-direction: column;
+        margin-right: 2px;
+        float: left;
+      }
+      div.a {
+        width: 20px;
+        flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>

layout/reftests/w3c-css/submitted/flexbox/reftest.list

@@ -50,12 +50,14 @@ fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-1.xhtml  flexbox-align-s
 == flexbox-items-as-stacking-contexts-3.html flexbox-items-as-stacking-contexts-3-ref.html
 
 # Tests for main-axis alignment (jusify-content property)
-== flexbox-justify-content-horiz-1.xhtml flexbox-justify-content-horiz-1-ref.xhtml
+== flexbox-justify-content-horiz-1a.xhtml flexbox-justify-content-horiz-1-ref.xhtml
+== flexbox-justify-content-horiz-1b.xhtml flexbox-justify-content-horiz-1-ref.xhtml
 == flexbox-justify-content-horiz-2.xhtml flexbox-justify-content-horiz-2-ref.xhtml
 == flexbox-justify-content-horiz-3.xhtml flexbox-justify-content-horiz-3-ref.xhtml
 == flexbox-justify-content-horiz-4.xhtml flexbox-justify-content-horiz-4-ref.xhtml
 == flexbox-justify-content-horiz-5.xhtml flexbox-justify-content-horiz-5-ref.xhtml
-== flexbox-justify-content-vert-1.xhtml flexbox-justify-content-vert-1-ref.xhtml
+== flexbox-justify-content-vert-1a.xhtml flexbox-justify-content-vert-1-ref.xhtml
+== flexbox-justify-content-vert-1b.xhtml flexbox-justify-content-vert-1-ref.xhtml
 == flexbox-justify-content-vert-2.xhtml flexbox-justify-content-vert-2-ref.xhtml
 == flexbox-justify-content-vert-3.xhtml flexbox-justify-content-vert-3-ref.xhtml
 == flexbox-justify-content-vert-4.xhtml flexbox-justify-content-vert-4-ref.xhtml