Issue #1838 - Part 2: Remove `grid-` prefix from `grid-(column|row)-gap` properties

This removes the `grid` prefix from the gap-related properties of grid since they are now part of the box alignment specification. Former grid-gap* properties were aliased to the unprefixed properties to maintain compatibility.

The previously multi-column layout only `column-gap` property has been modified to apply to the Grid layout (and Flexbox in a following commit), moving the `mColumnGap` member variable from `nsStyleColumn` to `nsStylePosition`.

Notes:
* Bug 1398537 - support for percent values in column-gap for multi-column layout landed as part of Issue #1230. However, it was incomplete because it did not update `nsRuleNode` to allow transformation of percentage values for `column-gap`. This was consequently fixed as part of this commit.
* Bug 1456166 - this might not apply because we don't have that devtools test in UXP
* `nsRuleNode`, `nsCSSParser`, `Declaration`, and other related classes were merged into Stylo. These should be taken into consideration when porting patches from Mozilla.

Partially based on https://bugzilla.mozilla.org/show_bug.cgi?id=1398482

13 files changed, 103 insertions, 121 deletions

diff --git a/layout/generic/nsColumnSetFrame.cpp b/layout/generic/nsColumnSetFrame.cpp
index 90d425ccf4..99733c549b 100644
--- a/layout/generic/nsColumnSetFrame.cpp
+++ b/layout/generic/nsColumnSetFrame.cpp
@@ -183,15 +183,15 @@ nsColumnSetFrame::GetAvailableContentBSize(const ReflowInput& aReflowInput)
 
 static nscoord
 GetColumnGap(nsColumnSetFrame*    aFrame,
-             const nsStyleColumn* aColStyle,
              nscoord              aPercentageBasis)
 {
-  const auto& columnGap = aColStyle->mColumnGap;
-  if (columnGap.GetUnit() == eStyleUnit_Normal) {
+  const nsStylePosition* positionData = aFrame->StylePosition();
+  if (positionData->mColumnGap.GetUnit() == eStyleUnit_Normal) {
     return aFrame->StyleFont()->mFont.size;
   }
 
-  return nsLayoutUtils::ResolveGapToLength(columnGap, aPercentageBasis);
+  return nsLayoutUtils::ResolveGapToLength(positionData->mColumnGap,
+                                           aPercentageBasis);
 }
 
 nsColumnSetFrame::ReflowConfig
@@ -224,7 +224,7 @@ nsColumnSetFrame::ChooseColumnStrategy(const ReflowInput& aReflowInput,
     colBSize = std::min(colBSize, aReflowInput.ComputedMaxBSize());
   }
 
-  nscoord colGap = GetColumnGap(this, colStyle, aReflowInput.ComputedISize());
+  nscoord colGap = GetColumnGap(this, aReflowInput.ComputedISize());
   int32_t numColumns = colStyle->mColumnCount;
 
   // If column-fill is set to 'balance', then we want to balance the columns.
@@ -400,7 +400,7 @@ nsColumnSetFrame::GetMinISize(nsRenderingContext *aRenderingContext)
     // include n-1 column gaps.
     colISize = iSize;
     iSize *= colStyle->mColumnCount;
-    nscoord colGap = GetColumnGap(this, colStyle, NS_UNCONSTRAINEDSIZE);
+    nscoord colGap = GetColumnGap(this, NS_UNCONSTRAINEDSIZE);
     iSize += colGap * (colStyle->mColumnCount - 1);
     // The multiplication above can make 'width' negative (integer overflow),
     // so use std::max to protect against that.
@@ -421,7 +421,7 @@ nsColumnSetFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
   nscoord result = 0;
   DISPLAY_PREF_WIDTH(this, result);
   const nsStyleColumn* colStyle = StyleColumn();
-  nscoord colGap = GetColumnGap(this, colStyle, NS_UNCONSTRAINEDSIZE);
+  nscoord colGap = GetColumnGap(this, NS_UNCONSTRAINEDSIZE);
 
   nscoord colISize;
   if (colStyle->mColumnWidth.GetUnit() == eStyleUnit_Coord) {
diff --git a/layout/generic/nsGridContainerFrame.cpp b/layout/generic/nsGridContainerFrame.cpp
index 0af05be509..f3904094db 100644
--- a/layout/generic/nsGridContainerFrame.cpp
+++ b/layout/generic/nsGridContainerFrame.cpp
@@ -2622,9 +2622,9 @@ nsGridContainerFrame::GridReflowInput::CalculateTrackSizes(
   const LogicalSize& aContentBox,
   SizingConstraint   aConstraint)
 {
-  mCols.Initialize(mColFunctions, mGridStyle->mGridColumnGap,
+  mCols.Initialize(mColFunctions, mGridStyle->mColumnGap,
                    aGrid.mGridColEnd, aContentBox.ISize(mWM));
-  mRows.Initialize(mRowFunctions, mGridStyle->mGridRowGap,
+  mRows.Initialize(mRowFunctions, mGridStyle->mRowGap,
                    aGrid.mGridRowEnd, aContentBox.BSize(mWM));
 
   mCols.CalculateSizes(*this, mGridItems, mColFunctions,
@@ -3378,7 +3378,7 @@ nsGridContainerFrame::Grid::PlaceGridItems(GridReflowInput& aState,
   // to a 0,0 based grid after placing definite lines.
   auto areas = gridStyle->mGridTemplateAreas.get();
   uint32_t numRepeatCols = aState.mColFunctions.InitRepeatTracks(
-                             gridStyle->mGridColumnGap,
+                             gridStyle->mColumnGap,
                              aComputedMinSize.ISize(aState.mWM),
                              aComputedSize.ISize(aState.mWM),
                              aComputedMaxSize.ISize(aState.mWM));
@@ -3387,7 +3387,7 @@ nsGridContainerFrame::Grid::PlaceGridItems(GridReflowInput& aState,
   LineNameMap colLineNameMap(gridStyle->mGridTemplateColumns, numRepeatCols);
 
   uint32_t numRepeatRows = aState.mRowFunctions.InitRepeatTracks(
-                             gridStyle->mGridRowGap,
+                             gridStyle->mRowGap,
                              aComputedMinSize.BSize(aState.mWM),
                              aComputedSize.BSize(aState.mWM),
                              aComputedMaxSize.BSize(aState.mWM));
@@ -6585,7 +6585,7 @@ nsGridContainerFrame::IntrinsicISize(nsRenderingContext* aRenderingContext,
   if (grid.mGridColEnd == 0) {
     return 0;
   }
-  state.mCols.Initialize(state.mColFunctions, state.mGridStyle->mGridColumnGap,
+  state.mCols.Initialize(state.mColFunctions, state.mGridStyle->mColumnGap,
                          grid.mGridColEnd, NS_UNCONSTRAINEDSIZE);
   auto constraint = aType == nsLayoutUtils::MIN_ISIZE ?
     SizingConstraint::eMinContent : SizingConstraint::eMaxContent;
@@ -6593,7 +6593,7 @@ nsGridContainerFrame::IntrinsicISize(nsRenderingContext* aRenderingContext,
                              NS_UNCONSTRAINEDSIZE, &GridArea::mCols,
                              constraint);
   state.mCols.mGridGap =
-    nsLayoutUtils::ResolveGapToLength(state.mGridStyle->mGridColumnGap,
+    nsLayoutUtils::ResolveGapToLength(state.mGridStyle->mColumnGap,
                                       NS_UNCONSTRAINEDSIZE);
   nscoord length = 0;
   for (const TrackSize& sz : state.mCols.mSizes) {
diff --git a/layout/style/Declaration.cpp b/layout/style/Declaration.cpp
index 9d7ca312c4..9e7a01aff5 100644
--- a/layout/style/Declaration.cpp
+++ b/layout/style/Declaration.cpp
@@ -1249,13 +1249,13 @@ Declaration::GetPropertyValueInternal(
     // #3 [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
     case eCSSProperty_grid: {
       const nsCSSValue& columnGapValue =
-        *data->ValueFor(eCSSProperty_grid_column_gap);
+        *data->ValueFor(eCSSProperty_column_gap);
       if (columnGapValue.GetUnit() != eCSSUnit_Pixel ||
           columnGapValue.GetFloatValue() != 0.0f) {
         return; // Not serializable, bail.
       }
       const nsCSSValue& rowGapValue =
-        *data->ValueFor(eCSSProperty_grid_row_gap);
+        *data->ValueFor(eCSSProperty_row_gap);
       if (rowGapValue.GetUnit() != eCSSUnit_Pixel ||
           rowGapValue.GetFloatValue() != 0.0f) {
         return; // Not serializable, bail.
@@ -1475,7 +1475,7 @@ Declaration::GetPropertyValueInternal(
       }
       MOZ_FALLTHROUGH;
     }
-    case eCSSProperty_grid_gap: {
+    case eCSSProperty_gap: {
       const nsCSSPropertyID* subprops =
         nsCSSProps::SubpropertyEntryFor(aProperty);
       MOZ_ASSERT(subprops[2] == eCSSProperty_UNKNOWN,
diff --git a/layout/style/nsCSSParser.cpp b/layout/style/nsCSSParser.cpp
index 3d5edbd0ee..0899e4e4ee 100644
--- a/layout/style/nsCSSParser.cpp
+++ b/layout/style/nsCSSParser.cpp
@@ -1013,7 +1013,7 @@ protected:
   bool ParseGridColumnRow(nsCSSPropertyID aStartPropID,
                           nsCSSPropertyID aEndPropID);
   bool ParseGridArea();
-  bool ParseGridGap();
+  bool ParseGap();
 
   bool ParseInitialLetter();
 
@@ -9714,8 +9714,8 @@ CSSParserImpl::ParseGrid()
   // "Also, the gutter properties are reset by this shorthand,
   //  even though they can't be set by it."
   value.SetFloatValue(0.0f, eCSSUnit_Pixel);
-  AppendValue(eCSSProperty_grid_row_gap, value);
-  AppendValue(eCSSProperty_grid_column_gap, value);
+  AppendValue(eCSSProperty_row_gap, value);
+  AppendValue(eCSSProperty_column_gap, value);
 
   // [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
   auto res = ParseGridShorthandAutoProps(NS_STYLE_GRID_AUTO_FLOW_ROW);
@@ -10023,12 +10023,12 @@ CSSParserImpl::ParseGridArea()
 }
 
 bool
-CSSParserImpl::ParseGridGap()
+CSSParserImpl::ParseGap()
 {
   nsCSSValue first;
   if (ParseSingleTokenVariant(first, VARIANT_INHERIT, nullptr)) {
-    AppendValue(eCSSProperty_grid_row_gap, first);
-    AppendValue(eCSSProperty_grid_column_gap, first);
+    AppendValue(eCSSProperty_row_gap, first);
+    AppendValue(eCSSProperty_column_gap, first);
     return true;
   }
   if (ParseNonNegativeVariant(first, VARIANT_LPCALC, nullptr) !=
@@ -10040,8 +10040,8 @@ CSSParserImpl::ParseGridGap()
   if (result == CSSParseResult::Error) {
     return false;
   }
-  AppendValue(eCSSProperty_grid_row_gap, first);
-  AppendValue(eCSSProperty_grid_column_gap,
+  AppendValue(eCSSProperty_row_gap, first);
+  AppendValue(eCSSProperty_column_gap,
               result == CSSParseResult::NotFound ? first : second);
   return true;
 }
@@ -11941,8 +11941,8 @@ CSSParserImpl::ParsePropertyByFunction(nsCSSPropertyID aPropID)
                               eCSSProperty_grid_row_end);
   case eCSSProperty_grid_area:
     return ParseGridArea();
-  case eCSSProperty_grid_gap:
-    return ParseGridGap();
+  case eCSSProperty_gap:
+    return ParseGap();
   case eCSSProperty_image_region:
     return ParseRect(eCSSProperty_image_region);
   case eCSSProperty_align_content:
diff --git a/layout/style/nsCSSPropAliasList.h b/layout/style/nsCSSPropAliasList.h
index 4f2a6e6b6d..7043d1931e 100644
--- a/layout/style/nsCSSPropAliasList.h
+++ b/layout/style/nsCSSPropAliasList.h
@@ -34,6 +34,18 @@
 
  ******/
 
+CSS_PROP_ALIAS(grid-gap,
+               gap,
+               GridGap,
+               "")
+CSS_PROP_ALIAS(grid-column-gap,
+               column_gap,
+               GridColumnGap,
+               "")
+CSS_PROP_ALIAS(grid-row-gap,
+               row_gap,
+               GridRowGap,
+               "")
 CSS_PROP_ALIAS(word-wrap,
                overflow_wrap,
                WordWrap,
diff --git a/layout/style/nsCSSPropList.h b/layout/style/nsCSSPropList.h
index e90686a3bf..b51867f3ce 100644
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -1516,7 +1516,7 @@ CSS_PROP_COLUMN(
     kColumnFillKTable,
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_Discrete)
-CSS_PROP_COLUMN(
+CSS_PROP_POSITION(
     column-gap,
     column_gap,
     ColumnGap,
@@ -1525,7 +1525,7 @@ CSS_PROP_COLUMN(
     "",
     VARIANT_HLP | VARIANT_NORMAL | VARIANT_CALC,
     nullptr,
-    offsetof(nsStyleColumn, mColumnGap),
+    offsetof(nsStylePosition, mColumnGap),
     eStyleAnimType_Coord)
 CSS_PROP_SHORTHAND(
     column-rule,
@@ -2100,6 +2100,12 @@ CSS_PROP_UIRESET(
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_Discrete) // bug 58646
 CSS_PROP_SHORTHAND(
+    gap,
+    gap,
+    Gap,
+    CSS_PROPERTY_PARSE_FUNCTION,
+    "")
+CSS_PROP_SHORTHAND(
     grid,
     grid,
     Grid,
@@ -2160,17 +2166,6 @@ CSS_PROP_POSITION(
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_Discrete)
 CSS_PROP_POSITION(
-    grid-column-gap,
-    grid_column_gap,
-    GridColumnGap,
-    CSS_PROPERTY_PARSE_VALUE |
-        CSS_PROPERTY_VALUE_NONNEGATIVE,
-    "",
-    VARIANT_HLP | VARIANT_CALC,
-    nullptr,
-    offsetof(nsStylePosition, mGridColumnGap),
-    eStyleAnimType_Coord)
-CSS_PROP_POSITION(
     grid-column-start,
     grid_column_start,
     GridColumnStart,
@@ -2181,12 +2176,6 @@ CSS_PROP_POSITION(
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_Discrete)
 CSS_PROP_SHORTHAND(
-    grid-gap,
-    grid_gap,
-    GridGap,
-    CSS_PROPERTY_PARSE_FUNCTION,
-    "")
-CSS_PROP_SHORTHAND(
     grid-row,
     grid_row,
     GridRow,
@@ -2203,17 +2192,6 @@ CSS_PROP_POSITION(
     CSS_PROP_NO_OFFSET,
     eStyleAnimType_Discrete)
 CSS_PROP_POSITION(
-    grid-row-gap,
-    grid_row_gap,
-    GridRowGap,
-    CSS_PROPERTY_PARSE_VALUE |
-        CSS_PROPERTY_VALUE_NONNEGATIVE,
-    "",
-    VARIANT_HLP | VARIANT_CALC,
-    nullptr,
-    offsetof(nsStylePosition, mGridRowGap),
-    eStyleAnimType_Coord)
-CSS_PROP_POSITION(
     grid-row-start,
     grid_row_start,
     GridRowStart,
@@ -3552,6 +3530,17 @@ CSS_PROP_POSITION(
     nullptr,
     offsetof(nsStylePosition, mOffset),
     eStyleAnimType_Sides_Right)
+CSS_PROP_POSITION(
+    row-gap,
+    row_gap,
+    RowGap,
+    CSS_PROPERTY_PARSE_VALUE |
+        CSS_PROPERTY_VALUE_NONNEGATIVE,
+    "",
+    VARIANT_HLP | VARIANT_NORMAL | VARIANT_CALC,
+    nullptr,
+    offsetof(nsStylePosition, mRowGap),
+    eStyleAnimType_Coord)
 CSS_PROP_TEXT(
     ruby-align,
     ruby_align,
diff --git a/layout/style/nsCSSProps.cpp b/layout/style/nsCSSProps.cpp
index 4fa83bb204..7d4e008b45 100644
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -2952,8 +2952,6 @@ static const nsCSSPropertyID gGridSubpropTable[] = {
   eCSSProperty_grid_auto_flow,
   eCSSProperty_grid_auto_rows,
   eCSSProperty_grid_auto_columns,
-  eCSSProperty_grid_row_gap, // can only be reset, not get/set
-  eCSSProperty_grid_column_gap, // can only be reset, not get/set
   eCSSProperty_UNKNOWN
 };
 
@@ -2977,9 +2975,9 @@ static const nsCSSPropertyID gGridAreaSubpropTable[] = {
   eCSSProperty_UNKNOWN
 };
 
-static const nsCSSPropertyID gGridGapSubpropTable[] = {
-  eCSSProperty_grid_row_gap,
-  eCSSProperty_grid_column_gap,
+static const nsCSSPropertyID gGapSubpropTable[] = {
+  eCSSProperty_row_gap,
+  eCSSProperty_column_gap,
   eCSSProperty_UNKNOWN
 };
 
diff --git a/layout/style/nsComputedDOMStyle.cpp b/layout/style/nsComputedDOMStyle.cpp
index efa485f613..eb56559d93 100644
--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -1093,21 +1093,6 @@ nsComputedDOMStyle::DoGetColumnWidth()
 }
 
 already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetColumnGap()
-{
-  RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-
-  const nsStyleColumn* column = StyleColumn();
-  if (column->mColumnGap.GetUnit() == eStyleUnit_Normal) {
-    val->SetAppUnits(StyleFont()->mFont.size);
-  } else {
-    SetValueToCoord(val, StyleColumn()->mColumnGap, true);
-  }
-
-  return val.forget();
-}
-
-already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetColumnFill()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
@@ -3003,18 +2988,32 @@ nsComputedDOMStyle::DoGetGridRowEnd()
 }
 
 already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetGridColumnGap()
+nsComputedDOMStyle::DoGetColumnGap()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-  SetValueToCoord(val, StylePosition()->mGridColumnGap, true);
+
+  const nsStylePosition* positionData = StylePosition();
+  if (positionData->mColumnGap.GetUnit() == eStyleUnit_Normal) {
+    val->SetIdent(eCSSKeyword_normal);
+  } else {
+    SetValueToCoord(val, positionData->mColumnGap, true);
+  }
+
   return val.forget();
 }
 
 already_AddRefed<CSSValue>
-nsComputedDOMStyle::DoGetGridRowGap()
+nsComputedDOMStyle::DoGetRowGap()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-  SetValueToCoord(val, StylePosition()->mGridRowGap, true);
+
+  const nsStylePosition* positionData = StylePosition();
+  if (positionData->mRowGap.GetUnit() == eStyleUnit_Normal) {
+    val->SetIdent(eCSSKeyword_normal);
+  } else {
+    SetValueToCoord(val, positionData->mRowGap, true);
+  }
+
   return val.forget();
 }
 
diff --git a/layout/style/nsComputedDOMStyle.h b/layout/style/nsComputedDOMStyle.h
index 38a61e23c5..363de2a8fe 100644
--- a/layout/style/nsComputedDOMStyle.h
+++ b/layout/style/nsComputedDOMStyle.h
@@ -286,8 +286,6 @@ private:
   already_AddRefed<CSSValue> DoGetGridColumnEnd();
   already_AddRefed<CSSValue> DoGetGridRowStart();
   already_AddRefed<CSSValue> DoGetGridRowEnd();
-  already_AddRefed<CSSValue> DoGetGridColumnGap();
-  already_AddRefed<CSSValue> DoGetGridRowGap();
 
   /* StyleImageLayer properties */
   already_AddRefed<CSSValue> DoGetImageLayerImage(const nsStyleImageLayers& aLayers);
@@ -503,7 +501,6 @@ private:
   already_AddRefed<CSSValue> DoGetColumnCount();
   already_AddRefed<CSSValue> DoGetColumnFill();
   already_AddRefed<CSSValue> DoGetColumnWidth();
-  already_AddRefed<CSSValue> DoGetColumnGap();
   already_AddRefed<CSSValue> DoGetColumnRuleWidth();
   already_AddRefed<CSSValue> DoGetColumnRuleStyle();
   already_AddRefed<CSSValue> DoGetColumnRuleColor();
@@ -541,6 +538,8 @@ private:
   already_AddRefed<CSSValue> DoGetJustifyContent();
   already_AddRefed<CSSValue> DoGetJustifyItems();
   already_AddRefed<CSSValue> DoGetJustifySelf();
+  already_AddRefed<CSSValue> DoGetColumnGap();
+  already_AddRefed<CSSValue> DoGetRowGap();
 
   /* SVG properties */
   already_AddRefed<CSSValue> DoGetFill();
diff --git a/layout/style/nsComputedDOMStylePropertyList.h b/layout/style/nsComputedDOMStylePropertyList.h
index ec223cda4c..a17a6a8223 100644
--- a/layout/style/nsComputedDOMStylePropertyList.h
+++ b/layout/style/nsComputedDOMStylePropertyList.h
@@ -151,10 +151,8 @@ COMPUTED_STYLE_PROP(grid_auto_columns,             GridAutoColumns)
 COMPUTED_STYLE_PROP(grid_auto_flow,                GridAutoFlow)
 COMPUTED_STYLE_PROP(grid_auto_rows,                GridAutoRows)
 COMPUTED_STYLE_PROP(grid_column_end,               GridColumnEnd)
-COMPUTED_STYLE_PROP(grid_column_gap,               GridColumnGap)
 COMPUTED_STYLE_PROP(grid_column_start,             GridColumnStart)
 COMPUTED_STYLE_PROP(grid_row_end,                  GridRowEnd)
-COMPUTED_STYLE_PROP(grid_row_gap,                  GridRowGap)
 COMPUTED_STYLE_PROP(grid_row_start,                GridRowStart)
 COMPUTED_STYLE_PROP(grid_template_areas,           GridTemplateAreas)
 COMPUTED_STYLE_PROP(grid_template_columns,         GridTemplateColumns)
@@ -217,6 +215,7 @@ COMPUTED_STYLE_PROP(position,                      Position)
 COMPUTED_STYLE_PROP(quotes,                        Quotes)
 COMPUTED_STYLE_PROP(resize,                        Resize)
 COMPUTED_STYLE_PROP(right,                         Right)
+COMPUTED_STYLE_PROP(row_gap,                       RowGap)
 COMPUTED_STYLE_PROP(ruby_align,                    RubyAlign)
 COMPUTED_STYLE_PROP(ruby_position,                 RubyPosition)
 COMPUTED_STYLE_PROP(scroll_behavior,               ScrollBehavior)
diff --git a/layout/style/nsRuleNode.cpp b/layout/style/nsRuleNode.cpp
index e59c10cd2f..e824e77211 100644
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -8873,25 +8873,27 @@ nsRuleNode::ComputePositionData(void* aStartStruct,
               parentPos->mGridRowEnd,
               conditions);
 
-  // grid-column-gap
-  if (SetCoord(*aRuleData->ValueForGridColumnGap(),
-               pos->mGridColumnGap, parentPos->mGridColumnGap,
-               SETCOORD_LPH | SETCOORD_INITIAL_ZERO | SETCOORD_STORE_CALC |
-               SETCOORD_CALC_CLAMP_NONNEGATIVE | SETCOORD_UNSET_INITIAL,
+  // column-gap: normal, length, percent, calc, inherit, initial
+  if (SetCoord(*aRuleData->ValueForColumnGap(),
+               pos->mColumnGap, parentPos->mColumnGap,
+               SETCOORD_LPH | SETCOORD_NORMAL | SETCOORD_INITIAL_NORMAL |
+               SETCOORD_STORE_CALC | SETCOORD_CALC_CLAMP_NONNEGATIVE |
+               SETCOORD_UNSET_INITIAL,
                aContext, mPresContext, conditions)) {
   } else {
-    MOZ_ASSERT(aRuleData->ValueForGridColumnGap()->GetUnit() == eCSSUnit_Null,
+    MOZ_ASSERT(aRuleData->ValueForColumnGap()->GetUnit() == eCSSUnit_Null,
                "unexpected unit");
   }
 
-  // grid-row-gap
-  if (SetCoord(*aRuleData->ValueForGridRowGap(),
-               pos->mGridRowGap, parentPos->mGridRowGap,
-               SETCOORD_LPH | SETCOORD_INITIAL_ZERO | SETCOORD_STORE_CALC |
-               SETCOORD_CALC_CLAMP_NONNEGATIVE | SETCOORD_UNSET_INITIAL,
+  // row-gap: normal, length, percent, calc, inherit, initial
+  if (SetCoord(*aRuleData->ValueForRowGap(),
+               pos->mRowGap, parentPos->mRowGap,
+               SETCOORD_LPH | SETCOORD_NORMAL | SETCOORD_INITIAL_NORMAL |
+               SETCOORD_STORE_CALC | SETCOORD_CALC_CLAMP_NONNEGATIVE |
+               SETCOORD_UNSET_INITIAL,
                aContext, mPresContext, conditions)) {
   } else {
-    MOZ_ASSERT(aRuleData->ValueForGridRowGap()->GetUnit() == eCSSUnit_Null,
+    MOZ_ASSERT(aRuleData->ValueForRowGap()->GetUnit() == eCSSUnit_Null,
                "unexpected unit");
   }
 
@@ -9298,18 +9300,6 @@ nsRuleNode::ComputeColumnData(void* aStartStruct,
              SETCOORD_UNSET_INITIAL,
            aContext, mPresContext, conditions);
 
-  // column-gap: length, inherit, normal
-  SetCoord(*aRuleData->ValueForColumnGap(),
-           column->mColumnGap, parent->mColumnGap,
-           SETCOORD_LH | SETCOORD_NORMAL | SETCOORD_INITIAL_NORMAL |
-             SETCOORD_CALC_LENGTH_ONLY | SETCOORD_UNSET_INITIAL,
-           aContext, mPresContext, conditions);
-  // clamp negative calc() to 0
-  if (column->mColumnGap.GetUnit() == eStyleUnit_Coord) {
-    column->mColumnGap.SetCoordValue(
-      std::max(column->mColumnGap.GetCoordValue(), 0));
-  }
-
   // column-count: auto, integer, inherit
   const nsCSSValue* columnCountValue = aRuleData->ValueForColumnCount();
   if (eCSSUnit_Auto == columnCountValue->GetUnit() ||
diff --git a/layout/style/nsStyleStruct.cpp b/layout/style/nsStyleStruct.cpp
index acf287ea8a..e83a6dcf95 100644
--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -825,7 +825,6 @@ nsStyleXUL::CalcDifference(const nsStyleXUL& aNewData) const
 nsStyleColumn::nsStyleColumn(StyleStructContext aContext)
   : mColumnCount(NS_STYLE_COLUMN_COUNT_AUTO)
   , mColumnWidth(eStyleUnit_Auto)
-  , mColumnGap(eStyleUnit_Normal)
   , mColumnRuleColor(StyleComplexColor::CurrentColor())
   , mColumnRuleStyle(NS_STYLE_BORDER_STYLE_NONE)
   , mColumnFill(NS_STYLE_COLUMN_FILL_BALANCE)
@@ -844,7 +843,6 @@ nsStyleColumn::~nsStyleColumn()
 nsStyleColumn::nsStyleColumn(const nsStyleColumn& aSource)
   : mColumnCount(aSource.mColumnCount)
   , mColumnWidth(aSource.mColumnWidth)
-  , mColumnGap(aSource.mColumnGap)
   , mColumnRuleColor(aSource.mColumnRuleColor)
   , mColumnRuleStyle(aSource.mColumnRuleStyle)
   , mColumnFill(aSource.mColumnFill)
@@ -867,7 +865,6 @@ nsStyleColumn::CalcDifference(const nsStyleColumn& aNewData) const
   }
 
   if (mColumnWidth != aNewData.mColumnWidth ||
-      mColumnGap != aNewData.mColumnGap ||
       mColumnFill != aNewData.mColumnFill) {
     return NS_STYLE_HINT_REFLOW;
   }
@@ -1423,8 +1420,8 @@ nsStylePosition::nsStylePosition(StyleStructContext aContext)
   , mFlexGrow(0.0f)
   , mFlexShrink(1.0f)
   , mZIndex(eStyleUnit_Auto)
-  , mGridColumnGap(nscoord(0), nsStyleCoord::CoordConstructor)
-  , mGridRowGap(nscoord(0), nsStyleCoord::CoordConstructor)
+  , mColumnGap(eStyleUnit_Normal)
+  , mRowGap(eStyleUnit_Normal)
 {
   MOZ_COUNT_CTOR(nsStylePosition);
 
@@ -1489,8 +1486,8 @@ nsStylePosition::nsStylePosition(const nsStylePosition& aSource)
   , mGridColumnEnd(aSource.mGridColumnEnd)
   , mGridRowStart(aSource.mGridRowStart)
   , mGridRowEnd(aSource.mGridRowEnd)
-  , mGridColumnGap(aSource.mGridColumnGap)
-  , mGridRowGap(aSource.mGridRowGap)
+  , mColumnGap(aSource.mColumnGap)
+  , mRowGap(aSource.mRowGap)
 {
   MOZ_COUNT_CTOR(nsStylePosition);
 }
@@ -1590,8 +1587,8 @@ nsStylePosition::CalcDifference(const nsStylePosition& aNewData,
       mGridColumnEnd != aNewData.mGridColumnEnd ||
       mGridRowStart != aNewData.mGridRowStart ||
       mGridRowEnd != aNewData.mGridRowEnd ||
-      mGridColumnGap != aNewData.mGridColumnGap ||
-      mGridRowGap != aNewData.mGridRowGap) {
+      mColumnGap != aNewData.mColumnGap ||
+      mRowGap != aNewData.mRowGap) {
     return hint |
            nsChangeHint_AllReflowHints;
   }
diff --git a/layout/style/nsStyleStruct.h b/layout/style/nsStyleStruct.h
index 35ff071a55..a01685cc44 100644
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -1848,8 +1848,8 @@ public:
   nsStyleGridLine mGridColumnEnd;
   nsStyleGridLine mGridRowStart;
   nsStyleGridLine mGridRowEnd;
-  nsStyleCoord    mGridColumnGap;       // [reset] coord, percent, calc
-  nsStyleCoord    mGridRowGap;          // [reset] coord, percent, calc
+  nsStyleCoord    mColumnGap;       // [reset] normal, coord, percent, calc
+  nsStyleCoord    mRowGap;          // [reset] normal, coord, percent, calc
 
   // FIXME: Logical-coordinate equivalents to these WidthDepends... and
   // HeightDepends... methods have been introduced (see below); we probably
@@ -3502,7 +3502,6 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsStyleColumn
 
   uint32_t     mColumnCount; // [reset] see nsStyleConsts.h
   nsStyleCoord mColumnWidth; // [reset] coord, auto
-  nsStyleCoord mColumnGap;   // [reset] <length-percentage> | normal
 
   mozilla::StyleComplexColor mColumnRuleColor; // [reset]
   uint8_t      mColumnRuleStyle;  // [reset]