Auto merge of #16174 - Adynatos:15200-serialization-with-comma, r=Wafflespeanut

Added missing comma in {background,mask}-position

<!-- Please describe your changes on the following line: -->
Fixed #15200 - missing comma in serialized {background,mask}-position with multiple values.

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #15200 (github issue number if applicable).

<!-- Either: -->
- [X] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

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

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

@@ -234,6 +234,9 @@
                 self.background_position_x.0[i].to_css(dest)?;
                 dest.write_str(" ")?;
                 self.background_position_y.0[i].to_css(dest)?;
+                if i < len - 1 {
+                    dest.write_str(", ")?;
+                }
             }
             Ok(())
         }

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

@@ -226,7 +226,11 @@
 
             for i in 0..len {
                 self.mask_position_x.0[i].to_css(dest)?;
+                dest.write_str(" ")?;
                 self.mask_position_y.0[i].to_css(dest)?;
+                if i < len - 1 {
+                    dest.write_str(", ")?;
+                }
             }
 
             Ok(())

tests/unit/style/properties/serialization.rs

@@ -741,14 +741,14 @@ mod shorthand_serialization {
             // https://github.com/servo/servo/issues/15398 )
             // With background, the color is one exception as it should only appear once for
             // multiple backgrounds.
-            // Below, background-position and background-origin only have one value.
+            // Below background-origin only has one value.
             let block_text = "\
                 background-color: rgb(0, 0, 255); \
                 background-image: url(\"http://servo/test.png\"), none; \
                 background-repeat: repeat-x, repeat-y; \
                 background-attachment: scroll, scroll; \
                 background-size: 70px 50px, 20px 30px; \
-                background-position: 7px 4px; \
+                background-position: 7px 4px, 5px 6px; \
                 background-origin: border-box; \
                 background-clip: padding-box, padding-box;";
             let block = parse_declaration_block(block_text);
@@ -905,6 +905,14 @@ mod shorthand_serialization {
                 repeat-x padding-box subtract;"
             );
         }
+
+        #[test]
+        fn serialize_mask_position_with_multiple_values() {
+            let block_text = "mask-position: 1px 2px, 4px 3px;";
+            let block = parse_declaration_block(block_text);
+            let serialization = block.to_css_string();
+            assert_eq!(serialization, block_text);
+        }
     }
 
     mod scroll_snap_type {