From c183899c067136d56d2315a00b7b058dec177fc7 Mon Sep 17 00:00:00 2001
From: Xidorn Quan <me@upsuper.org>
Date: Mon, 9 Jan 2017 15:38:13 +1100
Subject: [PATCH] Correctly handle unserializable shorthand

get_shorthand_appendable_value doesn't always return a serializable
value. This change makes it handle that case correctly.
---
 .../style/properties/declaration_block.rs     | 26 ++++++++++---------
 .../cssom/shorthand-serialization.html        |  9 +++++++
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/components/style/properties/declaration_block.rs b/components/style/properties/declaration_block.rs
index 4a29ea7aad1d..822a0924eed4 100644
--- a/components/style/properties/declaration_block.rs
+++ b/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(())
                 }
             }
diff --git a/tests/wpt/web-platform-tests/cssom/shorthand-serialization.html b/tests/wpt/web-platform-tests/cssom/shorthand-serialization.html
index 4cb18d8b7cc9..c34b1652626c 100644
--- a/tests/wpt/web-platform-tests/cssom/shorthand-serialization.html
+++ b/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>