Bug 1312588 - Part 2: Support fit-content() in style. r=emilio

Support fit-content for preferred size, min size, and max size. This patch only implement the style system. For layout part, we will do that in the following patches. Differential Revision: https://phabricator.services.mozilla.com/D107161
dothq · Jun 8, 2021 · b65c4b4 · b65c4b4
1 parent d2c8ac2
commit b65c4b4
Show file tree

Hide file tree

Showing 31 changed files with 164 additions and 86 deletions.
diff --git a/devtools/shared/css/generated/properties-db.js b/devtools/shared/css/generated/properties-db.js
@@ -1866,6 +1866,7 @@ exports.CSS_PROPERTIES = {
       "-moz-fit-content",
       "auto",
       "content",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -1885,6 +1886,7 @@ exports.CSS_PROPERTIES = {
       "-moz-fit-content",
       "auto",
       "content",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -3719,6 +3721,7 @@ exports.CSS_PROPERTIES = {
       "-moz-available",
       "-moz-fit-content",
       "auto",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -5977,6 +5980,7 @@ exports.CSS_PROPERTIES = {
       "-moz-fit-content",
       "auto",
       "content",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -5996,6 +6000,7 @@ exports.CSS_PROPERTIES = {
       "-moz-fit-content",
       "auto",
       "content",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -6915,6 +6920,7 @@ exports.CSS_PROPERTIES = {
       "-moz-available",
       "-moz-fit-content",
       "auto",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -7000,6 +7006,7 @@ exports.CSS_PROPERTIES = {
       "-moz-available",
       "-moz-fit-content",
       "auto",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -8081,6 +8088,7 @@ exports.CSS_PROPERTIES = {
       "-moz-fit-content",
       "-moz-max-content",
       "-moz-min-content",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -8101,6 +8109,7 @@ exports.CSS_PROPERTIES = {
       "-moz-fit-content",
       "-moz-max-content",
       "-moz-min-content",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -8121,6 +8130,7 @@ exports.CSS_PROPERTIES = {
       "-moz-fit-content",
       "-moz-max-content",
       "-moz-min-content",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -8141,6 +8151,7 @@ exports.CSS_PROPERTIES = {
       "-moz-fit-content",
       "-moz-max-content",
       "-moz-min-content",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -8160,6 +8171,7 @@ exports.CSS_PROPERTIES = {
       "-moz-available",
       "-moz-fit-content",
       "auto",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -8178,6 +8190,7 @@ exports.CSS_PROPERTIES = {
       "-moz-available",
       "-moz-fit-content",
       "auto",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -8196,6 +8209,7 @@ exports.CSS_PROPERTIES = {
       "-moz-available",
       "-moz-fit-content",
       "auto",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -8214,6 +8228,7 @@ exports.CSS_PROPERTIES = {
       "-moz-available",
       "-moz-fit-content",
       "auto",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",
@@ -10724,6 +10739,7 @@ exports.CSS_PROPERTIES = {
       "-moz-available",
       "-moz-fit-content",
       "auto",
+      "fit-content",
       "inherit",
       "initial",
       "max-content",

diff --git a/layout/base/nsLayoutUtils.cpp b/layout/base/nsLayoutUtils.cpp
@@ -4527,7 +4527,15 @@ static bool GetIntrinsicCoord(nsIFrame::ExtremumLength aStyle,
                  aProperty == PROP_MIN_WIDTH,
              "unexpected property");
 
-  if (aStyle == nsIFrame::ExtremumLength::MozAvailable) return false;
+  if (aStyle == nsIFrame::ExtremumLength::MozAvailable) {
+    return false;
+  }
+
+  if (aStyle == nsIFrame::ExtremumLength::FitContentFunction) {
+    // fit-content() should be handled by the caller.
+    return false;
+  }
+
   if (aStyle == nsIFrame::ExtremumLength::MozFitContent) {
     if (aProperty == PROP_WIDTH) return false;  // handle like 'width: auto'
     if (aProperty == PROP_MAX_WIDTH)

diff --git a/layout/generic/nsIFrame.cpp b/layout/generic/nsIFrame.cpp
@@ -2332,7 +2332,7 @@ template <typename SizeOrMaxSize>
 static inline bool IsIntrinsicKeyword(const SizeOrMaxSize& aSize) {
   // All keywords other than auto/none/-moz-available depend on intrinsic sizes.
   return aSize.IsMaxContent() || aSize.IsMinContent() ||
-         aSize.IsMozFitContent();
+         aSize.IsMozFitContent() || aSize.IsFitContentFunction();
 }
 
 bool nsIFrame::CanBeDynamicReflowRoot() const {
@@ -6568,6 +6568,8 @@ nsIFrame::ISizeComputationResult nsIFrame::ComputeISizeValue(
       return {result, intrinsicSizeFromAspectRatio
                           ? AspectRatioUsage::ToComputeISize
                           : AspectRatioUsage::None};
+    case ExtremumLength::FitContentFunction:
+      // TODO: Finish this in the following patches.
     case ExtremumLength::MozFitContent: {
       nscoord pref = NS_UNCONSTRAINEDSIZE;
       nscoord min = 0;

diff --git a/layout/generic/nsIFrame.h b/layout/generic/nsIFrame.h
@@ -3078,7 +3078,7 @@ class nsIFrame : public nsQueryFrame {
   bool HasIntrinsicKeywordForBSize() const {
     const auto& bSize = StylePosition()->BSize(GetWritingMode());
     return bSize.IsMozFitContent() || bSize.IsMinContent() ||
-           bSize.IsMaxContent();
+           bSize.IsMaxContent() || bSize.IsFitContentFunction();
   }
   /**
    * Helper method to create a view for a frame.  Only used by a few sub-classes
@@ -4776,6 +4776,7 @@ class nsIFrame : public nsQueryFrame {
     MaxContent,
     MozAvailable,
     MozFitContent,
+    FitContentFunction,
   };
 
   template <typename SizeOrMaxSize>
@@ -4789,6 +4790,8 @@ class nsIFrame : public nsQueryFrame {
         return mozilla::Some(ExtremumLength::MozAvailable);
       case SizeOrMaxSize::Tag::MozFitContent:
         return mozilla::Some(ExtremumLength::MozFitContent);
+      case SizeOrMaxSize::Tag::FitContentFunction:
+        return mozilla::Some(ExtremumLength::FitContentFunction);
       default:
         return mozilla::Nothing();
     }

diff --git a/layout/generic/nsImageFrame.cpp b/layout/generic/nsImageFrame.cpp
@@ -130,6 +130,7 @@ static bool DependsOnIntrinsicSize(const SizeOrMaxSize& aMinOrMaxSize) {
     case nsIFrame::ExtremumLength::MinContent:
     case nsIFrame::ExtremumLength::MaxContent:
     case nsIFrame::ExtremumLength::MozFitContent:
+    case nsIFrame::ExtremumLength::FitContentFunction:
       return true;
     case nsIFrame::ExtremumLength::MozAvailable:
       return false;

diff --git a/layout/style/nsComputedDOMStyle.cpp b/layout/style/nsComputedDOMStyle.cpp
@@ -1487,16 +1487,9 @@ already_AddRefed<nsROCSSPrimitiveValue> nsComputedDOMStyle::GetGridTrackSize(
   if (aTrackSize.IsFitContent()) {
     // A fit-content() function.
     RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-    nsAutoString argumentStr, fitContentStr;
-    fitContentStr.AppendLiteral("fit-content(");
     MOZ_ASSERT(aTrackSize.AsFitContent().IsBreadth(),
                "unexpected unit for fit-content() argument value");
-    SetValueToLengthPercentage(val, aTrackSize.AsFitContent().AsBreadth(),
-                               true);
-    val->GetCssText(argumentStr, IgnoreErrors());
-    fitContentStr.Append(argumentStr);
-    fitContentStr.Append(char16_t(')'));
-    val->SetString(fitContentStr);
+    SetValueFromFitContentFunction(val, aTrackSize.AsFitContent().AsBreadth());
     return val.forget();
   }
 
@@ -2245,15 +2238,33 @@ static void SetValueToExtremumLength(nsROCSSPrimitiveValue* aValue,
       return aValue->SetString("-moz-available");
     case nsIFrame::ExtremumLength::MozFitContent:
       return aValue->SetString("-moz-fit-content");
+    case nsIFrame::ExtremumLength::FitContentFunction:
+      MOZ_ASSERT_UNREACHABLE("fit-content() should be handled separately");
   }
   MOZ_ASSERT_UNREACHABLE("Unknown extremum length?");
 }
 
+void nsComputedDOMStyle::SetValueFromFitContentFunction(
+    nsROCSSPrimitiveValue* aValue, const LengthPercentage& aLength) {
+  nsAutoString argumentStr;
+  SetValueToLengthPercentage(aValue, aLength, true);
+  aValue->GetCssText(argumentStr, IgnoreErrors());
+
+  nsAutoString fitContentStr;
+  fitContentStr.AppendLiteral("fit-content(");
+  fitContentStr.Append(argumentStr);
+  fitContentStr.Append(char16_t(')'));
+  aValue->SetString(fitContentStr);
+}
+
 void nsComputedDOMStyle::SetValueToSize(nsROCSSPrimitiveValue* aValue,
                                         const StyleSize& aSize) {
   if (aSize.IsAuto()) {
     return aValue->SetString("auto");
   }
+  if (aSize.IsFitContentFunction()) {
+    return SetValueFromFitContentFunction(aValue, aSize.AsFitContentFunction());
+  }
   if (auto length = nsIFrame::ToExtremumLength(aSize)) {
     return SetValueToExtremumLength(aValue, *length);
   }
@@ -2266,6 +2277,9 @@ void nsComputedDOMStyle::SetValueToMaxSize(nsROCSSPrimitiveValue* aValue,
   if (aSize.IsNone()) {
     return aValue->SetString("none");
   }
+  if (aSize.IsFitContentFunction()) {
+    return SetValueFromFitContentFunction(aValue, aSize.AsFitContentFunction());
+  }
   if (auto length = nsIFrame::ToExtremumLength(aSize)) {
     return SetValueToExtremumLength(aValue, *length);
   }

diff --git a/layout/style/nsComputedDOMStyle.h b/layout/style/nsComputedDOMStyle.h
@@ -282,6 +282,9 @@ class nsComputedDOMStyle final : public nsDOMCSSDeclaration,
   void SetValueToURLValue(const mozilla::StyleComputedUrl* aURL,
                           nsROCSSPrimitiveValue* aValue);
 
+  void SetValueFromFitContentFunction(nsROCSSPrimitiveValue* aValue,
+                                      const mozilla::LengthPercentage&);
+
   void SetValueToSize(nsROCSSPrimitiveValue* aValue, const mozilla::StyleSize&);
 
   void SetValueToLengthPercentageOrAuto(nsROCSSPrimitiveValue* aValue,

diff --git a/layout/style/test/mochitest.ini b/layout/style/test/mochitest.ini
@@ -17,6 +17,7 @@ prefs =
   layout.css.overflow-logical.enabled=true
   layout.css.step-position-jump.enabled=true
   layout.css.backdrop-filter.enabled=true
+  layout.css.fit-content-function.enabled=true
 support-files =
   animation_utils.js
   ccd-quirks.html

diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
@@ -6055,6 +6055,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["none"],
     quirks_values: { "5": "5px" },
@@ -6498,6 +6501,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["auto"],
     quirks_values: { "5": "5px" },
@@ -6529,6 +6535,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["auto"],
     quirks_values: { "5": "5px" },
@@ -6555,6 +6564,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["none"],
     quirks_values: { "5": "5px" },
@@ -6584,6 +6596,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["none"],
     quirks_values: { "5": "5px" },
@@ -8427,6 +8442,9 @@ var gCSSProperties = {
       "min(5px,2em)",
       "max(5px)",
       "max(5px,2em)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: [
       "none",
@@ -10083,6 +10101,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["none"],
   },
@@ -10436,6 +10457,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["none"],
   },
@@ -10579,6 +10603,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["auto", "5"],
   },
@@ -10608,6 +10635,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["auto", "5"],
   },
@@ -10635,6 +10665,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["none", "5"],
   },
@@ -10665,6 +10698,9 @@ var gCSSProperties = {
       "calc(3*25px)",
       "calc(25px*3)",
       "calc(3*25px + 50%)",
+      "fit-content(100px)",
+      "fit-content(10%)",
+      "fit-content(calc(3*25px + 50%))",
     ],
     invalid_values: ["none", "5"],
   },