Merging upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

20 files changed, 170 insertions, 78 deletions

diff --git a/servo/components/style/properties/shorthands/background.mako.rs b/servo/components/style/properties/shorthands/background.mako.rs
index 08838233f6..5fee5cb2b0 100644
--- a/servo/components/style/properties/shorthands/background.mako.rs
+++ b/servo/components/style/properties/shorthands/background.mako.rs
@@ -6,7 +6,7 @@
 
 // TODO: other background-* properties
 <%helpers:shorthand name="background"
-                    engines="gecko servo-2013 servo-2020"
+                    engines="gecko servo"
                     sub_properties="background-color background-position-x background-position-y background-repeat
                                     background-attachment background-image background-size background-origin
                                     background-clip"
@@ -230,7 +230,7 @@
 </%helpers:shorthand>
 
 <%helpers:shorthand name="background-position"
-                    engines="gecko servo-2013 servo-2020"
+                    engines="gecko servo"
                     flags="SHORTHAND_IN_GETCS"
                     sub_properties="background-position-x background-position-y"
                     spec="https://drafts.csswg.org/css-backgrounds-4/#the-background-position">
diff --git a/servo/components/style/properties/shorthands/border.mako.rs b/servo/components/style/properties/shorthands/border.mako.rs
index c6a87f3197..2eeb691e24 100644
--- a/servo/components/style/properties/shorthands/border.mako.rs
+++ b/servo/components/style/properties/shorthands/border.mako.rs
@@ -9,7 +9,7 @@ ${helpers.four_sides_shorthand(
     "border-color",
     "border-%s-color",
     "specified::Color::parse",
-    engines="gecko servo-2013 servo-2020",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-backgrounds/#border-color",
     allow_quirks="Yes",
 )}
@@ -17,13 +17,13 @@ ${helpers.four_sides_shorthand(
 ${helpers.four_sides_shorthand(
     "border-style",
     "border-%s-style",
-    engines="gecko servo-2013 servo-2020",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-backgrounds/#border-style",
 )}
 
 <%helpers:shorthand
     name="border-width"
-    engines="gecko servo-2013 servo-2020"
+    engines="gecko servo"
     sub_properties="${
         ' '.join('border-%s-width' % side
                  for side in PHYSICAL_SIDES)}"
@@ -104,7 +104,7 @@ pub fn parse_border<'i, 't>(
     %>
     <%helpers:shorthand
         name="border-${side}"
-        engines="gecko servo-2013 servo-2020"
+        engines="gecko servo"
         sub_properties="${' '.join(
             'border-%s-%s' % (side, prop)
             for prop in ['width', 'style', 'color']
@@ -139,7 +139,7 @@ pub fn parse_border<'i, 't>(
 % endfor
 
 <%helpers:shorthand name="border"
-    engines="gecko servo-2013 servo-2020"
+    engines="gecko servo"
     sub_properties="${' '.join('border-%s-%s' % (side, prop)
         for side in PHYSICAL_SIDES for prop in ['width', 'style', 'color']
         )}
@@ -232,7 +232,7 @@ pub fn parse_border<'i, 't>(
 
 <%helpers:shorthand
     name="border-radius"
-    engines="gecko servo-2013 servo-2020"
+    engines="gecko servo"
     sub_properties="${' '.join(
         'border-%s-radius' % (corner)
          for corner in ['top-left', 'top-right', 'bottom-right', 'bottom-left']
@@ -278,7 +278,8 @@ pub fn parse_border<'i, 't>(
 
 <%helpers:shorthand
     name="border-image"
-    engines="gecko servo-2013"
+    engines="gecko servo"
+    servo_pref="layout.legacy_layout",
     sub_properties="border-image-outset
         border-image-repeat border-image-slice border-image-source border-image-width"
     extra_prefixes="moz:layout.css.prefixes.border-image webkit"
@@ -402,7 +403,7 @@ pub fn parse_border<'i, 't>(
             spec = "https://drafts.csswg.org/css-logical/#propdef-border-%s-%s" % (axis, prop)
         %>
         <%helpers:shorthand
-            engines="gecko servo-2013 servo-2020"
+            engines="gecko servo"
             name="border-${axis}-${prop}"
             sub_properties="${' '.join(
                 'border-%s-%s-%s' % (axis, side, prop)
@@ -448,7 +449,7 @@ pub fn parse_border<'i, 't>(
     %>
     <%helpers:shorthand
         name="border-${axis}"
-        engines="gecko servo-2013 servo-2020"
+        engines="gecko servo"
         sub_properties="${' '.join(
             'border-%s-%s-width' % (axis, side)
             for side in ['start', 'end']
diff --git a/servo/components/style/properties/shorthands/box.mako.rs b/servo/components/style/properties/shorthands/box.mako.rs
index f644687dc0..078a511ae9 100644
--- a/servo/components/style/properties/shorthands/box.mako.rs
+++ b/servo/components/style/properties/shorthands/box.mako.rs
@@ -8,7 +8,7 @@ ${helpers.two_properties_shorthand(
     "overflow",
     "overflow-x",
     "overflow-y",
-    engines="gecko servo-2013 servo-2020",
+    engines="gecko servo",
     flags="SHORTHAND_IN_GETCS",
     spec="https://drafts.csswg.org/css-overflow/#propdef-overflow",
 )}
@@ -159,13 +159,7 @@ ${helpers.two_properties_shorthand(
         context: &ParserContext,
         input: &mut Parser<'i, 't>,
     ) -> Result<Longhands, ParseError<'i>> {
-        let offset_position =
-            if static_prefs::pref!("layout.css.motion-path-offset-position.enabled") {
-                input.try_parse(|i| OffsetPosition::parse(context, i)).ok()
-            } else {
-                None
-            };
-
+        let offset_position = input.try_parse(|i| OffsetPosition::parse(context, i)).ok();
         let offset_path = input.try_parse(|i| OffsetPath::parse(context, i)).ok();
 
         // Must have one of [offset-position, offset-path].
@@ -212,24 +206,19 @@ ${helpers.two_properties_shorthand(
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
         fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
-            if let Some(offset_position) = self.offset_position {
-                // The basic concept is: we must serialize offset-position or offset-path group.
-                // offset-path group means "offset-path offset-distance offset-rotate".
-                let must_serialize_path = *self.offset_path != OffsetPath::None
-                    || (!self.offset_distance.is_zero() || !self.offset_rotate.is_auto());
-                let position_is_default = matches!(offset_position, OffsetPosition::Normal);
-                if !position_is_default || !must_serialize_path {
-                    offset_position.to_css(dest)?;
-                }
+            // The basic concept is: we must serialize offset-position or offset-path group.
+            // offset-path group means "offset-path offset-distance offset-rotate".
+            let must_serialize_path = *self.offset_path != OffsetPath::None
+                || (!self.offset_distance.is_zero() || !self.offset_rotate.is_auto());
+            let position_is_default = matches!(self.offset_position, OffsetPosition::Normal);
+            if !position_is_default || !must_serialize_path {
+                self.offset_position.to_css(dest)?;
+            }
 
-                if must_serialize_path {
-                    if !position_is_default {
-                        dest.write_char(' ')?;
-                    }
-                    self.offset_path.to_css(dest)?;
+            if must_serialize_path {
+                if !position_is_default {
+                    dest.write_char(' ')?;
                 }
-            } else {
-                // If the pref is off, we always show offset-path.
                 self.offset_path.to_css(dest)?;
             }
 
diff --git a/servo/components/style/properties/shorthands/column.mako.rs b/servo/components/style/properties/shorthands/column.mako.rs
index 3740775a7e..4cf9a8d786 100644
--- a/servo/components/style/properties/shorthands/column.mako.rs
+++ b/servo/components/style/properties/shorthands/column.mako.rs
@@ -5,9 +5,9 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="columns"
-                    engines="gecko servo-2013"
+                    engines="gecko servo"
                     sub_properties="column-width column-count"
-                    servo_2013_pref="layout.columns.enabled",
+                    servo_pref="layout.columns.enabled"
                     spec="https://drafts.csswg.org/css-multicol/#propdef-columns">
     use crate::properties::longhands::{column_count, column_width};
 
diff --git a/servo/components/style/properties/shorthands/counters.mako.rs b/servo/components/style/properties/shorthands/counters.mako.rs
new file mode 100644
index 0000000000..daa3e8897c
--- /dev/null
+++ b/servo/components/style/properties/shorthands/counters.mako.rs
@@ -0,0 +1,3 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
diff --git a/servo/components/style/properties/shorthands/effects.mako.rs b/servo/components/style/properties/shorthands/effects.mako.rs
new file mode 100644
index 0000000000..daa3e8897c
--- /dev/null
+++ b/servo/components/style/properties/shorthands/effects.mako.rs
@@ -0,0 +1,3 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
diff --git a/servo/components/style/properties/shorthands/font.mako.rs b/servo/components/style/properties/shorthands/font.mako.rs
index 17dcf9d926..aaf0895aa5 100644
--- a/servo/components/style/properties/shorthands/font.mako.rs
+++ b/servo/components/style/properties/shorthands/font.mako.rs
@@ -7,7 +7,7 @@
 
 <%helpers:shorthand
     name="font"
-    engines="gecko servo-2013 servo-2020"
+    engines="gecko servo"
     sub_properties="
         font-style
         font-variant-caps
@@ -321,7 +321,8 @@
 </%helpers:shorthand>
 
 <%helpers:shorthand name="font-variant"
-                    engines="gecko servo-2013"
+                    engines="gecko servo"
+                    servo_pref="layout.legacy_layout",
                     flags="SHORTHAND_IN_GETCS"
                     sub_properties="font-variant-caps
                                     ${'font-variant-alternates' if engine == 'gecko' else ''}
diff --git a/servo/components/style/properties/shorthands/inherited_box.mako.rs b/servo/components/style/properties/shorthands/inherited_box.mako.rs
new file mode 100644
index 0000000000..daa3e8897c
--- /dev/null
+++ b/servo/components/style/properties/shorthands/inherited_box.mako.rs
@@ -0,0 +1,3 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
diff --git a/servo/components/style/properties/shorthands/inherited_table.mako.rs b/servo/components/style/properties/shorthands/inherited_table.mako.rs
new file mode 100644
index 0000000000..daa3e8897c
--- /dev/null
+++ b/servo/components/style/properties/shorthands/inherited_table.mako.rs
@@ -0,0 +1,3 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
diff --git a/servo/components/style/properties/shorthands/inherited_ui.mako.rs b/servo/components/style/properties/shorthands/inherited_ui.mako.rs
new file mode 100644
index 0000000000..daa3e8897c
--- /dev/null
+++ b/servo/components/style/properties/shorthands/inherited_ui.mako.rs
@@ -0,0 +1,3 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
diff --git a/servo/components/style/properties/shorthands/list.mako.rs b/servo/components/style/properties/shorthands/list.mako.rs
index 2e234e3d8f..183c5ab5da 100644
--- a/servo/components/style/properties/shorthands/list.mako.rs
+++ b/servo/components/style/properties/shorthands/list.mako.rs
@@ -5,7 +5,7 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="list-style"
-                    engines="gecko servo-2013 servo-2020"
+                    engines="gecko servo"
                     sub_properties="list-style-position list-style-image list-style-type"
                     spec="https://drafts.csswg.org/css-lists/#propdef-list-style">
     use crate::properties::longhands::{list_style_image, list_style_position, list_style_type};
@@ -110,7 +110,11 @@
             use longhands::list_style_type::SpecifiedValue as ListStyleType;
             use longhands::list_style_image::SpecifiedValue as ListStyleImage;
             let mut have_one_non_initial_value = false;
-            if self.list_style_position != &ListStylePosition::Outside {
+            #[cfg(feature = "gecko")]
+            let position_is_initial = self.list_style_position == &ListStylePosition::Outside;
+            #[cfg(feature = "servo")]
+            let position_is_initial = matches!(self.list_style_position, None | Some(&ListStylePosition::Outside));
+            if !position_is_initial {
                 self.list_style_position.to_css(dest)?;
                 have_one_non_initial_value = true;
             }
@@ -121,7 +125,11 @@
                 self.list_style_image.to_css(dest)?;
                 have_one_non_initial_value = true;
             }
-            if self.list_style_type != &ListStyleType::disc() {
+            #[cfg(feature = "gecko")]
+            let type_is_initial = self.list_style_type == &ListStyleType::disc();
+            #[cfg(feature = "servo")]
+            let type_is_initial = self.list_style_type == &ListStyleType::Disc;
+            if !type_is_initial {
                 if have_one_non_initial_value {
                     dest.write_char(' ')?;
                 }
@@ -129,7 +137,14 @@
                 have_one_non_initial_value = true;
             }
             if !have_one_non_initial_value {
+                #[cfg(feature = "gecko")]
                 self.list_style_position.to_css(dest)?;
+                #[cfg(feature = "servo")]
+                if let Some(position) = self.list_style_position {
+                    position.to_css(dest)?;
+                } else {
+                    self.list_style_type.to_css(dest)?;
+                }
             }
             Ok(())
         }
diff --git a/servo/components/style/properties/shorthands/margin.mako.rs b/servo/components/style/properties/shorthands/margin.mako.rs
index 6b5bf7e467..ba994316a2 100644
--- a/servo/components/style/properties/shorthands/margin.mako.rs
+++ b/servo/components/style/properties/shorthands/margin.mako.rs
@@ -9,7 +9,7 @@ ${helpers.four_sides_shorthand(
     "margin",
     "margin-%s",
     "specified::LengthPercentageOrAuto::parse",
-    engines="gecko servo-2013 servo-2020",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-box/#propdef-margin",
     rule_types_allowed=DEFAULT_RULES_AND_PAGE,
     allow_quirks="Yes",
@@ -20,7 +20,7 @@ ${helpers.two_properties_shorthand(
     "margin-block-start",
     "margin-block-end",
     "specified::LengthPercentageOrAuto::parse",
-    engines="gecko servo-2013 servo-2020",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-logical/#propdef-margin-block"
 )}
 
@@ -29,7 +29,7 @@ ${helpers.two_properties_shorthand(
     "margin-inline-start",
     "margin-inline-end",
     "specified::LengthPercentageOrAuto::parse",
-    engines="gecko servo-2013 servo-2020",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-logical/#propdef-margin-inline"
 )}
 
diff --git a/servo/components/style/properties/shorthands/outline.mako.rs b/servo/components/style/properties/shorthands/outline.mako.rs
index 6ee8ed22c9..ff77e1175e 100644
--- a/servo/components/style/properties/shorthands/outline.mako.rs
+++ b/servo/components/style/properties/shorthands/outline.mako.rs
@@ -5,7 +5,7 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="outline"
-                    engines="gecko servo-2013"
+                    engines="gecko servo"
                     sub_properties="outline-color outline-style outline-width"
                     spec="https://drafts.csswg.org/css-ui/#propdef-outline">
     use crate::properties::longhands::{outline_color, outline_width, outline_style};
diff --git a/servo/components/style/properties/shorthands/padding.mako.rs b/servo/components/style/properties/shorthands/padding.mako.rs
index 11ddfed3b1..dad0193708 100644
--- a/servo/components/style/properties/shorthands/padding.mako.rs
+++ b/servo/components/style/properties/shorthands/padding.mako.rs
@@ -8,7 +8,7 @@ ${helpers.four_sides_shorthand(
     "padding",
     "padding-%s",
     "specified::NonNegativeLengthPercentage::parse",
-    engines="gecko servo-2013 servo-2020",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-box-3/#propdef-padding",
     allow_quirks="Yes",
 )}
@@ -18,7 +18,7 @@ ${helpers.two_properties_shorthand(
     "padding-block-start",
     "padding-block-end",
     "specified::NonNegativeLengthPercentage::parse",
-    engines="gecko servo-2013 servo-2020",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-logical/#propdef-padding-block"
 )}
 
@@ -27,7 +27,7 @@ ${helpers.two_properties_shorthand(
     "padding-inline-start",
     "padding-inline-end",
     "specified::NonNegativeLengthPercentage::parse",
-    engines="gecko servo-2013 servo-2020",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-logical/#propdef-padding-inline"
 )}
 
diff --git a/servo/components/style/properties/shorthands/page.mako.rs b/servo/components/style/properties/shorthands/page.mako.rs
new file mode 100644
index 0000000000..daa3e8897c
--- /dev/null
+++ b/servo/components/style/properties/shorthands/page.mako.rs
@@ -0,0 +1,3 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
diff --git a/servo/components/style/properties/shorthands/position.mako.rs b/servo/components/style/properties/shorthands/position.mako.rs
index ed7df5e27a..ac09bb27d6 100644
--- a/servo/components/style/properties/shorthands/position.mako.rs
+++ b/servo/components/style/properties/shorthands/position.mako.rs
@@ -5,8 +5,8 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="flex-flow"
-                    engines="gecko servo-2013 servo-2020",
-                    servo_2020_pref="layout.flexbox.enabled",
+                    engines="gecko servo",
+                    servo_pref="layout.flexbox.enabled",
                     sub_properties="flex-direction flex-wrap"
                     extra_prefixes="webkit"
                     spec="https://drafts.csswg.org/css-flexbox/#flex-flow-property">
@@ -60,8 +60,8 @@
 </%helpers:shorthand>
 
 <%helpers:shorthand name="flex"
-                    engines="gecko servo-2013 servo-2020",
-                    servo_2020_pref="layout.flexbox.enabled",
+                    engines="gecko servo",
+                    servo_pref="layout.flexbox.enabled",
                     sub_properties="flex-grow flex-shrink flex-basis"
                     extra_prefixes="webkit"
                     derive_serialize="True"
@@ -858,7 +858,7 @@ ${helpers.four_sides_shorthand(
     "inset",
     "%s",
     "specified::LengthPercentageOrAuto::parse",
-    engines="gecko servo-2013",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-logical/#propdef-inset",
     allow_quirks="No",
 )}
@@ -868,7 +868,7 @@ ${helpers.two_properties_shorthand(
     "inset-block-start",
     "inset-block-end",
     "specified::LengthPercentageOrAuto::parse",
-    engines="gecko servo-2013",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-logical/#propdef-inset-block"
 )}
 
@@ -877,7 +877,7 @@ ${helpers.two_properties_shorthand(
     "inset-inline-start",
     "inset-inline-end",
     "specified::LengthPercentageOrAuto::parse",
-    engines="gecko servo-2013",
+    engines="gecko servo",
     spec="https://drafts.csswg.org/css-logical/#propdef-inset-inline"
 )}
 
diff --git a/servo/components/style/properties/shorthands/table.mako.rs b/servo/components/style/properties/shorthands/table.mako.rs
new file mode 100644
index 0000000000..daa3e8897c
--- /dev/null
+++ b/servo/components/style/properties/shorthands/table.mako.rs
@@ -0,0 +1,3 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
diff --git a/servo/components/style/properties/shorthands/text.mako.rs b/servo/components/style/properties/shorthands/text.mako.rs
index 5b071be2c4..a913f81875 100644
--- a/servo/components/style/properties/shorthands/text.mako.rs
+++ b/servo/components/style/properties/shorthands/text.mako.rs
@@ -5,7 +5,7 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="text-decoration"
-                    engines="gecko servo-2013 servo-2020"
+                    engines="gecko servo"
                     flags="SHORTHAND_IN_GETCS"
                     sub_properties="text-decoration-line
                     ${' text-decoration-style text-decoration-color text-decoration-thickness' if engine == 'gecko' else ''}"
diff --git a/servo/components/style/properties/shorthands/ui.mako.rs b/servo/components/style/properties/shorthands/ui.mako.rs
index 4a27d5e003..1915c65a63 100644
--- a/servo/components/style/properties/shorthands/ui.mako.rs
+++ b/servo/components/style/properties/shorthands/ui.mako.rs
@@ -18,7 +18,7 @@ macro_rules! try_parse_one {
 }
 
 <%helpers:shorthand name="transition"
-                    engines="gecko servo-2013 servo-2020"
+                    engines="gecko servo"
                     extra_prefixes="moz:layout.css.prefixes.transitions webkit"
                     sub_properties="transition-property transition-duration
                                     transition-timing-function
@@ -204,7 +204,7 @@ macro_rules! try_parse_one {
 </%helpers:shorthand>
 
 <%helpers:shorthand name="animation"
-                    engines="gecko servo-2013 servo-2020"
+                    engines="gecko servo"
                     extra_prefixes="moz:layout.css.prefixes.animations webkit"
                     sub_properties="animation-name animation-duration
                                     animation-timing-function animation-delay
@@ -295,6 +295,13 @@ macro_rules! try_parse_one {
 
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
         fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            use crate::values::specified::easing::TimingFunction;
+            use crate::values::specified::{
+                AnimationDirection, AnimationFillMode, AnimationPlayState,
+            };
+            use crate::Zero;
+            use style_traits::values::SequenceWriter;
+
             let len = self.animation_name.0.len();
             // There should be at least one declared value
             if len == 0 {
@@ -320,28 +327,83 @@ macro_rules! try_parse_one {
                     dest.write_str(", ")?;
                 }
 
-                % for name in props[2:]:
-                    self.animation_${name}.0[i].to_css(dest)?;
-                    dest.write_char(' ')?;
+                // We follow the order of this syntax:
+                // <single-animation> =
+                //   <animation-duration> ||
+                //   <easing-function> ||
+                //   <animation-delay> ||
+                //   <single-animation-iteration-count> ||
+                //   <single-animation-direction> ||
+                //   <single-animation-fill-mode> ||
+                //   <single-animation-play-state> ||
+                //   [ none | <keyframes-name> ] ||
+                //   <single-animation-timeline>
+                //
+                // https://drafts.csswg.org/css-animations-2/#animation-shorthand
+                //
+                // FIXME: Bug 1804574. The initial value of duration should be auto, per
+                // css-animations-2.
+                let has_duration = !self.animation_duration.0[i].is_zero();
+                let has_timing_function = !self.animation_timing_function.0[i].is_ease();
+                let has_delay = !self.animation_delay.0[i].is_zero();
+                let has_iteration_count = !self.animation_iteration_count.0[i].is_one();
+                let has_direction =
+                    !matches!(self.animation_direction.0[i], AnimationDirection::Normal);
+                let has_fill_mode =
+                    !matches!(self.animation_fill_mode.0[i], AnimationFillMode::None);
+                let has_play_state =
+                    !matches!(self.animation_play_state.0[i], AnimationPlayState::Running);
+                let animation_name = &self.animation_name.0[i];
+                let has_name = !animation_name.is_none();
+                let has_timeline = match self.animation_timeline {
+                    Some(timeline) => !timeline.0[i].is_auto(),
+                    _ => false,
+                };
+
+                let mut writer = SequenceWriter::new(dest, " ");
+
+                // To avoid ambiguity, we have to serialize duration if both duration is initial
+                // but delay is not. (In other words, it's ambiguous if we serialize delay only.)
+                if has_duration || has_delay {
+                    writer.item(&self.animation_duration.0[i])?;
+                }
+
+                if has_timing_function || TimingFunction::match_keywords(animation_name) {
+                    writer.item(&self.animation_timing_function.0[i])?;
+                }
+
+                // For animation-delay and animation-iteration-count.
+                % for name in props[4:6]:
+                if has_${name} {
+                    writer.item(&self.animation_${name}.0[i])?;
+                }
                 % endfor
 
-                self.animation_name.0[i].to_css(dest)?;
+                if has_direction || AnimationDirection::match_keywords(animation_name) {
+                    writer.item(&self.animation_direction.0[i])?;
+                }
+
+                if has_fill_mode || AnimationFillMode::match_keywords(animation_name) {
+                    writer.item(&self.animation_fill_mode.0[i])?;
+                }
 
-                // Based on the spec, the default values of other properties must be output in at
-                // least the cases necessary to distinguish an animation-name. The serialization
-                // order of animation-timeline is always later than animation-name, so it's fine
-                // to not serialize it if it is the default value. It's still possible to
-                // distinguish them (because we always serialize animation-name).
-                // https://drafts.csswg.org/css-animations-1/#animation
-                // https://drafts.csswg.org/css-animations-2/#typedef-single-animation
-                //
-                // Note: it's also fine to always serialize this. However, it seems Blink
-                // doesn't serialize default animation-timeline now, so we follow the same rule.
-                if let Some(ref timeline) = self.animation_timeline {
-                    if !timeline.0[i].is_auto() {
-                        dest.write_char(' ')?;
-                        timeline.0[i].to_css(dest)?;
-                    }
+                if has_play_state || AnimationPlayState::match_keywords(animation_name) {
+                    writer.item(&self.animation_play_state.0[i])?;
+                }
+
+                // If all values are initial, we must serialize animation-name.
+                let has_any = {
+                    has_timeline
+                % for name in props[2:]:
+                        || has_${name}
+                % endfor
+                };
+                if has_name || !has_any {
+                    writer.item(animation_name)?;
+                }
+
+                if has_timeline {
+                    writer.item(&self.animation_timeline.unwrap().0[i])?;
                 }
             }
             Ok(())
diff --git a/servo/components/style/properties/shorthands/xul.mako.rs b/servo/components/style/properties/shorthands/xul.mako.rs
new file mode 100644
index 0000000000..daa3e8897c
--- /dev/null
+++ b/servo/components/style/properties/shorthands/xul.mako.rs
@@ -0,0 +1,3 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */