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 -->

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>