diff --git a/components/style/properties/longhands/box.mako.rs b/components/style/properties/longhands/box.mako.rs
index 718ceaa3419..133960d0379 100644
--- a/components/style/properties/longhands/box.mako.rs
+++ b/components/style/properties/longhands/box.mako.rs
@@ -601,8 +601,10 @@ ${helpers.predefined_type(
     spec="https://drafts.csswg.org/css-will-change/#will-change",
 )}
 
+// The spec issue for the parse_method: https://github.com/w3c/csswg-drafts/issues/4102.
 ${helpers.predefined_type(
     "shape-image-threshold", "Opacity", "0.0",
+    parse_method="parse_number",
     products="gecko",
     animation_value_type="ComputedValue",
     spec="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property",
diff --git a/components/style/properties/longhands/effects.mako.rs b/components/style/properties/longhands/effects.mako.rs
index 85bf5d9a829..01b5abfd41f 100644
--- a/components/style/properties/longhands/effects.mako.rs
+++ b/components/style/properties/longhands/effects.mako.rs
@@ -13,7 +13,7 @@ ${helpers.predefined_type(
     "1.0",
     animation_value_type="ComputedValue",
     flags="CREATES_STACKING_CONTEXT CAN_ANIMATE_ON_COMPOSITOR",
-    spec="https://drafts.csswg.org/css-color/#opacity",
+    spec="https://drafts.csswg.org/css-color/#transparency",
     servo_restyle_damage = "reflow_out_of_flow",
 )}
 
diff --git a/components/style/properties/longhands/inherited_svg.mako.rs b/components/style/properties/longhands/inherited_svg.mako.rs
index c3e16ee475f..faa806a60a3 100644
--- a/components/style/properties/longhands/inherited_svg.mako.rs
+++ b/components/style/properties/longhands/inherited_svg.mako.rs
@@ -52,7 +52,7 @@ ${helpers.predefined_type(
     "Default::default()",
     products="gecko",
     animation_value_type="ComputedValue",
-    spec="https://www.w3.org/TR/SVG11/painting.html#FillOpacityProperty",
+    spec="https://svgwg.org/svg2-draft/painting.html#FillOpacity",
 )}
 
 ${helpers.predefined_type(
@@ -123,7 +123,7 @@ ${helpers.predefined_type(
     "Default::default()",
     products="gecko",
     animation_value_type="ComputedValue",
-    spec="https://www.w3.org/TR/SVG11/painting.html#StrokeOpacityProperty",
+    spec="https://svgwg.org/svg2-draft/painting.html#StrokeOpacity",
 )}
 
 ${helpers.predefined_type(
diff --git a/components/style/properties/longhands/svg.mako.rs b/components/style/properties/longhands/svg.mako.rs
index 9f0e0db9fbc..429717c1bd3 100644
--- a/components/style/properties/longhands/svg.mako.rs
+++ b/components/style/properties/longhands/svg.mako.rs
@@ -40,7 +40,7 @@ ${helpers.predefined_type(
     "1.0",
     products="gecko",
     animation_value_type="ComputedValue",
-    spec="https://www.w3.org/TR/SVGTiny12/painting.html#propdef-stop-opacity",
+    spec="https://svgwg.org/svg2-draft/pservers.html#StopOpacityProperty",
 )}
 
 // Section 15 - Filter Effects
@@ -60,7 +60,7 @@ ${helpers.predefined_type(
     "1.0",
     products="gecko",
     animation_value_type="ComputedValue",
-    spec="https://www.w3.org/TR/SVG/filters.html#FloodOpacityProperty",
+    spec="https://drafts.fxtf.org/filter-effects/#FloodOpacityProperty",
 )}
 
 ${helpers.predefined_type(
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index b22292a9dce..a989e0a0885 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -142,8 +142,8 @@ fn parse_number_with_clamping_mode<'i, 't>(
                 value: value.min(f32::MAX).max(f32::MIN),
                 calc_clamping_mode: None,
             });
-        },
-        Token::Function(ref name) if name.eq_ignore_ascii_case("calc") => {},
+        }
+        Token::Function(ref name) if name.eq_ignore_ascii_case("calc") => {}
         ref t => return Err(location.new_unexpected_token_error(t.clone())),
     }
 
@@ -402,14 +402,18 @@ impl Parse for NonNegativeNumberOrPercentage {
     }
 }
 
-#[allow(missing_docs)]
+/// The value of Opacity is <alpha-value>, which is "<number> | <percentage>".
+/// However, we serialize the specified value as number, so it's ok to store
+/// the Opacity as Number.
 #[derive(
     Clone, Copy, Debug, MallocSizeOf, PartialEq, PartialOrd, SpecifiedValueInfo, ToCss, ToShmem,
 )]
 pub struct Opacity(Number);
 
-impl Parse for Opacity {
-    fn parse<'i, 't>(
+impl Opacity {
+    /// Parse number value only.
+    #[inline]
+    pub fn parse_number<'i, 't>(
         context: &ParserContext,
         input: &mut Parser<'i, 't>,
     ) -> Result<Self, ParseError<'i>> {
@@ -417,6 +421,29 @@ impl Parse for Opacity {
     }
 }
 
+impl Parse for Opacity {
+    /// Opacity accepts <number> | <percentage>, so we parse it as NumberOrPercentage,
+    /// and then convert into an Number if it's a Percentage.
+    /// https://drafts.csswg.org/cssom/#serializing-css-values
+    fn parse<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Self, ParseError<'i>> {
+        let number = match NumberOrPercentage::parse(context, input)? {
+            NumberOrPercentage::Percentage(p) => Number {
+                value: p.get(),
+                calc_clamping_mode: if p.is_calc() {
+                    Some(AllowedNumericType::All)
+                } else {
+                    None
+                },
+            },
+            NumberOrPercentage::Number(n) => n,
+        };
+        Ok(Opacity(number))
+    }
+}
+
 impl ToComputedValue for Opacity {
     type ComputedValue = CSSFloat;
 
@@ -510,7 +537,7 @@ impl Parse for Integer {
             Token::Number {
                 int_value: Some(v), ..
             } => return Ok(Integer::new(v)),
-            Token::Function(ref name) if name.eq_ignore_ascii_case("calc") => {},
+            Token::Function(ref name) if name.eq_ignore_ascii_case("calc") => {}
             ref t => return Err(location.new_unexpected_token_error(t.clone())),
         }
 
@@ -786,7 +813,7 @@ impl Attr {
                             None => {
                                 return Err(location
                                     .new_custom_error(StyleParseErrorKind::UnspecifiedError));
-                            },
+                            }
                         };
                         Some((prefix, ns))
                     } else {
@@ -796,10 +823,10 @@ impl Attr {
                         namespace: prefix_and_ns,
                         attribute: Atom::from(second_token.as_ref()),
                     });
-                },
+                }
                 // In the case of attr(foobar    ) we don't want to error out
                 // because of the trailing whitespace
-                Token::WhiteSpace(..) => {},
+                Token::WhiteSpace(..) => {}
                 ref t => return Err(input.new_unexpected_token_error(t.clone())),
             }
         }