Auto merge of #14920 - upsuper:shorthand-variable, r=emilio

Correctly handle unserializable shorthand

get_shorthand_appendable_value doesn't always return a serializable value. This change makes it handle that case correctly.

This change also updates step number in property_value_to_css to reflect the latest spec.

---
<!-- 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 stylo [bug 1329533](https://bugzilla.mozilla.org/show_bug.cgi?id=1329533)

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

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

components/style/properties/declaration_block.rs

@@ -86,21 +86,21 @@ impl PropertyDeclarationBlock {
     pub fn property_value_to_css<W>(&self, property: &PropertyId, dest: &mut W) -> fmt::Result
         where W: fmt::Write,
     {
-        // Step 1: done when parsing a string to PropertyId
+        // Step 1.1: done when parsing a string to PropertyId
 
-        // Step 2
+        // Step 1.2
         match property.as_shorthand() {
             Ok(shorthand) => {
-                // Step 2.1
+                // Step 1.2.1
                 let mut list = Vec::new();
                 let mut important_count = 0;
 
-                // Step 2.2
+                // Step 1.2.2
                 for &longhand in shorthand.longhands() {
-                    // Step 2.2.1
+                    // Step 1.2.2.1
                     let declaration = self.get(PropertyDeclarationId::Longhand(longhand));
 
-                    // Step 2.2.2 & 2.2.3
+                    // Step 1.2.2.2 & 1.2.2.3
                     match declaration {
                         Some(&(ref declaration, importance)) => {
                             list.push(declaration);
@@ -112,26 +112,28 @@ impl PropertyDeclarationBlock {
                     }
                 }
 
-                // Step 3.3.2.4
                 // If there is one or more longhand with important, and one or more
                 // without important, we don't serialize it as a shorthand.
                 if important_count > 0 && important_count != list.len() {
                     return Ok(());
                 }
 
-                // Step 2.3
+                // Step 1.2.3
                 // We don't print !important when serializing individual properties,
                 // so we treat this as a normal-importance property
                 let importance = Importance::Normal;
-                let appendable_value = shorthand.get_shorthand_appendable_value(list).unwrap();
-                append_declaration_value(dest, appendable_value, importance, false)
+                match shorthand.get_shorthand_appendable_value(list) {
+                    Some(appendable_value) =>
+                        append_declaration_value(dest, appendable_value, importance, false),
+                    None => return Ok(()),
+                }
             }
             Err(longhand_or_custom) => {
                 if let Some(&(ref value, _importance)) = self.get(longhand_or_custom) {
-                    // Step 3
+                    // Step 2
                     value.to_css(dest)
                 } else {
-                    // Step 4
+                    // Step 3
                     Ok(())
                 }
             }

tests/wpt/web-platform-tests/cssom/shorthand-serialization.html

@@ -15,6 +15,8 @@
     <div id="foo5" style="margin-right: 10px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px!important;">foo</div>
     <div id="foo6" style="margin-right: 10px !important; margin-left: 10px !important; margin-top: 10px !important; margin-bottom: 10px!important;">foo</div>
 
+    <div id="foo7" style="background:var(--a);">foo</a>
+
     <script>
         test(function() {
             var elem1 = document.getElementById('foo1');
@@ -39,6 +41,13 @@
             assert_equals(elem6.style.cssText, 'margin: 10px !important;');
             assert_equals(elem6.style.margin, '10px');
         }, "Shorthand serialization with just longhands.");
+
+        test(function() {
+          var elem7 = document.getElementById('foo7');
+
+          assert_equals(elem7.style.background, 'var(--a)');
+          assert_equals(elem7.style.backgroundPosition, '');
+        }, "Shorthand serialization with variable and variable from other shorthand.");
     </script>
 </body>
 </html>