diff --git a/components/style/properties/shorthands/outline.mako.rs b/components/style/properties/shorthands/outline.mako.rs
index 314f27738ab..75b5fcb717b 100644
--- a/components/style/properties/shorthands/outline.mako.rs
+++ b/components/style/properties/shorthands/outline.mako.rs
@@ -7,7 +7,6 @@
 <%helpers:shorthand name="outline"
                     engines="gecko servo-2013 servo-2020"
                     sub_properties="outline-color outline-style outline-width"
-                    derive_serialize="True"
                     spec="https://drafts.csswg.org/css-ui/#propdef-outline">
     use crate::properties::longhands::{outline_color, outline_width, outline_style};
     use crate::values::specified;
@@ -56,6 +55,28 @@
             Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
         }
     }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            let mut wrote_value = false;
+
+            % for name in "color style width".split():
+                if *self.outline_${name} != outline_${name}::get_initial_specified_value() {
+                    if wrote_value {
+                        dest.write_char(' ')?;
+                    }
+                    self.outline_${name}.to_css(dest)?;
+                    wrote_value = true;
+                }
+            % endfor
+
+            if !wrote_value {
+                self.outline_style.to_css(dest)?;
+            }
+
+            Ok(())
+        }
+    }
 </%helpers:shorthand>
 
 // The -moz-outline-radius shorthand is non-standard and not on a standards track.
diff --git a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-valid-mandatory.html.ini b/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-valid-mandatory.html.ini
deleted file mode 100644
index 4a92391b0cb..00000000000
--- a/tests/wpt/metadata-layout-2020/css/css-ui/parsing/outline-valid-mandatory.html.ini
+++ /dev/null
@@ -1,57 +0,0 @@
-[outline-valid-mandatory.html]
-  [e.style['outline'\] = "double" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "thick" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "medium" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "solid" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "dashed thin" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "1px" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "dotted" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "auto" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "inset" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "dashed" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "ridge" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "outset" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "none" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "calc(2em + 3ex)" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "medium rgba(10, 20, 30, 0.4)" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "rgba(10, 20, 30, 0.4)" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "groove" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "0" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "thin" should set the property value]
-    expected: FAIL
diff --git a/tests/wpt/metadata/css/css-ui/parsing/outline-valid-mandatory.html.ini b/tests/wpt/metadata/css/css-ui/parsing/outline-valid-mandatory.html.ini
deleted file mode 100644
index 449a79c189e..00000000000
--- a/tests/wpt/metadata/css/css-ui/parsing/outline-valid-mandatory.html.ini
+++ /dev/null
@@ -1,58 +0,0 @@
-[outline-valid-mandatory.html]
-  [e.style['outline'\] = "rgba(10, 20, 30, 0.4)" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "auto" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "none" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "dotted" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "dashed" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "solid" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "double" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "groove" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "ridge" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "inset" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "outset" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "0" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "1px" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "calc(2em + 3ex)" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "thin" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "medium" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "thick" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "dashed thin" should set the property value]
-    expected: FAIL
-
-  [e.style['outline'\] = "medium rgba(10, 20, 30, 0.4)" should set the property value]
-    expected: FAIL
-