diff --git a/components/style/properties/data.py b/components/style/properties/data.py
index d01ba34e0095..1c9c0ea794ff 100644
--- a/components/style/properties/data.py
+++ b/components/style/properties/data.py
@@ -178,7 +178,7 @@ def __init__(self, style_struct, name, spec=None, animation_value_type=None, der
         # really random.
         if animation_value_type is None:
             raise TypeError("animation_value_type should be specified for (" + name + ")")
-        animation_value_types = ["none", "normal", "discrete"]
+        animation_value_types = ["none", "discrete", "ComputedValue"]
         if animation_value_type not in animation_value_types:
             raise TypeError("animation_value_type should be one of (" +
                             str(animation_value_types) + ")")
diff --git a/components/style/properties/longhand/background.mako.rs b/components/style/properties/longhand/background.mako.rs
index 16981f7cc0b5..3ff33c0981d3 100644
--- a/components/style/properties/longhand/background.mako.rs
+++ b/components/style/properties/longhand/background.mako.rs
@@ -10,7 +10,7 @@ ${helpers.predefined_type("background-color", "CSSColor",
     "::cssparser::Color::RGBA(::cssparser::RGBA::transparent())",
     initial_specified_value="SpecifiedValue::transparent()",
     spec="https://drafts.csswg.org/css-backgrounds/#background-color",
-    animation_value_type="normal", complex_color=True)}
+    animation_value_type="ComputedValue", complex_color=True)}
 
 <%helpers:vector_longhand name="background-image" animation_value_type="none"
                           spec="https://drafts.csswg.org/css-backgrounds/#the-background-image"
@@ -89,7 +89,7 @@ ${helpers.predefined_type("background-color", "CSSColor",
     }
 </%helpers:vector_longhand>
 
-<%helpers:vector_longhand name="background-position-x" animation_value_type="normal"
+<%helpers:vector_longhand name="background-position-x" animation_value_type="ComputedValue"
                           spec="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x"
                           delegate_animate="True">
     use std::fmt;
@@ -140,7 +140,7 @@ ${helpers.predefined_type("background-color", "CSSColor",
     }
 </%helpers:vector_longhand>
 
-<%helpers:vector_longhand name="background-position-y" animation_value_type="normal"
+<%helpers:vector_longhand name="background-position-y" animation_value_type="ComputedValue"
                           spec="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y"
                           delegate_animate="True">
     use std::fmt;
@@ -323,7 +323,7 @@ ${helpers.single_keyword("background-origin",
                          spec="https://drafts.csswg.org/css-backgrounds/#the-background-origin",
                          animation_value_type="none")}
 
-<%helpers:vector_longhand name="background-size" animation_value_type="normal" extra_prefixes="webkit"
+<%helpers:vector_longhand name="background-size" animation_value_type="ComputedValue" extra_prefixes="webkit"
                           spec="https://drafts.csswg.org/css-backgrounds/#the-background-size">
     use cssparser::Token;
     use std::ascii::AsciiExt;
diff --git a/components/style/properties/longhand/border.mako.rs b/components/style/properties/longhand/border.mako.rs
index a825d6bea503..be4b76a1a104 100644
--- a/components/style/properties/longhand/border.mako.rs
+++ b/components/style/properties/longhand/border.mako.rs
@@ -20,7 +20,7 @@
                               "::cssparser::Color::CurrentColor",
                               alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-color"),
                               spec=maybe_logical_spec(side, "color"),
-                              animation_value_type="normal", logical = side[1])}
+                              animation_value_type="ComputedValue", logical = side[1])}
 % endfor
 
 % for side in ALL_SIDES:
@@ -36,7 +36,7 @@ ${helpers.gecko_keyword_conversion(Keyword('border-style',
                                    "none solid double dotted dashed hidden groove ridge inset outset"),
                                    type="::values::specified::BorderStyle")}
 % for side in ALL_SIDES:
-    <%helpers:longhand name="border-${side[0]}-width" animation_value_type="normal" logical="${side[1]}"
+    <%helpers:longhand name="border-${side[0]}-width" animation_value_type="ComputedValue" logical="${side[1]}"
                        alias="${maybe_moz_logical_alias(product, side, '-moz-border-%s-width')}"
                        spec="${maybe_logical_spec(side, 'width')}">
         use app_units::Au;
@@ -70,7 +70,7 @@ ${helpers.gecko_keyword_conversion(Keyword('border-style',
                               "parse", extra_prefixes="webkit",
                               spec="https://drafts.csswg.org/css-backgrounds/#border-%s-radius" % corner,
                               boxed=True,
-                              animation_value_type="normal")}
+                              animation_value_type="ComputedValue")}
 % endfor
 
 ${helpers.single_keyword("box-decoration-break", "slice clone",
diff --git a/components/style/properties/longhand/box.mako.rs b/components/style/properties/longhand/box.mako.rs
index 26f051bf4560..73adf4aa3351 100644
--- a/components/style/properties/longhand/box.mako.rs
+++ b/components/style/properties/longhand/box.mako.rs
@@ -211,7 +211,7 @@ ${helpers.single_keyword("position", "static absolute relative fixed",
 
 </%helpers:longhand>
 
-<%helpers:longhand name="vertical-align" animation_value_type="normal"
+<%helpers:longhand name="vertical-align" animation_value_type="ComputedValue"
                    spec="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align">
     use std::fmt;
     use style_traits::ToCss;
@@ -1100,7 +1100,7 @@ ${helpers.predefined_type("scroll-snap-destination",
                           products="gecko",
                           boxed="True",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination)",
-                          animation_value_type="normal")}
+                          animation_value_type="ComputedValue")}
 
 ${helpers.predefined_type("scroll-snap-coordinate",
                           "Position",
@@ -1108,14 +1108,14 @@ ${helpers.predefined_type("scroll-snap-coordinate",
                           vector=True,
                           products="gecko",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination)",
-                          animation_value_type="normal",
+                          animation_value_type="ComputedValue",
                           allow_empty=True,
                           delegate_animate=True)}
 
 
 
 <%helpers:longhand name="transform" extra_prefixes="webkit"
-                   animation_value_type="normal"
+                   animation_value_type="ComputedValue"
                    flags="CREATES_STACKING_CONTEXT FIXPOS_CB"
                    spec="https://drafts.csswg.org/css-transforms/#propdef-transform">
     use app_units::Au;
@@ -2094,9 +2094,11 @@ ${helpers.predefined_type("perspective",
                           spec="https://drafts.csswg.org/css-transforms/#perspective",
                           extra_prefixes="moz webkit",
                           flags="CREATES_STACKING_CONTEXT FIXPOS_CB",
-                          animation_value_type="normal")}
+                          animation_value_type="ComputedValue")}
 
-<%helpers:longhand name="perspective-origin" boxed="True" animation_value_type="normal" extra_prefixes="moz webkit"
+<%helpers:longhand name="perspective-origin" boxed="True"
+                   animation_value_type="ComputedValue"
+                   extra_prefixes="moz webkit"
                    spec="https://drafts.csswg.org/css-transforms/#perspective-origin-property">
     use std::fmt;
     use style_traits::ToCss;
@@ -2194,7 +2196,7 @@ ${helpers.single_keyword("transform-style",
                          flags="CREATES_STACKING_CONTEXT FIXPOS_CB",
                          animation_value_type="none")}
 
-<%helpers:longhand name="transform-origin" animation_value_type="normal" extra_prefixes="moz webkit" boxed="True"
+<%helpers:longhand name="transform-origin" animation_value_type="ComputedValue" extra_prefixes="moz webkit" boxed="True"
                    spec="https://drafts.csswg.org/css-transforms/#transform-origin-property">
     use app_units::Au;
     use std::fmt;
diff --git a/components/style/properties/longhand/color.mako.rs b/components/style/properties/longhand/color.mako.rs
index 18812044f036..472bdc7b9f07 100644
--- a/components/style/properties/longhand/color.mako.rs
+++ b/components/style/properties/longhand/color.mako.rs
@@ -8,7 +8,7 @@
 
 <% from data import to_rust_ident %>
 
-<%helpers:longhand name="color" need_clone="True" animation_value_type="normal"
+<%helpers:longhand name="color" need_clone="True" animation_value_type="ComputedValue"
                    spec="https://drafts.csswg.org/css-color/#color">
     use cssparser::RGBA;
     use std::fmt;
diff --git a/components/style/properties/longhand/column.mako.rs b/components/style/properties/longhand/column.mako.rs
index e1e32e9d20ae..44f02ad3dbfa 100644
--- a/components/style/properties/longhand/column.mako.rs
+++ b/components/style/properties/longhand/column.mako.rs
@@ -12,7 +12,7 @@ ${helpers.predefined_type("column-width",
                           initial_specified_value="Either::Second(Auto)",
                           parse_method="parse_non_negative_length",
                           extra_prefixes="moz",
-                          animation_value_type="normal",
+                          animation_value_type="ComputedValue",
                           experimental=True,
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-width")}
 
@@ -23,7 +23,7 @@ ${helpers.predefined_type("column-count",
                           parse_method="parse_positive",
                           initial_specified_value="Either::Second(Auto)",
                           experimental="True",
-                          animation_value_type="normal",
+                          animation_value_type="ComputedValue",
                           extra_prefixes="moz",
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-count")}
 
@@ -33,7 +33,7 @@ ${helpers.predefined_type("column-gap",
                           parse_method='parse_non_negative_length',
                           extra_prefixes="moz",
                           experimental=True,
-                          animation_value_type="normal",
+                          animation_value_type="ComputedValue",
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-gap")}
 
 ${helpers.single_keyword("column-fill", "balance auto", extra_prefixes="moz",
@@ -41,7 +41,7 @@ ${helpers.single_keyword("column-fill", "balance auto", extra_prefixes="moz",
                          spec="https://drafts.csswg.org/css-multicol/#propdef-column-fill")}
 
 // https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width
-<%helpers:longhand name="column-rule-width" products="gecko" animation_value_type="normal" extra_prefixes="moz"
+<%helpers:longhand name="column-rule-width" products="gecko" animation_value_type="ComputedValue" extra_prefixes="moz"
                    spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width">
     use app_units::Au;
     use std::fmt;
@@ -75,7 +75,7 @@ ${helpers.single_keyword("column-fill", "balance auto", extra_prefixes="moz",
 ${helpers.predefined_type("column-rule-color", "CSSColor",
                           "::cssparser::Color::CurrentColor",
                           initial_specified_value="specified::CSSColor::currentcolor()",
-                          products="gecko", animation_value_type="normal", extra_prefixes="moz",
+                          products="gecko", animation_value_type="ComputedValue", extra_prefixes="moz",
                           complex_color=True, need_clone=True,
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color")}
 
diff --git a/components/style/properties/longhand/effects.mako.rs b/components/style/properties/longhand/effects.mako.rs
index 9970b964fcd2..bb26426b583d 100644
--- a/components/style/properties/longhand/effects.mako.rs
+++ b/components/style/properties/longhand/effects.mako.rs
@@ -10,12 +10,12 @@
 ${helpers.predefined_type("opacity",
                           "Opacity",
                           "1.0",
-                          animation_value_type="normal",
+                          animation_value_type="ComputedValue",
                           flags="CREATES_STACKING_CONTEXT",
                           spec="https://drafts.csswg.org/css-color/#opacity")}
 
 <%helpers:vector_longhand name="box-shadow" allow_empty="True"
-                          animation_value_type="normal" extra_prefixes="webkit"
+                          animation_value_type="ComputedValue" extra_prefixes="webkit"
                           spec="https://drafts.csswg.org/css-backgrounds/#box-shadow">
     use cssparser;
     use std::fmt;
@@ -80,7 +80,7 @@ ${helpers.predefined_type("opacity",
 ${helpers.predefined_type("clip",
                           "ClipRectOrAuto",
                           "computed::ClipRectOrAuto::auto()",
-                          animation_value_type="normal",
+                          animation_value_type="ComputedValue",
                           boxed="True",
                           spec="https://drafts.fxtf.org/css-masking/#clip-property")}
 
diff --git a/components/style/properties/longhand/font.mako.rs b/components/style/properties/longhand/font.mako.rs
index 65edd9914f35..b3e166b052d9 100644
--- a/components/style/properties/longhand/font.mako.rs
+++ b/components/style/properties/longhand/font.mako.rs
@@ -351,7 +351,7 @@ ${helpers.single_keyword_system("font-variant-caps",
                                custom_consts=font_variant_caps_custom_consts,
                                animation_value_type="none")}
 
-<%helpers:longhand name="font-weight" need_clone="True" animation_value_type="normal"
+<%helpers:longhand name="font-weight" need_clone="True" animation_value_type="ComputedValue"
                    spec="https://drafts.csswg.org/css-fonts/#propdef-font-weight">
     use std::fmt;
     use style_traits::ToCss;
@@ -549,7 +549,7 @@ ${helpers.single_keyword_system("font-variant-caps",
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="font-size" need_clone="True" animation_value_type="normal"
+<%helpers:longhand name="font-size" need_clone="True" animation_value_type="ComputedValue"
                    spec="https://drafts.csswg.org/css-fonts/#propdef-font-size">
     use app_units::Au;
     use properties::longhands::system_font::SystemFont;
@@ -934,7 +934,7 @@ ${helpers.single_keyword_system("font-variant-caps",
     }
 </%helpers:longhand>
 
-<%helpers:longhand products="gecko" name="font-size-adjust" animation_value_type="normal"
+<%helpers:longhand products="gecko" name="font-size-adjust" animation_value_type="ComputedValue"
                    spec="https://drafts.csswg.org/css-fonts/#propdef-font-size-adjust">
     use properties::longhands::system_font::SystemFont;
     use std::fmt;
diff --git a/components/style/properties/longhand/inherited_box.mako.rs b/components/style/properties/longhand/inherited_box.mako.rs
index 92c8720b4957..01ee640f8525 100644
--- a/components/style/properties/longhand/inherited_box.mako.rs
+++ b/components/style/properties/longhand/inherited_box.mako.rs
@@ -11,7 +11,7 @@ ${helpers.single_keyword("visibility",
                          "visible hidden",
                          extra_gecko_values="collapse",
                          gecko_ffi_name="mVisible",
-                         animation_value_type="normal",
+                         animation_value_type="ComputedValue",
                          spec="https://drafts.csswg.org/css-box/#propdef-visibility")}
 
 // CSS Writing Modes Level 3
diff --git a/components/style/properties/longhand/inherited_svg.mako.rs b/components/style/properties/longhand/inherited_svg.mako.rs
index 51f952c66977..480f4a7adfb1 100644
--- a/components/style/properties/longhand/inherited_svg.mako.rs
+++ b/components/style/properties/longhand/inherited_svg.mako.rs
@@ -70,7 +70,7 @@ ${helpers.predefined_type(
     "computed::LengthOrPercentage::one()",
     "parse_numbers_are_pixels_non_negative",
     products="gecko",
-    animation_value_type="normal",
+    animation_value_type="ComputedValue",
     spec="https://www.w3.org/TR/SVG2/painting.html#StrokeWidth")}
 
 ${helpers.single_keyword("stroke-linecap", "butt round square",
@@ -106,7 +106,7 @@ ${helpers.predefined_type(
     "computed::LengthOrPercentage::zero()",
     "parse_numbers_are_pixels",
     products="gecko",
-    animation_value_type="normal",
+    animation_value_type="ComputedValue",
     spec="https://www.w3.org/TR/SVG2/painting.html#StrokeDashing")}
 
 // Section 14 - Clipping, Masking and Compositing
diff --git a/components/style/properties/longhand/inherited_text.mako.rs b/components/style/properties/longhand/inherited_text.mako.rs
index e5ab05155df4..4238d23222dd 100644
--- a/components/style/properties/longhand/inherited_text.mako.rs
+++ b/components/style/properties/longhand/inherited_text.mako.rs
@@ -6,7 +6,7 @@
 <% from data import Keyword %>
 <% data.new_style_struct("InheritedText", inherited=True, gecko_name="Text") %>
 
-<%helpers:longhand name="line-height" animation_value_type="normal"
+<%helpers:longhand name="line-height" animation_value_type="ComputedValue"
                    spec="https://drafts.csswg.org/css2/visudet.html#propdef-line-height">
     use std::fmt;
     use style_traits::ToCss;
@@ -183,7 +183,7 @@ ${helpers.single_keyword("-moz-text-size-adjust", "auto none",
 ${helpers.predefined_type("text-indent",
                           "LengthOrPercentage",
                           "computed::LengthOrPercentage::Length(Au(0))",
-                          animation_value_type="normal",
+                          animation_value_type="ComputedValue",
                           spec="https://drafts.csswg.org/css-text/#propdef-text-indent")}
 
 // Also known as "word-wrap" (which is more popular because of IE), but this is the preferred
@@ -406,7 +406,7 @@ ${helpers.single_keyword("text-align-last",
     % endif
 </%helpers:longhand>
 
-<%helpers:longhand name="letter-spacing" animation_value_type="normal"
+<%helpers:longhand name="letter-spacing" animation_value_type="ComputedValue"
                    spec="https://drafts.csswg.org/css-text/#propdef-letter-spacing">
     use std::fmt;
     use style_traits::ToCss;
@@ -492,7 +492,7 @@ ${helpers.single_keyword("text-align-last",
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="word-spacing" animation_value_type="normal"
+<%helpers:longhand name="word-spacing" animation_value_type="ComputedValue"
                    spec="https://drafts.csswg.org/css-text/#propdef-word-spacing">
     use std::fmt;
     use style_traits::ToCss;
@@ -711,7 +711,7 @@ ${helpers.single_keyword("text-align-last",
     % endif
 </%helpers:single_keyword_computed>
 
-<%helpers:longhand name="text-shadow" animation_value_type="normal"
+<%helpers:longhand name="text-shadow" animation_value_type="ComputedValue"
                    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-shadow">
     use cssparser;
     use std::fmt;
@@ -1205,7 +1205,7 @@ ${helpers.single_keyword("text-align-last",
 ${helpers.predefined_type("text-emphasis-color", "CSSColor",
                           "::cssparser::Color::CurrentColor",
                           initial_specified_value="specified::CSSColor::currentcolor()",
-                          products="gecko", animation_value_type="normal",
+                          products="gecko", animation_value_type="ComputedValue",
                           complex_color=True, need_clone=True,
                           spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-color")}
 
@@ -1223,7 +1223,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "-webkit-text-fill-color", "CSSColor",
     "CSSParserColor::CurrentColor",
-    products="gecko", animation_value_type="normal",
+    products="gecko", animation_value_type="ComputedValue",
     complex_color=True, need_clone=True,
     spec="https://compat.spec.whatwg.org/#the-webkit-text-fill-color")}
 
@@ -1231,7 +1231,7 @@ ${helpers.predefined_type(
     "-webkit-text-stroke-color", "CSSColor",
     "CSSParserColor::CurrentColor",
     initial_specified_value="specified::CSSColor::currentcolor()",
-    products="gecko", animation_value_type="normal",
+    products="gecko", animation_value_type="ComputedValue",
     complex_color=True, need_clone=True,
     spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke-color")}
 
diff --git a/components/style/properties/longhand/margin.mako.rs b/components/style/properties/longhand/margin.mako.rs
index f31a54c585d2..1fe4e7cca615 100644
--- a/components/style/properties/longhand/margin.mako.rs
+++ b/components/style/properties/longhand/margin.mako.rs
@@ -15,6 +15,6 @@
     ${helpers.predefined_type("margin-%s" % side[0], "LengthOrPercentageOrAuto",
                               "computed::LengthOrPercentageOrAuto::Length(Au(0))",
                               alias=maybe_moz_logical_alias(product, side, "-moz-margin-%s"),
-                              animation_value_type="normal", logical = side[1], spec = spec,
+                              animation_value_type="ComputedValue", logical = side[1], spec = spec,
                               allowed_in_page_rule=True)}
 % endfor
diff --git a/components/style/properties/longhand/outline.mako.rs b/components/style/properties/longhand/outline.mako.rs
index 7ec8bd878b3a..c5112047e2c7 100644
--- a/components/style/properties/longhand/outline.mako.rs
+++ b/components/style/properties/longhand/outline.mako.rs
@@ -12,7 +12,7 @@
 // TODO(pcwalton): `invert`
 ${helpers.predefined_type("outline-color", "CSSColor", "computed::CSSColor::CurrentColor",
                           initial_specified_value="specified::CSSColor::currentcolor()",
-                          animation_value_type="normal", complex_color=True, need_clone=True,
+                          animation_value_type="ComputedValue", complex_color=True, need_clone=True,
                           spec="https://drafts.csswg.org/css-ui/#propdef-outline-color")}
 
 <%helpers:longhand name="outline-style" need_clone="True" animation_value_type="none"
@@ -64,7 +64,7 @@ ${helpers.predefined_type("outline-color", "CSSColor", "computed::CSSColor::Curr
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="outline-width" animation_value_type="normal"
+<%helpers:longhand name="outline-width" animation_value_type="ComputedValue"
                    spec="https://drafts.csswg.org/css-ui/#propdef-outline-width">
     use app_units::Au;
     use std::fmt;
@@ -128,5 +128,6 @@ ${helpers.predefined_type("outline-color", "CSSColor", "computed::CSSColor::Curr
         spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius)")}
 % endfor
 
-${helpers.predefined_type("outline-offset", "Length", "Au(0)", products="servo gecko", animation_value_type="normal",
+${helpers.predefined_type("outline-offset", "Length", "Au(0)", products="servo gecko",
+                          animation_value_type="ComputedValue",
                           spec="https://drafts.csswg.org/css-ui/#propdef-outline-offset")}
diff --git a/components/style/properties/longhand/padding.mako.rs b/components/style/properties/longhand/padding.mako.rs
index a36bf710f172..593deb769ac5 100644
--- a/components/style/properties/longhand/padding.mako.rs
+++ b/components/style/properties/longhand/padding.mako.rs
@@ -16,7 +16,7 @@
                               "computed::LengthOrPercentage::Length(Au(0))",
                               "parse_non_negative",
                               alias=maybe_moz_logical_alias(product, side, "-moz-padding-%s"),
-                              animation_value_type="normal",
+                              animation_value_type="ComputedValue",
                               logical = side[1],
                               spec = spec)}
 % endfor
diff --git a/components/style/properties/longhand/pointing.mako.rs b/components/style/properties/longhand/pointing.mako.rs
index 230fbfa8694f..de7d56ae66ae 100644
--- a/components/style/properties/longhand/pointing.mako.rs
+++ b/components/style/properties/longhand/pointing.mako.rs
@@ -177,6 +177,6 @@ ${helpers.predefined_type("caret-color",
                           "ColorOrAuto",
                           "Either::Second(Auto)",
                           spec="https://drafts.csswg.org/css-ui/#caret-color",
-                          animation_value_type="normal",
+                          animation_value_type="ComputedValue",
                           boxed=True,
                           products="gecko")}
diff --git a/components/style/properties/longhand/position.mako.rs b/components/style/properties/longhand/position.mako.rs
index 0da6bcbbc638..3f995b108739 100644
--- a/components/style/properties/longhand/position.mako.rs
+++ b/components/style/properties/longhand/position.mako.rs
@@ -13,21 +13,21 @@
     ${helpers.predefined_type(side, "LengthOrPercentageOrAuto",
                               "computed::LengthOrPercentageOrAuto::Auto",
                               spec="https://www.w3.org/TR/CSS2/visuren.html#propdef-%s" % side,
-                              animation_value_type="normal")}
+                              animation_value_type="ComputedValue")}
 % endfor
 // offset-* logical properties, map to "top" / "left" / "bottom" / "right"
 % for side in LOGICAL_SIDES:
     ${helpers.predefined_type("offset-%s" % side, "LengthOrPercentageOrAuto",
                               "computed::LengthOrPercentageOrAuto::Auto",
                               spec="https://drafts.csswg.org/css-logical-props/#propdef-offset-%s" % side,
-                              animation_value_type="normal", logical=True)}
+                              animation_value_type="ComputedValue", logical=True)}
 % endfor
 
 ${helpers.predefined_type("z-index", "IntegerOrAuto",
                           "Either::Second(Auto)",
                           spec="https://www.w3.org/TR/CSS2/visuren.html#z-index",
                           flags="CREATES_STACKING_CONTEXT",
-                          animation_value_type="normal")}
+                          animation_value_type="ComputedValue")}
 
 
 // CSS Flexible Box Layout Module Level 1
@@ -96,13 +96,13 @@ ${helpers.predefined_type("flex-grow", "Number",
                           "0.0", "parse_non_negative",
                           spec="https://drafts.csswg.org/css-flexbox/#flex-grow-property",
                           extra_prefixes="webkit",
-                          animation_value_type="normal")}
+                          animation_value_type="ComputedValue")}
 
 ${helpers.predefined_type("flex-shrink", "Number",
                           "1.0", "parse_non_negative",
                           spec="https://drafts.csswg.org/css-flexbox/#flex-shrink-property",
                           extra_prefixes="webkit",
-                          animation_value_type="normal")}
+                          animation_value_type="ComputedValue")}
 
 // https://drafts.csswg.org/css-align/#align-self-property
 % if product == "servo":
@@ -130,7 +130,7 @@ ${helpers.predefined_type("flex-shrink", "Number",
 // https://drafts.csswg.org/css-flexbox/#propdef-order
 ${helpers.predefined_type("order", "Integer", "0",
                           extra_prefixes="webkit",
-                          animation_value_type="normal",
+                          animation_value_type="ComputedValue",
                           spec="https://drafts.csswg.org/css-flexbox/#order-property")}
 
 // FIXME: Gecko doesn't support content value yet.
@@ -143,7 +143,7 @@ ${helpers.predefined_type("flex-basis",
                           "parse_non_negative",
                           spec="https://drafts.csswg.org/css-flexbox/#flex-basis-property",
                           extra_prefixes="webkit",
-                          animation_value_type="normal" if product == "gecko" else "none")}
+                          animation_value_type="ComputedValue" if product == "gecko" else "none")}
 
 % for (size, logical) in ALL_SIZES:
     <%
@@ -157,7 +157,7 @@ ${helpers.predefined_type("flex-basis",
                               "computed::LengthOrPercentageOrAuto::Auto",
                               "parse_non_negative",
                               spec=spec % size,
-                              animation_value_type="normal", logical = logical)}
+                              animation_value_type="ComputedValue", logical = logical)}
     % if product == "gecko":
         % for min_max in ["min", "max"]:
             <%
@@ -171,7 +171,8 @@ ${helpers.predefined_type("flex-basis",
             // Keyword values are only valid in the inline direction; they must
             // be replaced with auto/none in block.
             <%helpers:longhand name="${min_max}-${size}" spec="${spec % ('%s-%s' % (min_max, size))}"
-                               animation_value_type="normal" logical="${logical}" predefined_type="${MinMax}Length">
+                               animation_value_type="ComputedValue"
+                               logical="${logical}" predefined_type="${MinMax}Length">
 
                 use std::fmt;
                 use style_traits::ToCss;
@@ -253,13 +254,13 @@ ${helpers.predefined_type("flex-basis",
                                   "computed::LengthOrPercentage::Length(Au(0))",
                                   "parse_non_negative",
                                   spec=spec % ("min-%s" % size),
-                                  animation_value_type="normal", logical = logical)}
+                                  animation_value_type="ComputedValue", logical = logical)}
         ${helpers.predefined_type("max-%s" % size,
                                   "LengthOrPercentageOrNone",
                                   "computed::LengthOrPercentageOrNone::None",
                                   "parse_non_negative",
                                   spec=spec % ("min-%s" % size),
-                                  animation_value_type="normal", logical = logical)}
+                                  animation_value_type="ComputedValue", logical = logical)}
     % endif
 % endfor
 
@@ -279,14 +280,14 @@ ${helpers.predefined_type("object-position",
                           products="gecko",
                           boxed="True",
                           spec="https://drafts.csswg.org/css-images-3/#the-object-position",
-                          animation_value_type="normal")}
+                          animation_value_type="ComputedValue")}
 
 % for kind in ["row", "column"]:
     ${helpers.predefined_type("grid-%s-gap" % kind,
                               "LengthOrPercentage",
                               "computed::LengthOrPercentage::Length(Au(0))",
                               spec="https://drafts.csswg.org/css-grid/#propdef-grid-%s-gap" % kind,
-                              animation_value_type="normal",
+                              animation_value_type="ComputedValue",
                               products="gecko")}
 
     % for range in ["start", "end"]:
diff --git a/components/style/properties/longhand/svg.mako.rs b/components/style/properties/longhand/svg.mako.rs
index 90ac4bce1cef..eb9f9156a42c 100644
--- a/components/style/properties/longhand/svg.mako.rs
+++ b/components/style/properties/longhand/svg.mako.rs
@@ -113,7 +113,8 @@ ${helpers.single_keyword("mask-mode",
     }
 </%helpers:vector_longhand>
 
-<%helpers:vector_longhand name="mask-position-x" products="gecko" animation_value_type="normal" extra_prefixes="webkit"
+<%helpers:vector_longhand name="mask-position-x" products="gecko"
+                          animation_value_type="ComputedValue" extra_prefixes="webkit"
                           spec="https://drafts.fxtf.org/css-masking/#propdef-mask-position">
     pub use properties::longhands::background_position_x::single_value::get_initial_value;
     pub use properties::longhands::background_position_x::single_value::get_initial_position_value;
@@ -141,7 +142,8 @@ ${helpers.single_keyword("mask-mode",
     }
 </%helpers:vector_longhand>
 
-<%helpers:vector_longhand name="mask-position-y" products="gecko" animation_value_type="normal" extra_prefixes="webkit"
+<%helpers:vector_longhand name="mask-position-y" products="gecko"
+                          animation_value_type="ComputedValue" extra_prefixes="webkit"
                           spec="https://drafts.fxtf.org/css-masking/#propdef-mask-position">
     pub use properties::longhands::background_position_y::single_value::get_initial_value;
     pub use properties::longhands::background_position_y::single_value::get_initial_position_value;
@@ -187,7 +189,7 @@ ${helpers.single_keyword("mask-origin",
                          animation_value_type="none",
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-origin")}
 
-<%helpers:longhand name="mask-size" products="gecko" animation_value_type="normal" extra_prefixes="webkit"
+<%helpers:longhand name="mask-size" products="gecko" animation_value_type="ComputedValue" extra_prefixes="webkit"
                    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-size">
     use properties::longhands::background_size;
     pub use ::properties::longhands::background_size::SpecifiedValue;
diff --git a/components/style/properties/longhand/text.mako.rs b/components/style/properties/longhand/text.mako.rs
index c9f17026ef3a..e042c43e0471 100644
--- a/components/style/properties/longhand/text.mako.rs
+++ b/components/style/properties/longhand/text.mako.rs
@@ -228,7 +228,7 @@ ${helpers.predefined_type(
     initial_specified_value="specified::CSSColor::currentcolor()",
     complex_color=True,
     products="gecko",
-    animation_value_type="normal",
+    animation_value_type="ComputedValue",
     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-color")}
 
 <%helpers:longhand name="initial-letter"