From 5ea7b37dd64f5a4470f62d08571144b3806c01e9 Mon Sep 17 00:00:00 2001
From: Daniel Holbert <dholbert@cs.stanford.edu>
Date: Wed, 12 Oct 2016 09:04:03 -0700
Subject: [PATCH] Bug 1090031: Apply CSS 'align-content' in flex containers if
 they *could* wrap (rather than if they *have* wrapped). r=mats

The spec says that single-line flex containers should stretch their one flex
line to the flex container's cross size, and should ignore 'align-content'.

Initially, the spec defined 'single-line' to include any flex container that
happens to have only 1 line (even if it's got 'flex-wrap:wrap' or
'wrap-reverse'). But later, the term 'single-line' was intentionally redefined
to *only* include flex containers that have 'flex-wrap: nowrap'.  So, instead
of checking the line-count, we should instead check 'flex-wrap', when deciding
whether to stretch our one line & ignore 'align-content'.


MozReview-Commit-ID: D2ZMIBS16ui

--HG--
extra : rebase_source : 835a64e0f9cdaa375f8e57f55ffe5b011525cbeb
---
 layout/generic/nsFlexContainerFrame.cpp                   | 8 ++++++--
 .../flexbox/flexbox-align-content-horiz-001-ref.xhtml     | 6 +++---
 .../flexbox/flexbox-align-content-vert-001-ref.xhtml      | 8 ++++----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/layout/generic/nsFlexContainerFrame.cpp b/layout/generic/nsFlexContainerFrame.cpp
index 14212c90e80a..4c9a2f81a869 100644
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -2781,11 +2781,15 @@ CrossAxisPositionTracker::
   // XXX strip of the <overflow-position> bit until we implement that
   mAlignContent &= ~NS_STYLE_ALIGN_FLAG_BITS;
 
-  if (!aFirstLine->getNext()) {
+  const bool isSingleLine =
+    NS_STYLE_FLEX_WRAP_NOWRAP == aReflowInput.mStylePosition->mFlexWrap;
+  if (isSingleLine) {
+    MOZ_ASSERT(!aFirstLine->getNext(),
+               "If we're styled as single-line, we should only have 1 line");
     // "If the flex container is single-line and has a definite cross size, the
     // cross size of the flex line is the flex container's inner cross size."
     //
-    // SOURCE: http://dev.w3.org/csswg/css-flexbox/#algo-line-break
+    // SOURCE: https://drafts.csswg.org/css-flexbox/#algo-cross-line
     // NOTE: This means (by definition) that there's no packing space, which
     // means we don't need to be concerned with "align-conent" at all and we
     // can return early. This is handy, because this is the usual case (for
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
index af82e40b2471..d2cb6a0b6305 100644
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
@@ -71,7 +71,7 @@
 
     <!-- flex-end -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top: 190px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-top: 160px"/>
@@ -85,7 +85,7 @@
 
     <!-- center -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-top: 80px"/>
@@ -113,7 +113,7 @@
 
     <!-- space-around -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-top: 95px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-top: 40px"/>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
index e82d0e2738a5..8113c1c10525 100644
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
@@ -74,7 +74,7 @@
 
     <!-- flex-end -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-left: 190px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: 160px"/>
@@ -88,7 +88,7 @@
 
     <!-- center -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-left: 95px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: 80px"/>
@@ -116,7 +116,7 @@
 
     <!-- space-around -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-left: 95px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: 40px"/>
@@ -144,7 +144,7 @@
 
     <!-- right -->
     <div class="flexbox">
-      <div class="a"/>
+      <div class="a" style="margin-left: 190px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: 160px"/>