Auto merge of #16522 - chenpighead:stylo-border-reset-border-image, r=heycam

Reset longhands of border-image to their initial value while parsing border shorthand

To do so, we need to declare the border-image longhands as part of border
shorthand and always reset them.

Spec link: https://drafts.csswg.org/css-backgrounds-3/#the-border-shorthands

<!-- Please describe your changes on the following line: -->

---
<!-- 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 #15202  (github issue number if applicable).

<!-- Either: -->
- [ ] 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/16522)
<!-- Reviewable:end -->

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

@@ -122,13 +122,18 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
     </%helpers:shorthand>
 % endfor
 
-<%helpers:shorthand name="border" sub_properties="${' '.join(
+<%helpers:shorthand name="border"
-    'border-%s-%s' % (side, prop)
+    sub_properties="${' '.join('border-%s-%s' % (side, prop)
         for side in ['top', 'right', 'bottom', 'left']
-    for prop in ['color', 'style', 'width']
+        for prop in ['color', 'style', 'width'])}
-)}" spec="https://drafts.csswg.org/css-backgrounds/#border">
+        ${' '.join('border-image-%s' % name
+        for name in ['outset', 'repeat', 'slice', 'source', 'width'])}"
+    spec="https://drafts.csswg.org/css-backgrounds/#border">
 
     pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
+        use properties::longhands::{border_image_outset, border_image_repeat, border_image_slice};
+        use properties::longhands::{border_image_source, border_image_width};
+
         let (color, style, width) = try!(super::parse_border(context, input));
         Ok(Longhands {
             % for side in ["top", "right", "bottom", "left"]:
@@ -136,6 +141,12 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
                 border_${side}_style: style,
                 border_${side}_width: width.clone(),
             % endfor
+
+            // The ‘border’ shorthand resets ‘border-image’ to its initial value.
+            // See https://drafts.csswg.org/css-backgrounds-3/#the-border-shorthands
+            % for name in "outset repeat slice source width".split():
+                border_image_${name}: border_image_${name}::get_initial_specified_value(),
+            % endfor
         })
     }
 

tests/unit/style/properties/serialization.rs

@@ -274,7 +274,7 @@ mod shorthand_serialization {
           properties.push(PropertyDeclaration::BorderLeftColor(blue.clone()));
 
           let serialization = shorthand_properties_to_string(properties);
-          assert_eq!(serialization, "border: 30px solid rgb(0, 0, 255);");
+          assert_eq!(serialization, "border-style: solid; border-width: 30px; border-color: rgb(0, 0, 255);");
         }
 
         #[test]
@@ -475,26 +475,20 @@ mod shorthand_serialization {
 
         #[test]
         fn border_should_serialize_correctly() {
-            let mut properties = Vec::new();
+            // According to https://drafts.csswg.org/css-backgrounds-3/#the-border-shorthands,
-            let (width, style, color) = get_border_property_values();
+            // the ‘border’ shorthand resets ‘border-image’ to its initial value. To verify the
+            // serialization of 'border' shorthand, we need to set 'border-image' as well.
+            let block_text = "\
+                border-top: 4px solid; \
+                border-right: 4px solid; \
+                border-bottom: 4px solid; \
+                border-left: 4px solid; \
+                border-image: none;";
 
-            properties.push(PropertyDeclaration::BorderTopWidth(width.clone()));
+            let block = parse(|c, i| Ok(parse_property_declaration_list(c, i)), block_text).unwrap();
-            properties.push(PropertyDeclaration::BorderTopStyle(style.clone()));
-            properties.push(PropertyDeclaration::BorderTopColor(color.clone()));
 
-            properties.push(PropertyDeclaration::BorderRightWidth(width.clone()));
+            let serialization = block.to_css_string();
-            properties.push(PropertyDeclaration::BorderRightStyle(style.clone()));
-            properties.push(PropertyDeclaration::BorderRightColor(color.clone()));
 
-            properties.push(PropertyDeclaration::BorderBottomWidth(width.clone()));
-            properties.push(PropertyDeclaration::BorderBottomStyle(style.clone()));
-            properties.push(PropertyDeclaration::BorderBottomColor(color.clone()));
-
-            properties.push(PropertyDeclaration::BorderLeftWidth(width.clone()));
-            properties.push(PropertyDeclaration::BorderLeftStyle(style.clone()));
-            properties.push(PropertyDeclaration::BorderLeftColor(color.clone()));
-
-            let serialization = shorthand_properties_to_string(properties);
             assert_eq!(serialization, "border: 4px solid;");
         }
     }