Bug 785468: Compute flex container's baseline as-described in the spec. r=dbaron

layout/generic/nsFlexContainerFrame.cpp

@@ -978,6 +978,9 @@ public:
   // Resets our position to the cross-start edge of this line.
   inline void ResetPosition() { mPosition = 0; }
 
+  // Returns the ascent of the line.
+  nscoord GetCrossStartToFurthestBaseline() { return mCrossStartToFurthestBaseline; }
+
 private:
   // Returns the distance from the cross-start side of the given flex item's
   // margin-box to its baseline. (Used in baseline alignment.)
@@ -985,10 +988,10 @@ private:
 
   nscoord mLineCrossSize;
 
-  // Largest distance from an item's cross-start margin-box edge to its
-  // baseline.  Computed in ComputeLineCrossSize, and used for alignment of any
-  // "align-self: baseline" items in this line (and possibly used for computing
-  // the baseline of the flex container, as well).
+  // Largest distance from a baseline-aligned item's cross-start margin-box
+  // edge to its baseline.  Computed in ComputeLineCrossSize, and used for
+  // alignment of any "align-self: baseline" items in this line (and possibly
+  // used for computing the baseline of the flex container, as well).
   nscoord mCrossStartToFurthestBaseline;
 };
 
@@ -1574,8 +1577,8 @@ SingleLineCrossAxisPositionTracker::
   ComputeLineCrossSize(const nsTArray<FlexItem>& aItems)
 {
   // NOTE: mCrossStartToFurthestBaseline is a member var rather than a local
-  // var, because we'll need it when we're baseline-aligning our children, and
-  // we'd prefer to not have to recompute it.
+  // var, because we'll need it for baseline-alignment and for computing the
+  // container's baseline later on.
   MOZ_ASSERT(mCrossStartToFurthestBaseline == nscoord_MIN,
              "Computing largest baseline offset more than once");
 
@@ -1934,6 +1937,21 @@ nsFlexContainerFrame::PositionItemInMainAxis(
   aMainAxisPosnTracker.TraversePackingSpace();
 }
 
+// Helper method to take care of children who ASK_FOR_BASELINE, when
+// we need their baseline.
+static void
+ResolveReflowedChildAscent(nsIFrame* aFrame,
+                           nsHTMLReflowMetrics& aChildDesiredSize)
+{
+  if (aChildDesiredSize.ascent == nsHTMLReflowMetrics::ASK_FOR_BASELINE) {
+    // Use GetFirstLineBaseline(), or just GetBaseline() if that fails.
+    if (!nsLayoutUtils::GetFirstLineBaseline(aFrame,
+                                             &aChildDesiredSize.ascent)) {
+      aChildDesiredSize.ascent = aFrame->GetBaseline();
+    }
+  }
+}
+
 nsresult
 nsFlexContainerFrame::SizeItemInCrossAxis(
   nsPresContext* aPresContext,
@@ -2016,13 +2034,7 @@ nsFlexContainerFrame::SizeItemInCrossAxis(
 
   // If we need to do baseline-alignment, store the child's ascent.
   if (aItem.GetAlignSelf() == NS_STYLE_ALIGN_ITEMS_BASELINE) {
-    if (childDesiredSize.ascent == nsHTMLReflowMetrics::ASK_FOR_BASELINE) {
-      // Use GetFirstLineBaseline(), or just GetBaseline() if that fails.
-      if (!nsLayoutUtils::GetFirstLineBaseline(aItem.Frame(),
-                                               &childDesiredSize.ascent)) {
-        childDesiredSize.ascent = aItem.Frame()->GetBaseline();
-      }
-    }
+    ResolveReflowedChildAscent(aItem.Frame(), childDesiredSize);
     aItem.SetAscent(childDesiredSize.ascent);
   }
 
@@ -2205,15 +2217,16 @@ nsFlexContainerFrame::Reflow(nsPresContext*           aPresContext,
   frameCrossSize = contentBoxCrossSize +
     axisTracker.GetMarginSizeInCrossAxis(aReflowState.mComputedBorderPadding);
 
-  // XXXdholbert FOLLOW ACTUAL RULES FOR FLEX CONTAINER BASELINE
-  // If we have any baseline-aligned items on first line, use their baseline.
-  // ...ELSE if we have at least one flex item and our first flex item's
-  //         baseline is parallel to main axis, then use that baseline.
-  // ...ELSE use "after" edge of content box.
-  // Default baseline: the "after" edge of content box. (Note: if we have any
-  // flex items, they'll override this.)
-  nscoord flexContainerAscent = contentBoxCrossSize +
-    aReflowState.mComputedBorderPadding.top;
+  // Might be nscoord_MIN if we don't have any baseline-aligned flex items;
+  // that's OK, we'll correct it below.
+  // This is w.r.t. the top of our content box; we'll add borderpadding when
+  // we actually stick it in |aDesiredSize|.
+  nscoord flexContainerAscent =
+    lineCrossAxisPosnTracker.GetCrossStartToFurthestBaseline();
+  if (flexContainerAscent != nscoord_MIN) {
+    // Add top borderpadding, so our ascent is w.r.t. border-box
+    flexContainerAscent += aReflowState.mComputedBorderPadding.top;
+  }
 
   // Position the items in cross axis, within their line
   for (uint32_t i = 0; i < items.Length(); ++i) {
@@ -2321,6 +2334,18 @@ nsFlexContainerFrame::Reflow(nsPresContext*           aPresContext,
                            &childReflowState, childDesiredSize,
                            physicalPosn.x, physicalPosn.y, 0);
     NS_ENSURE_SUCCESS(rv, rv);
+
+    // If this is our first child and we haven't established a baseline for
+    // the container yet, then use this child's baseline as the container's
+    // baseline.
+    if (i == 0 && flexContainerAscent == nscoord_MIN) {
+      ResolveReflowedChildAscent(curItem.Frame(), childDesiredSize);
+
+      // (We subtract mComputedOffsets.top because we don't want relative
+      // positioning on the child to affect the baseline that we read from it).
+      flexContainerAscent = physicalPosn.y + childDesiredSize.ascent -
+        childReflowState.mComputedOffsets.top;
+    }
   }
 
   // XXXdholbert This could be more elegant
@@ -2331,6 +2356,19 @@ nsFlexContainerFrame::Reflow(nsPresContext*           aPresContext,
     IsAxisHorizontal(axisTracker.GetCrossAxis()) ?
     frameMainSize : frameCrossSize;
 
+  if (flexContainerAscent == nscoord_MIN) {
+    // Still don't have our baseline set -- this happens if we have no
+    // children (or if our children are huge enough that they have nscoord_MIN
+    // as their baseline... in which case, we'll use the wrong baseline, but no
+    // big deal)
+    NS_WARN_IF_FALSE(items.IsEmpty(),
+                     "Have flex items but didn't get an ascent - that's odd "
+                     "(or there are just gigantic sizes involved)");
+    // Per spec, just use the bottom of content-box.
+    flexContainerAscent = aDesiredSize.height -
+      aReflowState.mComputedBorderPadding.bottom;
+  }
+
   aDesiredSize.ascent = flexContainerAscent;
 
   // Overflow area = union(my overflow area, kids' overflow areas)

layout/reftests/flexbox/flexbox-baseline-align-self-baseline-horiz-1-ref.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     unaligned children taken out of baseline-alignment with
+     "vertical-align:top".
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      margin: 0;
+      font-size: 20px;
+      line-height: 20px;
+    }
+    .flexContainer {
+      display: inline-block;
+      background: lightblue;
+      vertical-align: top;
+    }
+    .hugeAndUnaligned {
+      font-size: 35px;
+      line-height: 35px;
+      vertical-align: top;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+    }
+    .flexContainer > * { display: inline; }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer">
+    <div class="smallFont">b</div
+    ><div>c</div
+    ><div class="hugeAndUnaligned">d</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">e</div
+    ><div>f</div
+    ><div class="smallFont">g</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">h</div
+    ><div class="smallFont">i</div
+    ><div>j</div>
+  </div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-align-self-baseline-horiz-1.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a horizontal flex container
+     with several flex items, some of which have "align-self:baseline".  The
+     spec says this about this case:
+       If any of the flex items on the flex container's first line
+       participate in baseline alignment, the flex container's
+       main-axis baseline is the baseline of those flex items.
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    body {
+      margin: 0;
+      font-size: 20px;
+      line-height: 20px;
+    }
+    .flexContainer {
+      display: inline-flex;
+      background: lightblue;
+      align-items: baseline;
+    }
+    .hugeAndUnaligned {
+      font-size: 35px;
+      line-height: 35px;
+      /* This one flex item won't be baseline-aligned, so it won't impact
+         the flex container's positioning */
+      align-self: stretch;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer">
+    <div class="smallFont">b</div>
+    <div>c</div>
+    <div class="hugeAndUnaligned">d</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">e</div>
+    <div>f</div>
+    <div class="smallFont">g</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">h</div>
+    <div class="smallFont">i</div>
+    <div>j</div>
+  </div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-align-self-baseline-vert-1-ref.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     unaligned children taken out of baseline-alignment with
+     "vertical-align:top".
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <style>
+    body {
+      margin: 0;
+      font: 20px Ahem;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+    .flexContainer {
+      display: inline-block;
+      background: lightblue;
+    }
+    .hugeAndUnaligned {
+      font-size: 35px;
+      line-height: 35px;
+      vertical-align: top;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+      /* Baseline is 0.8em = 8px from top */
+    }
+    * { vertical-align: top }
+  </style>
+</head>
+<body>
+  <div style="display: inline-block; margin-top: 12px">a</div>
+  <div class="flexContainer" style="margin-top: 20px">
+    <div class="smallFont">b</div
+    ><div>c</div
+    ><div class="hugeAndUnaligned">d</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">e</div
+    ><div>f</div
+    ><div class="smallFont">g</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">h</div
+    ><div class="smallFont">i</div
+    ><div>j</div>
+  </div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-align-self-baseline-vert-1.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a vertical flex container with
+     several flex items, some of which have "align-self:baseline".  Since we're
+     vertical and the items' baselines are horizontal, they do not end up
+     participating in baseline alignment, so their "align-self:baseline"
+     computed style doesn't have any special effect on the container's
+     baseline.
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <style>
+    body {
+      margin: 0;
+      font: 20px Ahem;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+    .flexContainer {
+      display: inline-flex;
+      flex-direction: column;
+      display: -webkit-inline-flex;
+      -webkit-flex-direction: column;
+      background: lightblue;
+      align-items: baseline;
+    }
+    .hugeAndUnaligned {
+      font-size: 35px;
+      line-height: 35px;
+      /* This one flex item won't be baseline-aligned, so it won't impact
+         the flex container's positioning */
+      align-self: stretch;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+      /* Baseline is 0.8em = 8px from top */
+    }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer">
+    <div class="smallFont">b</div>
+    <div>c</div>
+    <div class="hugeAndUnaligned">d</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">e</div>
+    <div>f</div>
+    <div class="smallFont">g</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">h</div>
+    <div class="smallFont">i</div>
+    <div>j</div>
+  </div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-empty-1-ref.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- In this reference case, we have inline-blocks instead of inline
+     flex containers. We stick an Ahem whitespace character in each
+     inline-block, with a customized line-height to make the baseline
+     end up at the bottom of the inline-block's content-box. -->
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <style>
+    body {
+      font: 20px Ahem;
+    }
+    .flexContainer {
+      display: inline-block;
+      height: 16px;
+      width: 16px;
+      /* Each inline-block's baseline will be the baseline of the single Ahem
+         character that it contains. We want to set up that char such that its
+         baseline is at the bottom of the container's content box (since that's
+         the corresponding flex container's baseline). So, we use a line-height
+         of 20px, which gives us a baseline of 20px * 0.8 = 16px, which is the
+         bottom of the container's content-box -- awesome. */
+      line-height: 20px;
+      background: purple;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+  </style>
+</head>
+<body>
+  A
+  <!-- We have to include a character in the inline-blocks in order for them
+       to baseline-align; otherwise, they align the bottom of their
+       border-boxes. -->
+  <div class="flexContainer">&nbsp;</div>
+  <div class="flexContainer" style="padding-bottom: 20px">&nbsp;</div>
+  <div class="flexContainer" style="padding: 10px">&nbsp;</div>
+  <div class="flexContainer" style="border-width: 3px">&nbsp;</div>
+  <div class="flexContainer" style="border-bottom-width: 4px">&nbsp;</div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-empty-1a.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a horizontal flex container
+     with no flex items. This is the main-axis baseline. The spec says this
+     about this case:
+
+       The flex container's main-axis baseline is synthesized
+       from ... the flex container's content box.
+
+     I'm taking that to mean the baseline is the bottom of the content box.
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <style>
+    body {
+      font: 20px Ahem;
+    }
+    .flexContainer {
+      display: inline-flex;
+      height: 16px;
+      width: 16px;
+      background: purple;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer"></div>
+  <div class="flexContainer" style="padding-bottom: 20px"></div>
+  <div class="flexContainer" style="padding: 10px"></div>
+  <div class="flexContainer" style="border-width: 3px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px"></div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-empty-1b.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a vertical flex container
+     with no flex items. This is the cross-axis baseline. The spec says this
+     about this case:
+
+       ...the flex container's cross-axis baseline is synthesized
+       from ... the flex container's content box.
+
+     I'm taking that to mean the baseline is the bottom of the content box.
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <style>
+    body {
+      font: 20px Ahem;
+    }
+    .flexContainer {
+      display: inline-flex;
+      flex-direction: column;
+      height: 16px;
+      width: 16px;
+      background: purple;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer"></div>
+  <div class="flexContainer" style="padding-bottom: 20px"></div>
+  <div class="flexContainer" style="padding: 10px"></div>
+  <div class="flexContainer" style="border-width: 3px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px"></div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-multi-item-horiz-1-ref.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     baseline-aligned items aligned using specific font-size / line-heights,
+     and with unaligned children taken out of baseline-alignment using
+     "vertical-align:top".
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-block;
+      background: lightblue;
+    }
+    .flexContainer > * { display: inline; }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+    }
+    .bigFont {
+      font-size: 20px;
+      line-height: 20px;
+    }
+    .unaligned { vertical-align: top }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer smallFont">
+    <div class="smallFont">b</div
+    ><div class="bigFont unaligned">c</div>
+  </div>
+  <div class="flexContainer bigFont">
+    <div class="bigFont">d</div
+    ><div class="smallFont unaligned">e</div>
+  </div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-multi-item-horiz-1.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a horizontal flex container
+     with several flex items, none of which have "align-self:baseline".  The
+     spec says this about this case:
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      background: lightblue;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+    }
+    .bigFont {
+      font-size: 20px;
+      line-height: 20px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer">
+    <div class="smallFont">b</div
+    ><div class="bigFont">c</div>
+  </div>
+  <div class="flexContainer">
+    <div class="bigFont">d</div
+    ><div class="smallFont">e</div>
+  </div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-multi-item-vert-1-ref.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     inline-blocks manually positioned with "vertical-align:top" and
+     margin-top.
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <style>
+    body {
+      margin: 0;
+      font: 20px Ahem;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+    .flexContainer {
+      display: inline-block;
+      background: lightblue;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+      /* Baseline is 0.8em = 8px from top */
+    }
+    .bigFont {
+      font-size: 20px;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+    * { vertical-align: top }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer" style="margin-top: 8px">
+    <div class="smallFont">b</div
+    ><div class="bigFont">c</div>
+  </div>
+  <div class="flexContainer">
+    <div class="bigFont">d</div
+    ><div class="smallFont">e</div>
+  </div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-multi-item-vert-1.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a vertical flex container
+     with several flex items, none of which have "align-self:baseline".  The
+     spec says this about this case:
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="ahem.css" />
+  <style>
+    body {
+      margin: 0;
+      font: 20px Ahem;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+    .flexContainer {
+      display: inline-flex;
+      flex-direction: column;
+      background: lightblue;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+      /* Baseline is 0.8em = 8px from top */
+    }
+    .bigFont {
+      font-size: 20px;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer">
+    <div class="smallFont">b</div
+    ><div class="bigFont">c</div>
+  </div>
+  <div class="flexContainer">
+    <div class="bigFont">d</div
+    ><div class="smallFont">e</div>
+  </div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-single-item-1-ref.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex. -->
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-block;
+      height: 16px;
+      width: 16px;
+      background: purple;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer">a</div>
+  <div class="flexContainer" style="padding-bottom: 20px">a</div>
+  <div class="flexContainer" style="padding: 10px">a</div>
+  <div class="flexContainer" style="border-width: 3px">a</div>
+  <div class="flexContainer" style="border-bottom-width: 4px">a</div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-single-item-1a.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a horizontal flex container
+     with one flex item. This is the main-axis baseline. The spec says this
+     about this case:
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      height: 16px;
+      width: 16px;
+      background: purple;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer">a</div>
+  <div class="flexContainer" style="padding-bottom: 20px">a</div>
+  <div class="flexContainer" style="padding: 10px">a</div>
+  <div class="flexContainer" style="border-width: 3px">a</div>
+  <div class="flexContainer" style="border-bottom-width: 4px">a</div>
+</body>
+</html>

layout/reftests/flexbox/flexbox-baseline-single-item-1b.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a vertical flex container
+     with one flex item. This is the cross-axis baseline. The spec says this
+     about this case:
+       If the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's cross axis, the flex container's cross-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      flex-direction: column;
+      height: 16px;
+      width: 16px;
+      background: purple;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer">a</div>
+  <div class="flexContainer" style="padding-bottom: 20px">a</div>
+  <div class="flexContainer" style="padding: 10px">a</div>
+  <div class="flexContainer" style="border-width: 3px">a</div>
+  <div class="flexContainer" style="border-bottom-width: 4px">a</div>
+</body>
+</html>

layout/reftests/flexbox/reftest.list

@@ -39,6 +39,16 @@ random == flexbox-align-self-horiz-1-table.xhtml  flexbox-align-self-horiz-1-ref
 == flexbox-align-self-vert-rtl-3.xhtml  flexbox-align-self-vert-rtl-3-ref.xhtml
 == flexbox-align-self-vert-rtl-4.xhtml  flexbox-align-self-vert-rtl-4-ref.xhtml
 
+# Tests for computing the baseline of a flex container
+== flexbox-baseline-align-self-baseline-horiz-1.html flexbox-baseline-align-self-baseline-horiz-1-ref.html
+== flexbox-baseline-align-self-baseline-vert-1.html flexbox-baseline-align-self-baseline-vert-1-ref.html
+== flexbox-baseline-empty-1a.html flexbox-baseline-empty-1-ref.html
+== flexbox-baseline-empty-1b.html flexbox-baseline-empty-1-ref.html
+== flexbox-baseline-multi-item-horiz-1.html flexbox-baseline-multi-item-horiz-1-ref.html
+== flexbox-baseline-multi-item-vert-1.html flexbox-baseline-multi-item-vert-1-ref.html
+== flexbox-baseline-single-item-1a.html flexbox-baseline-single-item-1-ref.html
+== flexbox-baseline-single-item-1b.html flexbox-baseline-single-item-1-ref.html
+
 # Basic tests with with blocks as flex items
 == flexbox-basic-block-horiz-1.xhtml flexbox-basic-block-horiz-1-ref.xhtml
 == flexbox-basic-block-vert-1.xhtml flexbox-basic-block-vert-1-ref.xhtml