Bug 1398482 part 1 - [css-grid][css-flexbox][css-multicol] Add 'row-gap' and 'gap' properties; make 'grid-[column|row]-gap' and 'grid-gap' alias the respective unprefixed properties (Stylo part). r=emilio
authorMats Palmgren <mats@mozilla.com>
Tue, 24 Apr 2018 01:52:51 +0200
changeset 415190 ef9fa58539c0ab44cc1b85cb74902002417971b9
parent 415189 c8375fd1486018c5bfd33f5880cdd7ceab2fdd2a
child 415191 8478901f3de66ebbd6c66cc0fd3dd112e0b1ce5e
push id33892
push userebalazs@mozilla.com
push dateTue, 24 Apr 2018 09:42:58 +0000
treeherdermozilla-central@26e53729a109 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1398482
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1398482 part 1 - [css-grid][css-flexbox][css-multicol] Add 'row-gap' and 'gap' properties; make 'grid-[column|row]-gap' and 'grid-gap' alias the respective unprefixed properties (Stylo part). r=emilio This also makes 'normal' the initial value for the grid-* properties, per: https://github.com/w3c/csswg-drafts/issues/2294#issuecomment-369313438
servo/components/style/properties/longhand/column.mako.rs
servo/components/style/properties/longhand/position.mako.rs
servo/components/style/properties/shorthand/position.mako.rs
--- a/servo/components/style/properties/longhand/column.mako.rs
+++ b/servo/components/style/properties/longhand/column.mako.rs
@@ -26,27 +26,16 @@
     animation_value_type="AnimatedColumnCount",
     extra_prefixes="moz",
     spec="https://drafts.csswg.org/css-multicol/#propdef-column-count",
     servo_restyle_damage="rebuild_and_reflow",
 )}
 
 
 
-${helpers.predefined_type(
-    "column-gap",
-    "length::NonNegativeLengthOrPercentageOrNormal",
-    "Either::Second(Normal)",
-    extra_prefixes="moz",
-    servo_pref="layout.columns.enabled",
-    animation_value_type="NonNegativeLengthOrPercentageOrNormal",
-    spec="https://drafts.csswg.org/css-multicol/#propdef-column-gap",
-    servo_restyle_damage = "reflow",
-)}
-
 ${helpers.single_keyword("column-fill", "balance auto", extra_prefixes="moz",
                          products="gecko", animation_value_type="discrete",
                          spec="https://drafts.csswg.org/css-multicol/#propdef-column-fill")}
 
 ${helpers.predefined_type("column-rule-width",
                           "BorderSideWidth",
                           "::values::computed::NonNegativeLength::new(3.)",
                           initial_specified_value="specified::BorderSideWidth::Medium",
--- a/servo/components/style/properties/longhand/position.mako.rs
+++ b/servo/components/style/properties/longhand/position.mako.rs
@@ -297,23 +297,16 @@ macro_rules! impl_align_conversions {
                           "Position",
                           "computed::Position::zero()",
                           products="gecko",
                           boxed=True,
                           spec="https://drafts.csswg.org/css-images-3/#the-object-position",
                           animation_value_type="ComputedValue")}
 
 % for kind in ["row", "column"]:
-    ${helpers.predefined_type("grid-%s-gap" % kind,
-                              "NonNegativeLengthOrPercentage",
-                              "computed::NonNegativeLengthOrPercentage::zero()",
-                              spec="https://drafts.csswg.org/css-grid/#propdef-grid-%s-gap" % kind,
-                              animation_value_type="NonNegativeLengthOrPercentage",
-                              products="gecko")}
-
     % for range in ["start", "end"]:
         ${helpers.predefined_type("grid-%s-%s" % (kind, range),
                                   "GridLine",
                                   "Default::default()",
                                   animation_value_type="discrete",
                                   spec="https://drafts.csswg.org/css-grid/#propdef-grid-%s-%s" % (kind, range),
                                   products="gecko",
                                   boxed=True)}
@@ -350,8 +343,28 @@ macro_rules! impl_align_conversions {
                           spec="https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow")}
 
 ${helpers.predefined_type("grid-template-areas",
                           "GridTemplateAreas",
                           initial_value="computed::GridTemplateAreas::none()",
                           products="gecko",
                           animation_value_type="discrete",
                           spec="https://drafts.csswg.org/css-grid/#propdef-grid-template-areas")}
+
+${helpers.predefined_type("column-gap",
+                          "length::NonNegativeLengthOrPercentageOrNormal",
+                          "Either::Second(Normal)",
+                          alias="grid-column-gap",
+                          extra_prefixes="moz",
+                          servo_pref="layout.columns.enabled",
+                          spec="https://drafts.csswg.org/css-align-3/#propdef-column-gap",
+                          animation_value_type="NonNegativeLengthOrPercentageOrNormal",
+                          servo_restyle_damage = "reflow")}
+
+// no need for -moz- prefixed alias for this property
+${helpers.predefined_type("row-gap",
+                          "length::NonNegativeLengthOrPercentageOrNormal",
+                          "Either::Second(Normal)",
+                          alias="grid-row-gap",
+                          servo_pref="layout.columns.enabled",
+                          spec="https://drafts.csswg.org/css-align-3/#propdef-row-gap",
+                          animation_value_type="NonNegativeLengthOrPercentageOrNormal",
+                          servo_restyle_damage = "reflow")}
--- a/servo/components/style/properties/shorthand/position.mako.rs
+++ b/servo/components/style/properties/shorthand/position.mako.rs
@@ -103,40 +103,40 @@
             // browsers currently agree on using `0%`. This is a spec
             // change which hasn't been adopted by browsers:
             // https://github.com/w3c/csswg-drafts/commit/2c446befdf0f686217905bdd7c92409f6bd3921b
             flex_basis: basis.unwrap_or(FlexBasis::zero_percent()),
         })
     }
 </%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"
+<%helpers:shorthand name="gap" alias="grid-gap" sub_properties="row-gap column-gap"
+                    spec="https://drafts.csswg.org/css-align-3/#gap-shorthand"
                     products="gecko">
-  use properties::longhands::{grid_row_gap, grid_column_gap};
+  use properties::longhands::{row_gap, column_gap};
 
   pub fn parse_value<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
                              -> Result<Longhands, ParseError<'i>> {
-      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());
+      let r_gap = row_gap::parse(context, input)?;
+      let c_gap = input.try(|input| column_gap::parse(context, input)).unwrap_or(r_gap.clone());
 
       Ok(expanded! {
-        grid_row_gap: row_gap,
-        grid_column_gap: column_gap,
+        row_gap: r_gap,
+        column_gap: c_gap,
       })
   }
 
   impl<'a> ToCss for LonghandsToSerialize<'a>  {
       fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
-          if self.grid_row_gap == self.grid_column_gap {
-            self.grid_row_gap.to_css(dest)
+          if self.row_gap == self.column_gap {
+            self.row_gap.to_css(dest)
           } else {
-            self.grid_row_gap.to_css(dest)?;
+            self.row_gap.to_css(dest)?;
             dest.write_str(" ")?;
-            self.grid_column_gap.to_css(dest)
+            self.column_gap.to_css(dest)
           }
       }
   }
 
 </%helpers:shorthand>
 
 % for kind in ["row", "column"]:
 <%helpers:shorthand name="grid-${kind}" sub_properties="grid-${kind}-start grid-${kind}-end"