Auto merge of #15516 - absoludity:fix-animation-serialization-15398, r=upsuper

Animation longhand serialization should be a list of each animation rather than a list of lists for each longhand.

Fixes part of #15398 -  serialization should be a list of each animation, rather than a list of lists for each longhand.

---
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes are prework for #15398

- [X] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- 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/15516)
<!-- Reviewable:end -->

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

@@ -308,28 +308,55 @@ macro_rules! try_parse_one {
 
     impl<'a> LonghandsToSerialize<'a>  {
         fn to_css_declared<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            try!(self.animation_duration.to_css(dest));
-            try!(write!(dest, " "));
+            fn extract_value<T>(x: &DeclaredValue<T>) -> Option< &T> {
+                match *x {
+                    DeclaredValue::Value(ref val) => Some(val),
+                    _ => None,
+                }
+            }
 
-            try!(self.animation_timing_function.to_css(dest));
-            try!(write!(dest, " "));
+            // TODO: When the lengths are different, shorthand shouldn't be serialized
+            // at all.
+            use std::cmp;
+            let mut len = 0;
+            % for name in "duration timing_function delay direction fill_mode iteration_count play_state name".split():
+                len = cmp::max(len, extract_value(self.animation_${name}).map(|i| i.0.len())
+                                                                         .unwrap_or(0));
+            % endfor
 
-            try!(self.animation_delay.to_css(dest));
-            try!(write!(dest, " "));
+            // There should be at least one declared value
+            if len == 0 {
+                return dest.write_str("")
+            }
 
-            try!(self.animation_direction.to_css(dest));
-            try!(write!(dest, " "));
+            let mut first = true;
+            for i in 0..len {
+            % for name in "duration timing_function delay direction fill_mode iteration_count play_state name".split():
+                let ${name} = if let DeclaredValue::Value(ref arr) = *self.animation_${name} {
+                    arr.0.get(i % arr.0.len())
+                } else {
+                    None
+                };
+            % endfor
 
-            try!(self.animation_fill_mode.to_css(dest));
-            try!(write!(dest, " "));
+                if first {
+                    first = false;
+                } else {
+                    try!(write!(dest, ", "));
+                }
 
-            try!(self.animation_iteration_count.to_css(dest));
-            try!(write!(dest, " "));
+            % for name in "duration timing_function delay direction fill_mode iteration_count play_state".split():
+                if let Some(${name}) = ${name} {
+                    try!(${name}.to_css(dest));
+                    try!(write!(dest, " "));
+                }
+            % endfor
 
-            try!(self.animation_play_state.to_css(dest));
-            try!(write!(dest, " "));
-
-            self.animation_name.to_css(dest)
+                if let Some(name) = name {
+                    try!(name.to_css(dest));
+                }
+            }
+            Ok(())
         }
     }
 </%helpers:shorthand>