diff --git a/components/style/properties/declaration_block.rs b/components/style/properties/declaration_block.rs
index 9d76adf1383..e7adda198a8 100644
--- a/components/style/properties/declaration_block.rs
+++ b/components/style/properties/declaration_block.rs
@@ -561,9 +561,6 @@ pub fn append_serialization<'a, W, I, N>(dest: &mut W,
 
     // for normal parsed values, add a space between key: and value
     match &appendable_value {
-        &AppendableValue::Css(_) => {
-            try!(write!(dest, " "))
-        },
         &AppendableValue::Declaration(decl) => {
             if !decl.value_is_unparsed() {
                 // for normal parsed values, add a space between key: and value
@@ -572,7 +569,8 @@ pub fn append_serialization<'a, W, I, N>(dest: &mut W,
         },
         // Currently append_serialization is only called with a Css or
         // a Declaration AppendableValue.
-        &AppendableValue::DeclarationsForShorthand(..) => unreachable!()
+        &AppendableValue::DeclarationsForShorthand(..) => unreachable!(),
+        &AppendableValue::Css(_) => {}
     }
 
     try!(append_declaration_value(dest, appendable_value));
diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
index 139d679d65b..672ef7efbbb 100644
--- a/tests/wpt/metadata/MANIFEST.json
+++ b/tests/wpt/metadata/MANIFEST.json
@@ -83640,6 +83640,12 @@
      {}
     ]
    ],
+   "cssom/serialize-variable-reference.html": [
+    [
+     "/cssom/serialize-variable-reference.html",
+     {}
+    ]
+   ],
    "cssom/shorthand-serialization.html": [
     [
      "/cssom/shorthand-serialization.html",
@@ -159941,6 +159947,10 @@
    "329fe02cb9e54b1a24a8f9dedcfcf5c0f61c7f24",
    "testharness"
   ],
+  "cssom/serialize-variable-reference.html": [
+   "5e83f084efc82184c3052a40bb4a061fd4a1336f",
+   "testharness"
+  ],
   "cssom/shorthand-serialization.html": [
    "bd514834dbd48c267c16a4329af6fec7f6cbc081",
    "testharness"
diff --git a/tests/wpt/web-platform-tests/cssom/serialize-variable-reference.html b/tests/wpt/web-platform-tests/cssom/serialize-variable-reference.html
new file mode 100644
index 00000000000..d714b81518b
--- /dev/null
+++ b/tests/wpt/web-platform-tests/cssom/serialize-variable-reference.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSOM - Serialization with variable preserves original serialization.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="longhand-whitespace" style="font-size: var(--a);"></div>
+<div id="shorthand-whitespace" style="font: var(--a);"></div>
+<div id="longhand" style="font-size:var(--a);"></div>
+<div id="shorthand" style="font:var(--a);"></div>
+<script>
+    test(function() {
+        var elem = document.getElementById('longhand-whitespace');
+
+        assert_equals(elem.style.cssText, 'font-size: var(--a);');
+    }, 'Longhand with variable preserves original serialization: with withespace')
+
+    test(function() {
+        var elem = document.getElementById('shorthand-whitespace');
+
+        assert_equals(elem.style.cssText, 'font: var(--a);');
+    }, 'Shorthand with variable preserves original serialization: with withespace')
+
+    test(function() {
+        var elem = document.getElementById('longhand');
+
+        assert_equals(elem.style.cssText, 'font-size:var(--a);');
+    }, 'Longhand with variable preserves original serialization: without withespace')
+
+    test(function() {
+        var elem = document.getElementById('shorthand');
+
+        assert_equals(elem.style.cssText, 'font:var(--a);');
+    }, 'Shorthand with variable preserves original serialization: without withespace')
+</script>
