diff --git a/components/style/values/computed/percentage.rs b/components/style/values/computed/percentage.rs
index 30ef5ab0f0d..994c01594a3 100644
--- a/components/style/values/computed/percentage.rs
+++ b/components/style/values/computed/percentage.rs
@@ -7,7 +7,7 @@
 use crate::values::animated::ToAnimatedValue;
 use crate::values::generics::NonNegative;
 use crate::values::specified::percentage::ToPercentage;
-use crate::values::{serialize_percentage, CSSFloat};
+use crate::values::{serialize_normalized_percentage, CSSFloat};
 use crate::Zero;
 use std::fmt;
 use style_traits::{CssWriter, ToCss};
@@ -106,7 +106,7 @@ impl ToCss for Percentage {
     where
         W: fmt::Write,
     {
-        serialize_percentage(self.0, dest)
+        serialize_normalized_percentage(self.0, dest)
     }
 }
 
diff --git a/components/style/values/mod.rs b/components/style/values/mod.rs
index 64950166ecd..ce0d9fc42f3 100644
--- a/components/style/values/mod.rs
+++ b/components/style/values/mod.rs
@@ -109,6 +109,11 @@ where
     }
 
     if !v.is_finite() && nan_inf_enabled() {
+        // https://drafts.csswg.org/css-values/#calc-error-constants:
+        // "While not technically numbers, these keywords act as numeric values,
+        // similar to e and pi. Thus to get an infinite length, for example,
+        // requires an expression like calc(infinity * 1px)."
+
         if v.is_nan() {
             dest.write_str("NaN * 1")?;
         } else if v == f32::INFINITY {
@@ -398,8 +403,16 @@ impl std::borrow::Borrow<crate::gecko_string_cache::WeakAtom> for AtomIdent {
     }
 }
 
-/// Serialize a normalized value into percentage.
+/// Serialize a value into percentage.
 pub fn serialize_percentage<W>(value: CSSFloat, dest: &mut CssWriter<W>) -> fmt::Result
+where
+    W: Write,
+{
+    serialize_specified_dimension(value * 100., "%", /* was_calc = */ false, dest)
+}
+
+/// Serialize a value into normalized (no NaN/inf serialization) percentage.
+pub fn serialize_normalized_percentage<W>(value: CSSFloat, dest: &mut CssWriter<W>) -> fmt::Result
 where
     W: Write,
 {
diff --git a/components/style/values/specified/percentage.rs b/components/style/values/specified/percentage.rs
index 6e6869d8700..c44a2781a8a 100644
--- a/components/style/values/specified/percentage.rs
+++ b/components/style/values/specified/percentage.rs
@@ -10,7 +10,7 @@ use crate::values::computed::{Context, ToComputedValue};
 use crate::values::generics::NonNegative;
 use crate::values::specified::calc::CalcNode;
 use crate::values::specified::Number;
-use crate::values::{serialize_percentage, CSSFloat};
+use crate::values::{serialize_percentage, normalize, CSSFloat};
 use cssparser::{Parser, Token};
 use std::fmt::{self, Write};
 use style_traits::values::specified::AllowedNumericType;
@@ -172,7 +172,7 @@ impl ToComputedValue for Percentage {
 
     #[inline]
     fn to_computed_value(&self, _: &Context) -> Self::ComputedValue {
-        ComputedPercentage(self.get())
+        ComputedPercentage(normalize(self.get()))
     }
 
     #[inline]