Bug 1500627 - Treat min-main-size:[keyword] as "auto" for flex items, if main axis is the item's block axis. r=dholbert, a=RyanVM
authorBoris Chiou <boris.chiou@gmail.com>
Mon, 29 Oct 2018 22:56:35 +0000
changeset 500959 1a9849bb7eae0bf78a5a9fa6117e8e2f4d46e4b8
parent 500958 6e4f5a616fe2a24e282ce7f23327d3f9ae17437d
child 500960 3dcc599a53b52e4a436017210768d5c1033c6b41
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert, RyanVM
bugs1500627
milestone64.0
Bug 1500627 - Treat min-main-size:[keyword] as "auto" for flex items, if main axis is the item's block axis. r=dholbert, a=RyanVM Keywords on the sizing properties in the block axis should behave as initial values in the flex frame. We store the keywords as enum, instead of auto or none in nsStyleCoord, so we have to handle it explicitly. Differential Revision: https://phabricator.services.mozilla.com/D9438
layout/generic/nsFlexContainerFrame.cpp
layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html
layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html
layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html
layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html
layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html
layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html
layout/reftests/flexbox/reftest.list
--- a/layout/generic/nsFlexContainerFrame.cpp
+++ b/layout/generic/nsFlexContainerFrame.cpp
@@ -260,16 +260,29 @@ PhysicalCoordFromFlexRelativeCoord(nscoo
 // overflow while adding them, then this function returns nscoord_MAX instead.
 static nscoord
 AddChecked(nscoord aFirst, nscoord aSecond)
 {
   CheckedInt<nscoord> checkedResult = CheckedInt<nscoord>(aFirst) + aSecond;
   return checkedResult.isValid() ? checkedResult.value() : nscoord_MAX;
 }
 
+// Check if the size is auto or it is a keyword in the block axis.
+// |aIsInline| should represent whether aSize is in the inline axis, from the
+// perspective of the writing mode of the flex item that the size comes from.
+//
+// max-content and min-content should behave as property's initial value.
+// Bug 567039: We treat -moz-fit-content and -moz-available as property's
+// initial value for now.
+static inline bool
+IsAutoOrEnumOnBSize(const nsStyleCoord& aSize, bool aIsInline) {
+  return aSize.GetUnit() == eStyleUnit_Auto ||
+         (!aIsInline && aSize.GetUnit() == eStyleUnit_Enumerated);
+}
+
 // Helper-macros to let us pick one of two expressions to evaluate
 // (an inline-axis expression vs. a block-axis expression), to get a
 // main-axis or cross-axis component.
 // For code that has e.g. a LogicalSize object, the methods
 // FlexboxAxisTracker::GetMainComponent and GetCrossComponent are cleaner
 // than these macros. But in cases where we simply have two separate
 // expressions for ISize and BSize (which may be expensive to evaluate),
 // these macros can be used to ensure that only the needed expression is
@@ -2081,18 +2094,19 @@ FlexItem::CheckForMinSizeAuto(const Refl
   const nsStyleCoord& mainMinSize = aAxisTracker.IsRowOriented()
     ? pos->MinISize(aAxisTracker.GetWritingMode())
     : pos->MinBSize(aAxisTracker.GetWritingMode());
 
   // NOTE: Technically we should be checking the 'overflow' subproperty in the
   // main axis. But since we only care whether it's 'visible', we can check
   // either subproperty -- because they must be BOTH 'visible' or BOTH
   // non-'visible' due to the way the subproperties interact.
-  mNeedsMinSizeAutoResolution = (mainMinSize.GetUnit() == eStyleUnit_Auto &&
-                                 disp->mOverflowX == NS_STYLE_OVERFLOW_VISIBLE);
+  mNeedsMinSizeAutoResolution =
+    IsAutoOrEnumOnBSize(mainMinSize, IsInlineAxisMainAxis()) &&
+    disp->mOverflowX == NS_STYLE_OVERFLOW_VISIBLE;
 }
 
 nscoord
 FlexItem::GetBaselineOffsetFromOuterCrossEdge(
   AxisEdgeType aEdge,
   const FlexboxAxisTracker& aAxisTracker,
   bool aUseFirstLineBaseline) const
 {
@@ -4379,17 +4393,17 @@ nsFlexContainerFrame::Reflow(nsPresConte
   // set and have block-size:auto.  (There are actually other cases, too -- e.g. if
   // our parent is itself a block-dir flex container and we're flexible -- but
   // we'll let our ancestors handle those sorts of cases.)
   WritingMode wm = aReflowInput.GetWritingMode();
   const nsStylePosition* stylePos = StylePosition();
   const nsStyleCoord& bsize = stylePos->BSize(wm);
   if (bsize.HasPercent() ||
       (StyleDisplay()->IsAbsolutelyPositionedStyle() &&
-       eStyleUnit_Auto == bsize.GetUnit() &&
+       bsize.IsAutoOrEnum() &&
        eStyleUnit_Auto != stylePos->mOffset.GetBStartUnit(wm) &&
        eStyleUnit_Auto != stylePos->mOffset.GetBEndUnit(wm))) {
     AddStateBits(NS_FRAME_CONTAINS_RELATIVE_BSIZE);
   }
 
   RenumberList();
 
   const FlexboxAxisTracker axisTracker(this, aReflowInput.GetWritingMode());
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference Case</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      height: 100px;
+      border: 1px solid black;
+    }
+    .min-content-height {
+      background: pink;
+      align-self: start;
+    }
+    .max-content-height {
+      background: lightblue;
+      align-self: start;
+    }
+    .auto-height {
+      background: orange;
+      height: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="min-content-height">min</div>
+    <div class="max-content-height">max</div>
+    <div class="auto-height">auto</div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-bsize-keywords-no-stretch-1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>Testing that the (default) 'align-items:stretch' only stretches flex items with height:auto (not height:[other-keyword])</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      height: 100px;
+      border: 1px solid black;
+    }
+    .min-content-height {
+      background: pink;
+      height: -moz-min-content;
+      height: min-content;
+    }
+    .max-content-height {
+      background: lightblue;
+      height: -moz-max-content;
+      height: max-content;
+    }
+    .auto-height {
+      background: orange;
+      height: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="min-content-height">min</div>
+    <div class="max-content-height">max</div>
+    <div class="auto-height">auto</div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference Case</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-direction: row;
+    }
+    .container > * {
+      writing-mode: vertical-lr;
+      border: 1px solid black;
+    }
+    .itemA {
+      background: purple;
+    }
+    .itemB {
+      background: teal;
+    }
+    .itemC {
+      background: blue;
+    }
+    .itemD {
+      background: yellow;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA">itemA</div>
+    <div class="itemB">itemB</div>
+    <div class="itemC">itemC</div>
+    <div class="itemD">itemD</div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-horiz-1.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing a horizonal flex container with keywords on min-width</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-direction: row;
+    }
+    .container > * {
+      writing-mode: vertical-lr;
+      border: 1px solid black;
+      flex-basis: 0;
+    }
+    .itemA {
+      background: purple;
+      min-width: -moz-max-content;
+      min-width: max-content;
+    }
+    .itemB {
+      background: teal;
+      min-width: -moz-min-content;
+      min-width: min-content;
+    }
+    .itemC {
+      background: blue;
+      min-width: -moz-fit-content;
+      min-width: fit-content;
+    }
+    .itemD {
+      background: yellow;
+      min-width: -moz-available;
+      min-width: -webkit-fill-available;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA">itemA</div>
+    <div class="itemB">itemB</div>
+    <div class="itemC">itemC</div>
+    <div class="itemD">itemD</div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference Case</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      width: -moz-fit-content;
+    }
+    .container > * {
+      border: 1px solid black;
+    }
+    .itemA {
+      background: purple;
+    }
+    .itemB {
+      background: teal;
+    }
+    .itemC {
+      background: blue;
+    }
+    .itemD {
+      background: yellow;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA">itemA</div>
+    <div class="itemB">itemB</div>
+    <div class="itemC">itemC</div>
+    <div class="itemD">itemD</div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-min-bsize-keywords-vert-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing a vertical flex container with keywords on min-height</title>
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      width: -moz-fit-content;
+      width: fit-content;
+      flex-direction: column;
+    }
+    .container > * {
+      border: 1px solid black;
+      flex-basis: 0;
+    }
+    .itemA {
+      background: purple;
+      min-height: -moz-max-content;
+      min-height: max-content;
+    }
+    .itemB {
+      background: teal;
+      min-height: -moz-min-content;
+      min-height: min-content;
+    }
+    .itemC {
+      background: blue;
+      min-height: -moz-fit-content;
+      min-height: fit-content;
+    }
+    .itemD {
+      background: yellow;
+      min-height: -moz-available;
+      min-height: -webkit-fill-available;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="itemA">itemA</div>
+    <div class="itemB">itemB</div>
+    <div class="itemC">itemC</div>
+    <div class="itemD">itemD</div>
+  </div>
+</body>
+</html>
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -117,8 +117,14 @@ skip-if(gtkWidget) == flexbox-widget-fle
 fuzzy-if(gtkWidget,0-1,0-31) == flexbox-widget-flex-items-4.html flexbox-widget-flex-items-4-ref.html
 
 # Tests for table flex items
 == flexbox-table-flex-items-1.html flexbox-table-flex-items-1-ref.html
 == flexbox-table-flex-items-2.html flexbox-table-flex-items-2-ref.html
 == flexbox-table-flex-items-3.html flexbox-table-flex-items-3-ref.html
 == flexbox-table-flex-items-4.html flexbox-table-flex-items-4-ref.html
 == flexbox-table-flex-items-5.html flexbox-table-flex-items-5-ref.html
+
+# Tests for Bug 1500627. Keywords on min-height (block size) should behave as
+# the initial value. (i.e. auto)
+== flexbox-min-bsize-keywords-vert-1.html flexbox-min-bsize-keywords-vert-1-ref.html
+== flexbox-min-bsize-keywords-horiz-1.html flexbox-min-bsize-keywords-horiz-1-ref.html
+== flexbox-bsize-keywords-no-stretch-1.html flexbox-bsize-keywords-no-stretch-1-ref.html