Bug 1018449: Don't opportunistically stretch flex items to container's cross-size if the container is multi-line. r=mats
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 06 Jun 2014 15:55:58 -0700
changeset 206578 6c2881dc61419924c9bf3f1f7000600492e47e30
parent 206577 ec4f84a6cc5a83b4d98485d4a01a3cad10d56152
child 206579 f5232023af37ef92f3facd5833b318a3119448e0
push id3741
push userasasaki@mozilla.com
push dateMon, 21 Jul 2014 20:25:18 +0000
treeherdermozilla-beta@4d6f46f5af68 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs1018449
milestone32.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 1018449: Don't opportunistically stretch flex items to container's cross-size if the container is multi-line. r=mats
layout/generic/nsFlexContainerFrame.cpp
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-2-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-2.html
layout/reftests/w3c-css/submitted/flexbox/reftest.list
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -1091,18 +1091,27 @@ nsFlexContainerFrame::
     childRSForMeasuringHeight(aPresContext, aParentReflowState,
                               aFlexItem.Frame(),
                               nsSize(aParentReflowState.ComputedWidth(),
                                      NS_UNCONSTRAINEDSIZE),
                               -1, -1, nsHTMLReflowState::CALLER_WILL_INIT);
   childRSForMeasuringHeight.mFlags.mIsFlexContainerMeasuringHeight = true;
   childRSForMeasuringHeight.Init(aPresContext);
 
-  aFlexItem.ResolveStretchedCrossSize(aParentReflowState.ComputedWidth(),
-                                      aAxisTracker);
+  // For single-line vertical flexbox, we need to give our flex items an early
+  // opportunity to stretch, since any stretching of their cross-size (width)
+  // will likely impact the max-content main-size (height) that we're about to
+  // measure for them. (We can't do this for multi-line, since we don't know
+  // yet how many lines there will be & how much each line will stretch.)
+  if (NS_STYLE_FLEX_WRAP_NOWRAP ==
+      aParentReflowState.mStylePosition->mFlexWrap) {
+    aFlexItem.ResolveStretchedCrossSize(aParentReflowState.ComputedWidth(),
+                                        aAxisTracker);
+  }
+
   if (aFlexItem.IsStretched()) {
     childRSForMeasuringHeight.SetComputedWidth(aFlexItem.GetCrossSize());
     childRSForMeasuringHeight.mFlags.mHResize = true;
   }
 
   // If this item is flexible (vertically), then we assume that the
   // computed-height we're reflowing with now could be different
   // from the one we'll use for this flex item's "actual" reflow later on.
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-2-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- In this reference case, we use floated fixed-sized divs to mimic the
+     testcases's flex items.
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.container {
+      width: 100px;
+      height: 20px;
+      border: 2px solid black;
+    }
+    div.item {
+      width:  48px;
+      height: 15px;
+      float: left;
+      border: 1px dotted blue;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the sizing of stretched flex items in a vertical multi-line flex container</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#layout-algorithm">
+  <link rel="match" href="flexbox-align-self-stretch-vert-2-ref.html">
+  <meta name="assert" content="In a multi-line flex container, flex items should not be stretched (in the cross axis) until after wrapping has been performed.">
+  <meta charset="utf-8">
+  <style>
+    div.container {
+      display: flex;
+      flex-flow: column wrap;
+      width: 100px;
+      height: 20px;
+      border: 2px solid black;
+    }
+    div.item {
+      /* Tall enough to force wrapping (since parent height is 20px): */
+      min-height: 15px;
+      border: 1px dotted blue;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -15,16 +15,17 @@
 == flexbox-align-self-baseline-horiz-1a.xhtml flexbox-align-self-baseline-horiz-1-ref.xhtml
 == flexbox-align-self-baseline-horiz-1b.xhtml flexbox-align-self-baseline-horiz-1-ref.xhtml
 == flexbox-align-self-baseline-horiz-2.xhtml flexbox-align-self-baseline-horiz-2-ref.xhtml
 == flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3-ref.xhtml
 == flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml
 == flexbox-align-self-baseline-horiz-5.xhtml flexbox-align-self-baseline-horiz-5-ref.xhtml
 
 == flexbox-align-self-stretch-vert-1.html flexbox-align-self-stretch-vert-1-ref.html
+== flexbox-align-self-stretch-vert-2.html flexbox-align-self-stretch-vert-2-ref.html
 
 == flexbox-align-self-horiz-1-block.xhtml  flexbox-align-self-horiz-1-ref.xhtml
 == flexbox-align-self-horiz-1-table.xhtml  flexbox-align-self-horiz-1-ref.xhtml
 == flexbox-align-self-horiz-2.xhtml  flexbox-align-self-horiz-2-ref.xhtml
 == flexbox-align-self-horiz-3.xhtml  flexbox-align-self-horiz-3-ref.xhtml
 == flexbox-align-self-horiz-4.xhtml  flexbox-align-self-horiz-4-ref.xhtml
 == flexbox-align-self-horiz-5.xhtml  flexbox-align-self-horiz-5-ref.xhtml
 == flexbox-align-self-vert-1.xhtml  flexbox-align-self-vert-1-ref.xhtml