Auto merge of #16081 - methyl:grip-gap-shorthand, r=Manishearth

Stylo: Add grid-gap shorthand

- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors

Should I add any tests?

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/16081)
<!-- Reviewable:end -->

components/style/properties/shorthand/position.mako.rs

@@ -127,3 +127,32 @@
         }
     }
 </%helpers:shorthand>
+
+<%helpers:shorthand name="grid-gap" sub_properties="grid-row-gap grid-column-gap"
+                    spec="https://drafts.csswg.org/css-grid/#propdef-grid-gap"
+                    products="gecko">
+  use properties::longhands::{grid_row_gap, grid_column_gap};
+
+  pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
+      let row_gap = grid_row_gap::parse(context, input)?;
+      let column_gap = input.try(|input| grid_column_gap::parse(context, input)).unwrap_or(row_gap.clone());
+
+      Ok(Longhands {
+        grid_row_gap: row_gap,
+        grid_column_gap: column_gap,
+      })
+  }
+
+  impl<'a> ToCss for LonghandsToSerialize<'a>  {
+      fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+          if self.grid_row_gap == self.grid_column_gap {
+            self.grid_row_gap.to_css(dest)
+          } else {
+            self.grid_row_gap.to_css(dest)?;
+            dest.write_str(" ")?;
+            self.grid_column_gap.to_css(dest)
+          }
+      }
+  }
+
+</%helpers:shorthand>