Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

51 files changed, 20231 insertions, 0 deletions

diff --git a/servo/components/style/properties/Mako-1.1.2-py2.py3-none-any.whl b/servo/components/style/properties/Mako-1.1.2-py2.py3-none-any.whl
new file mode 100644
index 0000000000..9593025a47
--- /dev/null
+++ b/servo/components/style/properties/Mako-1.1.2-py2.py3-none-any.whl
diff --git a/servo/components/style/properties/build.py b/servo/components/style/properties/build.py
new file mode 100644
index 0000000000..6c3ee0cf66
--- /dev/null
+++ b/servo/components/style/properties/build.py
@@ -0,0 +1,176 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import json
+import os.path
+import re
+import sys
+
+BASE = os.path.dirname(__file__.replace("\\", "/"))
+sys.path.insert(0, os.path.join(BASE, "Mako-1.1.2-py2.py3-none-any.whl"))
+sys.path.insert(0, BASE)  # For importing `data.py`
+
+from mako import exceptions
+from mako.lookup import TemplateLookup
+from mako.template import Template
+
+import data
+
+RE_PYTHON_ADDR = re.compile(r"<.+? object at 0x[0-9a-fA-F]+>")
+
+OUT_DIR = os.environ.get("OUT_DIR", "")
+
+STYLE_STRUCT_LIST = [
+    "background",
+    "border",
+    "box",
+    "column",
+    "counters",
+    "effects",
+    "font",
+    "inherited_box",
+    "inherited_svg",
+    "inherited_table",
+    "inherited_text",
+    "inherited_ui",
+    "list",
+    "margin",
+    "outline",
+    "page",
+    "padding",
+    "position",
+    "svg",
+    "table",
+    "text",
+    "ui",
+    "xul",
+]
+
+
+def main():
+    usage = (
+        "Usage: %s [ servo-2013 | servo-2020 | gecko ] [ style-crate | geckolib <template> | html ]"
+        % sys.argv[0]
+    )
+    if len(sys.argv) < 3:
+        abort(usage)
+    engine = sys.argv[1]
+    output = sys.argv[2]
+
+    if engine not in ["servo-2013", "servo-2020", "gecko"] or output not in [
+        "style-crate",
+        "geckolib",
+        "html",
+    ]:
+        abort(usage)
+
+    properties = data.PropertiesData(engine=engine)
+    files = {}
+    for kind in ["longhands", "shorthands"]:
+        files[kind] = {}
+        for struct in STYLE_STRUCT_LIST:
+            file_name = os.path.join(BASE, kind, "{}.mako.rs".format(struct))
+            if kind == "shorthands" and not os.path.exists(file_name):
+                files[kind][struct] = ""
+                continue
+            files[kind][struct] = render(
+                file_name,
+                engine=engine,
+                data=properties,
+            )
+    properties_template = os.path.join(BASE, "properties.mako.rs")
+    files["properties"] = render(
+        properties_template,
+        engine=engine,
+        data=properties,
+        __file__=properties_template,
+        OUT_DIR=OUT_DIR,
+    )
+    if output == "style-crate":
+        write(OUT_DIR, "properties.rs", files["properties"])
+        for kind in ["longhands", "shorthands"]:
+            for struct in files[kind]:
+                write(
+                    os.path.join(OUT_DIR, kind),
+                    "{}.rs".format(struct),
+                    files[kind][struct],
+                )
+
+        if engine == "gecko":
+            template = os.path.join(BASE, "gecko.mako.rs")
+            rust = render(template, data=properties)
+            write(OUT_DIR, "gecko_properties.rs", rust)
+
+        if engine in ["servo-2013", "servo-2020"]:
+            if engine == "servo-2013":
+                pref_attr = "servo_2013_pref"
+            if engine == "servo-2020":
+                pref_attr = "servo_2020_pref"
+            properties_dict = {
+                kind: {
+                    p.name: {"pref": getattr(p, pref_attr)}
+                    for prop in properties_list
+                    if prop.enabled_in_content()
+                    for p in [prop] + prop.alias
+                }
+                for kind, properties_list in [
+                    ("longhands", properties.longhands),
+                    ("shorthands", properties.shorthands),
+                ]
+            }
+            as_html = render(
+                os.path.join(BASE, "properties.html.mako"), properties=properties_dict
+            )
+            as_json = json.dumps(properties_dict, indent=4, sort_keys=True)
+            doc_servo = os.path.join(BASE, "..", "..", "..", "target", "doc", "servo")
+            write(doc_servo, "css-properties.html", as_html)
+            write(doc_servo, "css-properties.json", as_json)
+            write(OUT_DIR, "css-properties.json", as_json)
+    elif output == "geckolib":
+        if len(sys.argv) < 4:
+            abort(usage)
+        template = sys.argv[3]
+        header = render(template, data=properties)
+        sys.stdout.write(header)
+
+
+def abort(message):
+    print(message, file=sys.stderr)
+    sys.exit(1)
+
+
+def render(filename, **context):
+    try:
+        lookup = TemplateLookup(
+            directories=[BASE], input_encoding="utf8", strict_undefined=True
+        )
+        template = Template(
+            open(filename, "rb").read(),
+            filename=filename,
+            input_encoding="utf8",
+            lookup=lookup,
+            strict_undefined=True,
+        )
+        # Uncomment to debug generated Python code:
+        # write("/tmp", "mako_%s.py" % os.path.basename(filename), template.code)
+        return template.render(**context)
+    except Exception:
+        # Uncomment to see a traceback in generated Python code:
+        # raise
+        abort(exceptions.text_error_template().render())
+
+
+def write(directory, filename, content):
+    if not os.path.exists(directory):
+        os.makedirs(directory)
+    full_path = os.path.join(directory, filename)
+    open(full_path, "w", encoding="utf-8").write(content)
+
+    python_addr = RE_PYTHON_ADDR.search(content)
+    if python_addr:
+        abort('Found "{}" in {} ({})'.format(python_addr.group(0), filename, full_path))
+
+
+if __name__ == "__main__":
+    main()
diff --git a/servo/components/style/properties/cascade.rs b/servo/components/style/properties/cascade.rs
new file mode 100644
index 0000000000..021c7e8b7a
--- /dev/null
+++ b/servo/components/style/properties/cascade.rs
@@ -0,0 +1,1253 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+//! The main cascading algorithm of the style system.
+
+use crate::applicable_declarations::CascadePriority;
+use crate::color::AbsoluteColor;
+use crate::computed_value_flags::ComputedValueFlags;
+use crate::context::QuirksMode;
+use crate::custom_properties::CustomPropertiesBuilder;
+use crate::dom::TElement;
+use crate::font_metrics::FontMetricsOrientation;
+use crate::logical_geometry::WritingMode;
+use crate::media_queries::Device;
+use crate::properties::declaration_block::{DeclarationImportanceIterator, Importance};
+use crate::properties::generated::{
+    CSSWideKeyword, ComputedValues, LonghandId, LonghandIdSet, PropertyDeclaration,
+    PropertyDeclarationId, PropertyFlags, ShorthandsWithPropertyReferencesCache, StyleBuilder,
+    CASCADE_PROPERTY,
+};
+use crate::rule_cache::{RuleCache, RuleCacheConditions};
+use crate::rule_tree::{CascadeLevel, StrongRuleNode};
+use crate::selector_parser::PseudoElement;
+use crate::shared_lock::StylesheetGuards;
+use crate::style_adjuster::StyleAdjuster;
+use crate::stylesheets::container_rule::ContainerSizeQuery;
+use crate::stylesheets::{layer_rule::LayerOrder, Origin};
+use crate::values::specified::length::FontBaseSize;
+use crate::values::{computed, specified};
+use fxhash::FxHashMap;
+use servo_arc::Arc;
+use smallvec::SmallVec;
+use std::borrow::Cow;
+use std::mem;
+
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+enum CanHaveLogicalProperties {
+    No,
+    Yes,
+}
+
+/// Performs the CSS cascade, computing new styles for an element from its parent style.
+///
+/// The arguments are:
+///
+///   * `device`: Used to get the initial viewport and other external state.
+///
+///   * `rule_node`: The rule node in the tree that represent the CSS rules that
+///   matched.
+///
+///   * `parent_style`: The parent style, if applicable; if `None`, this is the root node.
+///
+/// Returns the computed values.
+///   * `flags`: Various flags.
+///
+pub fn cascade<E>(
+    device: &Device,
+    pseudo: Option<&PseudoElement>,
+    rule_node: &StrongRuleNode,
+    guards: &StylesheetGuards,
+    originating_element_style: Option<&ComputedValues>,
+    parent_style: Option<&ComputedValues>,
+    parent_style_ignoring_first_line: Option<&ComputedValues>,
+    layout_parent_style: Option<&ComputedValues>,
+    visited_rules: Option<&StrongRuleNode>,
+    cascade_input_flags: ComputedValueFlags,
+    quirks_mode: QuirksMode,
+    rule_cache: Option<&RuleCache>,
+    rule_cache_conditions: &mut RuleCacheConditions,
+    element: Option<E>,
+) -> Arc<ComputedValues>
+where
+    E: TElement,
+{
+    cascade_rules(
+        device,
+        pseudo,
+        rule_node,
+        guards,
+        originating_element_style,
+        parent_style,
+        parent_style_ignoring_first_line,
+        layout_parent_style,
+        CascadeMode::Unvisited { visited_rules },
+        cascade_input_flags,
+        quirks_mode,
+        rule_cache,
+        rule_cache_conditions,
+        element,
+    )
+}
+
+struct DeclarationIterator<'a> {
+    // Global to the iteration.
+    guards: &'a StylesheetGuards<'a>,
+    restriction: Option<PropertyFlags>,
+    // The rule we're iterating over.
+    current_rule_node: Option<&'a StrongRuleNode>,
+    // Per rule state.
+    declarations: DeclarationImportanceIterator<'a>,
+    origin: Origin,
+    importance: Importance,
+    priority: CascadePriority,
+}
+
+impl<'a> DeclarationIterator<'a> {
+    #[inline]
+    fn new(
+        rule_node: &'a StrongRuleNode,
+        guards: &'a StylesheetGuards,
+        pseudo: Option<&PseudoElement>,
+    ) -> Self {
+        let restriction = pseudo.and_then(|p| p.property_restriction());
+        let mut iter = Self {
+            guards,
+            current_rule_node: Some(rule_node),
+            origin: Origin::UserAgent,
+            importance: Importance::Normal,
+            priority: CascadePriority::new(CascadeLevel::UANormal, LayerOrder::root()),
+            declarations: DeclarationImportanceIterator::default(),
+            restriction,
+        };
+        iter.update_for_node(rule_node);
+        iter
+    }
+
+    fn update_for_node(&mut self, node: &'a StrongRuleNode) {
+        self.priority = node.cascade_priority();
+        let level = self.priority.cascade_level();
+        self.origin = level.origin();
+        self.importance = level.importance();
+        let guard = match self.origin {
+            Origin::Author => self.guards.author,
+            Origin::User | Origin::UserAgent => self.guards.ua_or_user,
+        };
+        self.declarations = match node.style_source() {
+            Some(source) => source.read(guard).declaration_importance_iter(),
+            None => DeclarationImportanceIterator::default(),
+        };
+    }
+}
+
+impl<'a> Iterator for DeclarationIterator<'a> {
+    type Item = (&'a PropertyDeclaration, CascadePriority);
+
+    #[inline]
+    fn next(&mut self) -> Option<Self::Item> {
+        loop {
+            if let Some((decl, importance)) = self.declarations.next_back() {
+                if self.importance != importance {
+                    continue;
+                }
+
+                if let Some(restriction) = self.restriction {
+                    // decl.id() is either a longhand or a custom
+                    // property.  Custom properties are always allowed, but
+                    // longhands are only allowed if they have our
+                    // restriction flag set.
+                    if let PropertyDeclarationId::Longhand(id) = decl.id() {
+                        if !id.flags().contains(restriction) && self.origin != Origin::UserAgent {
+                            continue;
+                        }
+                    }
+                }
+
+                return Some((decl, self.priority));
+            }
+
+            let next_node = self.current_rule_node.take()?.parent()?;
+            self.current_rule_node = Some(next_node);
+            self.update_for_node(next_node);
+        }
+    }
+}
+
+fn cascade_rules<E>(
+    device: &Device,
+    pseudo: Option<&PseudoElement>,
+    rule_node: &StrongRuleNode,
+    guards: &StylesheetGuards,
+    originating_element_style: Option<&ComputedValues>,
+    parent_style: Option<&ComputedValues>,
+    parent_style_ignoring_first_line: Option<&ComputedValues>,
+    layout_parent_style: Option<&ComputedValues>,
+    cascade_mode: CascadeMode,
+    cascade_input_flags: ComputedValueFlags,
+    quirks_mode: QuirksMode,
+    rule_cache: Option<&RuleCache>,
+    rule_cache_conditions: &mut RuleCacheConditions,
+    element: Option<E>,
+) -> Arc<ComputedValues>
+where
+    E: TElement,
+{
+    debug_assert_eq!(
+        parent_style.is_some(),
+        parent_style_ignoring_first_line.is_some()
+    );
+    apply_declarations(
+        device,
+        pseudo,
+        rule_node,
+        guards,
+        DeclarationIterator::new(rule_node, guards, pseudo),
+        originating_element_style,
+        parent_style,
+        parent_style_ignoring_first_line,
+        layout_parent_style,
+        cascade_mode,
+        cascade_input_flags,
+        quirks_mode,
+        rule_cache,
+        rule_cache_conditions,
+        element,
+    )
+}
+
+/// Whether we're cascading for visited or unvisited styles.
+#[derive(Clone, Copy)]
+pub enum CascadeMode<'a> {
+    /// We're cascading for unvisited styles.
+    Unvisited {
+        /// The visited rules that should match the visited style.
+        visited_rules: Option<&'a StrongRuleNode>,
+    },
+    /// We're cascading for visited styles.
+    Visited {
+        /// The writing mode of our unvisited style, needed to correctly resolve
+        /// logical properties..
+        writing_mode: WritingMode,
+    },
+}
+
+/// NOTE: This function expects the declaration with more priority to appear
+/// first.
+pub fn apply_declarations<'a, E, I>(
+    device: &Device,
+    pseudo: Option<&PseudoElement>,
+    rules: &StrongRuleNode,
+    guards: &StylesheetGuards,
+    iter: I,
+    originating_element_style: Option<&ComputedValues>,
+    parent_style: Option<&ComputedValues>,
+    parent_style_ignoring_first_line: Option<&ComputedValues>,
+    layout_parent_style: Option<&ComputedValues>,
+    cascade_mode: CascadeMode,
+    cascade_input_flags: ComputedValueFlags,
+    quirks_mode: QuirksMode,
+    rule_cache: Option<&RuleCache>,
+    rule_cache_conditions: &mut RuleCacheConditions,
+    element: Option<E>,
+) -> Arc<ComputedValues>
+where
+    E: TElement,
+    I: Iterator<Item = (&'a PropertyDeclaration, CascadePriority)>,
+{
+    debug_assert_eq!(
+        originating_element_style.is_some(),
+        element.is_some() && pseudo.is_some()
+    );
+    debug_assert!(layout_parent_style.is_none() || parent_style.is_some());
+    debug_assert_eq!(
+        parent_style.is_some(),
+        parent_style_ignoring_first_line.is_some()
+    );
+    #[cfg(feature = "gecko")]
+    debug_assert!(
+        parent_style.is_none() ||
+            ::std::ptr::eq(
+                parent_style.unwrap(),
+                parent_style_ignoring_first_line.unwrap()
+            ) ||
+            parent_style.unwrap().is_first_line_style()
+    );
+
+    let inherited_style = parent_style.unwrap_or(device.default_computed_values());
+
+    let mut declarations = SmallVec::<[(&_, CascadePriority); 32]>::new();
+    let mut referenced_properties = LonghandIdSet::default();
+    let custom_properties = {
+        let mut builder = CustomPropertiesBuilder::new(inherited_style.custom_properties(), device);
+
+        for (declaration, priority) in iter {
+            declarations.push((declaration, priority));
+            if let PropertyDeclaration::Custom(ref declaration) = *declaration {
+                builder.cascade(declaration, priority);
+            } else {
+                referenced_properties.insert(declaration.id().as_longhand().unwrap());
+            }
+        }
+
+        builder.build()
+    };
+
+    let is_root_element = pseudo.is_none() && element.map_or(false, |e| e.is_root());
+    let container_size_query =
+        ContainerSizeQuery::for_option_element(element, originating_element_style);
+
+    let mut context = computed::Context::new(
+        // We'd really like to own the rules here to avoid refcount traffic, but
+        // animation's usage of `apply_declarations` make this tricky. See bug
+        // 1375525.
+        StyleBuilder::new(
+            device,
+            parent_style,
+            parent_style_ignoring_first_line,
+            pseudo,
+            Some(rules.clone()),
+            custom_properties,
+            is_root_element,
+        ),
+        quirks_mode,
+        rule_cache_conditions,
+        container_size_query,
+    );
+
+    context.style().add_flags(cascade_input_flags);
+
+    let using_cached_reset_properties;
+    let mut cascade = Cascade::new(&mut context, cascade_mode, &referenced_properties);
+    let mut shorthand_cache = ShorthandsWithPropertyReferencesCache::default();
+
+    let properties_to_apply = match cascade.cascade_mode {
+        CascadeMode::Visited { writing_mode } => {
+            cascade.context.builder.writing_mode = writing_mode;
+            // We never insert visited styles into the cache so we don't need to
+            // try looking it up. It also wouldn't be super-profitable, only a
+            // handful reset properties are non-inherited.
+            using_cached_reset_properties = false;
+            LonghandIdSet::visited_dependent()
+        },
+        CascadeMode::Unvisited { visited_rules } => {
+            if cascade.apply_properties(
+                CanHaveLogicalProperties::No,
+                LonghandIdSet::writing_mode_group(),
+                declarations.iter().cloned(),
+                &mut shorthand_cache,
+            ) {
+                cascade.compute_writing_mode();
+            }
+
+            if cascade.apply_properties(
+                CanHaveLogicalProperties::No,
+                LonghandIdSet::fonts_and_color_group(),
+                declarations.iter().cloned(),
+                &mut shorthand_cache,
+            ) {
+                cascade.fixup_font_stuff();
+            }
+
+            if let Some(visited_rules) = visited_rules {
+                cascade.compute_visited_style_if_needed(
+                    element,
+                    originating_element_style,
+                    parent_style,
+                    parent_style_ignoring_first_line,
+                    layout_parent_style,
+                    visited_rules,
+                    guards,
+                );
+            }
+
+            using_cached_reset_properties =
+                cascade.try_to_use_cached_reset_properties(rule_cache, guards);
+
+            if using_cached_reset_properties {
+                LonghandIdSet::late_group_only_inherited()
+            } else {
+                LonghandIdSet::late_group()
+            }
+        },
+    };
+
+    cascade.apply_properties(
+        CanHaveLogicalProperties::Yes,
+        properties_to_apply,
+        declarations.iter().cloned(),
+        &mut shorthand_cache,
+    );
+
+    cascade.finished_applying_properties();
+
+    context.builder.clear_modified_reset();
+
+    if matches!(cascade_mode, CascadeMode::Unvisited { .. }) {
+        StyleAdjuster::new(&mut context.builder)
+            .adjust(layout_parent_style.unwrap_or(inherited_style), element);
+    }
+
+    if context.builder.modified_reset() || using_cached_reset_properties {
+        // If we adjusted any reset structs, we can't cache this ComputedValues.
+        //
+        // Also, if we re-used existing reset structs, don't bother caching it
+        // back again. (Aside from being wasted effort, it will be wrong, since
+        // context.rule_cache_conditions won't be set appropriately if we didn't
+        // compute those reset properties.)
+        context.rule_cache_conditions.borrow_mut().set_uncacheable();
+    }
+
+    context.builder.build()
+}
+
+/// For ignored colors mode, we sometimes want to do something equivalent to
+/// "revert-or-initial", where we `revert` for a given origin, but then apply a
+/// given initial value if nothing in other origins did override it.
+///
+/// This is a bit of a clunky way of achieving this.
+type DeclarationsToApplyUnlessOverriden = SmallVec<[PropertyDeclaration; 2]>;
+
+fn tweak_when_ignoring_colors(
+    context: &computed::Context,
+    longhand_id: LonghandId,
+    origin: Origin,
+    declaration: &mut Cow<PropertyDeclaration>,
+    declarations_to_apply_unless_overriden: &mut DeclarationsToApplyUnlessOverriden,
+) {
+    use crate::values::computed::ToComputedValue;
+    use crate::values::specified::Color;
+
+    if !longhand_id.ignored_when_document_colors_disabled() {
+        return;
+    }
+
+    let is_ua_or_user_rule = matches!(origin, Origin::User | Origin::UserAgent);
+    if is_ua_or_user_rule {
+        return;
+    }
+
+    // Always honor colors if forced-color-adjust is set to none.
+    let forced = context
+        .builder
+        .get_inherited_text()
+        .clone_forced_color_adjust();
+    if forced == computed::ForcedColorAdjust::None {
+        return;
+    }
+
+    // Don't override background-color on ::-moz-color-swatch. It is set as an
+    // author style (via the style attribute), but it's pretty important for it
+    // to show up for obvious reasons :)
+    if context
+        .builder
+        .pseudo
+        .map_or(false, |p| p.is_color_swatch()) &&
+        longhand_id == LonghandId::BackgroundColor
+    {
+        return;
+    }
+
+    fn alpha_channel(color: &Color, context: &computed::Context) -> f32 {
+        // We assume here currentColor is opaque.
+        color
+            .to_computed_value(context)
+            .resolve_to_absolute(&AbsoluteColor::black())
+            .alpha
+    }
+
+    // A few special-cases ahead.
+    match **declaration {
+        PropertyDeclaration::BackgroundColor(ref color) => {
+            // We honor system colors and transparent colors unconditionally.
+            //
+            // NOTE(emilio): We honor transparent unconditionally, like we do
+            // for color, even though it causes issues like bug 1625036. The
+            // reasoning is that the conditions that trigger that (having
+            // mismatched widget and default backgrounds) are both uncommon, and
+            // broken in other applications as well, and not honoring
+            // transparent makes stuff uglier or break unconditionally
+            // (bug 1666059, bug 1755713).
+            if color.honored_in_forced_colors_mode(/* allow_transparent = */ true) {
+                return;
+            }
+            // For background-color, we revert or initial-with-preserved-alpha
+            // otherwise, this is needed to preserve semi-transparent
+            // backgrounds.
+            let alpha = alpha_channel(color, context);
+            if alpha == 0.0 {
+                return;
+            }
+            let mut color = context.builder.device.default_background_color();
+            color.alpha = alpha;
+            declarations_to_apply_unless_overriden
+                .push(PropertyDeclaration::BackgroundColor(color.into()))
+        },
+        PropertyDeclaration::Color(ref color) => {
+            // We honor color: transparent and system colors.
+            if color
+                .0
+                .honored_in_forced_colors_mode(/* allow_transparent = */ true)
+            {
+                return;
+            }
+            // If the inherited color would be transparent, but we would
+            // override this with a non-transparent color, then override it with
+            // the default color. Otherwise just let it inherit through.
+            if context
+                .builder
+                .get_parent_inherited_text()
+                .clone_color()
+                .alpha ==
+                0.0
+            {
+                let color = context.builder.device.default_color();
+                declarations_to_apply_unless_overriden.push(PropertyDeclaration::Color(
+                    specified::ColorPropertyValue(color.into()),
+                ))
+            }
+        },
+        // We honor url background-images if backplating.
+        #[cfg(feature = "gecko")]
+        PropertyDeclaration::BackgroundImage(ref bkg) => {
+            use crate::values::generics::image::Image;
+            if static_prefs::pref!("browser.display.permit_backplate") {
+                if bkg
+                    .0
+                    .iter()
+                    .all(|image| matches!(*image, Image::Url(..) | Image::None))
+                {
+                    return;
+                }
+            }
+        },
+        _ => {
+            // We honor system colors more generally for all colors.
+            //
+            // We used to honor transparent but that causes accessibility
+            // regressions like bug 1740924.
+            //
+            // NOTE(emilio): This doesn't handle caret-color and accent-color
+            // because those use a slightly different syntax (<color> | auto for
+            // example).
+            //
+            // That's probably fine though, as using a system color for
+            // caret-color doesn't make sense (using currentColor is fine), and
+            // we ignore accent-color in high-contrast-mode anyways.
+            if let Some(color) = declaration.color_value() {
+                if color.honored_in_forced_colors_mode(/* allow_transparent = */ false) {
+                    return;
+                }
+            }
+        },
+    }
+
+    *declaration.to_mut() =
+        PropertyDeclaration::css_wide_keyword(longhand_id, CSSWideKeyword::Revert);
+}
+
+struct Cascade<'a, 'b: 'a> {
+    context: &'a mut computed::Context<'b>,
+    cascade_mode: CascadeMode<'a>,
+    /// All the properties that have a declaration in the cascade.
+    referenced: &'a LonghandIdSet,
+    seen: LonghandIdSet,
+    author_specified: LonghandIdSet,
+    reverted_set: LonghandIdSet,
+    reverted: FxHashMap<LonghandId, (CascadePriority, bool)>,
+}
+
+impl<'a, 'b: 'a> Cascade<'a, 'b> {
+    fn new(
+        context: &'a mut computed::Context<'b>,
+        cascade_mode: CascadeMode<'a>,
+        referenced: &'a LonghandIdSet,
+    ) -> Self {
+        Self {
+            context,
+            cascade_mode,
+            referenced,
+            seen: LonghandIdSet::default(),
+            author_specified: LonghandIdSet::default(),
+            reverted_set: Default::default(),
+            reverted: Default::default(),
+        }
+    }
+
+    fn substitute_variables_if_needed<'decl, 'cache>(
+        &mut self,
+        declaration: &'decl PropertyDeclaration,
+        cache: &'cache mut ShorthandsWithPropertyReferencesCache,
+    ) -> Cow<'decl, PropertyDeclaration>
+    where
+        'cache: 'decl,
+    {
+        let declaration = match *declaration {
+            PropertyDeclaration::WithVariables(ref declaration) => declaration,
+            ref d => return Cow::Borrowed(d),
+        };
+
+        if !declaration.id.inherited() {
+            self.context
+                .rule_cache_conditions
+                .borrow_mut()
+                .set_uncacheable();
+
+            // NOTE(emilio): We only really need to add the `display` /
+            // `content` flag if the CSS variable has not been specified on our
+            // declarations, but we don't have that information at this point,
+            // and it doesn't seem like an important enough optimization to
+            // warrant it.
+            match declaration.id {
+                LonghandId::Display => {
+                    self.context
+                        .builder
+                        .add_flags(ComputedValueFlags::DISPLAY_DEPENDS_ON_INHERITED_STYLE);
+                },
+                LonghandId::Content => {
+                    self.context
+                        .builder
+                        .add_flags(ComputedValueFlags::CONTENT_DEPENDS_ON_INHERITED_STYLE);
+                },
+                _ => {},
+            }
+        }
+
+        declaration.value.substitute_variables(
+            declaration.id,
+            self.context.builder.writing_mode,
+            self.context.builder.custom_properties(),
+            self.context.quirks_mode,
+            self.context.device(),
+            cache,
+        )
+    }
+
+    #[inline(always)]
+    fn apply_declaration(&mut self, longhand_id: LonghandId, declaration: &PropertyDeclaration) {
+        // We could (and used to) use a pattern match here, but that bloats this
+        // function to over 100K of compiled code!
+        //
+        // To improve i-cache behavior, we outline the individual functions and
+        // use virtual dispatch instead.
+        let discriminant = longhand_id as usize;
+        (CASCADE_PROPERTY[discriminant])(declaration, &mut self.context);
+    }
+
+    fn apply_properties<'decls, I>(
+        &mut self,
+        can_have_logical_properties: CanHaveLogicalProperties,
+        properties_to_apply: &'a LonghandIdSet,
+        declarations: I,
+        mut shorthand_cache: &mut ShorthandsWithPropertyReferencesCache,
+    ) -> bool
+    where
+        I: Iterator<Item = (&'decls PropertyDeclaration, CascadePriority)>,
+    {
+        if !self.referenced.contains_any(properties_to_apply) {
+            return false;
+        }
+
+        let can_have_logical_properties =
+            can_have_logical_properties == CanHaveLogicalProperties::Yes;
+
+        let ignore_colors = !self.context.builder.device.use_document_colors();
+        let mut declarations_to_apply_unless_overriden = DeclarationsToApplyUnlessOverriden::new();
+
+        for (declaration, priority) in declarations {
+            let origin = priority.cascade_level().origin();
+
+            let declaration_id = declaration.id();
+            let longhand_id = match declaration_id {
+                PropertyDeclarationId::Longhand(id) => id,
+                PropertyDeclarationId::Custom(..) => continue,
+            };
+
+            if !properties_to_apply.contains(longhand_id) {
+                continue;
+            }
+
+            debug_assert!(can_have_logical_properties || !longhand_id.is_logical());
+            let physical_longhand_id = if can_have_logical_properties {
+                longhand_id.to_physical(self.context.builder.writing_mode)
+            } else {
+                longhand_id
+            };
+
+            if self.seen.contains(physical_longhand_id) {
+                continue;
+            }
+
+            if self.reverted_set.contains(physical_longhand_id) {
+                if let Some(&(reverted_priority, is_origin_revert)) =
+                    self.reverted.get(&physical_longhand_id)
+                {
+                    if !reverted_priority.allows_when_reverted(&priority, is_origin_revert) {
+                        continue;
+                    }
+                }
+            }
+
+            let mut declaration =
+                self.substitute_variables_if_needed(declaration, &mut shorthand_cache);
+
+            // When document colors are disabled, do special handling of
+            // properties that are marked as ignored in that mode.
+            if ignore_colors {
+                tweak_when_ignoring_colors(
+                    &self.context,
+                    longhand_id,
+                    origin,
+                    &mut declaration,
+                    &mut declarations_to_apply_unless_overriden,
+                );
+                debug_assert_eq!(
+                    declaration.id(),
+                    PropertyDeclarationId::Longhand(longhand_id),
+                    "Shouldn't change the declaration id!",
+                );
+            }
+
+            let is_unset = match declaration.get_css_wide_keyword() {
+                Some(keyword) => match keyword {
+                    CSSWideKeyword::RevertLayer | CSSWideKeyword::Revert => {
+                        let origin_revert = keyword == CSSWideKeyword::Revert;
+                        // We intentionally don't want to insert it into
+                        // `self.seen`, `reverted` takes care of rejecting other
+                        // declarations as needed.
+                        self.reverted_set.insert(physical_longhand_id);
+                        self.reverted
+                            .insert(physical_longhand_id, (priority, origin_revert));
+                        continue;
+                    },
+                    CSSWideKeyword::Unset => true,
+                    CSSWideKeyword::Inherit => longhand_id.inherited(),
+                    CSSWideKeyword::Initial => !longhand_id.inherited(),
+                },
+                None => false,
+            };
+
+            self.seen.insert(physical_longhand_id);
+            if origin == Origin::Author {
+                self.author_specified.insert(physical_longhand_id);
+            }
+
+            if is_unset {
+                continue;
+            }
+
+            // FIXME(emilio): We should avoid generating code for logical
+            // longhands and just use the physical ones, then rename
+            // physical_longhand_id to just longhand_id.
+            self.apply_declaration(longhand_id, &*declaration);
+        }
+
+        if ignore_colors {
+            for declaration in declarations_to_apply_unless_overriden.iter() {
+                let longhand_id = match declaration.id() {
+                    PropertyDeclarationId::Longhand(id) => id,
+                    PropertyDeclarationId::Custom(..) => unreachable!(),
+                };
+                debug_assert!(!longhand_id.is_logical());
+                if self.seen.contains(longhand_id) {
+                    continue;
+                }
+                self.apply_declaration(longhand_id, declaration);
+            }
+        }
+
+        true
+    }
+
+    fn compute_writing_mode(&mut self) {
+        debug_assert!(matches!(self.cascade_mode, CascadeMode::Unvisited { .. }));
+        self.context.builder.writing_mode =
+            WritingMode::new(self.context.builder.get_inherited_box())
+    }
+
+    fn compute_visited_style_if_needed<E>(
+        &mut self,
+        element: Option<E>,
+        originating_element_style: Option<&ComputedValues>,
+        parent_style: Option<&ComputedValues>,
+        parent_style_ignoring_first_line: Option<&ComputedValues>,
+        layout_parent_style: Option<&ComputedValues>,
+        visited_rules: &StrongRuleNode,
+        guards: &StylesheetGuards,
+    ) where
+        E: TElement,
+    {
+        debug_assert!(matches!(self.cascade_mode, CascadeMode::Unvisited { .. }));
+        let is_link = self.context.builder.pseudo.is_none() && element.unwrap().is_link();
+
+        macro_rules! visited_parent {
+            ($parent:expr) => {
+                if is_link {
+                    $parent
+                } else {
+                    $parent.map(|p| p.visited_style().unwrap_or(p))
+                }
+            };
+        }
+
+        let writing_mode = self.context.builder.writing_mode;
+
+        // We could call apply_declarations directly, but that'd cause
+        // another instantiation of this function which is not great.
+        let style = cascade_rules(
+            self.context.builder.device,
+            self.context.builder.pseudo,
+            visited_rules,
+            guards,
+            visited_parent!(originating_element_style),
+            visited_parent!(parent_style),
+            visited_parent!(parent_style_ignoring_first_line),
+            visited_parent!(layout_parent_style),
+            CascadeMode::Visited { writing_mode },
+            // Cascade input flags don't matter for the visited style, they are
+            // in the main (unvisited) style.
+            Default::default(),
+            self.context.quirks_mode,
+            // The rule cache doesn't care about caching :visited
+            // styles, we cache the unvisited style instead. We still do
+            // need to set the caching dependencies properly if present
+            // though, so the cache conditions need to match.
+            None, // rule_cache
+            &mut *self.context.rule_cache_conditions.borrow_mut(),
+            element,
+        );
+        self.context.builder.visited_style = Some(style);
+    }
+
+    fn finished_applying_properties(&mut self) {
+        let builder = &mut self.context.builder;
+
+        #[cfg(feature = "gecko")]
+        {
+            if let Some(bg) = builder.get_background_if_mutated() {
+                bg.fill_arrays();
+            }
+
+            if let Some(svg) = builder.get_svg_if_mutated() {
+                svg.fill_arrays();
+            }
+        }
+
+        if self
+            .author_specified
+            .contains_any(LonghandIdSet::border_background_properties())
+        {
+            builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_BORDER_BACKGROUND);
+        }
+
+        if self.author_specified.contains(LonghandId::FontFamily) {
+            builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_FONT_FAMILY);
+        }
+
+        if self.author_specified.contains(LonghandId::LetterSpacing) {
+            builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_LETTER_SPACING);
+        }
+
+        if self.author_specified.contains(LonghandId::WordSpacing) {
+            builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_WORD_SPACING);
+        }
+
+        if self
+            .author_specified
+            .contains(LonghandId::FontSynthesisWeight)
+        {
+            builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_FONT_SYNTHESIS_WEIGHT);
+        }
+
+        if self
+            .author_specified
+            .contains(LonghandId::FontSynthesisStyle)
+        {
+            builder.add_flags(ComputedValueFlags::HAS_AUTHOR_SPECIFIED_FONT_SYNTHESIS_STYLE);
+        }
+
+        #[cfg(feature = "servo")]
+        {
+            if let Some(font) = builder.get_font_if_mutated() {
+                font.compute_font_hash();
+            }
+        }
+    }
+
+    fn try_to_use_cached_reset_properties(
+        &mut self,
+        cache: Option<&'b RuleCache>,
+        guards: &StylesheetGuards,
+    ) -> bool {
+        let cache = match cache {
+            Some(cache) => cache,
+            None => return false,
+        };
+
+        let builder = &mut self.context.builder;
+
+        let cached_style = match cache.find(guards, &builder) {
+            Some(style) => style,
+            None => return false,
+        };
+
+        builder.copy_reset_from(cached_style);
+
+        // We're using the same reset style as another element, and we'll skip
+        // applying the relevant properties. So we need to do the relevant
+        // bookkeeping here to keep these bits correct.
+        //
+        // Note that the border/background properties are non-inherited, so we
+        // don't need to do anything else other than just copying the bits over.
+        //
+        // When using this optimization, we also need to copy whether the old
+        // style specified viewport units / used font-relative lengths, this one
+        // would as well.  It matches the same rules, so it is the right thing
+        // to do anyways, even if it's only used on inherited properties.
+        let bits_to_copy = ComputedValueFlags::HAS_AUTHOR_SPECIFIED_BORDER_BACKGROUND |
+            ComputedValueFlags::DEPENDS_ON_SELF_FONT_METRICS |
+            ComputedValueFlags::DEPENDS_ON_INHERITED_FONT_METRICS |
+            ComputedValueFlags::USES_VIEWPORT_UNITS;
+        builder.add_flags(cached_style.flags & bits_to_copy);
+
+        true
+    }
+
+    /// The initial font depends on the current lang group so we may need to
+    /// recompute it if the language changed.
+    #[inline]
+    #[cfg(feature = "gecko")]
+    fn recompute_initial_font_family_if_needed(&mut self) {
+        use crate::gecko_bindings::bindings;
+        use crate::values::computed::font::FontFamily;
+
+        if !self.seen.contains(LonghandId::XLang) {
+            return;
+        }
+
+        let builder = &mut self.context.builder;
+        let default_font_type = {
+            let font = builder.get_font();
+
+            if !font.mFont.family.is_initial {
+                return;
+            }
+
+            let default_font_type = unsafe {
+                bindings::Gecko_nsStyleFont_ComputeFallbackFontTypeForLanguage(
+                    builder.device.document(),
+                    font.mLanguage.mRawPtr,
+                )
+            };
+
+            let initial_generic = font.mFont.family.families.single_generic();
+            debug_assert!(
+                initial_generic.is_some(),
+                "Initial font should be just one generic font"
+            );
+            if initial_generic == Some(default_font_type) {
+                return;
+            }
+
+            default_font_type
+        };
+
+        // NOTE: Leaves is_initial untouched.
+        builder.mutate_font().mFont.family.families =
+            FontFamily::generic(default_font_type).families.clone();
+    }
+
+    /// Prioritize user fonts if needed by pref.
+    #[inline]
+    #[cfg(feature = "gecko")]
+    fn prioritize_user_fonts_if_needed(&mut self) {
+        use crate::gecko_bindings::bindings;
+
+        if !self.seen.contains(LonghandId::FontFamily) {
+            return;
+        }
+
+        if static_prefs::pref!("browser.display.use_document_fonts") != 0 {
+            return;
+        }
+
+        let builder = &mut self.context.builder;
+        let default_font_type = {
+            let font = builder.get_font();
+
+            if font.mFont.family.is_system_font {
+                return;
+            }
+
+            if !font.mFont.family.families.needs_user_font_prioritization() {
+                return;
+            }
+
+            unsafe {
+                bindings::Gecko_nsStyleFont_ComputeFallbackFontTypeForLanguage(
+                    builder.device.document(),
+                    font.mLanguage.mRawPtr,
+                )
+            }
+        };
+
+        let font = builder.mutate_font();
+        font.mFont
+            .family
+            .families
+            .prioritize_first_generic_or_prepend(default_font_type);
+    }
+
+    /// Some keyword sizes depend on the font family and language.
+    #[cfg(feature = "gecko")]
+    fn recompute_keyword_font_size_if_needed(&mut self) {
+        use crate::values::computed::ToComputedValue;
+
+        if !self.seen.contains(LonghandId::XLang) && !self.seen.contains(LonghandId::FontFamily) {
+            return;
+        }
+
+        let new_size = {
+            let font = self.context.builder.get_font();
+            let info = font.clone_font_size().keyword_info;
+            let new_size = match info.kw {
+                specified::FontSizeKeyword::None => return,
+                _ => {
+                    self.context.for_non_inherited_property = None;
+                    specified::FontSize::Keyword(info).to_computed_value(self.context)
+                },
+            };
+
+            if font.mScriptUnconstrainedSize == new_size.computed_size {
+                return;
+            }
+
+            new_size
+        };
+
+        self.context.builder.mutate_font().set_font_size(new_size);
+    }
+
+    /// Some properties, plus setting font-size itself, may make us go out of
+    /// our minimum font-size range.
+    #[cfg(feature = "gecko")]
+    fn constrain_font_size_if_needed(&mut self) {
+        use crate::gecko_bindings::bindings;
+        use crate::values::generics::NonNegative;
+
+        if !self.seen.contains(LonghandId::XLang) &&
+            !self.seen.contains(LonghandId::FontFamily) &&
+            !self.seen.contains(LonghandId::MozMinFontSizeRatio) &&
+            !self.seen.contains(LonghandId::FontSize)
+        {
+            return;
+        }
+
+        let builder = &mut self.context.builder;
+        let min_font_size = {
+            let font = builder.get_font();
+            let min_font_size = unsafe {
+                bindings::Gecko_nsStyleFont_ComputeMinSize(&**font, builder.device.document())
+            };
+
+            if font.mFont.size.0 >= min_font_size {
+                return;
+            }
+
+            NonNegative(min_font_size)
+        };
+
+        builder.mutate_font().mFont.size = min_font_size;
+    }
+
+    /// <svg:text> is not affected by text zoom, and it uses a preshint to disable it. We fix up
+    /// the struct when this happens by unzooming its contained font values, which will have been
+    /// zoomed in the parent.
+    ///
+    /// FIXME(emilio): Why doing this _before_ handling font-size? That sounds wrong.
+    #[cfg(feature = "gecko")]
+    fn unzoom_fonts_if_needed(&mut self) {
+        if !self.seen.contains(LonghandId::XTextScale) {
+            return;
+        }
+
+        let builder = &mut self.context.builder;
+
+        let parent_text_scale = builder.get_parent_font().clone__x_text_scale();
+        let text_scale = builder.get_font().clone__x_text_scale();
+        if parent_text_scale == text_scale {
+            return;
+        }
+        debug_assert_ne!(
+            parent_text_scale.text_zoom_enabled(),
+            text_scale.text_zoom_enabled(),
+            "There's only one value that disables it"
+        );
+        debug_assert!(
+            !text_scale.text_zoom_enabled(),
+            "We only ever disable text zoom (in svg:text), never enable it"
+        );
+        let device = builder.device;
+        builder.mutate_font().unzoom_fonts(device);
+    }
+
+    /// MathML script* attributes do some very weird shit with font-size.
+    ///
+    /// Handle them specially here, separate from other font-size stuff.
+    ///
+    /// How this should interact with lang="" and font-family-dependent sizes is
+    /// not clear to me. For now just pretend those don't exist here.
+    #[cfg(feature = "gecko")]
+    fn handle_mathml_scriptlevel_if_needed(&mut self) {
+        use crate::values::generics::NonNegative;
+
+        if !self.seen.contains(LonghandId::MathDepth) &&
+            !self.seen.contains(LonghandId::MozScriptMinSize) &&
+            !self.seen.contains(LonghandId::MozScriptSizeMultiplier)
+        {
+            return;
+        }
+
+        // If the user specifies a font-size, just let it be.
+        if self.seen.contains(LonghandId::FontSize) {
+            return;
+        }
+
+        const SCALE_FACTOR_WHEN_INCREMENTING_MATH_DEPTH_BY_ONE: f32 = 0.71;
+
+        // Helper function that calculates the scale factor applied to font-size
+        // when math-depth goes from parent_math_depth to computed_math_depth.
+        // This function is essentially a modification of the MathML3's formula
+        // 0.71^(parent_math_depth - computed_math_depth) so that a scale factor
+        // of parent_script_percent_scale_down is applied when math-depth goes
+        // from 0 to 1 and parent_script_script_percent_scale_down is applied
+        // when math-depth goes from 0 to 2. This is also a straightforward
+        // implementation of the specification's algorithm:
+        // https://w3c.github.io/mathml-core/#the-math-script-level-property
+        fn scale_factor_for_math_depth_change(
+            parent_math_depth: i32,
+            computed_math_depth: i32,
+            parent_script_percent_scale_down: Option<f32>,
+            parent_script_script_percent_scale_down: Option<f32>,
+        ) -> f32 {
+            let mut a = parent_math_depth;
+            let mut b = computed_math_depth;
+            let c = SCALE_FACTOR_WHEN_INCREMENTING_MATH_DEPTH_BY_ONE;
+            let scale_between_0_and_1 = parent_script_percent_scale_down.unwrap_or_else(|| c);
+            let scale_between_0_and_2 =
+                parent_script_script_percent_scale_down.unwrap_or_else(|| c * c);
+            let mut s = 1.0;
+            let mut invert_scale_factor = false;
+            if a == b {
+                return s;
+            }
+            if b < a {
+                mem::swap(&mut a, &mut b);
+                invert_scale_factor = true;
+            }
+            let mut e = b - a;
+            if a <= 0 && b >= 2 {
+                s *= scale_between_0_and_2;
+                e -= 2;
+            } else if a == 1 {
+                s *= scale_between_0_and_2 / scale_between_0_and_1;
+                e -= 1;
+            } else if b == 1 {
+                s *= scale_between_0_and_1;
+                e -= 1;
+            }
+            s *= (c as f32).powi(e);
+            if invert_scale_factor {
+                1.0 / s.max(f32::MIN_POSITIVE)
+            } else {
+                s
+            }
+        }
+
+        let (new_size, new_unconstrained_size) = {
+            let builder = &self.context.builder;
+            let font = builder.get_font();
+            let parent_font = builder.get_parent_font();
+
+            let delta = font.mMathDepth.saturating_sub(parent_font.mMathDepth);
+
+            if delta == 0 {
+                return;
+            }
+
+            let mut min = parent_font.mScriptMinSize;
+            if font.mXTextScale.text_zoom_enabled() {
+                min = builder.device.zoom_text(min);
+            }
+
+            // If the scriptsizemultiplier has been set to something other than
+            // the default scale, use MathML3's implementation for backward
+            // compatibility. Otherwise, follow MathML Core's algorithm.
+            let scale = if parent_font.mScriptSizeMultiplier !=
+                SCALE_FACTOR_WHEN_INCREMENTING_MATH_DEPTH_BY_ONE
+            {
+                (parent_font.mScriptSizeMultiplier as f32).powi(delta as i32)
+            } else {
+                // Script scale factors are independent of orientation.
+                let font_metrics = self.context.query_font_metrics(
+                    FontBaseSize::InheritedStyle,
+                    FontMetricsOrientation::Horizontal,
+                    /* retrieve_math_scales = */ true,
+                );
+                scale_factor_for_math_depth_change(
+                    parent_font.mMathDepth as i32,
+                    font.mMathDepth as i32,
+                    font_metrics.script_percent_scale_down,
+                    font_metrics.script_script_percent_scale_down,
+                )
+            };
+
+            let parent_size = parent_font.mSize.0;
+            let parent_unconstrained_size = parent_font.mScriptUnconstrainedSize.0;
+            let new_size = parent_size.scale_by(scale);
+            let new_unconstrained_size = parent_unconstrained_size.scale_by(scale);
+
+            if scale <= 1. {
+                // The parent size can be smaller than scriptminsize, e.g. if it
+                // was specified explicitly. Don't scale in this case, but we
+                // don't want to set it to scriptminsize either since that will
+                // make it larger.
+                if parent_size <= min {
+                    (parent_size, new_unconstrained_size)
+                } else {
+                    (min.max(new_size), new_unconstrained_size)
+                }
+            } else {
+                // If the new unconstrained size is larger than the min size,
+                // this means we have escaped the grasp of scriptminsize and can
+                // revert to using the unconstrained size.
+                // However, if the new size is even larger (perhaps due to usage
+                // of em units), use that instead.
+                (
+                    new_size.min(new_unconstrained_size.max(min)),
+                    new_unconstrained_size,
+                )
+            }
+        };
+        let font = self.context.builder.mutate_font();
+        font.mFont.size = NonNegative(new_size);
+        font.mSize = NonNegative(new_size);
+        font.mScriptUnconstrainedSize = NonNegative(new_unconstrained_size);
+    }
+
+    /// Various properties affect how font-size and font-family are computed.
+    ///
+    /// These need to be handled here, since relative lengths and ex / ch units
+    /// for late properties depend on these.
+    fn fixup_font_stuff(&mut self) {
+        #[cfg(feature = "gecko")]
+        {
+            self.unzoom_fonts_if_needed();
+            self.recompute_initial_font_family_if_needed();
+            self.prioritize_user_fonts_if_needed();
+            self.recompute_keyword_font_size_if_needed();
+            self.handle_mathml_scriptlevel_if_needed();
+            self.constrain_font_size_if_needed()
+        }
+    }
+}
diff --git a/servo/components/style/properties/computed_value_flags.rs b/servo/components/style/properties/computed_value_flags.rs
new file mode 100644
index 0000000000..5fbe8f3a95
--- /dev/null
+++ b/servo/components/style/properties/computed_value_flags.rs
@@ -0,0 +1,180 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+//! Misc information about a given computed style.
+
+bitflags! {
+    /// Misc information about a given computed style.
+    ///
+    /// All flags are currently inherited for text, pseudo elements, and
+    /// anonymous boxes, see StyleBuilder::for_inheritance and its callsites.
+    /// If we ever want to add some flags that shouldn't inherit for them,
+    /// we might want to add a function to handle this.
+    #[repr(C)]
+    #[derive(Clone, Copy, Eq, PartialEq)]
+    pub struct ComputedValueFlags: u32 {
+        /// Whether the style or any of the ancestors has a text-decoration-line
+        /// property that should get propagated to descendants.
+        ///
+        /// text-decoration-line is a reset property, but gets propagated in the
+        /// frame/box tree.
+        const HAS_TEXT_DECORATION_LINES = 1 << 0;
+
+        /// Whether line break inside should be suppressed.
+        ///
+        /// If this flag is set, the line should not be broken inside,
+        /// which means inlines act as if nowrap is set, <br> element is
+        /// suppressed, and blocks are inlinized.
+        ///
+        /// This bit is propagated to all children of line participants.
+        /// It is currently used by ruby to make its content unbreakable.
+        const SHOULD_SUPPRESS_LINEBREAK = 1 << 1;
+
+        /// A flag used to mark text that that has text-combine-upright.
+        ///
+        /// This is used from Gecko's layout engine.
+        const IS_TEXT_COMBINED = 1 << 2;
+
+        /// A flag used to mark styles under a relevant link that is also
+        /// visited.
+        const IS_RELEVANT_LINK_VISITED = 1 << 3;
+
+        /// A flag used to mark styles which are a pseudo-element or under one.
+        const IS_IN_PSEUDO_ELEMENT_SUBTREE = 1 << 4;
+
+        /// A flag used to mark styles which have contain:style or under one.
+        const SELF_OR_ANCESTOR_HAS_CONTAIN_STYLE = 1 << 5;
+
+        /// Whether this style's `display` property depends on our parent style.
+        ///
+        /// This is important because it may affect our optimizations to avoid
+        /// computing the style of pseudo-elements, given whether the
+        /// pseudo-element is generated depends on the `display` value.
+        const DISPLAY_DEPENDS_ON_INHERITED_STYLE = 1 << 6;
+
+        /// Whether this style's `content` depends on our parent style.
+        ///
+        /// Important because of the same reason.
+        const CONTENT_DEPENDS_ON_INHERITED_STYLE = 1 << 7;
+
+        /// Whether the child explicitly inherits any reset property.
+        const INHERITS_RESET_STYLE = 1 << 8;
+
+        /// Whether any value on our style is font-metric-dependent on our
+        /// primary font.
+        const DEPENDS_ON_SELF_FONT_METRICS = 1 << 9;
+
+        /// Whether any value on our style is font-metric-dependent on the
+        /// primary font of our parent.
+        const DEPENDS_ON_INHERITED_FONT_METRICS = 1 << 10;
+
+        /// Whether the style or any of the ancestors has a multicol style.
+        ///
+        /// Only used in Servo.
+        const CAN_BE_FRAGMENTED = 1 << 11;
+
+        /// Whether this style is the style of the document element.
+        const IS_ROOT_ELEMENT_STYLE = 1 << 12;
+
+        /// Whether this element is inside an `opacity: 0` subtree.
+        const IS_IN_OPACITY_ZERO_SUBTREE = 1 << 13;
+
+        /// Whether there are author-specified rules for border-* properties
+        /// (except border-image-*), background-color, or background-image.
+        ///
+        /// TODO(emilio): Maybe do include border-image, see:
+        ///
+        /// https://github.com/w3c/csswg-drafts/issues/4777#issuecomment-604424845
+        const HAS_AUTHOR_SPECIFIED_BORDER_BACKGROUND = 1 << 14;
+
+        /// Whether there are author-specified rules for `font-family`.
+        const HAS_AUTHOR_SPECIFIED_FONT_FAMILY = 1 << 16;
+
+        /// Whether there are author-specified rules for `font-synthesis-weight`.
+        const HAS_AUTHOR_SPECIFIED_FONT_SYNTHESIS_WEIGHT = 1 << 17;
+
+        /// Whether there are author-specified rules for `font-synthesis-style`.
+        const HAS_AUTHOR_SPECIFIED_FONT_SYNTHESIS_STYLE = 1 << 18;
+
+        // (There's also font-synthesis-small-caps, but we don't currently need to
+        // keep track of that.)
+
+        /// Whether there are author-specified rules for `letter-spacing`.
+        const HAS_AUTHOR_SPECIFIED_LETTER_SPACING = 1 << 19;
+
+        /// Whether there are author-specified rules for `word-spacing`.
+        const HAS_AUTHOR_SPECIFIED_WORD_SPACING = 1 << 20;
+
+        /// Whether the style depends on viewport units.
+        const USES_VIEWPORT_UNITS = 1 << 21;
+
+        /// Whether the style depends on viewport units on container queries.
+        ///
+        /// This needs to be a separate flag from `USES_VIEWPORT_UNITS` because
+        /// it causes us to re-match the style (rather than re-cascascading it,
+        /// which is enough for other uses of viewport units).
+        const USES_VIEWPORT_UNITS_ON_CONTAINER_QUERIES = 1 << 22;
+
+        /// A flag used to mark styles which have `container-type` of `size` or
+        /// `inline-size`, or under one.
+        const SELF_OR_ANCESTOR_HAS_SIZE_CONTAINER_TYPE = 1 << 23;
+
+        /// Whether the style evaluated any relative selector.
+        const CONSIDERED_RELATIVE_SELECTOR = 1 << 24;
+    }
+}
+
+impl Default for ComputedValueFlags {
+    #[inline]
+    fn default() -> Self {
+        Self::empty()
+    }
+}
+
+impl ComputedValueFlags {
+    /// Flags that are unconditionally propagated to descendants.
+    #[inline]
+    fn inherited_flags() -> Self {
+        Self::IS_RELEVANT_LINK_VISITED |
+            Self::CAN_BE_FRAGMENTED |
+            Self::IS_IN_PSEUDO_ELEMENT_SUBTREE |
+            Self::HAS_TEXT_DECORATION_LINES |
+            Self::IS_IN_OPACITY_ZERO_SUBTREE |
+            Self::SELF_OR_ANCESTOR_HAS_CONTAIN_STYLE |
+            Self::SELF_OR_ANCESTOR_HAS_SIZE_CONTAINER_TYPE
+    }
+
+    /// Flags that may be propagated to descendants.
+    #[inline]
+    fn maybe_inherited_flags() -> Self {
+        Self::inherited_flags() | Self::SHOULD_SUPPRESS_LINEBREAK
+    }
+
+    /// Flags that are an input to the cascade.
+    #[inline]
+    fn cascade_input_flags() -> Self {
+        Self::USES_VIEWPORT_UNITS_ON_CONTAINER_QUERIES | Self::CONSIDERED_RELATIVE_SELECTOR
+    }
+
+    /// Returns the flags that are always propagated to descendants.
+    ///
+    /// See StyleAdjuster::set_bits and StyleBuilder.
+    #[inline]
+    pub fn inherited(self) -> Self {
+        self & Self::inherited_flags()
+    }
+
+    /// Flags that are conditionally propagated to descendants, just to handle
+    /// properly style invalidation.
+    #[inline]
+    pub fn maybe_inherited(self) -> Self {
+        self & Self::maybe_inherited_flags()
+    }
+
+    /// Flags that are an input to the cascade.
+    #[inline]
+    pub fn for_cascade_inputs(self) -> Self {
+        self & Self::cascade_input_flags()
+    }
+}
diff --git a/servo/components/style/properties/counted_unknown_properties.py b/servo/components/style/properties/counted_unknown_properties.py
new file mode 100644
index 0000000000..4de688cf5f
--- /dev/null
+++ b/servo/components/style/properties/counted_unknown_properties.py
@@ -0,0 +1,120 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# The following properties are under development, so they are not in this list.
+# FIXME: We should handle the developing properties properly by Bug 1577358:
+#    "backdrop-filter",
+#    "text-decoration-skip-ink",
+#    "column-span",
+#    "offset-distance",
+#    "offset-path",
+#    "offset-rotate",
+#    "offset",
+#    "text-underline-position",
+COUNTED_UNKNOWN_PROPERTIES = [
+    "-webkit-font-smoothing",
+    "-webkit-tap-highlight-color",
+    "speak",
+    "text-size-adjust",
+    "-webkit-font-feature-settings",
+    "-webkit-user-drag",
+    "orphans",
+    "widows",
+    "-webkit-user-modify",
+    "-webkit-margin-before",
+    "-webkit-margin-after",
+    "-webkit-margin-start",
+    "-webkit-column-break-inside",
+    "-webkit-padding-start",
+    "-webkit-margin-end",
+    "-webkit-box-reflect",
+    "-webkit-print-color-adjust",
+    "-webkit-mask-box-image",
+    "-webkit-line-break",
+    "alignment-baseline",
+    "-webkit-writing-mode",
+    "baseline-shift",
+    "-webkit-hyphenate-character",
+    "-webkit-highlight",
+    "background-repeat-x",
+    "-webkit-padding-end",
+    "background-repeat-y",
+    "-webkit-text-emphasis-color",
+    "-webkit-margin-top-collapse",
+    "-webkit-rtl-ordering",
+    "-webkit-padding-before",
+    "-webkit-text-decorations-in-effect",
+    "-webkit-border-vertical-spacing",
+    "-webkit-locale",
+    "-webkit-padding-after",
+    "-webkit-border-horizontal-spacing",
+    "color-rendering",
+    "-webkit-column-break-before",
+    "-webkit-transform-origin-x",
+    "-webkit-transform-origin-y",
+    "-webkit-text-emphasis-position",
+    "buffered-rendering",
+    "-webkit-text-orientation",
+    "-webkit-text-combine",
+    "-webkit-text-emphasis-style",
+    "-webkit-text-emphasis",
+    "-webkit-mask-box-image-width",
+    "-webkit-mask-box-image-source",
+    "-webkit-mask-box-image-outset",
+    "-webkit-mask-box-image-slice",
+    "-webkit-mask-box-image-repeat",
+    "-webkit-margin-after-collapse",
+    "-webkit-border-before-color",
+    "-webkit-border-before-width",
+    "-webkit-perspective-origin-x",
+    "-webkit-perspective-origin-y",
+    "-webkit-margin-before-collapse",
+    "-webkit-border-before-style",
+    "-webkit-margin-bottom-collapse",
+    "-webkit-ruby-position",
+    "-webkit-column-break-after",
+    "-webkit-margin-collapse",
+    "-webkit-border-before",
+    "-webkit-border-end",
+    "-webkit-border-after",
+    "-webkit-border-start",
+    "-webkit-min-logical-width",
+    "-webkit-logical-height",
+    "-webkit-transform-origin-z",
+    "-webkit-font-size-delta",
+    "-webkit-logical-width",
+    "-webkit-max-logical-width",
+    "-webkit-min-logical-height",
+    "-webkit-max-logical-height",
+    "-webkit-border-end-color",
+    "-webkit-border-end-width",
+    "-webkit-border-start-color",
+    "-webkit-border-start-width",
+    "-webkit-border-after-color",
+    "-webkit-border-after-width",
+    "-webkit-border-end-style",
+    "-webkit-border-after-style",
+    "-webkit-border-start-style",
+    "-webkit-mask-repeat-x",
+    "-webkit-mask-repeat-y",
+    "user-zoom",
+    "min-zoom",
+    "-webkit-box-decoration-break",
+    "orientation",
+    "max-zoom",
+    "-webkit-app-region",
+    "-webkit-column-rule",
+    "-webkit-column-span",
+    "-webkit-column-gap",
+    "-webkit-shape-outside",
+    "-webkit-column-rule-width",
+    "-webkit-column-count",
+    "-webkit-opacity",
+    "-webkit-column-width",
+    "-webkit-shape-image-threshold",
+    "-webkit-column-rule-style",
+    "-webkit-columns",
+    "-webkit-column-rule-color",
+    "-webkit-shape-margin",
+]
diff --git a/servo/components/style/properties/data.py b/servo/components/style/properties/data.py
new file mode 100644
index 0000000000..5a15d0c28c
--- /dev/null
+++ b/servo/components/style/properties/data.py
@@ -0,0 +1,936 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import re
+from counted_unknown_properties import COUNTED_UNKNOWN_PROPERTIES
+
+PHYSICAL_SIDES = ["top", "right", "bottom", "left"]
+LOGICAL_SIDES = ["block-start", "block-end", "inline-start", "inline-end"]
+PHYSICAL_SIZES = ["width", "height"]
+LOGICAL_SIZES = ["block-size", "inline-size"]
+PHYSICAL_CORNERS = ["top-left", "top-right", "bottom-right", "bottom-left"]
+LOGICAL_CORNERS = ["start-start", "start-end", "end-start", "end-end"]
+PHYSICAL_AXES = ["x", "y"]
+LOGICAL_AXES = ["inline", "block"]
+
+# bool is True when logical
+ALL_SIDES = [(side, False) for side in PHYSICAL_SIDES] + [
+    (side, True) for side in LOGICAL_SIDES
+]
+ALL_SIZES = [(size, False) for size in PHYSICAL_SIZES] + [
+    (size, True) for size in LOGICAL_SIZES
+]
+ALL_CORNERS = [(corner, False) for corner in PHYSICAL_CORNERS] + [
+    (corner, True) for corner in LOGICAL_CORNERS
+]
+ALL_AXES = [(axis, False) for axis in PHYSICAL_AXES] + [
+    (axis, True) for axis in LOGICAL_AXES
+]
+
+SYSTEM_FONT_LONGHANDS = """font_family font_size font_style
+                           font_stretch font_weight""".split()
+
+# Bitfield values for all rule types which can have property declarations.
+STYLE_RULE = 1 << 0
+PAGE_RULE = 1 << 1
+KEYFRAME_RULE = 1 << 2
+
+ALL_RULES = STYLE_RULE | PAGE_RULE | KEYFRAME_RULE
+DEFAULT_RULES = STYLE_RULE | KEYFRAME_RULE
+DEFAULT_RULES_AND_PAGE = DEFAULT_RULES | PAGE_RULE
+DEFAULT_RULES_EXCEPT_KEYFRAME = STYLE_RULE
+
+# Rule name to value dict
+RULE_VALUES = {
+    "Style": STYLE_RULE,
+    "Page": PAGE_RULE,
+    "Keyframe": KEYFRAME_RULE,
+}
+
+
+def rule_values_from_arg(that):
+    if isinstance(that, int):
+        return that
+    mask = 0
+    for rule in that.split():
+        mask |= RULE_VALUES[rule]
+    return mask
+
+
+def maybe_moz_logical_alias(engine, side, prop):
+    if engine == "gecko" and side[1]:
+        axis, dir = side[0].split("-")
+        if axis == "inline":
+            return prop % dir
+    return None
+
+
+def to_rust_ident(name):
+    name = name.replace("-", "_")
+    if name in ["static", "super", "box", "move"]:  # Rust keywords
+        name += "_"
+    return name
+
+
+def to_snake_case(ident):
+    return re.sub("([A-Z]+)", lambda m: "_" + m.group(1).lower(), ident).strip("_")
+
+
+def to_camel_case(ident):
+    return re.sub(
+        "(^|_|-)([a-z0-9])", lambda m: m.group(2).upper(), ident.strip("_").strip("-")
+    )
+
+
+def to_camel_case_lower(ident):
+    camel = to_camel_case(ident)
+    return camel[0].lower() + camel[1:]
+
+
+# https://drafts.csswg.org/cssom/#css-property-to-idl-attribute
+def to_idl_name(ident):
+    return re.sub("-([a-z])", lambda m: m.group(1).upper(), ident)
+
+
+def parse_aliases(value):
+    aliases = {}
+    for pair in value.split():
+        [a, v] = pair.split("=")
+        aliases[a] = v
+    return aliases
+
+
+class Keyword(object):
+    def __init__(
+        self,
+        name,
+        values,
+        gecko_constant_prefix=None,
+        gecko_enum_prefix=None,
+        custom_consts=None,
+        extra_gecko_values=None,
+        extra_servo_2013_values=None,
+        extra_servo_2020_values=None,
+        gecko_aliases=None,
+        servo_2013_aliases=None,
+        servo_2020_aliases=None,
+        gecko_strip_moz_prefix=None,
+        gecko_inexhaustive=None,
+    ):
+        self.name = name
+        self.values = values.split()
+        if gecko_constant_prefix and gecko_enum_prefix:
+            raise TypeError(
+                "Only one of gecko_constant_prefix and gecko_enum_prefix "
+                "can be specified"
+            )
+        self.gecko_constant_prefix = (
+            gecko_constant_prefix or "NS_STYLE_" + self.name.upper().replace("-", "_")
+        )
+        self.gecko_enum_prefix = gecko_enum_prefix
+        self.extra_gecko_values = (extra_gecko_values or "").split()
+        self.extra_servo_2013_values = (extra_servo_2013_values or "").split()
+        self.extra_servo_2020_values = (extra_servo_2020_values or "").split()
+        self.gecko_aliases = parse_aliases(gecko_aliases or "")
+        self.servo_2013_aliases = parse_aliases(servo_2013_aliases or "")
+        self.servo_2020_aliases = parse_aliases(servo_2020_aliases or "")
+        self.consts_map = {} if custom_consts is None else custom_consts
+        self.gecko_strip_moz_prefix = (
+            True if gecko_strip_moz_prefix is None else gecko_strip_moz_prefix
+        )
+        self.gecko_inexhaustive = gecko_inexhaustive or (gecko_enum_prefix is None)
+
+    def values_for(self, engine):
+        if engine == "gecko":
+            return self.values + self.extra_gecko_values
+        elif engine == "servo-2013":
+            return self.values + self.extra_servo_2013_values
+        elif engine == "servo-2020":
+            return self.values + self.extra_servo_2020_values
+        else:
+            raise Exception("Bad engine: " + engine)
+
+    def aliases_for(self, engine):
+        if engine == "gecko":
+            return self.gecko_aliases
+        elif engine == "servo-2013":
+            return self.servo_2013_aliases
+        elif engine == "servo-2020":
+            return self.servo_2020_aliases
+        else:
+            raise Exception("Bad engine: " + engine)
+
+    def gecko_constant(self, value):
+        moz_stripped = (
+            value.replace("-moz-", "")
+            if self.gecko_strip_moz_prefix
+            else value.replace("-moz-", "moz-")
+        )
+        mapped = self.consts_map.get(value)
+        if self.gecko_enum_prefix:
+            parts = moz_stripped.replace("-", "_").split("_")
+            parts = mapped if mapped else [p.title() for p in parts]
+            return self.gecko_enum_prefix + "::" + "".join(parts)
+        else:
+            suffix = mapped if mapped else moz_stripped.replace("-", "_")
+            return self.gecko_constant_prefix + "_" + suffix.upper()
+
+    def needs_cast(self):
+        return self.gecko_enum_prefix is None
+
+    def maybe_cast(self, type_str):
+        return "as " + type_str if self.needs_cast() else ""
+
+    def casted_constant_name(self, value, cast_type):
+        if cast_type is None:
+            raise TypeError("We should specify the cast_type.")
+
+        if self.gecko_enum_prefix is None:
+            return cast_type.upper() + "_" + self.gecko_constant(value)
+        else:
+            return (
+                cast_type.upper()
+                + "_"
+                + self.gecko_constant(value).upper().replace("::", "_")
+            )
+
+
+def arg_to_bool(arg):
+    if isinstance(arg, bool):
+        return arg
+    assert arg in ["True", "False"], "Unexpected value for boolean arguement: " + repr(
+        arg
+    )
+    return arg == "True"
+
+
+def parse_property_aliases(alias_list):
+    result = []
+    if alias_list:
+        for alias in alias_list.split():
+            (name, _, pref) = alias.partition(":")
+            result.append((name, pref))
+    return result
+
+
+def to_phys(name, logical, physical):
+    return name.replace(logical, physical).replace("inset-", "")
+
+
+class Property(object):
+    def __init__(
+        self,
+        name,
+        spec,
+        servo_2013_pref,
+        servo_2020_pref,
+        gecko_pref,
+        enabled_in,
+        rule_types_allowed,
+        aliases,
+        extra_prefixes,
+        flags,
+    ):
+        self.name = name
+        if not spec:
+            raise TypeError("Spec should be specified for " + name)
+        self.spec = spec
+        self.ident = to_rust_ident(name)
+        self.camel_case = to_camel_case(self.ident)
+        self.servo_2013_pref = servo_2013_pref
+        self.servo_2020_pref = servo_2020_pref
+        self.gecko_pref = gecko_pref
+        self.rule_types_allowed = rule_values_from_arg(rule_types_allowed)
+        # For enabled_in, the setup is as follows:
+        # It needs to be one of the four values: ["", "ua", "chrome", "content"]
+        #  * "chrome" implies "ua", and implies that they're explicitly
+        #    enabled.
+        #  * "" implies the property will never be parsed.
+        #  * "content" implies the property is accessible unconditionally,
+        #    modulo a pref, set via servo_pref / gecko_pref.
+        assert enabled_in in ("", "ua", "chrome", "content")
+        self.enabled_in = enabled_in
+        self.aliases = parse_property_aliases(aliases)
+        self.extra_prefixes = parse_property_aliases(extra_prefixes)
+        self.flags = flags.split() if flags else []
+
+    def rule_types_allowed_names(self):
+        for name in RULE_VALUES:
+            if self.rule_types_allowed & RULE_VALUES[name] != 0:
+                yield name
+
+    def experimental(self, engine):
+        if engine == "gecko":
+            return bool(self.gecko_pref)
+        elif engine == "servo-2013":
+            return bool(self.servo_2013_pref)
+        elif engine == "servo-2020":
+            return bool(self.servo_2020_pref)
+        else:
+            raise Exception("Bad engine: " + engine)
+
+    def explicitly_enabled_in_ua_sheets(self):
+        return self.enabled_in in ("ua", "chrome")
+
+    def explicitly_enabled_in_chrome(self):
+        return self.enabled_in == "chrome"
+
+    def enabled_in_content(self):
+        return self.enabled_in == "content"
+
+    def nscsspropertyid(self):
+        return "nsCSSPropertyID::eCSSProperty_" + self.ident
+
+
+class Longhand(Property):
+    def __init__(
+        self,
+        style_struct,
+        name,
+        spec=None,
+        animation_value_type=None,
+        keyword=None,
+        predefined_type=None,
+        servo_2013_pref=None,
+        servo_2020_pref=None,
+        gecko_pref=None,
+        enabled_in="content",
+        need_index=False,
+        gecko_ffi_name=None,
+        has_effect_on_gecko_scrollbars=None,
+        rule_types_allowed=DEFAULT_RULES,
+        cast_type="u8",
+        logical=False,
+        logical_group=None,
+        aliases=None,
+        extra_prefixes=None,
+        boxed=False,
+        flags=None,
+        allow_quirks="No",
+        ignored_when_colors_disabled=False,
+        simple_vector_bindings=False,
+        vector=False,
+        servo_restyle_damage="repaint",
+    ):
+        Property.__init__(
+            self,
+            name=name,
+            spec=spec,
+            servo_2013_pref=servo_2013_pref,
+            servo_2020_pref=servo_2020_pref,
+            gecko_pref=gecko_pref,
+            enabled_in=enabled_in,
+            rule_types_allowed=rule_types_allowed,
+            aliases=aliases,
+            extra_prefixes=extra_prefixes,
+            flags=flags,
+        )
+
+        self.keyword = keyword
+        self.predefined_type = predefined_type
+        self.style_struct = style_struct
+        self.has_effect_on_gecko_scrollbars = has_effect_on_gecko_scrollbars
+        assert (
+            has_effect_on_gecko_scrollbars in [None, False, True]
+            and not style_struct.inherited
+            or (gecko_pref is None and enabled_in != "")
+            == (has_effect_on_gecko_scrollbars is None)
+        ), (
+            "Property "
+            + name
+            + ": has_effect_on_gecko_scrollbars must be "
+            + "specified, and must have a value of True or False, iff a "
+            + "property is inherited and is behind a Gecko pref or internal"
+        )
+        self.need_index = need_index
+        self.gecko_ffi_name = gecko_ffi_name or "m" + self.camel_case
+        self.cast_type = cast_type
+        self.logical = arg_to_bool(logical)
+        self.logical_group = logical_group
+        if self.logical:
+            assert logical_group, "Property " + name + " must have a logical group"
+
+        self.boxed = arg_to_bool(boxed)
+        self.allow_quirks = allow_quirks
+        self.ignored_when_colors_disabled = ignored_when_colors_disabled
+        self.is_vector = vector
+        self.simple_vector_bindings = simple_vector_bindings
+
+        # This is done like this since just a plain bool argument seemed like
+        # really random.
+        if animation_value_type is None:
+            raise TypeError(
+                "animation_value_type should be specified for (" + name + ")"
+            )
+        self.animation_value_type = animation_value_type
+
+        self.animatable = animation_value_type != "none"
+        self.transitionable = (
+            animation_value_type != "none" and animation_value_type != "discrete"
+        )
+        self.is_animatable_with_computed_value = (
+            animation_value_type == "ComputedValue"
+            or animation_value_type == "discrete"
+        )
+
+        # See compute_damage for the various values this can take
+        self.servo_restyle_damage = servo_restyle_damage
+
+    @staticmethod
+    def type():
+        return "longhand"
+
+    # For a given logical property return all the physical property names
+    # corresponding to it.
+    def all_physical_mapped_properties(self, data):
+        if not self.logical:
+            return []
+
+        candidates = [
+            s for s in LOGICAL_SIDES + LOGICAL_SIZES + LOGICAL_CORNERS if s in self.name
+        ] + [s for s in LOGICAL_AXES if self.name.endswith(s)]
+        assert len(candidates) == 1
+        logical_side = candidates[0]
+
+        physical = (
+            PHYSICAL_SIDES
+            if logical_side in LOGICAL_SIDES
+            else PHYSICAL_SIZES
+            if logical_side in LOGICAL_SIZES
+            else PHYSICAL_AXES
+            if logical_side in LOGICAL_AXES
+            else LOGICAL_CORNERS
+        )
+        return [
+            data.longhands_by_name[to_phys(self.name, logical_side, physical_side)]
+            for physical_side in physical
+        ]
+
+    def may_be_disabled_in(self, shorthand, engine):
+        if engine == "gecko":
+            return self.gecko_pref and self.gecko_pref != shorthand.gecko_pref
+        elif engine == "servo-2013":
+            return (
+                self.servo_2013_pref
+                and self.servo_2013_pref != shorthand.servo_2013_pref
+            )
+        elif engine == "servo-2020":
+            return (
+                self.servo_2020_pref
+                and self.servo_2020_pref != shorthand.servo_2020_pref
+            )
+        else:
+            raise Exception("Bad engine: " + engine)
+
+    def base_type(self):
+        if self.predefined_type and not self.is_vector:
+            return "crate::values::specified::{}".format(self.predefined_type)
+        return "longhands::{}::SpecifiedValue".format(self.ident)
+
+    def specified_type(self):
+        if self.predefined_type and not self.is_vector:
+            ty = "crate::values::specified::{}".format(self.predefined_type)
+        else:
+            ty = "longhands::{}::SpecifiedValue".format(self.ident)
+        if self.boxed:
+            ty = "Box<{}>".format(ty)
+        return ty
+
+    def specified_is_copy(self):
+        if self.is_vector or self.boxed:
+            return False
+        if self.predefined_type:
+            return self.predefined_type in {
+                "AlignContent",
+                "AlignItems",
+                "AlignSelf",
+                "Appearance",
+                "AspectRatio",
+                "BaselineSource",
+                "BreakBetween",
+                "BreakWithin",
+                "BackgroundRepeat",
+                "BorderImageRepeat",
+                "BorderStyle",
+                "table::CaptionSide",
+                "Clear",
+                "ColumnCount",
+                "Contain",
+                "ContentVisibility",
+                "ContainerType",
+                "Display",
+                "FillRule",
+                "Float",
+                "FontLanguageOverride",
+                "FontSizeAdjust",
+                "FontStretch",
+                "FontStyle",
+                "FontSynthesis",
+                "FontVariantEastAsian",
+                "FontVariantLigatures",
+                "FontVariantNumeric",
+                "FontWeight",
+                "GreaterThanOrEqualToOneNumber",
+                "GridAutoFlow",
+                "ImageRendering",
+                "InitialLetter",
+                "Integer",
+                "JustifyContent",
+                "JustifyItems",
+                "JustifySelf",
+                "LineBreak",
+                "LineClamp",
+                "MasonryAutoFlow",
+                "BoolInteger",
+                "text::MozControlCharacterVisibility",
+                "MathDepth",
+                "MozScriptMinSize",
+                "MozScriptSizeMultiplier",
+                "TextDecorationSkipInk",
+                "NonNegativeNumber",
+                "OffsetRotate",
+                "Opacity",
+                "OutlineStyle",
+                "Overflow",
+                "OverflowAnchor",
+                "OverflowClipBox",
+                "OverflowWrap",
+                "OverscrollBehavior",
+                "PageOrientation",
+                "Percentage",
+                "PrintColorAdjust",
+                "ForcedColorAdjust",
+                "Resize",
+                "RubyPosition",
+                "SVGOpacity",
+                "SVGPaintOrder",
+                "ScrollbarGutter",
+                "ScrollSnapAlign",
+                "ScrollSnapAxis",
+                "ScrollSnapStop",
+                "ScrollSnapStrictness",
+                "ScrollSnapType",
+                "TextAlign",
+                "TextAlignLast",
+                "TextDecorationLine",
+                "TextEmphasisPosition",
+                "TextJustify",
+                "TextTransform",
+                "TextUnderlinePosition",
+                "TouchAction",
+                "TransformStyle",
+                "UserSelect",
+                "WordBreak",
+                "XSpan",
+                "XTextScale",
+                "ZIndex",
+            }
+        if self.name == "overflow-y":
+            return True
+        return bool(self.keyword)
+
+    def animated_type(self):
+        assert self.animatable
+        computed = "<{} as ToComputedValue>::ComputedValue".format(self.base_type())
+        if self.is_animatable_with_computed_value:
+            return computed
+        return "<{} as ToAnimatedValue>::AnimatedValue".format(computed)
+
+
+class Shorthand(Property):
+    def __init__(
+        self,
+        name,
+        sub_properties,
+        spec=None,
+        servo_2013_pref=None,
+        servo_2020_pref=None,
+        gecko_pref=None,
+        enabled_in="content",
+        rule_types_allowed=DEFAULT_RULES,
+        aliases=None,
+        extra_prefixes=None,
+        flags=None,
+    ):
+        Property.__init__(
+            self,
+            name=name,
+            spec=spec,
+            servo_2013_pref=servo_2013_pref,
+            servo_2020_pref=servo_2020_pref,
+            gecko_pref=gecko_pref,
+            enabled_in=enabled_in,
+            rule_types_allowed=rule_types_allowed,
+            aliases=aliases,
+            extra_prefixes=extra_prefixes,
+            flags=flags,
+        )
+        self.sub_properties = sub_properties
+
+    def get_animatable(self):
+        for sub in self.sub_properties:
+            if sub.animatable:
+                return True
+        return False
+
+    def get_transitionable(self):
+        transitionable = False
+        for sub in self.sub_properties:
+            if sub.transitionable:
+                transitionable = True
+                break
+        return transitionable
+
+    animatable = property(get_animatable)
+    transitionable = property(get_transitionable)
+
+    @staticmethod
+    def type():
+        return "shorthand"
+
+
+class Alias(object):
+    def __init__(self, name, original, gecko_pref):
+        self.name = name
+        self.ident = to_rust_ident(name)
+        self.camel_case = to_camel_case(self.ident)
+        self.original = original
+        self.enabled_in = original.enabled_in
+        self.animatable = original.animatable
+        self.servo_2013_pref = original.servo_2013_pref
+        self.servo_2020_pref = original.servo_2020_pref
+        self.gecko_pref = gecko_pref
+        self.transitionable = original.transitionable
+        self.rule_types_allowed = original.rule_types_allowed
+        self.flags = original.flags
+
+    @staticmethod
+    def type():
+        return "alias"
+
+    def rule_types_allowed_names(self):
+        for name in RULE_VALUES:
+            if self.rule_types_allowed & RULE_VALUES[name] != 0:
+                yield name
+
+    def experimental(self, engine):
+        if engine == "gecko":
+            return bool(self.gecko_pref)
+        elif engine == "servo-2013":
+            return bool(self.servo_2013_pref)
+        elif engine == "servo-2020":
+            return bool(self.servo_2020_pref)
+        else:
+            raise Exception("Bad engine: " + engine)
+
+    def explicitly_enabled_in_ua_sheets(self):
+        return self.enabled_in in ["ua", "chrome"]
+
+    def explicitly_enabled_in_chrome(self):
+        return self.enabled_in == "chrome"
+
+    def enabled_in_content(self):
+        return self.enabled_in == "content"
+
+    def nscsspropertyid(self):
+        return "nsCSSPropertyID::eCSSPropertyAlias_%s" % self.ident
+
+
+class Method(object):
+    def __init__(self, name, return_type=None, arg_types=None, is_mut=False):
+        self.name = name
+        self.return_type = return_type
+        self.arg_types = arg_types or []
+        self.is_mut = is_mut
+
+    def arg_list(self):
+        args = ["_: " + x for x in self.arg_types]
+        args = ["&mut self" if self.is_mut else "&self"] + args
+        return ", ".join(args)
+
+    def signature(self):
+        sig = "fn %s(%s)" % (self.name, self.arg_list())
+        if self.return_type:
+            sig = sig + " -> " + self.return_type
+        return sig
+
+    def declare(self):
+        return self.signature() + ";"
+
+    def stub(self):
+        return self.signature() + "{ unimplemented!() }"
+
+
+class StyleStruct(object):
+    def __init__(self, name, inherited, gecko_name=None, additional_methods=None):
+        self.gecko_struct_name = "Gecko" + name
+        self.name = name
+        self.name_lower = to_snake_case(name)
+        self.ident = to_rust_ident(self.name_lower)
+        self.longhands = []
+        self.inherited = inherited
+        self.gecko_name = gecko_name or name
+        self.gecko_ffi_name = "nsStyle" + self.gecko_name
+        self.additional_methods = additional_methods or []
+
+
+class PropertiesData(object):
+    def __init__(self, engine):
+        self.engine = engine
+        self.style_structs = []
+        self.current_style_struct = None
+        self.longhands = []
+        self.longhands_by_name = {}
+        self.longhands_by_logical_group = {}
+        self.longhand_aliases = []
+        self.shorthands = []
+        self.shorthands_by_name = {}
+        self.shorthand_aliases = []
+        self.counted_unknown_properties = [
+            CountedUnknownProperty(p) for p in COUNTED_UNKNOWN_PROPERTIES
+        ]
+
+    def new_style_struct(self, *args, **kwargs):
+        style_struct = StyleStruct(*args, **kwargs)
+        self.style_structs.append(style_struct)
+        self.current_style_struct = style_struct
+
+    def active_style_structs(self):
+        return [s for s in self.style_structs if s.additional_methods or s.longhands]
+
+    def add_prefixed_aliases(self, property):
+        # FIXME Servo's DOM architecture doesn't support vendor-prefixed properties.
+        #       See servo/servo#14941.
+        if self.engine == "gecko":
+            for (prefix, pref) in property.extra_prefixes:
+                property.aliases.append(("-%s-%s" % (prefix, property.name), pref))
+
+    def declare_longhand(self, name, engines=None, **kwargs):
+        engines = engines.split()
+        if self.engine not in engines:
+            return
+
+        longhand = Longhand(self.current_style_struct, name, **kwargs)
+        self.add_prefixed_aliases(longhand)
+        longhand.aliases = [Alias(xp[0], longhand, xp[1]) for xp in longhand.aliases]
+        self.longhand_aliases += longhand.aliases
+        self.current_style_struct.longhands.append(longhand)
+        self.longhands.append(longhand)
+        self.longhands_by_name[name] = longhand
+        if longhand.logical_group:
+            self.longhands_by_logical_group.setdefault(
+                longhand.logical_group, []
+            ).append(longhand)
+
+        return longhand
+
+    def declare_shorthand(self, name, sub_properties, engines, *args, **kwargs):
+        engines = engines.split()
+        if self.engine not in engines:
+            return
+
+        sub_properties = [self.longhands_by_name[s] for s in sub_properties]
+        shorthand = Shorthand(name, sub_properties, *args, **kwargs)
+        self.add_prefixed_aliases(shorthand)
+        shorthand.aliases = [Alias(xp[0], shorthand, xp[1]) for xp in shorthand.aliases]
+        self.shorthand_aliases += shorthand.aliases
+        self.shorthands.append(shorthand)
+        self.shorthands_by_name[name] = shorthand
+        return shorthand
+
+    def shorthands_except_all(self):
+        return [s for s in self.shorthands if s.name != "all"]
+
+    def all_aliases(self):
+        return self.longhand_aliases + self.shorthand_aliases
+
+
+def _add_logical_props(data, props):
+    groups = set()
+    for prop in props:
+        if prop not in data.longhands_by_name:
+            assert data.engine in ["servo-2013", "servo-2020"]
+            continue
+        prop = data.longhands_by_name[prop]
+        if prop.logical_group:
+            groups.add(prop.logical_group)
+    for group in groups:
+        for prop in data.longhands_by_logical_group[group]:
+            props.add(prop.name)
+
+
+# These are probably Gecko bugs and should be supported per spec.
+def _remove_common_first_line_and_first_letter_properties(props, engine):
+    if engine == "gecko":
+        props.remove("tab-size")
+        props.remove("hyphens")
+        props.remove("line-break")
+        props.remove("text-align-last")
+        props.remove("text-emphasis-position")
+        props.remove("text-emphasis-style")
+        props.remove("text-emphasis-color")
+
+    props.remove("overflow-wrap")
+    props.remove("text-align")
+    props.remove("text-justify")
+    props.remove("white-space")
+    props.remove("word-break")
+    props.remove("text-indent")
+
+
+class PropertyRestrictions:
+    @staticmethod
+    def logical_group(data, group):
+        return [p.name for p in data.longhands_by_logical_group[group]]
+
+    @staticmethod
+    def shorthand(data, shorthand):
+        if shorthand not in data.shorthands_by_name:
+            return []
+        return [p.name for p in data.shorthands_by_name[shorthand].sub_properties]
+
+    @staticmethod
+    def spec(data, spec_path):
+        return [p.name for p in data.longhands if spec_path in p.spec]
+
+    # https://drafts.csswg.org/css-pseudo/#first-letter-styling
+    @staticmethod
+    def first_letter(data):
+        props = set(
+            [
+                "color",
+                "opacity",
+                "float",
+                "initial-letter",
+                # Kinda like css-fonts?
+                "-moz-osx-font-smoothing",
+                # Kinda like css-text?
+                "-webkit-text-stroke-width",
+                "-webkit-text-fill-color",
+                "-webkit-text-stroke-color",
+                "vertical-align",
+                # Will become shorthand of vertical-align (Bug 1830771)
+                "baseline-source",
+                "line-height",
+                # Kinda like css-backgrounds?
+                "background-blend-mode",
+            ]
+            + PropertyRestrictions.shorthand(data, "padding")
+            + PropertyRestrictions.shorthand(data, "margin")
+            + PropertyRestrictions.spec(data, "css-fonts")
+            + PropertyRestrictions.spec(data, "css-backgrounds")
+            + PropertyRestrictions.spec(data, "css-text")
+            + PropertyRestrictions.spec(data, "css-shapes")
+            + PropertyRestrictions.spec(data, "css-text-decor")
+        )
+
+        _add_logical_props(data, props)
+
+        _remove_common_first_line_and_first_letter_properties(props, data.engine)
+        return props
+
+    # https://drafts.csswg.org/css-pseudo/#first-line-styling
+    @staticmethod
+    def first_line(data):
+        props = set(
+            [
+                # Per spec.
+                "color",
+                "opacity",
+                # Kinda like css-fonts?
+                "-moz-osx-font-smoothing",
+                # Kinda like css-text?
+                "-webkit-text-stroke-width",
+                "-webkit-text-fill-color",
+                "-webkit-text-stroke-color",
+                "vertical-align",
+                # Will become shorthand of vertical-align (Bug 1830771)
+                "baseline-source",
+                "line-height",
+                # Kinda like css-backgrounds?
+                "background-blend-mode",
+            ]
+            + PropertyRestrictions.spec(data, "css-fonts")
+            + PropertyRestrictions.spec(data, "css-backgrounds")
+            + PropertyRestrictions.spec(data, "css-text")
+            + PropertyRestrictions.spec(data, "css-text-decor")
+        )
+
+        # These are probably Gecko bugs and should be supported per spec.
+        for prop in PropertyRestrictions.shorthand(data, "border"):
+            props.remove(prop)
+        for prop in PropertyRestrictions.shorthand(data, "border-radius"):
+            props.remove(prop)
+        props.remove("box-shadow")
+
+        _remove_common_first_line_and_first_letter_properties(props, data.engine)
+        return props
+
+    # https://drafts.csswg.org/css-pseudo/#placeholder
+    #
+    # The spec says that placeholder and first-line have the same restrictions,
+    # but that's not true in Gecko and we also allow a handful other properties
+    # for ::placeholder.
+    @staticmethod
+    def placeholder(data):
+        props = PropertyRestrictions.first_line(data)
+        props.add("opacity")
+        props.add("white-space")
+        props.add("text-overflow")
+        props.add("text-align")
+        props.add("text-justify")
+        return props
+
+    # https://drafts.csswg.org/css-pseudo/#marker-pseudo
+    @staticmethod
+    def marker(data):
+        return set(
+            [
+                "white-space",
+                "color",
+                "text-combine-upright",
+                "text-transform",
+                "unicode-bidi",
+                "direction",
+                "content",
+                "line-height",
+                "-moz-osx-font-smoothing",
+            ]
+            + PropertyRestrictions.spec(data, "css-fonts")
+            + PropertyRestrictions.spec(data, "css-animations")
+            + PropertyRestrictions.spec(data, "css-transitions")
+        )
+
+    # https://www.w3.org/TR/webvtt1/#the-cue-pseudo-element
+    @staticmethod
+    def cue(data):
+        return set(
+            [
+                "color",
+                "opacity",
+                "visibility",
+                "text-shadow",
+                "white-space",
+                "text-combine-upright",
+                "ruby-position",
+                # XXX Should these really apply to cue?
+                "-moz-osx-font-smoothing",
+                # FIXME(emilio): background-blend-mode should be part of the
+                # background shorthand, and get reset, per
+                # https://drafts.fxtf.org/compositing/#background-blend-mode
+                "background-blend-mode",
+            ]
+            + PropertyRestrictions.shorthand(data, "text-decoration")
+            + PropertyRestrictions.shorthand(data, "background")
+            + PropertyRestrictions.shorthand(data, "outline")
+            + PropertyRestrictions.shorthand(data, "font")
+            + PropertyRestrictions.shorthand(data, "font-synthesis")
+        )
+
+
+class CountedUnknownProperty:
+    def __init__(self, name):
+        self.name = name
+        self.ident = to_rust_ident(name)
+        self.camel_case = to_camel_case(self.ident)
diff --git a/servo/components/style/properties/declaration_block.rs b/servo/components/style/properties/declaration_block.rs
new file mode 100644
index 0000000000..90845af311
--- /dev/null
+++ b/servo/components/style/properties/declaration_block.rs
@@ -0,0 +1,1613 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+//! A property declaration block.
+
+#![deny(missing_docs)]
+
+use super::generated::{
+    shorthands, AllShorthand, ComputedValues, LogicalGroupSet, LonghandIdSet,
+    NonCustomPropertyIdSet, PropertyDeclaration, PropertyDeclarationId, PropertyId, ShorthandId,
+    SourcePropertyDeclaration, SourcePropertyDeclarationDrain, SubpropertiesVec,
+};
+use crate::applicable_declarations::CascadePriority;
+use crate::context::QuirksMode;
+use crate::custom_properties::{self, CustomPropertiesBuilder};
+use crate::error_reporting::{ContextualParseError, ParseErrorReporter};
+use crate::media_queries::Device;
+use crate::parser::ParserContext;
+use crate::properties::animated_properties::{AnimationValue, AnimationValueMap};
+use crate::rule_tree::CascadeLevel;
+use crate::selector_map::PrecomputedHashSet;
+use crate::selector_parser::SelectorImpl;
+use crate::shared_lock::Locked;
+use crate::str::{CssString, CssStringWriter};
+use crate::stylesheets::{layer_rule::LayerOrder, CssRuleType, Origin, UrlExtraData};
+use crate::values::computed::Context;
+use cssparser::{
+    parse_important, AtRuleParser, CowRcStr, DeclarationParser, Delimiter, ParseErrorKind, Parser,
+    ParserInput, QualifiedRuleParser, RuleBodyItemParser, RuleBodyParser,
+};
+use itertools::Itertools;
+use selectors::SelectorList;
+use servo_arc::Arc;
+use smallbitvec::{self, SmallBitVec};
+use smallvec::SmallVec;
+use std::fmt::{self, Write};
+use std::iter::{DoubleEndedIterator, Zip};
+use std::slice::Iter;
+use style_traits::{CssWriter, ParseError, ParsingMode, StyleParseErrorKind, ToCss};
+use thin_vec::ThinVec;
+
+/// A set of property declarations including animations and transitions.
+#[derive(Default)]
+pub struct AnimationDeclarations {
+    /// Declarations for animations.
+    pub animations: Option<Arc<Locked<PropertyDeclarationBlock>>>,
+    /// Declarations for transitions.
+    pub transitions: Option<Arc<Locked<PropertyDeclarationBlock>>>,
+}
+
+impl AnimationDeclarations {
+    /// Whether or not this `AnimationDeclarations` is empty.
+    pub fn is_empty(&self) -> bool {
+        self.animations.is_none() && self.transitions.is_none()
+    }
+}
+
+/// An enum describes how a declaration should update
+/// the declaration block.
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+enum DeclarationUpdate {
+    /// The given declaration doesn't update anything.
+    None,
+    /// The given declaration is new, and should be append directly.
+    Append,
+    /// The given declaration can be updated in-place at the given position.
+    UpdateInPlace { pos: usize },
+    /// The given declaration cannot be updated in-place, and an existing
+    /// one needs to be removed at the given position.
+    AppendAndRemove { pos: usize },
+}
+
+/// A struct describes how a declaration block should be updated by
+/// a `SourcePropertyDeclaration`.
+#[derive(Default)]
+pub struct SourcePropertyDeclarationUpdate {
+    updates: SubpropertiesVec<DeclarationUpdate>,
+    new_count: usize,
+    any_removal: bool,
+}
+
+/// A declaration [importance][importance].
+///
+/// [importance]: https://drafts.csswg.org/css-cascade/#importance
+#[derive(Clone, Copy, Debug, Eq, Hash, MallocSizeOf, PartialEq)]
+pub enum Importance {
+    /// Indicates a declaration without `!important`.
+    Normal,
+
+    /// Indicates a declaration with `!important`.
+    Important,
+}
+
+impl Default for Importance {
+    fn default() -> Self {
+        Self::Normal
+    }
+}
+
+impl Importance {
+    /// Return whether this is an important declaration.
+    pub fn important(self) -> bool {
+        match self {
+            Self::Normal => false,
+            Self::Important => true,
+        }
+    }
+}
+
+#[derive(Clone, ToShmem, Default, MallocSizeOf)]
+struct PropertyDeclarationIdSet {
+    longhands: LonghandIdSet,
+    custom: PrecomputedHashSet<custom_properties::Name>,
+}
+
+impl PropertyDeclarationIdSet {
+    fn insert(&mut self, id: PropertyDeclarationId) -> bool {
+        match id {
+            PropertyDeclarationId::Longhand(id) => {
+                if self.longhands.contains(id) {
+                    return false;
+                }
+                self.longhands.insert(id);
+                return true;
+            },
+            PropertyDeclarationId::Custom(name) => self.custom.insert(name.clone()),
+        }
+    }
+
+    fn contains(&self, id: PropertyDeclarationId) -> bool {
+        match id {
+            PropertyDeclarationId::Longhand(id) => self.longhands.contains(id),
+            PropertyDeclarationId::Custom(name) => self.custom.contains(name),
+        }
+    }
+
+    fn remove(&mut self, id: PropertyDeclarationId) {
+        match id {
+            PropertyDeclarationId::Longhand(id) => self.longhands.remove(id),
+            PropertyDeclarationId::Custom(name) => {
+                self.custom.remove(name);
+            },
+        }
+    }
+
+    fn clear(&mut self) {
+        self.longhands.clear();
+        self.custom.clear();
+    }
+}
+
+/// Overridden declarations are skipped.
+#[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
+#[derive(Clone, ToShmem, Default)]
+pub struct PropertyDeclarationBlock {
+    /// The group of declarations, along with their importance.
+    ///
+    /// Only deduplicated declarations appear here.
+    declarations: ThinVec<PropertyDeclaration>,
+
+    /// The "important" flag for each declaration in `declarations`.
+    declarations_importance: SmallBitVec,
+
+    /// The set of properties that are present in the block.
+    property_ids: PropertyDeclarationIdSet,
+}
+
+/// Iterator over `(PropertyDeclaration, Importance)` pairs.
+pub struct DeclarationImportanceIterator<'a> {
+    iter: Zip<Iter<'a, PropertyDeclaration>, smallbitvec::Iter<'a>>,
+}
+
+impl<'a> Default for DeclarationImportanceIterator<'a> {
+    fn default() -> Self {
+        Self {
+            iter: [].iter().zip(smallbitvec::Iter::default()),
+        }
+    }
+}
+
+impl<'a> DeclarationImportanceIterator<'a> {
+    /// Constructor.
+    fn new(declarations: &'a [PropertyDeclaration], important: &'a SmallBitVec) -> Self {
+        DeclarationImportanceIterator {
+            iter: declarations.iter().zip(important.iter()),
+        }
+    }
+}
+
+impl<'a> Iterator for DeclarationImportanceIterator<'a> {
+    type Item = (&'a PropertyDeclaration, Importance);
+
+    #[inline]
+    fn next(&mut self) -> Option<Self::Item> {
+        self.iter.next().map(|(decl, important)| {
+            (
+                decl,
+                if important {
+                    Importance::Important
+                } else {
+                    Importance::Normal
+                },
+            )
+        })
+    }
+
+    #[inline]
+    fn size_hint(&self) -> (usize, Option<usize>) {
+        self.iter.size_hint()
+    }
+}
+
+impl<'a> DoubleEndedIterator for DeclarationImportanceIterator<'a> {
+    #[inline(always)]
+    fn next_back(&mut self) -> Option<Self::Item> {
+        self.iter.next_back().map(|(decl, important)| {
+            (
+                decl,
+                if important {
+                    Importance::Important
+                } else {
+                    Importance::Normal
+                },
+            )
+        })
+    }
+}
+
+/// Iterator for AnimationValue to be generated from PropertyDeclarationBlock.
+pub struct AnimationValueIterator<'a, 'cx, 'cx_a: 'cx> {
+    iter: DeclarationImportanceIterator<'a>,
+    context: &'cx mut Context<'cx_a>,
+    default_values: &'a ComputedValues,
+    /// Custom properties in a keyframe if exists.
+    extra_custom_properties: Option<&'a Arc<crate::custom_properties::CustomPropertiesMap>>,
+}
+
+impl<'a, 'cx, 'cx_a: 'cx> AnimationValueIterator<'a, 'cx, 'cx_a> {
+    fn new(
+        declarations: &'a PropertyDeclarationBlock,
+        context: &'cx mut Context<'cx_a>,
+        default_values: &'a ComputedValues,
+        extra_custom_properties: Option<&'a Arc<crate::custom_properties::CustomPropertiesMap>>,
+    ) -> AnimationValueIterator<'a, 'cx, 'cx_a> {
+        AnimationValueIterator {
+            iter: declarations.declaration_importance_iter(),
+            context,
+            default_values,
+            extra_custom_properties,
+        }
+    }
+}
+
+impl<'a, 'cx, 'cx_a: 'cx> Iterator for AnimationValueIterator<'a, 'cx, 'cx_a> {
+    type Item = AnimationValue;
+    #[inline]
+    fn next(&mut self) -> Option<Self::Item> {
+        loop {
+            let (decl, importance) = self.iter.next()?;
+
+            if importance.important() {
+                continue;
+            }
+
+            let animation = AnimationValue::from_declaration(
+                decl,
+                &mut self.context,
+                self.extra_custom_properties,
+                self.default_values,
+            );
+
+            if let Some(anim) = animation {
+                return Some(anim);
+            }
+        }
+    }
+}
+
+impl fmt::Debug for PropertyDeclarationBlock {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        self.declarations.fmt(f)
+    }
+}
+
+impl PropertyDeclarationBlock {
+    /// Returns the number of declarations in the block.
+    #[inline]
+    pub fn len(&self) -> usize {
+        self.declarations.len()
+    }
+
+    /// Returns whether the block is empty.
+    #[inline]
+    pub fn is_empty(&self) -> bool {
+        self.declarations.is_empty()
+    }
+
+    /// Create an empty block
+    #[inline]
+    pub fn new() -> Self {
+        PropertyDeclarationBlock {
+            declarations: ThinVec::new(),
+            declarations_importance: SmallBitVec::new(),
+            property_ids: PropertyDeclarationIdSet::default(),
+        }
+    }
+
+    /// Create a block with a single declaration
+    pub fn with_one(declaration: PropertyDeclaration, importance: Importance) -> Self {
+        let mut property_ids = PropertyDeclarationIdSet::default();
+        property_ids.insert(declaration.id());
+        let mut declarations = ThinVec::with_capacity(1);
+        declarations.push(declaration);
+        PropertyDeclarationBlock {
+            declarations,
+            declarations_importance: SmallBitVec::from_elem(1, importance.important()),
+            property_ids,
+        }
+    }
+
+    /// The declarations in this block
+    #[inline]
+    pub fn declarations(&self) -> &[PropertyDeclaration] {
+        &self.declarations
+    }
+
+    /// The `important` flags for declarations in this block
+    #[inline]
+    pub fn declarations_importance(&self) -> &SmallBitVec {
+        &self.declarations_importance
+    }
+
+    /// Iterate over `(PropertyDeclaration, Importance)` pairs
+    #[inline]
+    pub fn declaration_importance_iter(&self) -> DeclarationImportanceIterator {
+        DeclarationImportanceIterator::new(&self.declarations, &self.declarations_importance)
+    }
+
+    /// Iterate over `PropertyDeclaration` for Importance::Normal
+    #[inline]
+    pub fn normal_declaration_iter<'a>(
+        &'a self,
+    ) -> impl DoubleEndedIterator<Item = &'a PropertyDeclaration> {
+        self.declaration_importance_iter()
+            .filter(|(_, importance)| !importance.important())
+            .map(|(declaration, _)| declaration)
+    }
+
+    /// Return an iterator of (AnimatableLonghand, AnimationValue).
+    #[inline]
+    pub fn to_animation_value_iter<'a, 'cx, 'cx_a: 'cx>(
+        &'a self,
+        context: &'cx mut Context<'cx_a>,
+        default_values: &'a ComputedValues,
+        extra_custom_properties: Option<&'a Arc<crate::custom_properties::CustomPropertiesMap>>,
+    ) -> AnimationValueIterator<'a, 'cx, 'cx_a> {
+        AnimationValueIterator::new(self, context, default_values, extra_custom_properties)
+    }
+
+    /// Returns whether this block contains any declaration with `!important`.
+    ///
+    /// This is based on the `declarations_importance` bit-vector,
+    /// which should be maintained whenever `declarations` is changed.
+    #[inline]
+    pub fn any_important(&self) -> bool {
+        !self.declarations_importance.all_false()
+    }
+
+    /// Returns whether this block contains any declaration without `!important`.
+    ///
+    /// This is based on the `declarations_importance` bit-vector,
+    /// which should be maintained whenever `declarations` is changed.
+    #[inline]
+    pub fn any_normal(&self) -> bool {
+        !self.declarations_importance.all_true()
+    }
+
+    /// Returns a `LonghandIdSet` representing the properties that are changed in
+    /// this block.
+    #[inline]
+    pub fn longhands(&self) -> &LonghandIdSet {
+        &self.property_ids.longhands
+    }
+
+    /// Returns whether this block contains a declaration of a given property id.
+    #[inline]
+    pub fn contains(&self, id: PropertyDeclarationId) -> bool {
+        self.property_ids.contains(id)
+    }
+
+    /// Returns whether this block contains any reset longhand.
+    #[inline]
+    pub fn contains_any_reset(&self) -> bool {
+        self.property_ids.longhands.contains_any_reset()
+    }
+
+    /// Get a declaration for a given property.
+    ///
+    /// NOTE: This is linear time in the case of custom properties or in the
+    /// case the longhand is actually in the declaration block.
+    #[inline]
+    pub fn get(
+        &self,
+        property: PropertyDeclarationId,
+    ) -> Option<(&PropertyDeclaration, Importance)> {
+        if !self.contains(property) {
+            return None;
+        }
+        self.declaration_importance_iter()
+            .find(|(declaration, _)| declaration.id() == property)
+    }
+
+    /// Tries to serialize a given shorthand from the declarations in this
+    /// block.
+    pub fn shorthand_to_css(
+        &self,
+        shorthand: ShorthandId,
+        dest: &mut CssStringWriter,
+    ) -> fmt::Result {
+        // Step 1.2.1 of
+        // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue
+        let mut list = SmallVec::<[&_; 10]>::new();
+        let mut important_count = 0;
+
+        // Step 1.2.2
+        for longhand in shorthand.longhands() {
+            // Step 1.2.2.1
+            let declaration = self.get(PropertyDeclarationId::Longhand(longhand));
+
+            // Step 1.2.2.2 & 1.2.2.3
+            match declaration {
+                Some((declaration, importance)) => {
+                    list.push(declaration);
+                    if importance.important() {
+                        important_count += 1;
+                    }
+                },
+                None => return Ok(()),
+            }
+        }
+
+        // If there is one or more longhand with important, and one or more
+        // without important, we don't serialize it as a shorthand.
+        if important_count > 0 && important_count != list.len() {
+            return Ok(());
+        }
+
+        // Step 1.2.3
+        // We don't print !important when serializing individual properties,
+        // so we treat this as a normal-importance property
+        match shorthand.get_shorthand_appendable_value(&list) {
+            Some(appendable_value) => append_declaration_value(dest, appendable_value),
+            None => return Ok(()),
+        }
+    }
+
+    /// Find the value of the given property in this block and serialize it
+    ///
+    /// <https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue>
+    pub fn property_value_to_css(
+        &self,
+        property: &PropertyId,
+        dest: &mut CssStringWriter,
+    ) -> fmt::Result {
+        // Step 1.1: done when parsing a string to PropertyId
+
+        // Step 1.2
+        let longhand_or_custom = match property.as_shorthand() {
+            Ok(shorthand) => return self.shorthand_to_css(shorthand, dest),
+            Err(longhand_or_custom) => longhand_or_custom,
+        };
+
+        if let Some((value, _importance)) = self.get(longhand_or_custom) {
+            // Step 2
+            value.to_css(dest)
+        } else {
+            // Step 3
+            Ok(())
+        }
+    }
+
+    /// <https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertypriority>
+    pub fn property_priority(&self, property: &PropertyId) -> Importance {
+        // Step 1: done when parsing a string to PropertyId
+
+        // Step 2
+        match property.as_shorthand() {
+            Ok(shorthand) => {
+                // Step 2.1 & 2.2 & 2.3
+                if shorthand.longhands().all(|l| {
+                    self.get(PropertyDeclarationId::Longhand(l))
+                        .map_or(false, |(_, importance)| importance.important())
+                }) {
+                    Importance::Important
+                } else {
+                    Importance::Normal
+                }
+            },
+            Err(longhand_or_custom) => {
+                // Step 3
+                self.get(longhand_or_custom)
+                    .map_or(Importance::Normal, |(_, importance)| importance)
+            },
+        }
+    }
+
+    /// Adds or overrides the declaration for a given property in this block.
+    ///
+    /// See the documentation of `push` to see what impact `source` has when the
+    /// property is already there.
+    pub fn extend(
+        &mut self,
+        mut drain: SourcePropertyDeclarationDrain,
+        importance: Importance,
+    ) -> bool {
+        let all_shorthand_len = match drain.all_shorthand {
+            AllShorthand::NotSet => 0,
+            AllShorthand::CSSWideKeyword(_) | AllShorthand::WithVariables(_) => {
+                shorthands::ALL_SHORTHAND_MAX_LEN
+            },
+        };
+        let push_calls_count = drain.declarations.len() + all_shorthand_len;
+
+        // With deduplication the actual length increase may be less than this.
+        self.declarations.reserve(push_calls_count);
+
+        let mut changed = false;
+        for decl in &mut drain.declarations {
+            changed |= self.push(decl, importance);
+        }
+        drain
+            .all_shorthand
+            .declarations()
+            .fold(changed, |changed, decl| {
+                changed | self.push(decl, importance)
+            })
+    }
+
+    /// Adds or overrides the declaration for a given property in this block.
+    ///
+    /// Returns whether the declaration has changed.
+    ///
+    /// This is only used for parsing and internal use.
+    pub fn push(&mut self, declaration: PropertyDeclaration, importance: Importance) -> bool {
+        let id = declaration.id();
+        if !self.property_ids.insert(id) {
+            let mut index_to_remove = None;
+            for (i, slot) in self.declarations.iter_mut().enumerate() {
+                if slot.id() != id {
+                    continue;
+                }
+
+                let important = self.declarations_importance[i];
+
+                // For declarations from parsing, non-important declarations
+                // shouldn't override existing important one.
+                if important && !importance.important() {
+                    return false;
+                }
+
+                index_to_remove = Some(i);
+                break;
+            }
+
+            if let Some(index) = index_to_remove {
+                self.declarations.remove(index);
+                self.declarations_importance.remove(index);
+                self.declarations.push(declaration);
+                self.declarations_importance.push(importance.important());
+                return true;
+            }
+        }
+
+        self.declarations.push(declaration);
+        self.declarations_importance.push(importance.important());
+        true
+    }
+
+    /// Prepares updating this declaration block with the given
+    /// `SourcePropertyDeclaration` and importance, and returns whether
+    /// there is something to update.
+    pub fn prepare_for_update(
+        &self,
+        source_declarations: &SourcePropertyDeclaration,
+        importance: Importance,
+        updates: &mut SourcePropertyDeclarationUpdate,
+    ) -> bool {
+        debug_assert!(updates.updates.is_empty());
+        // Check whether we are updating for an all shorthand change.
+        if !matches!(source_declarations.all_shorthand, AllShorthand::NotSet) {
+            debug_assert!(source_declarations.declarations.is_empty());
+            return source_declarations
+                .all_shorthand
+                .declarations()
+                .any(|decl| {
+                    !self.contains(decl.id()) ||
+                        self.declarations
+                            .iter()
+                            .enumerate()
+                            .find(|&(_, ref d)| d.id() == decl.id())
+                            .map_or(true, |(i, d)| {
+                                let important = self.declarations_importance[i];
+                                *d != decl || important != importance.important()
+                            })
+                });
+        }
+        // Fill `updates` with update information.
+        let mut any_update = false;
+        let new_count = &mut updates.new_count;
+        let any_removal = &mut updates.any_removal;
+        let updates = &mut updates.updates;
+        updates.extend(
+            source_declarations
+                .declarations
+                .iter()
+                .map(|declaration| {
+                    if !self.contains(declaration.id()) {
+                        return DeclarationUpdate::Append;
+                    }
+                    let longhand_id = declaration.id().as_longhand();
+                    if let Some(longhand_id) = longhand_id {
+                        if let Some(logical_group) = longhand_id.logical_group() {
+                            let mut needs_append = false;
+                            for (pos, decl) in self.declarations.iter().enumerate().rev() {
+                                let id = match decl.id().as_longhand() {
+                                    Some(id) => id,
+                                    None => continue,
+                                };
+                                if id == longhand_id {
+                                    if needs_append {
+                                        return DeclarationUpdate::AppendAndRemove { pos };
+                                    }
+                                    let important = self.declarations_importance[pos];
+                                    if decl == declaration && important == importance.important() {
+                                        return DeclarationUpdate::None;
+                                    }
+                                    return DeclarationUpdate::UpdateInPlace { pos };
+                                }
+                                if !needs_append &&
+                                    id.logical_group() == Some(logical_group) &&
+                                    id.is_logical() != longhand_id.is_logical()
+                                {
+                                    needs_append = true;
+                                }
+                            }
+                            unreachable!("Longhand should be found in loop above");
+                        }
+                    }
+                    self.declarations
+                        .iter()
+                        .enumerate()
+                        .find(|&(_, ref decl)| decl.id() == declaration.id())
+                        .map_or(DeclarationUpdate::Append, |(pos, decl)| {
+                            let important = self.declarations_importance[pos];
+                            if decl == declaration && important == importance.important() {
+                                DeclarationUpdate::None
+                            } else {
+                                DeclarationUpdate::UpdateInPlace { pos }
+                            }
+                        })
+                })
+                .inspect(|update| {
+                    if matches!(update, DeclarationUpdate::None) {
+                        return;
+                    }
+                    any_update = true;
+                    match update {
+                        DeclarationUpdate::Append => {
+                            *new_count += 1;
+                        },
+                        DeclarationUpdate::AppendAndRemove { .. } => {
+                            *any_removal = true;
+                        },
+                        _ => {},
+                    }
+                }),
+        );
+        any_update
+    }
+
+    /// Update this declaration block with the given data.
+    pub fn update(
+        &mut self,
+        drain: SourcePropertyDeclarationDrain,
+        importance: Importance,
+        updates: &mut SourcePropertyDeclarationUpdate,
+    ) {
+        let important = importance.important();
+        if !matches!(drain.all_shorthand, AllShorthand::NotSet) {
+            debug_assert!(updates.updates.is_empty());
+            for decl in drain.all_shorthand.declarations() {
+                let id = decl.id();
+                if self.property_ids.insert(id) {
+                    self.declarations.push(decl);
+                    self.declarations_importance.push(important);
+                } else {
+                    let (idx, slot) = self
+                        .declarations
+                        .iter_mut()
+                        .enumerate()
+                        .find(|&(_, ref d)| d.id() == decl.id())
+                        .unwrap();
+                    *slot = decl;
+                    self.declarations_importance.set(idx, important);
+                }
+            }
+            return;
+        }
+
+        self.declarations.reserve(updates.new_count);
+        if updates.any_removal {
+            // Prepare for removal and fixing update positions.
+            struct UpdateOrRemoval<'a> {
+                item: &'a mut DeclarationUpdate,
+                pos: usize,
+                remove: bool,
+            }
+            let mut updates_and_removals: SubpropertiesVec<UpdateOrRemoval> = updates
+                .updates
+                .iter_mut()
+                .filter_map(|item| {
+                    let (pos, remove) = match *item {
+                        DeclarationUpdate::UpdateInPlace { pos } => (pos, false),
+                        DeclarationUpdate::AppendAndRemove { pos } => (pos, true),
+                        _ => return None,
+                    };
+                    Some(UpdateOrRemoval { item, pos, remove })
+                })
+                .collect();
+            // Execute removals. It's important to do it in reverse index order,
+            // so that removing doesn't invalidate following positions.
+            updates_and_removals.sort_unstable_by_key(|update| update.pos);
+            updates_and_removals
+                .iter()
+                .rev()
+                .filter(|update| update.remove)
+                .for_each(|update| {
+                    self.declarations.remove(update.pos);
+                    self.declarations_importance.remove(update.pos);
+                });
+            // Fixup pos field for updates.
+            let mut removed_count = 0;
+            for update in updates_and_removals.iter_mut() {
+                if update.remove {
+                    removed_count += 1;
+                    continue;
+                }
+                debug_assert_eq!(
+                    *update.item,
+                    DeclarationUpdate::UpdateInPlace { pos: update.pos }
+                );
+                *update.item = DeclarationUpdate::UpdateInPlace {
+                    pos: update.pos - removed_count,
+                };
+            }
+        }
+        // Execute updates and appends.
+        for (decl, update) in drain.declarations.zip_eq(updates.updates.iter()) {
+            match *update {
+                DeclarationUpdate::None => {},
+                DeclarationUpdate::Append | DeclarationUpdate::AppendAndRemove { .. } => {
+                    self.property_ids.insert(decl.id());
+                    self.declarations.push(decl);
+                    self.declarations_importance.push(important);
+                },
+                DeclarationUpdate::UpdateInPlace { pos } => {
+                    self.declarations[pos] = decl;
+                    self.declarations_importance.set(pos, important);
+                },
+            }
+        }
+        updates.updates.clear();
+    }
+
+    /// Returns the first declaration that would be removed by removing
+    /// `property`.
+    #[inline]
+    pub fn first_declaration_to_remove(&self, property: &PropertyId) -> Option<usize> {
+        if let Err(longhand_or_custom) = property.as_shorthand() {
+            if !self.contains(longhand_or_custom) {
+                return None;
+            }
+        }
+
+        self.declarations
+            .iter()
+            .position(|declaration| declaration.id().is_or_is_longhand_of(property))
+    }
+
+    /// Removes a given declaration at a given index.
+    #[inline]
+    fn remove_declaration_at(&mut self, i: usize) {
+        self.property_ids.remove(self.declarations[i].id());
+        self.declarations_importance.remove(i);
+        self.declarations.remove(i);
+    }
+
+    /// Clears all the declarations from this block.
+    #[inline]
+    pub fn clear(&mut self) {
+        self.declarations_importance.clear();
+        self.declarations.clear();
+        self.property_ids.clear();
+    }
+
+    /// <https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty>
+    ///
+    /// `first_declaration` needs to be the result of
+    /// `first_declaration_to_remove`.
+    #[inline]
+    pub fn remove_property(&mut self, property: &PropertyId, first_declaration: usize) {
+        debug_assert_eq!(
+            Some(first_declaration),
+            self.first_declaration_to_remove(property)
+        );
+        debug_assert!(self.declarations[first_declaration]
+            .id()
+            .is_or_is_longhand_of(property));
+
+        self.remove_declaration_at(first_declaration);
+
+        let shorthand = match property.as_shorthand() {
+            Ok(s) => s,
+            Err(_longhand_or_custom) => return,
+        };
+
+        let mut i = first_declaration;
+        let mut len = self.len();
+        while i < len {
+            if !self.declarations[i].id().is_longhand_of(shorthand) {
+                i += 1;
+                continue;
+            }
+
+            self.remove_declaration_at(i);
+            len -= 1;
+        }
+    }
+
+    /// Take a declaration block known to contain a single property and serialize it.
+    pub fn single_value_to_css(
+        &self,
+        property: &PropertyId,
+        dest: &mut CssStringWriter,
+        computed_values: Option<&ComputedValues>,
+        custom_properties_block: Option<&PropertyDeclarationBlock>,
+        device: &Device,
+    ) -> fmt::Result {
+        if let Ok(shorthand) = property.as_shorthand() {
+            return self.shorthand_to_css(shorthand, dest);
+        }
+
+        // FIXME(emilio): Should this assert, or assert that the declaration is
+        // the property we expect?
+        let declaration = match self.declarations.get(0) {
+            Some(d) => d,
+            None => return Err(fmt::Error),
+        };
+
+        let custom_properties = if let Some(cv) = computed_values {
+            // If there are extra custom properties for this declaration block,
+            // factor them in too.
+            if let Some(block) = custom_properties_block {
+                // FIXME(emilio): This is not super-efficient here, and all this
+                // feels like a hack anyway...
+                block.cascade_custom_properties(cv.custom_properties(), device)
+            } else {
+                cv.custom_properties().cloned()
+            }
+        } else {
+            None
+        };
+
+        match (declaration, computed_values) {
+            // If we have a longhand declaration with variables, those variables
+            // will be stored as unparsed values.
+            //
+            // As a temporary measure to produce sensible results in Gecko's
+            // getKeyframes() implementation for CSS animations, if
+            // |computed_values| is supplied, we use it to expand such variable
+            // declarations. This will be fixed properly in Gecko bug 1391537.
+            (&PropertyDeclaration::WithVariables(ref declaration), Some(ref computed_values)) => {
+                declaration
+                    .value
+                    .substitute_variables(
+                        declaration.id,
+                        computed_values.writing_mode,
+                        custom_properties.as_ref(),
+                        QuirksMode::NoQuirks,
+                        device,
+                        &mut Default::default(),
+                    )
+                    .to_css(dest)
+            },
+            (ref d, _) => d.to_css(dest),
+        }
+    }
+
+    /// Convert AnimationValueMap to PropertyDeclarationBlock.
+    pub fn from_animation_value_map(animation_value_map: &AnimationValueMap) -> Self {
+        let len = animation_value_map.len();
+        let mut declarations = ThinVec::with_capacity(len);
+        let mut property_ids = PropertyDeclarationIdSet::default();
+
+        for (property, animation_value) in animation_value_map.iter() {
+            property_ids.longhands.insert(*property);
+            declarations.push(animation_value.uncompute());
+        }
+
+        PropertyDeclarationBlock {
+            declarations,
+            property_ids,
+            declarations_importance: SmallBitVec::from_elem(len, false),
+        }
+    }
+
+    /// Returns true if the declaration block has a CSSWideKeyword for the given
+    /// property.
+    pub fn has_css_wide_keyword(&self, property: &PropertyId) -> bool {
+        if let Err(longhand_or_custom) = property.as_shorthand() {
+            if !self.property_ids.contains(longhand_or_custom) {
+                return false;
+            }
+        }
+        self.declarations.iter().any(|decl| {
+            decl.id().is_or_is_longhand_of(property) && decl.get_css_wide_keyword().is_some()
+        })
+    }
+
+    /// Returns a custom properties map which is the result of cascading custom
+    /// properties in this declaration block along with context's custom
+    /// properties.
+    pub fn cascade_custom_properties_with_context(
+        &self,
+        context: &Context,
+    ) -> Option<Arc<crate::custom_properties::CustomPropertiesMap>> {
+        self.cascade_custom_properties(context.style().custom_properties(), context.device())
+    }
+
+    /// Returns a custom properties map which is the result of cascading custom
+    /// properties in this declaration block along with the given custom
+    /// properties.
+    fn cascade_custom_properties(
+        &self,
+        inherited_custom_properties: Option<&Arc<crate::custom_properties::CustomPropertiesMap>>,
+        device: &Device,
+    ) -> Option<Arc<crate::custom_properties::CustomPropertiesMap>> {
+        let mut builder = CustomPropertiesBuilder::new(inherited_custom_properties, device);
+
+        for declaration in self.normal_declaration_iter() {
+            if let PropertyDeclaration::Custom(ref declaration) = *declaration {
+                builder.cascade(
+                    declaration,
+                    CascadePriority::new(
+                        CascadeLevel::same_tree_author_normal(),
+                        LayerOrder::root(),
+                    ),
+                );
+            }
+        }
+
+        builder.build()
+    }
+
+    /// Like the method on ToCss, but without the type parameter to avoid
+    /// accidentally monomorphizing this large function multiple times for
+    /// different writers.
+    ///
+    /// https://drafts.csswg.org/cssom/#serialize-a-css-declaration-block
+    pub fn to_css(&self, dest: &mut CssStringWriter) -> fmt::Result {
+        let mut is_first_serialization = true; // trailing serializations should have a prepended space
+
+        // Step 1 -> dest = result list
+
+        // Step 2
+        //
+        // NOTE(emilio): We reuse this set for both longhands and shorthands
+        // with subtly different meaning. For longhands, only longhands that
+        // have actually been serialized (either by themselves, or as part of a
+        // shorthand) appear here. For shorthands, all the shorthands that we've
+        // attempted to serialize appear here.
+        let mut already_serialized = NonCustomPropertyIdSet::new();
+
+        // Step 3
+        'declaration_loop: for (declaration, importance) in self.declaration_importance_iter() {
+            // Step 3.1
+            let property = declaration.id();
+            let longhand_id = match property {
+                PropertyDeclarationId::Longhand(id) => id,
+                PropertyDeclarationId::Custom(..) => {
+                    // Given the invariants that there are no duplicate
+                    // properties in a declaration block, and that custom
+                    // properties can't be part of a shorthand, we can just care
+                    // about them here.
+                    append_serialization(
+                        dest,
+                        &property,
+                        AppendableValue::Declaration(declaration),
+                        importance,
+                        &mut is_first_serialization,
+                    )?;
+                    continue;
+                },
+            };
+
+            // Step 3.2
+            if already_serialized.contains(longhand_id.into()) {
+                continue;
+            }
+
+            // Steps 3.3 & 3.4
+            for shorthand in longhand_id.shorthands() {
+                // We already attempted to serialize this shorthand before.
+                if already_serialized.contains(shorthand.into()) {
+                    continue;
+                }
+                already_serialized.insert(shorthand.into());
+
+                if shorthand.is_legacy_shorthand() {
+                    continue;
+                }
+
+                // Step 3.3.1:
+                //     Let longhands be an array consisting of all CSS
+                //     declarations in declaration block’s declarations that
+                //     that are not in already serialized and have a property
+                //     name that maps to one of the shorthand properties in
+                //     shorthands.
+                let longhands = {
+                    // TODO(emilio): This could just index in an array if we
+                    // remove pref-controlled longhands.
+                    let mut ids = LonghandIdSet::new();
+                    for longhand in shorthand.longhands() {
+                        ids.insert(longhand);
+                    }
+                    ids
+                };
+
+                // Step 3.4.2
+                //     If all properties that map to shorthand are not present
+                //     in longhands, continue with the steps labeled shorthand
+                //     loop.
+                if !self.property_ids.longhands.contains_all(&longhands) {
+                    continue;
+                }
+
+                // Step 3.4.3:
+                //     Let current longhands be an empty array.
+                let mut current_longhands = SmallVec::<[&_; 10]>::new();
+                let mut logical_groups = LogicalGroupSet::new();
+                let mut saw_one = false;
+                let mut logical_mismatch = false;
+                let mut seen = LonghandIdSet::new();
+                let mut important_count = 0;
+
+                // Step 3.4.4:
+                //    Append all CSS declarations in longhands that have a
+                //    property name that maps to shorthand to current longhands.
+                for (declaration, importance) in self.declaration_importance_iter() {
+                    let longhand = match declaration.id() {
+                        PropertyDeclarationId::Longhand(id) => id,
+                        PropertyDeclarationId::Custom(..) => continue,
+                    };
+
+                    if longhands.contains(longhand) {
+                        saw_one = true;
+                        if importance.important() {
+                            important_count += 1;
+                        }
+                        current_longhands.push(declaration);
+                        if shorthand != ShorthandId::All {
+                            // All is special because it contains both physical
+                            // and logical longhands.
+                            if let Some(g) = longhand.logical_group() {
+                                logical_groups.insert(g);
+                            }
+                            seen.insert(longhand);
+                            if seen == longhands {
+                                break;
+                            }
+                        }
+                    } else if saw_one {
+                        if let Some(g) = longhand.logical_group() {
+                            if logical_groups.contains(g) {
+                                logical_mismatch = true;
+                                break;
+                            }
+                        }
+                    }
+                }
+
+                // 3.4.5:
+                //     If there is one or more CSS declarations in current
+                //     longhands have their important flag set and one or more
+                //     with it unset, continue with the steps labeled shorthand
+                //     loop.
+                let is_important = important_count > 0;
+                if is_important && important_count != current_longhands.len() {
+                    continue;
+                }
+
+                // 3.4.6:
+                //    If there’s any declaration in declaration block in between
+                //    the first and the last longhand in current longhands which
+                //    belongs to the same logical property group, but has a
+                //    different mapping logic as any of the longhands in current
+                //    longhands, and is not in current longhands, continue with
+                //    the steps labeled shorthand loop.
+                if logical_mismatch {
+                    continue;
+                }
+
+                let importance = if is_important {
+                    Importance::Important
+                } else {
+                    Importance::Normal
+                };
+
+                // 3.4.7:
+                //    Let value be the result of invoking serialize a CSS value
+                //    of current longhands.
+                let appendable_value =
+                    match shorthand.get_shorthand_appendable_value(&current_longhands) {
+                        None => continue,
+                        Some(appendable_value) => appendable_value,
+                    };
+
+                // We avoid re-serializing if we're already an
+                // AppendableValue::Css.
+                let mut v = CssString::new();
+                let value = match appendable_value {
+                    AppendableValue::Css(css) => {
+                        debug_assert!(!css.is_empty());
+                        appendable_value
+                    },
+                    other => {
+                        append_declaration_value(&mut v, other)?;
+
+                        // 3.4.8:
+                        //     If value is the empty string, continue with the
+                        //     steps labeled shorthand loop.
+                        if v.is_empty() {
+                            continue;
+                        }
+
+                        AppendableValue::Css({
+                            // Safety: serialization only generates valid utf-8.
+                            #[cfg(feature = "gecko")]
+                            unsafe {
+                                v.as_str_unchecked()
+                            }
+                            #[cfg(feature = "servo")]
+                            &v
+                        })
+                    },
+                };
+
+                // 3.4.9:
+                //     Let serialized declaration be the result of invoking
+                //     serialize a CSS declaration with property name shorthand,
+                //     value value, and the important flag set if the CSS
+                //     declarations in current longhands have their important
+                //     flag set.
+                //
+                // 3.4.10:
+                //     Append serialized declaration to list.
+                append_serialization(
+                    dest,
+                    &shorthand,
+                    value,
+                    importance,
+                    &mut is_first_serialization,
+                )?;
+
+                // 3.4.11:
+                //     Append the property names of all items of current
+                //     longhands to already serialized.
+                for current_longhand in &current_longhands {
+                    let longhand_id = match current_longhand.id() {
+                        PropertyDeclarationId::Longhand(id) => id,
+                        PropertyDeclarationId::Custom(..) => unreachable!(),
+                    };
+
+                    // Substep 9
+                    already_serialized.insert(longhand_id.into());
+                }
+
+                // 3.4.12:
+                //     Continue with the steps labeled declaration loop.
+                continue 'declaration_loop;
+            }
+
+            // Steps 3.5, 3.6 & 3.7:
+            //     Let value be the result of invoking serialize a CSS value of
+            //     declaration.
+            //
+            //     Let serialized declaration be the result of invoking
+            //     serialize a CSS declaration with property name property,
+            //     value value, and the important flag set if declaration has
+            //     its important flag set.
+            //
+            //     Append serialized declaration to list.
+            append_serialization(
+                dest,
+                &property,
+                AppendableValue::Declaration(declaration),
+                importance,
+                &mut is_first_serialization,
+            )?;
+
+            // Step 3.8:
+            //     Append property to already serialized.
+            already_serialized.insert(longhand_id.into());
+        }
+
+        // Step 4
+        Ok(())
+    }
+}
+
+/// A convenient enum to represent different kinds of stuff that can represent a
+/// _value_ in the serialization of a property declaration.
+pub enum AppendableValue<'a, 'b: 'a> {
+    /// A given declaration, of which we'll serialize just the value.
+    Declaration(&'a PropertyDeclaration),
+    /// A set of declarations for a given shorthand.
+    ///
+    /// FIXME: This needs more docs, where are the shorthands expanded? We print
+    /// the property name before-hand, don't we?
+    DeclarationsForShorthand(ShorthandId, &'a [&'b PropertyDeclaration]),
+    /// A raw CSS string, coming for example from a property with CSS variables,
+    /// or when storing a serialized shorthand value before appending directly.
+    Css(&'a str),
+}
+
+/// Potentially appends whitespace after the first (property: value;) pair.
+fn handle_first_serialization<W>(dest: &mut W, is_first_serialization: &mut bool) -> fmt::Result
+where
+    W: Write,
+{
+    if !*is_first_serialization {
+        dest.write_char(' ')
+    } else {
+        *is_first_serialization = false;
+        Ok(())
+    }
+}
+
+/// Append a given kind of appendable value to a serialization.
+pub fn append_declaration_value<'a, 'b: 'a>(
+    dest: &mut CssStringWriter,
+    appendable_value: AppendableValue<'a, 'b>,
+) -> fmt::Result {
+    match appendable_value {
+        AppendableValue::Css(css) => dest.write_str(css),
+        AppendableValue::Declaration(decl) => decl.to_css(dest),
+        AppendableValue::DeclarationsForShorthand(shorthand, decls) => {
+            shorthand.longhands_to_css(decls, dest)
+        },
+    }
+}
+
+/// Append a given property and value pair to a serialization.
+pub fn append_serialization<'a, 'b: 'a, N>(
+    dest: &mut CssStringWriter,
+    property_name: &N,
+    appendable_value: AppendableValue<'a, 'b>,
+    importance: Importance,
+    is_first_serialization: &mut bool,
+) -> fmt::Result
+where
+    N: ToCss,
+{
+    handle_first_serialization(dest, is_first_serialization)?;
+
+    property_name.to_css(&mut CssWriter::new(dest))?;
+    dest.write_str(": ")?;
+
+    append_declaration_value(dest, appendable_value)?;
+
+    if importance.important() {
+        dest.write_str(" !important")?;
+    }
+
+    dest.write_char(';')
+}
+
+/// A helper to parse the style attribute of an element, in order for this to be
+/// shared between Servo and Gecko.
+///
+/// Inline because we call this cross-crate.
+#[inline]
+pub fn parse_style_attribute(
+    input: &str,
+    url_data: &UrlExtraData,
+    error_reporter: Option<&dyn ParseErrorReporter>,
+    quirks_mode: QuirksMode,
+    rule_type: CssRuleType,
+) -> PropertyDeclarationBlock {
+    let context = ParserContext::new(
+        Origin::Author,
+        url_data,
+        Some(rule_type),
+        ParsingMode::DEFAULT,
+        quirks_mode,
+        /* namespaces = */ Default::default(),
+        error_reporter,
+        None,
+    );
+
+    let mut input = ParserInput::new(input);
+    parse_property_declaration_list(&context, &mut Parser::new(&mut input), None)
+}
+
+/// Parse a given property declaration. Can result in multiple
+/// `PropertyDeclaration`s when expanding a shorthand, for example.
+///
+/// This does not attempt to parse !important at all.
+#[inline]
+pub fn parse_one_declaration_into(
+    declarations: &mut SourcePropertyDeclaration,
+    id: PropertyId,
+    input: &str,
+    origin: Origin,
+    url_data: &UrlExtraData,
+    error_reporter: Option<&dyn ParseErrorReporter>,
+    parsing_mode: ParsingMode,
+    quirks_mode: QuirksMode,
+    rule_type: CssRuleType,
+) -> Result<(), ()> {
+    let context = ParserContext::new(
+        origin,
+        url_data,
+        Some(rule_type),
+        parsing_mode,
+        quirks_mode,
+        /* namespaces = */ Default::default(),
+        error_reporter,
+        None,
+    );
+
+    let property_id_for_error_reporting = if context.error_reporting_enabled() {
+        Some(id.clone())
+    } else {
+        None
+    };
+
+    let mut input = ParserInput::new(input);
+    let mut parser = Parser::new(&mut input);
+    let start_position = parser.position();
+    parser
+        .parse_entirely(|parser| {
+            PropertyDeclaration::parse_into(declarations, id, &context, parser)
+        })
+        .map_err(|err| {
+            if context.error_reporting_enabled() {
+                report_one_css_error(
+                    &context,
+                    None,
+                    None,
+                    err,
+                    parser.slice_from(start_position),
+                    property_id_for_error_reporting,
+                )
+            }
+        })
+}
+
+/// A struct to parse property declarations.
+struct PropertyDeclarationParser<'a, 'b: 'a, 'i> {
+    context: &'a ParserContext<'b>,
+    state: &'a mut DeclarationParserState<'i>,
+}
+
+/// The state needed to parse a declaration block.
+///
+/// It stores declarations in output_block.
+#[derive(Default)]
+pub struct DeclarationParserState<'i> {
+    /// The output block where results are stored.
+    output_block: PropertyDeclarationBlock,
+    /// Declarations from the last declaration parsed. (note that a shorthand might expand to
+    /// multiple declarations).
+    declarations: SourcePropertyDeclaration,
+    /// The importance from the last declaration parsed.
+    importance: Importance,
+    /// A list of errors that have happened so far. Not all of them might be reported.
+    errors: SmallParseErrorVec<'i>,
+    /// The last parsed property id, if any.
+    last_parsed_property_id: Option<PropertyId>,
+}
+
+impl<'i> DeclarationParserState<'i> {
+    /// Returns whether any parsed declarations have been parsed so far.
+    pub fn has_parsed_declarations(&self) -> bool {
+        !self.output_block.is_empty()
+    }
+
+    /// Takes the parsed declarations.
+    pub fn take_declarations(&mut self) -> PropertyDeclarationBlock {
+        std::mem::take(&mut self.output_block)
+    }
+
+    /// Parse a single declaration value.
+    pub fn parse_value<'t>(
+        &mut self,
+        context: &ParserContext,
+        name: CowRcStr<'i>,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<(), ParseError<'i>> {
+        let id = match PropertyId::parse(&name, context) {
+            Ok(id) => id,
+            Err(..) => {
+                return Err(input.new_custom_error(StyleParseErrorKind::UnknownProperty(name)));
+            },
+        };
+        if context.error_reporting_enabled() {
+            self.last_parsed_property_id = Some(id.clone());
+        }
+        input.parse_until_before(Delimiter::Bang, |input| {
+            PropertyDeclaration::parse_into(&mut self.declarations, id, context, input)
+        })?;
+        self.importance = match input.try_parse(parse_important) {
+            Ok(()) => Importance::Important,
+            Err(_) => Importance::Normal,
+        };
+        // In case there is still unparsed text in the declaration, we should roll back.
+        input.expect_exhausted()?;
+        self.output_block
+            .extend(self.declarations.drain(), self.importance);
+        // We've successfully parsed a declaration, so forget about
+        // `last_parsed_property_id`. It'd be wrong to associate any
+        // following error with this property.
+        self.last_parsed_property_id = None;
+        Ok(())
+    }
+
+    /// Reports any CSS errors that have ocurred if needed.
+    #[inline]
+    pub fn report_errors_if_needed(
+        &mut self,
+        context: &ParserContext,
+        selectors: Option<&SelectorList<SelectorImpl>>,
+    ) {
+        if self.errors.is_empty() {
+            return;
+        }
+        self.do_report_css_errors(context, selectors);
+    }
+
+    #[cold]
+    fn do_report_css_errors(
+        &mut self,
+        context: &ParserContext,
+        selectors: Option<&SelectorList<SelectorImpl>>,
+    ) {
+        for (error, slice, property) in self.errors.drain(..) {
+            report_one_css_error(
+                context,
+                Some(&self.output_block),
+                selectors,
+                error,
+                slice,
+                property,
+            )
+        }
+    }
+
+    /// Resets the declaration parser state, and reports the error if needed.
+    #[inline]
+    pub fn did_error(&mut self, context: &ParserContext, error: ParseError<'i>, slice: &'i str) {
+        self.declarations.clear();
+        if !context.error_reporting_enabled() {
+            return;
+        }
+        let property = self.last_parsed_property_id.take();
+        self.errors.push((error, slice, property));
+    }
+}
+
+/// Default methods reject all at rules.
+impl<'a, 'b, 'i> AtRuleParser<'i> for PropertyDeclarationParser<'a, 'b, 'i> {
+    type Prelude = ();
+    type AtRule = ();
+    type Error = StyleParseErrorKind<'i>;
+}
+
+/// Default methods reject all rules.
+impl<'a, 'b, 'i> QualifiedRuleParser<'i> for PropertyDeclarationParser<'a, 'b, 'i> {
+    type Prelude = ();
+    type QualifiedRule = ();
+    type Error = StyleParseErrorKind<'i>;
+}
+
+/// Based on NonMozillaVendorIdentifier from Gecko's CSS parser.
+fn is_non_mozilla_vendor_identifier(name: &str) -> bool {
+    (name.starts_with("-") && !name.starts_with("-moz-")) || name.starts_with("_")
+}
+
+impl<'a, 'b, 'i> DeclarationParser<'i> for PropertyDeclarationParser<'a, 'b, 'i> {
+    type Declaration = ();
+    type Error = StyleParseErrorKind<'i>;
+
+    fn parse_value<'t>(
+        &mut self,
+        name: CowRcStr<'i>,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<(), ParseError<'i>> {
+        self.state.parse_value(self.context, name, input)
+    }
+}
+
+impl<'a, 'b, 'i> RuleBodyItemParser<'i, (), StyleParseErrorKind<'i>>
+    for PropertyDeclarationParser<'a, 'b, 'i>
+{
+    fn parse_declarations(&self) -> bool {
+        true
+    }
+    // TODO(emilio): Nesting.
+    fn parse_qualified(&self) -> bool {
+        false
+    }
+}
+
+type SmallParseErrorVec<'i> = SmallVec<[(ParseError<'i>, &'i str, Option<PropertyId>); 2]>;
+
+fn alias_of_known_property(name: &str) -> Option<PropertyId> {
+    let mut prefixed = String::with_capacity(name.len() + 5);
+    prefixed.push_str("-moz-");
+    prefixed.push_str(name);
+    PropertyId::parse_enabled_for_all_content(&prefixed).ok()
+}
+
+#[cold]
+fn report_one_css_error<'i>(
+    context: &ParserContext,
+    block: Option<&PropertyDeclarationBlock>,
+    selectors: Option<&SelectorList<SelectorImpl>>,
+    mut error: ParseError<'i>,
+    slice: &str,
+    property: Option<PropertyId>,
+) {
+    debug_assert!(context.error_reporting_enabled());
+
+    fn all_properties_in_block(block: &PropertyDeclarationBlock, property: &PropertyId) -> bool {
+        match property.as_shorthand() {
+            Ok(id) => id
+                .longhands()
+                .all(|longhand| block.contains(PropertyDeclarationId::Longhand(longhand))),
+            Err(longhand_or_custom) => block.contains(longhand_or_custom),
+        }
+    }
+
+    if let ParseErrorKind::Custom(StyleParseErrorKind::UnknownProperty(ref name)) = error.kind {
+        if is_non_mozilla_vendor_identifier(name) {
+            // If the unrecognized property looks like a vendor-specific property,
+            // silently ignore it instead of polluting the error output.
+            return;
+        }
+        if let Some(alias) = alias_of_known_property(name) {
+            // This is an unknown property, but its -moz-* version is known.
+            // We don't want to report error if the -moz-* version is already
+            // specified.
+            if let Some(block) = block {
+                if all_properties_in_block(block, &alias) {
+                    return;
+                }
+            }
+        }
+    }
+
+    if let Some(ref property) = property {
+        if let Some(block) = block {
+            if all_properties_in_block(block, property) {
+                return;
+            }
+        }
+        error = match *property {
+            PropertyId::Custom(ref c) => {
+                StyleParseErrorKind::new_invalid(format!("--{}", c), error)
+            },
+            _ => StyleParseErrorKind::new_invalid(property.non_custom_id().unwrap().name(), error),
+        };
+    }
+
+    let location = error.location;
+    let error = ContextualParseError::UnsupportedPropertyDeclaration(slice, error, selectors);
+    context.log_css_error(location, error);
+}
+
+/// Parse a list of property declarations and return a property declaration
+/// block.
+pub fn parse_property_declaration_list(
+    context: &ParserContext,
+    input: &mut Parser,
+    selectors: Option<&SelectorList<SelectorImpl>>,
+) -> PropertyDeclarationBlock {
+    let mut state = DeclarationParserState::default();
+    let mut parser = PropertyDeclarationParser {
+        context,
+        state: &mut state,
+    };
+    let mut iter = RuleBodyParser::new(input, &mut parser);
+    while let Some(declaration) = iter.next() {
+        match declaration {
+            Ok(()) => {},
+            Err((error, slice)) => iter.parser.state.did_error(context, error, slice),
+        }
+    }
+    parser.state.report_errors_if_needed(context, selectors);
+    state.output_block
+}
diff --git a/servo/components/style/properties/gecko.mako.rs b/servo/components/style/properties/gecko.mako.rs
new file mode 100644
index 0000000000..4fe290980d
--- /dev/null
+++ b/servo/components/style/properties/gecko.mako.rs
@@ -0,0 +1,1971 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+// `data` comes from components/style/properties.mako.rs; see build.rs for more details.
+
+<%!
+    from data import to_camel_case, to_camel_case_lower
+    from data import Keyword
+%>
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+use crate::Atom;
+use app_units::Au;
+use crate::computed_value_flags::*;
+use crate::custom_properties::CustomPropertiesMap;
+use crate::gecko_bindings::bindings;
+% for style_struct in data.style_structs:
+use crate::gecko_bindings::bindings::Gecko_Construct_Default_${style_struct.gecko_ffi_name};
+use crate::gecko_bindings::bindings::Gecko_CopyConstruct_${style_struct.gecko_ffi_name};
+use crate::gecko_bindings::bindings::Gecko_Destroy_${style_struct.gecko_ffi_name};
+% endfor
+use crate::gecko_bindings::bindings::Gecko_CopyCounterStyle;
+use crate::gecko_bindings::bindings::Gecko_EnsureImageLayersLength;
+use crate::gecko_bindings::bindings::Gecko_nsStyleFont_SetLang;
+use crate::gecko_bindings::bindings::Gecko_nsStyleFont_CopyLangFrom;
+use crate::gecko_bindings::structs;
+use crate::gecko_bindings::structs::nsCSSPropertyID;
+use crate::gecko_bindings::structs::mozilla::PseudoStyleType;
+use crate::gecko::data::PerDocumentStyleData;
+use crate::logical_geometry::WritingMode;
+use crate::media_queries::Device;
+use crate::properties::longhands;
+use crate::rule_tree::StrongRuleNode;
+use crate::selector_parser::PseudoElement;
+use servo_arc::{Arc, UniqueArc};
+use std::mem::{forget, MaybeUninit, ManuallyDrop};
+use std::{cmp, ops, ptr};
+use crate::values::{self, CustomIdent, KeyframesName};
+use crate::values::computed::{BorderStyle, Percentage, Time, TransitionProperty};
+use crate::values::computed::font::FontSize;
+use crate::values::generics::column::ColumnCount;
+
+
+pub mod style_structs {
+    % for style_struct in data.style_structs:
+    pub use super::${style_struct.gecko_struct_name} as ${style_struct.name};
+
+    unsafe impl Send for ${style_struct.name} {}
+    unsafe impl Sync for ${style_struct.name} {}
+    % endfor
+}
+
+/// FIXME(emilio): This is completely duplicated with the other properties code.
+pub type ComputedValuesInner = structs::ServoComputedData;
+
+#[repr(C)]
+pub struct ComputedValues(structs::mozilla::ComputedStyle);
+
+impl ComputedValues {
+    #[inline]
+    pub (crate) fn as_gecko_computed_style(&self) -> &structs::ComputedStyle {
+        &self.0
+    }
+
+    pub fn new(
+        pseudo: Option<<&PseudoElement>,
+        custom_properties: Option<Arc<CustomPropertiesMap>>,
+        writing_mode: WritingMode,
+        flags: ComputedValueFlags,
+        rules: Option<StrongRuleNode>,
+        visited_style: Option<Arc<ComputedValues>>,
+        % for style_struct in data.style_structs:
+        ${style_struct.ident}: Arc<style_structs::${style_struct.name}>,
+        % endfor
+    ) -> Arc<Self> {
+        ComputedValuesInner::new(
+            custom_properties,
+            writing_mode,
+            flags,
+            rules,
+            visited_style,
+            % for style_struct in data.style_structs:
+            ${style_struct.ident},
+            % endfor
+        ).to_outer(pseudo)
+    }
+
+    pub fn default_values(doc: &structs::Document) -> Arc<Self> {
+        ComputedValuesInner::new(
+            /* custom_properties = */ None,
+            /* writing_mode = */ WritingMode::empty(), // FIXME(bz): This seems dubious
+            ComputedValueFlags::empty(),
+            /* rules = */ None,
+            /* visited_style = */ None,
+            % for style_struct in data.style_structs:
+            style_structs::${style_struct.name}::default(doc),
+            % endfor
+        ).to_outer(None)
+    }
+
+    /// Converts the computed values to an Arc<> from a reference.
+    pub fn to_arc(&self) -> Arc<Self> {
+        // SAFETY: We're guaranteed to be allocated as an Arc<> since the
+        // functions above are the only ones that create ComputedValues
+        // instances in Gecko (and that must be the case since ComputedValues'
+        // member is private).
+        unsafe { Arc::from_raw_addrefed(self) }
+    }
+
+    #[inline]
+    pub fn is_pseudo_style(&self) -> bool {
+        self.0.mPseudoType != PseudoStyleType::NotPseudo
+    }
+
+    #[inline]
+    pub fn pseudo(&self) -> Option<PseudoElement> {
+        if !self.is_pseudo_style() {
+            return None;
+        }
+        PseudoElement::from_pseudo_type(self.0.mPseudoType)
+    }
+
+    #[inline]
+    pub fn is_first_line_style(&self) -> bool {
+        self.pseudo() == Some(PseudoElement::FirstLine)
+    }
+
+    /// Returns true if the display property is changed from 'none' to others.
+    pub fn is_display_property_changed_from_none(
+        &self,
+        old_values: Option<<&ComputedValues>
+    ) -> bool {
+        use crate::properties::longhands::display::computed_value::T as Display;
+
+        old_values.map_or(false, |old| {
+            let old_display_style = old.get_box().clone_display();
+            let new_display_style = self.get_box().clone_display();
+            old_display_style == Display::None &&
+            new_display_style != Display::None
+        })
+    }
+
+}
+
+impl Drop for ComputedValues {
+    fn drop(&mut self) {
+        // XXX this still relies on the destructor of ComputedValuesInner to run on the rust side,
+        // that's pretty wild.
+        unsafe {
+            bindings::Gecko_ComputedStyle_Destroy(&mut self.0);
+        }
+    }
+}
+
+unsafe impl Sync for ComputedValues {}
+unsafe impl Send for ComputedValues {}
+
+impl Clone for ComputedValues {
+    fn clone(&self) -> Self {
+        unreachable!()
+    }
+}
+
+impl Clone for ComputedValuesInner {
+    fn clone(&self) -> Self {
+        ComputedValuesInner {
+            % for style_struct in data.style_structs:
+            ${style_struct.gecko_name}: Arc::into_raw(unsafe { Arc::from_raw_addrefed(self.${style_struct.name_lower}_ptr()) }) as *const _,
+            % endfor
+            custom_properties: self.custom_properties.clone(),
+            writing_mode: self.writing_mode.clone(),
+            flags: self.flags.clone(),
+            rules: self.rules.clone(),
+            visited_style: if self.visited_style.is_null() {
+                ptr::null()
+            } else {
+                Arc::into_raw(unsafe { Arc::from_raw_addrefed(self.visited_style_ptr()) }) as *const _
+            },
+        }
+    }
+}
+
+
+impl Drop for ComputedValuesInner {
+    fn drop(&mut self) {
+        % for style_struct in data.style_structs:
+        let _ = unsafe { Arc::from_raw(self.${style_struct.name_lower}_ptr()) };
+        % endfor
+        if !self.visited_style.is_null() {
+            let _ = unsafe { Arc::from_raw(self.visited_style_ptr()) };
+        }
+    }
+}
+
+impl ComputedValuesInner {
+    pub fn new(
+        custom_properties: Option<Arc<CustomPropertiesMap>>,
+        writing_mode: WritingMode,
+        flags: ComputedValueFlags,
+        rules: Option<StrongRuleNode>,
+        visited_style: Option<Arc<ComputedValues>>,
+        % for style_struct in data.style_structs:
+        ${style_struct.ident}: Arc<style_structs::${style_struct.name}>,
+        % endfor
+    ) -> Self {
+        Self {
+            custom_properties,
+            writing_mode,
+            rules,
+            visited_style: visited_style.map_or(ptr::null(), |p| Arc::into_raw(p)) as *const _,
+            flags,
+            % for style_struct in data.style_structs:
+            ${style_struct.gecko_name}: Arc::into_raw(${style_struct.ident}) as *const _,
+            % endfor
+        }
+    }
+
+    fn to_outer(self, pseudo: Option<<&PseudoElement>) -> Arc<ComputedValues> {
+        let pseudo_ty = match pseudo {
+            Some(p) => p.pseudo_type(),
+            None => structs::PseudoStyleType::NotPseudo,
+        };
+        unsafe {
+            let mut arc = UniqueArc::<ComputedValues>::new_uninit();
+            bindings::Gecko_ComputedStyle_Init(
+                arc.as_mut_ptr() as *mut _,
+                &self,
+                pseudo_ty,
+            );
+            // We're simulating move semantics by having C++ do a memcpy and
+            // then forgetting it on this end.
+            forget(self);
+            UniqueArc::assume_init(arc).shareable()
+        }
+    }
+}
+
+impl ops::Deref for ComputedValues {
+    type Target = ComputedValuesInner;
+    #[inline]
+    fn deref(&self) -> &ComputedValuesInner {
+        &self.0.mSource
+    }
+}
+
+impl ops::DerefMut for ComputedValues {
+    #[inline]
+    fn deref_mut(&mut self) -> &mut ComputedValuesInner {
+        &mut self.0.mSource
+    }
+}
+
+impl ComputedValuesInner {
+    /// Returns true if the value of the `content` property would make a
+    /// pseudo-element not rendered.
+    #[inline]
+    pub fn ineffective_content_property(&self) -> bool {
+        self.get_counters().ineffective_content_property()
+    }
+
+    #[inline]
+    fn visited_style_ptr(&self) -> *const ComputedValues {
+        self.visited_style as *const _
+    }
+
+    /// Returns the visited style, if any.
+    pub fn visited_style(&self) -> Option<<&ComputedValues> {
+        unsafe { self.visited_style_ptr().as_ref() }
+    }
+
+    % for style_struct in data.style_structs:
+    #[inline]
+    fn ${style_struct.name_lower}_ptr(&self) -> *const style_structs::${style_struct.name} {
+        // This is sound because the wrapper we create is repr(transparent).
+        self.${style_struct.gecko_name} as *const _
+    }
+
+    #[inline]
+    pub fn clone_${style_struct.name_lower}(&self) -> Arc<style_structs::${style_struct.name}> {
+        unsafe { Arc::from_raw_addrefed(self.${style_struct.name_lower}_ptr()) }
+    }
+    #[inline]
+    pub fn get_${style_struct.name_lower}(&self) -> &style_structs::${style_struct.name} {
+        unsafe { &*self.${style_struct.name_lower}_ptr() }
+    }
+
+    #[inline]
+    pub fn mutate_${style_struct.name_lower}(&mut self) -> &mut style_structs::${style_struct.name} {
+        unsafe {
+            let mut arc = Arc::from_raw(self.${style_struct.name_lower}_ptr());
+            let ptr = Arc::make_mut(&mut arc) as *mut _;
+            // Sound for the same reason _ptr() is sound.
+            self.${style_struct.gecko_name} = Arc::into_raw(arc) as *const _;
+            &mut *ptr
+        }
+    }
+    % endfor
+}
+
+<%def name="impl_simple_setter(ident, gecko_ffi_name)">
+    #[allow(non_snake_case)]
+    pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
+        ${set_gecko_property(gecko_ffi_name, "From::from(v)")}
+    }
+</%def>
+
+<%def name="impl_simple_clone(ident, gecko_ffi_name)">
+    #[allow(non_snake_case)]
+    pub fn clone_${ident}(&self) -> longhands::${ident}::computed_value::T {
+        From::from(self.${gecko_ffi_name}.clone())
+    }
+</%def>
+
+<%def name="impl_simple_copy(ident, gecko_ffi_name, *kwargs)">
+    #[allow(non_snake_case)]
+    pub fn copy_${ident}_from(&mut self, other: &Self) {
+        self.${gecko_ffi_name} = other.${gecko_ffi_name}.clone();
+    }
+
+    #[allow(non_snake_case)]
+    pub fn reset_${ident}(&mut self, other: &Self) {
+        self.copy_${ident}_from(other)
+    }
+</%def>
+
+<%!
+def get_gecko_property(ffi_name, self_param = "self"):
+    return "%s.%s" % (self_param, ffi_name)
+
+def set_gecko_property(ffi_name, expr):
+    return "self.%s = %s;" % (ffi_name, expr)
+%>
+
+<%def name="impl_keyword_setter(ident, gecko_ffi_name, keyword, cast_type='u8')">
+    #[allow(non_snake_case)]
+    pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
+        use crate::properties::longhands::${ident}::computed_value::T as Keyword;
+        // FIXME(bholley): Align binary representations and ditch |match| for cast + static_asserts
+        let result = match v {
+            % for value in keyword.values_for('gecko'):
+                Keyword::${to_camel_case(value)} =>
+                    structs::${keyword.gecko_constant(value)} ${keyword.maybe_cast(cast_type)},
+            % endfor
+        };
+        ${set_gecko_property(gecko_ffi_name, "result")}
+    }
+</%def>
+
+<%def name="impl_keyword_clone(ident, gecko_ffi_name, keyword, cast_type='u8')">
+    #[allow(non_snake_case)]
+    pub fn clone_${ident}(&self) -> longhands::${ident}::computed_value::T {
+        use crate::properties::longhands::${ident}::computed_value::T as Keyword;
+        // FIXME(bholley): Align binary representations and ditch |match| for cast + static_asserts
+
+        // Some constant macros in the gecko are defined as negative integer(e.g. font-stretch).
+        // And they are convert to signed integer in Rust bindings. We need to cast then
+        // as signed type when we have both signed/unsigned integer in order to use them
+        // as match's arms.
+        // Also, to use same implementation here we use casted constant if we have only singed values.
+        % if keyword.gecko_enum_prefix is None:
+        % for value in keyword.values_for('gecko'):
+        const ${keyword.casted_constant_name(value, cast_type)} : ${cast_type} =
+            structs::${keyword.gecko_constant(value)} as ${cast_type};
+        % endfor
+
+        match ${get_gecko_property(gecko_ffi_name)} as ${cast_type} {
+            % for value in keyword.values_for('gecko'):
+            ${keyword.casted_constant_name(value, cast_type)} => Keyword::${to_camel_case(value)},
+            % endfor
+            % if keyword.gecko_inexhaustive:
+            _ => panic!("Found unexpected value in style struct for ${ident} property"),
+            % endif
+        }
+        % else:
+        match ${get_gecko_property(gecko_ffi_name)} {
+            % for value in keyword.values_for('gecko'):
+            structs::${keyword.gecko_constant(value)} => Keyword::${to_camel_case(value)},
+            % endfor
+            % if keyword.gecko_inexhaustive:
+            _ => panic!("Found unexpected value in style struct for ${ident} property"),
+            % endif
+        }
+        % endif
+    }
+</%def>
+
+<%def name="impl_keyword(ident, gecko_ffi_name, keyword, cast_type='u8', **kwargs)">
+<%call expr="impl_keyword_setter(ident, gecko_ffi_name, keyword, cast_type, **kwargs)"></%call>
+<%call expr="impl_simple_copy(ident, gecko_ffi_name, **kwargs)"></%call>
+<%call expr="impl_keyword_clone(ident, gecko_ffi_name, keyword, cast_type)"></%call>
+</%def>
+
+<%def name="impl_simple(ident, gecko_ffi_name)">
+<%call expr="impl_simple_setter(ident, gecko_ffi_name)"></%call>
+<%call expr="impl_simple_copy(ident, gecko_ffi_name)"></%call>
+<%call expr="impl_simple_clone(ident, gecko_ffi_name)"></%call>
+</%def>
+
+<%def name="impl_border_width(ident, gecko_ffi_name, inherit_from)">
+    #[allow(non_snake_case)]
+    pub fn set_${ident}(&mut self, v: Au) {
+        let value = v.0;
+        self.${inherit_from} = value;
+        self.${gecko_ffi_name} = value;
+    }
+
+    #[allow(non_snake_case)]
+    pub fn copy_${ident}_from(&mut self, other: &Self) {
+        self.${inherit_from} = other.${inherit_from};
+        // NOTE: This is needed to easily handle the `unset` and `initial`
+        // keywords, which are implemented calling this function.
+        //
+        // In practice, this means that we may have an incorrect value here, but
+        // we'll adjust that properly in the style fixup phase.
+        //
+        // FIXME(emilio): We could clean this up a bit special-casing the reset_
+        // function below.
+        self.${gecko_ffi_name} = other.${inherit_from};
+    }
+
+    #[allow(non_snake_case)]
+    pub fn reset_${ident}(&mut self, other: &Self) {
+        self.copy_${ident}_from(other)
+    }
+
+    #[allow(non_snake_case)]
+    pub fn clone_${ident}(&self) -> Au {
+        Au(self.${gecko_ffi_name})
+    }
+</%def>
+
+<%def name="impl_split_style_coord(ident, gecko_ffi_name, index)">
+    #[allow(non_snake_case)]
+    pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
+        self.${gecko_ffi_name}.${index} = v;
+    }
+    #[allow(non_snake_case)]
+    pub fn copy_${ident}_from(&mut self, other: &Self) {
+        self.${gecko_ffi_name}.${index} =
+            other.${gecko_ffi_name}.${index}.clone();
+    }
+    #[allow(non_snake_case)]
+    pub fn reset_${ident}(&mut self, other: &Self) {
+        self.copy_${ident}_from(other)
+    }
+
+    #[allow(non_snake_case)]
+    pub fn clone_${ident}(&self) -> longhands::${ident}::computed_value::T {
+        self.${gecko_ffi_name}.${index}.clone()
+    }
+</%def>
+
+<%def name="copy_sides_style_coord(ident)">
+    <% gecko_ffi_name = "m" + to_camel_case(ident) %>
+    #[allow(non_snake_case)]
+    pub fn copy_${ident}_from(&mut self, other: &Self) {
+        % for side in SIDES:
+            self.${gecko_ffi_name}.data_at_mut(${side.index})
+                .copy_from(&other.${gecko_ffi_name}.data_at(${side.index}));
+        % endfor
+        ${ caller.body() }
+    }
+
+    #[allow(non_snake_case)]
+    pub fn reset_${ident}(&mut self, other: &Self) {
+        self.copy_${ident}_from(other)
+    }
+</%def>
+
+<%def name="impl_corner_style_coord(ident, gecko_ffi_name, corner)">
+    #[allow(non_snake_case)]
+    pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
+        self.${gecko_ffi_name}.${corner} = v;
+    }
+    #[allow(non_snake_case)]
+    pub fn copy_${ident}_from(&mut self, other: &Self) {
+        self.${gecko_ffi_name}.${corner} =
+            other.${gecko_ffi_name}.${corner}.clone();
+    }
+    #[allow(non_snake_case)]
+    pub fn reset_${ident}(&mut self, other: &Self) {
+        self.copy_${ident}_from(other)
+    }
+    #[allow(non_snake_case)]
+    pub fn clone_${ident}(&self) -> longhands::${ident}::computed_value::T {
+        self.${gecko_ffi_name}.${corner}.clone()
+    }
+</%def>
+
+<%def name="impl_logical(name, **kwargs)">
+    ${helpers.logical_setter(name)}
+</%def>
+
+<%def name="impl_style_struct(style_struct)">
+/// A wrapper for ${style_struct.gecko_ffi_name}, to be able to manually construct / destruct /
+/// clone it.
+#[repr(transparent)]
+pub struct ${style_struct.gecko_struct_name}(ManuallyDrop<structs::${style_struct.gecko_ffi_name}>);
+
+impl ops::Deref for ${style_struct.gecko_struct_name} {
+    type Target = structs::${style_struct.gecko_ffi_name};
+    #[inline]
+    fn deref(&self) -> &Self::Target {
+        &self.0
+    }
+}
+
+impl ops::DerefMut for ${style_struct.gecko_struct_name} {
+    #[inline]
+    fn deref_mut(&mut self) -> &mut <Self as ops::Deref>::Target {
+        &mut self.0
+    }
+}
+
+impl ${style_struct.gecko_struct_name} {
+    #[allow(dead_code, unused_variables)]
+    pub fn default(document: &structs::Document) -> Arc<Self> {
+        unsafe {
+            let mut result = UniqueArc::<Self>::new_uninit();
+            // FIXME(bug 1595895): Zero the memory to keep valgrind happy, but
+            // these looks like Valgrind false-positives at a quick glance.
+            ptr::write_bytes::<Self>(result.as_mut_ptr(), 0, 1);
+            Gecko_Construct_Default_${style_struct.gecko_ffi_name}(
+                result.as_mut_ptr() as *mut _,
+                document,
+            );
+            UniqueArc::assume_init(result).shareable()
+        }
+    }
+}
+
+impl Drop for ${style_struct.gecko_struct_name} {
+    fn drop(&mut self) {
+        unsafe {
+            Gecko_Destroy_${style_struct.gecko_ffi_name}(&mut **self);
+        }
+    }
+}
+impl Clone for ${style_struct.gecko_struct_name} {
+    fn clone(&self) -> Self {
+        unsafe {
+            let mut result = MaybeUninit::<Self>::uninit();
+            // FIXME(bug 1595895): Zero the memory to keep valgrind happy, but
+            // these looks like Valgrind false-positives at a quick glance.
+            ptr::write_bytes::<Self>(result.as_mut_ptr(), 0, 1);
+            Gecko_CopyConstruct_${style_struct.gecko_ffi_name}(result.as_mut_ptr() as *mut _, &**self);
+            result.assume_init()
+        }
+    }
+}
+</%def>
+
+<%def name="impl_simple_type_with_conversion(ident, gecko_ffi_name)">
+    #[allow(non_snake_case)]
+    pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
+        self.${gecko_ffi_name} = From::from(v)
+    }
+
+    <% impl_simple_copy(ident, gecko_ffi_name) %>
+
+    #[allow(non_snake_case)]
+    pub fn clone_${ident}(&self) -> longhands::${ident}::computed_value::T {
+        From::from(self.${gecko_ffi_name})
+    }
+</%def>
+
+<%def name="impl_font_settings(ident, gecko_type, tag_type, value_type, gecko_value_type)">
+    <%
+    gecko_ffi_name = to_camel_case_lower(ident)
+    %>
+
+    pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
+        let iter = v.0.iter().map(|other| structs::${gecko_type} {
+            mTag: other.tag.0,
+            mValue: other.value as ${gecko_value_type},
+        });
+        self.mFont.${gecko_ffi_name}.assign_from_iter_pod(iter);
+    }
+
+    pub fn copy_${ident}_from(&mut self, other: &Self) {
+        let iter = other.mFont.${gecko_ffi_name}.iter().map(|s| *s);
+        self.mFont.${gecko_ffi_name}.assign_from_iter_pod(iter);
+    }
+
+    pub fn reset_${ident}(&mut self, other: &Self) {
+        self.copy_${ident}_from(other)
+    }
+
+    pub fn clone_${ident}(&self) -> longhands::${ident}::computed_value::T {
+        use crate::values::generics::font::{FontSettings, FontTag, ${tag_type}};
+
+        FontSettings(
+            self.mFont.${gecko_ffi_name}.iter().map(|gecko_font_setting| {
+                ${tag_type} {
+                    tag: FontTag(gecko_font_setting.mTag),
+                    value: gecko_font_setting.mValue as ${value_type},
+                }
+            }).collect::<Vec<_>>().into_boxed_slice()
+        )
+    }
+</%def>
+
+<%def name="impl_trait(style_struct_name, skip_longhands='')">
+<%
+    style_struct = next(x for x in data.style_structs if x.name == style_struct_name)
+    longhands = [x for x in style_struct.longhands
+                if not (skip_longhands == "*" or x.name in skip_longhands.split())]
+
+    def longhand_method(longhand):
+        args = dict(ident=longhand.ident, gecko_ffi_name=longhand.gecko_ffi_name)
+
+        # get the method and pass additional keyword or type-specific arguments
+        if longhand.logical:
+            method = impl_logical
+            args.update(name=longhand.name)
+        elif longhand.keyword:
+            method = impl_keyword
+            args.update(keyword=longhand.keyword)
+            if "font" in longhand.ident:
+                args.update(cast_type=longhand.cast_type)
+        else:
+            method = impl_simple
+
+        method(**args)
+%>
+impl ${style_struct.gecko_struct_name} {
+    /*
+     * Manually-Implemented Methods.
+     */
+    ${caller.body().strip()}
+
+    /*
+     * Auto-Generated Methods.
+     */
+    <%
+    for longhand in longhands:
+        longhand_method(longhand)
+    %>
+}
+</%def>
+
+<%!
+class Side(object):
+    def __init__(self, name, index):
+        self.name = name
+        self.ident = name.lower()
+        self.index = index
+
+SIDES = [Side("Top", 0), Side("Right", 1), Side("Bottom", 2), Side("Left", 3)]
+CORNERS = ["top_left", "top_right", "bottom_right", "bottom_left"]
+%>
+
+#[allow(dead_code)]
+fn static_assert() {
+    // Note: using the above technique with an enum hits a rust bug when |structs| is in a different crate.
+    % for side in SIDES:
+    { const DETAIL: u32 = [0][(structs::Side::eSide${side.name} as usize != ${side.index}) as usize]; let _ = DETAIL; }
+    % endfor
+}
+
+
+<% skip_border_longhands = " ".join(["border-{0}-{1}".format(x.ident, y)
+                                     for x in SIDES
+                                     for y in ["style", "width"]] +
+                                    ["border-{0}-radius".format(x.replace("_", "-"))
+                                     for x in CORNERS]) %>
+
+<%self:impl_trait style_struct_name="Border"
+                  skip_longhands="${skip_border_longhands} border-image-repeat">
+    % for side in SIDES:
+    pub fn set_border_${side.ident}_style(&mut self, v: BorderStyle) {
+        self.mBorderStyle[${side.index}] = v;
+
+        // This is needed because the initial mComputedBorder value is set to
+        // zero.
+        //
+        // In order to compute stuff, we start from the initial struct, and keep
+        // going down the tree applying properties.
+        //
+        // That means, effectively, that when we set border-style to something
+        // non-hidden, we should use the initial border instead.
+        //
+        // Servo stores the initial border-width in the initial struct, and then
+        // adjusts as needed in the fixup phase. This means that the initial
+        // struct is technically not valid without fixups, and that you lose
+        // pretty much any sharing of the initial struct, which is kind of
+        // unfortunate.
+        //
+        // Gecko has two fields for this, one that stores the "specified"
+        // border, and other that stores the actual computed one. That means
+        // that when we set border-style, border-width may change and we need to
+        // sync back to the specified one. This is what this function does.
+        //
+        // Note that this doesn't impose any dependency in the order of
+        // computation of the properties. This is only relevant if border-style
+        // is specified, but border-width isn't. If border-width is specified at
+        // some point, the two mBorder and mComputedBorder fields would be the
+        // same already.
+        //
+        // Once we're here, we know that we'll run style fixups, so it's fine to
+        // just copy the specified border here, we'll adjust it if it's
+        // incorrect later.
+        self.mComputedBorder.${side.ident} = self.mBorder.${side.ident};
+    }
+
+    pub fn copy_border_${side.ident}_style_from(&mut self, other: &Self) {
+        self.set_border_${side.ident}_style(other.mBorderStyle[${side.index}]);
+    }
+
+    pub fn reset_border_${side.ident}_style(&mut self, other: &Self) {
+        self.copy_border_${side.ident}_style_from(other);
+    }
+
+    #[inline]
+    pub fn clone_border_${side.ident}_style(&self) -> BorderStyle {
+        self.mBorderStyle[${side.index}]
+    }
+
+    ${impl_border_width("border_%s_width" % side.ident, "mComputedBorder.%s" % side.ident, "mBorder.%s" % side.ident)}
+
+    pub fn border_${side.ident}_has_nonzero_width(&self) -> bool {
+        self.mComputedBorder.${side.ident} != 0
+    }
+    % endfor
+
+    % for corner in CORNERS:
+    <% impl_corner_style_coord("border_%s_radius" % corner,
+                               "mBorderRadius",
+                               corner) %>
+    % endfor
+
+    <%
+    border_image_repeat_keywords = ["Stretch", "Repeat", "Round", "Space"]
+    %>
+
+    pub fn set_border_image_repeat(&mut self, v: longhands::border_image_repeat::computed_value::T) {
+        use crate::values::specified::border::BorderImageRepeatKeyword;
+        use crate::gecko_bindings::structs::StyleBorderImageRepeat;
+
+        % for i, side in enumerate(["H", "V"]):
+            self.mBorderImageRepeat${side} = match v.${i} {
+                % for keyword in border_image_repeat_keywords:
+                BorderImageRepeatKeyword::${keyword} => StyleBorderImageRepeat::${keyword},
+                % endfor
+            };
+        % endfor
+    }
+
+    pub fn copy_border_image_repeat_from(&mut self, other: &Self) {
+        self.mBorderImageRepeatH = other.mBorderImageRepeatH;
+        self.mBorderImageRepeatV = other.mBorderImageRepeatV;
+    }
+
+    pub fn reset_border_image_repeat(&mut self, other: &Self) {
+        self.copy_border_image_repeat_from(other)
+    }
+
+    pub fn clone_border_image_repeat(&self) -> longhands::border_image_repeat::computed_value::T {
+        use crate::values::specified::border::BorderImageRepeatKeyword;
+        use crate::gecko_bindings::structs::StyleBorderImageRepeat;
+
+        % for side in ["H", "V"]:
+        let servo_${side.lower()} = match self.mBorderImageRepeat${side} {
+            % for keyword in border_image_repeat_keywords:
+            StyleBorderImageRepeat::${keyword} => BorderImageRepeatKeyword::${keyword},
+            % endfor
+        };
+        % endfor
+        longhands::border_image_repeat::computed_value::T(servo_h, servo_v)
+    }
+</%self:impl_trait>
+
+<% skip_scroll_margin_longhands = " ".join(["scroll-margin-%s" % x.ident for x in SIDES]) %>
+<% skip_margin_longhands = " ".join(["margin-%s" % x.ident for x in SIDES]) %>
+<%self:impl_trait style_struct_name="Margin"
+                  skip_longhands="${skip_margin_longhands}
+                                  ${skip_scroll_margin_longhands}">
+    % for side in SIDES:
+    <% impl_split_style_coord("margin_%s" % side.ident,
+                              "mMargin",
+                              side.index) %>
+    <% impl_split_style_coord("scroll_margin_%s" % side.ident,
+                              "mScrollMargin",
+                              side.index) %>
+    % endfor
+</%self:impl_trait>
+
+<% skip_scroll_padding_longhands = " ".join(["scroll-padding-%s" % x.ident for x in SIDES]) %>
+<% skip_padding_longhands = " ".join(["padding-%s" % x.ident for x in SIDES]) %>
+<%self:impl_trait style_struct_name="Padding"
+                  skip_longhands="${skip_padding_longhands}
+                                  ${skip_scroll_padding_longhands}">
+
+    % for side in SIDES:
+    <% impl_split_style_coord("padding_%s" % side.ident,
+                              "mPadding",
+                              side.index) %>
+    <% impl_split_style_coord("scroll_padding_%s" % side.ident, "mScrollPadding", side.index) %>
+    % endfor
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="Page">
+</%self:impl_trait>
+
+<% skip_position_longhands = " ".join(x.ident for x in SIDES) %>
+<%self:impl_trait style_struct_name="Position"
+                  skip_longhands="${skip_position_longhands}
+                                  masonry-auto-flow">
+    % for side in SIDES:
+    <% impl_split_style_coord(side.ident, "mOffset", side.index) %>
+    % endfor
+    pub fn set_computed_justify_items(&mut self, v: values::specified::JustifyItems) {
+        debug_assert_ne!(v.0, crate::values::specified::align::AlignFlags::LEGACY);
+        self.mJustifyItems.computed = v;
+    }
+
+    ${impl_simple_type_with_conversion("masonry_auto_flow", "mMasonryAutoFlow")}
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="Outline"
+                  skip_longhands="outline-style outline-width">
+
+    pub fn set_outline_style(&mut self, v: longhands::outline_style::computed_value::T) {
+        self.mOutlineStyle = v;
+        // NB: This is needed to correctly handling the initial value of
+        // outline-width when outline-style changes, see the
+        // update_border_${side.ident} comment for more details.
+        self.mActualOutlineWidth = self.mOutlineWidth;
+    }
+
+    pub fn copy_outline_style_from(&mut self, other: &Self) {
+        self.set_outline_style(other.mOutlineStyle);
+    }
+
+    pub fn reset_outline_style(&mut self, other: &Self) {
+        self.copy_outline_style_from(other)
+    }
+
+    pub fn clone_outline_style(&self) -> longhands::outline_style::computed_value::T {
+        self.mOutlineStyle.clone()
+    }
+
+    ${impl_border_width("outline_width", "mActualOutlineWidth", "mOutlineWidth")}
+
+    pub fn outline_has_nonzero_width(&self) -> bool {
+        self.mActualOutlineWidth != 0
+    }
+</%self:impl_trait>
+
+<% skip_font_longhands = """font-family font-size font-size-adjust font-weight
+                            font-style font-stretch -x-lang
+                            font-variant-alternates font-variant-east-asian
+                            font-variant-ligatures font-variant-numeric
+                            font-language-override font-feature-settings
+                            font-variation-settings -moz-min-font-size-ratio""" %>
+<%self:impl_trait style_struct_name="Font"
+    skip_longhands="${skip_font_longhands}">
+
+    // Negative numbers are invalid at parse time, but <integer> is still an
+    // i32.
+    <% impl_font_settings("font_feature_settings", "gfxFontFeature", "FeatureTagValue", "i32", "u32") %>
+    <% impl_font_settings("font_variation_settings", "gfxFontVariation", "VariationValue", "f32", "f32") %>
+
+    pub fn unzoom_fonts(&mut self, device: &Device) {
+        use crate::values::generics::NonNegative;
+        self.mSize = NonNegative(device.unzoom_text(self.mSize.0));
+        self.mScriptUnconstrainedSize = NonNegative(device.unzoom_text(self.mScriptUnconstrainedSize.0));
+        self.mFont.size = NonNegative(device.unzoom_text(self.mFont.size.0));
+    }
+
+    pub fn copy_font_size_from(&mut self, other: &Self) {
+        self.mScriptUnconstrainedSize = other.mScriptUnconstrainedSize;
+
+        self.mSize = other.mScriptUnconstrainedSize;
+        // NOTE: Intentionally not copying from mFont.size. The cascade process
+        // recomputes the used size as needed.
+        self.mFont.size = other.mSize;
+        self.mFontSizeKeyword = other.mFontSizeKeyword;
+
+        // TODO(emilio): Should we really copy over these two?
+        self.mFontSizeFactor = other.mFontSizeFactor;
+        self.mFontSizeOffset = other.mFontSizeOffset;
+    }
+
+    pub fn reset_font_size(&mut self, other: &Self) {
+        self.copy_font_size_from(other)
+    }
+
+    pub fn set_font_size(&mut self, v: FontSize) {
+        let computed_size = v.computed_size;
+        self.mScriptUnconstrainedSize = computed_size;
+
+        // These two may be changed from Cascade::fixup_font_stuff.
+        self.mSize = computed_size;
+        // NOTE: Intentionally not copying from used_size. The cascade process
+        // recomputes the used size as needed.
+        self.mFont.size = computed_size;
+
+        self.mFontSizeKeyword = v.keyword_info.kw;
+        self.mFontSizeFactor = v.keyword_info.factor;
+        self.mFontSizeOffset = v.keyword_info.offset;
+    }
+
+    pub fn clone_font_size(&self) -> FontSize {
+        use crate::values::specified::font::KeywordInfo;
+
+        FontSize {
+            computed_size: self.mSize,
+            used_size: self.mFont.size,
+            keyword_info: KeywordInfo {
+                kw: self.mFontSizeKeyword,
+                factor: self.mFontSizeFactor,
+                offset: self.mFontSizeOffset,
+            }
+        }
+    }
+
+    ${impl_simple('font_weight', 'mFont.weight')}
+    ${impl_simple('font_stretch', 'mFont.stretch')}
+    ${impl_simple('font_style', 'mFont.style')}
+
+    ${impl_simple("font_variant_alternates", "mFont.variantAlternates")}
+
+    ${impl_simple("font_size_adjust", "mFont.sizeAdjust")}
+
+    ${impl_simple("font_family", "mFont.family")}
+
+    #[allow(non_snake_case)]
+    pub fn set__x_lang(&mut self, v: longhands::_x_lang::computed_value::T) {
+        let ptr = v.0.as_ptr();
+        forget(v);
+        unsafe {
+            Gecko_nsStyleFont_SetLang(&mut **self, ptr);
+        }
+    }
+
+    #[allow(non_snake_case)]
+    pub fn copy__x_lang_from(&mut self, other: &Self) {
+        unsafe {
+            Gecko_nsStyleFont_CopyLangFrom(&mut **self, &**other);
+        }
+    }
+
+    #[allow(non_snake_case)]
+    pub fn reset__x_lang(&mut self, other: &Self) {
+        self.copy__x_lang_from(other)
+    }
+
+    #[allow(non_snake_case)]
+    pub fn clone__x_lang(&self) -> longhands::_x_lang::computed_value::T {
+        longhands::_x_lang::computed_value::T(unsafe {
+            Atom::from_raw(self.mLanguage.mRawPtr)
+        })
+    }
+
+
+    ${impl_simple_type_with_conversion("font_language_override", "mFont.languageOverride")}
+    ${impl_simple_type_with_conversion("font_variant_ligatures", "mFont.variantLigatures")}
+    ${impl_simple_type_with_conversion("font_variant_east_asian", "mFont.variantEastAsian")}
+    ${impl_simple_type_with_conversion("font_variant_numeric", "mFont.variantNumeric")}
+
+    #[allow(non_snake_case)]
+    pub fn clone__moz_min_font_size_ratio(
+        &self,
+    ) -> longhands::_moz_min_font_size_ratio::computed_value::T {
+        Percentage(self.mMinFontSizeRatio as f32 / 100.)
+    }
+
+    #[allow(non_snake_case)]
+    pub fn set__moz_min_font_size_ratio(&mut self, v: longhands::_moz_min_font_size_ratio::computed_value::T) {
+        let scaled = v.0 * 100.;
+        let percentage = if scaled > 255. {
+            255.
+        } else if scaled < 0. {
+            0.
+        } else {
+            scaled
+        };
+
+        self.mMinFontSizeRatio = percentage as u8;
+    }
+
+    ${impl_simple_copy('_moz_min_font_size_ratio', 'mMinFontSizeRatio')}
+</%self:impl_trait>
+
+<%def name="impl_coordinated_property_copy(type, ident, gecko_ffi_name)">
+    #[allow(non_snake_case)]
+    pub fn copy_${type}_${ident}_from(&mut self, other: &Self) {
+        self.m${to_camel_case(type)}s.ensure_len(other.m${to_camel_case(type)}s.len());
+
+        let count = other.m${to_camel_case(type)}${gecko_ffi_name}Count;
+        self.m${to_camel_case(type)}${gecko_ffi_name}Count = count;
+
+        let iter = self.m${to_camel_case(type)}s.iter_mut().take(count as usize).zip(
+            other.m${to_camel_case(type)}s.iter()
+        );
+
+        for (ours, others) in iter {
+            ours.m${gecko_ffi_name} = others.m${gecko_ffi_name}.clone();
+        }
+    }
+    #[allow(non_snake_case)]
+    pub fn reset_${type}_${ident}(&mut self, other: &Self) {
+        self.copy_${type}_${ident}_from(other)
+    }
+</%def>
+
+<%def name="impl_coordinated_property_count(type, ident, gecko_ffi_name)">
+    #[allow(non_snake_case)]
+    pub fn ${type}_${ident}_count(&self) -> usize {
+        self.m${to_camel_case(type)}${gecko_ffi_name}Count as usize
+    }
+</%def>
+
+<%def name="impl_coordinated_property(type, ident, gecko_ffi_name)">
+    #[allow(non_snake_case)]
+    pub fn set_${type}_${ident}<I>(&mut self, v: I)
+    where
+        I: IntoIterator<Item = longhands::${type}_${ident}::computed_value::single_value::T>,
+        I::IntoIter: ExactSizeIterator + Clone
+    {
+        let v = v.into_iter();
+        debug_assert_ne!(v.len(), 0);
+        let input_len = v.len();
+        self.m${to_camel_case(type)}s.ensure_len(input_len);
+
+        self.m${to_camel_case(type)}${gecko_ffi_name}Count = input_len as u32;
+        for (gecko, servo) in self.m${to_camel_case(type)}s.iter_mut().take(input_len as usize).zip(v) {
+            gecko.m${gecko_ffi_name} = servo;
+        }
+    }
+    #[allow(non_snake_case)]
+    pub fn ${type}_${ident}_at(&self, index: usize)
+        -> longhands::${type}_${ident}::computed_value::SingleComputedValue {
+        self.m${to_camel_case(type)}s[index % self.${type}_${ident}_count()].m${gecko_ffi_name}.clone()
+    }
+    ${impl_coordinated_property_copy(type, ident, gecko_ffi_name)}
+    ${impl_coordinated_property_count(type, ident, gecko_ffi_name)}
+</%def>
+
+<%def name="impl_animation_keyword(ident, gecko_ffi_name, keyword, cast_type='u8')">
+    #[allow(non_snake_case)]
+    pub fn set_animation_${ident}<I>(&mut self, v: I)
+    where
+        I: IntoIterator<Item = longhands::animation_${ident}::computed_value::single_value::T>,
+        I::IntoIter: ExactSizeIterator + Clone
+    {
+        use crate::properties::longhands::animation_${ident}::single_value::computed_value::T as Keyword;
+
+        let v = v.into_iter();
+
+        debug_assert_ne!(v.len(), 0);
+        let input_len = v.len();
+        self.mAnimations.ensure_len(input_len);
+
+        self.mAnimation${gecko_ffi_name}Count = input_len as u32;
+
+        for (gecko, servo) in self.mAnimations.iter_mut().take(input_len as usize).zip(v) {
+            let result = match servo {
+                % for value in keyword.values_for("gecko"):
+                    Keyword::${to_camel_case(value)} =>
+                        structs::${keyword.gecko_constant(value)} ${keyword.maybe_cast(cast_type)},
+                % endfor
+            };
+            gecko.m${gecko_ffi_name} = result;
+        }
+    }
+    #[allow(non_snake_case)]
+    pub fn animation_${ident}_at(&self, index: usize)
+        -> longhands::animation_${ident}::computed_value::SingleComputedValue {
+        use crate::properties::longhands::animation_${ident}::single_value::computed_value::T as Keyword;
+        match self.mAnimations[index].m${gecko_ffi_name} ${keyword.maybe_cast("u32")} {
+            % for value in keyword.values_for("gecko"):
+                structs::${keyword.gecko_constant(value)} => Keyword::${to_camel_case(value)},
+            % endfor
+            % if keyword.gecko_inexhaustive:
+            _ => panic!("Found unexpected value for animation-${ident}"),
+            % endif
+        }
+    }
+    ${impl_coordinated_property_copy('animation', ident, gecko_ffi_name)}
+    ${impl_coordinated_property_count('animation', ident, gecko_ffi_name)}
+</%def>
+
+<% skip_box_longhands= """display contain""" %>
+<%self:impl_trait style_struct_name="Box" skip_longhands="${skip_box_longhands}">
+    #[inline]
+    pub fn set_display(&mut self, v: longhands::display::computed_value::T) {
+        self.mDisplay = v;
+        self.mOriginalDisplay = v;
+    }
+
+    #[inline]
+    pub fn copy_display_from(&mut self, other: &Self) {
+        self.set_display(other.mDisplay);
+    }
+
+    #[inline]
+    pub fn reset_display(&mut self, other: &Self) {
+        self.copy_display_from(other)
+    }
+
+    #[inline]
+    pub fn set_adjusted_display(
+        &mut self,
+        v: longhands::display::computed_value::T,
+        _is_item_or_root: bool
+    ) {
+        self.mDisplay = v;
+    }
+
+    #[inline]
+    pub fn clone_display(&self) -> longhands::display::computed_value::T {
+        self.mDisplay
+    }
+
+    #[inline]
+    pub fn set_contain(&mut self, v: longhands::contain::computed_value::T) {
+        self.mContain = v;
+        self.mEffectiveContainment = v;
+    }
+
+    #[inline]
+    pub fn copy_contain_from(&mut self, other: &Self) {
+        self.set_contain(other.mContain);
+    }
+
+    #[inline]
+    pub fn reset_contain(&mut self, other: &Self) {
+        self.copy_contain_from(other)
+    }
+
+    #[inline]
+    pub fn clone_contain(&self) -> longhands::contain::computed_value::T {
+        self.mContain
+    }
+
+    #[inline]
+    pub fn set_effective_containment(
+        &mut self,
+        v: longhands::contain::computed_value::T
+    ) {
+        self.mEffectiveContainment = v;
+    }
+
+    #[inline]
+    pub fn clone_effective_containment(&self) -> longhands::contain::computed_value::T {
+        self.mEffectiveContainment
+    }
+</%self:impl_trait>
+
+<%def name="simple_image_array_property(name, shorthand, field_name)">
+    <%
+        image_layers_field = "mImage" if shorthand == "background" else "mMask"
+        copy_simple_image_array_property(name, shorthand, image_layers_field, field_name)
+    %>
+
+    pub fn set_${shorthand}_${name}<I>(&mut self, v: I)
+        where I: IntoIterator<Item=longhands::${shorthand}_${name}::computed_value::single_value::T>,
+              I::IntoIter: ExactSizeIterator
+    {
+        use crate::gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
+        let v = v.into_iter();
+
+        unsafe {
+          Gecko_EnsureImageLayersLength(&mut self.${image_layers_field}, v.len(),
+                                        LayerType::${shorthand.title()});
+        }
+
+        self.${image_layers_field}.${field_name}Count = v.len() as u32;
+        for (servo, geckolayer) in v.zip(self.${image_layers_field}.mLayers.iter_mut()) {
+            geckolayer.${field_name} = {
+                ${caller.body()}
+            };
+        }
+    }
+</%def>
+
+<%def name="copy_simple_image_array_property(name, shorthand, layers_field_name, field_name)">
+    pub fn copy_${shorthand}_${name}_from(&mut self, other: &Self) {
+        use crate::gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
+
+        let count = other.${layers_field_name}.${field_name}Count;
+        unsafe {
+            Gecko_EnsureImageLayersLength(&mut self.${layers_field_name},
+                                          count as usize,
+                                          LayerType::${shorthand.title()});
+        }
+        // FIXME(emilio): This may be bogus in the same way as bug 1426246.
+        for (layer, other) in self.${layers_field_name}.mLayers.iter_mut()
+                                  .zip(other.${layers_field_name}.mLayers.iter())
+                                  .take(count as usize) {
+            layer.${field_name} = other.${field_name}.clone();
+        }
+        self.${layers_field_name}.${field_name}Count = count;
+    }
+
+    pub fn reset_${shorthand}_${name}(&mut self, other: &Self) {
+        self.copy_${shorthand}_${name}_from(other)
+    }
+</%def>
+
+<%def name="impl_simple_image_array_property(name, shorthand, layer_field_name, field_name, struct_name)">
+    <%
+        ident = "%s_%s" % (shorthand, name)
+        style_struct = next(x for x in data.style_structs if x.name == struct_name)
+        longhand = next(x for x in style_struct.longhands if x.ident == ident)
+        keyword = longhand.keyword
+    %>
+
+    <% copy_simple_image_array_property(name, shorthand, layer_field_name, field_name) %>
+
+    pub fn set_${ident}<I>(&mut self, v: I)
+    where
+        I: IntoIterator<Item=longhands::${ident}::computed_value::single_value::T>,
+        I::IntoIter: ExactSizeIterator,
+    {
+        use crate::properties::longhands::${ident}::single_value::computed_value::T as Keyword;
+        use crate::gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
+
+        let v = v.into_iter();
+
+        unsafe {
+          Gecko_EnsureImageLayersLength(&mut self.${layer_field_name}, v.len(),
+                                        LayerType::${shorthand.title()});
+        }
+
+        self.${layer_field_name}.${field_name}Count = v.len() as u32;
+        for (servo, geckolayer) in v.zip(self.${layer_field_name}.mLayers.iter_mut()) {
+            geckolayer.${field_name} = {
+                match servo {
+                    % for value in keyword.values_for("gecko"):
+                    Keyword::${to_camel_case(value)} =>
+                        structs::${keyword.gecko_constant(value)} ${keyword.maybe_cast('u8')},
+                    % endfor
+                }
+            };
+        }
+    }
+
+    pub fn clone_${ident}(&self) -> longhands::${ident}::computed_value::T {
+        use crate::properties::longhands::${ident}::single_value::computed_value::T as Keyword;
+
+        % if keyword.needs_cast():
+        % for value in keyword.values_for('gecko'):
+        const ${keyword.casted_constant_name(value, "u8")} : u8 =
+            structs::${keyword.gecko_constant(value)} as u8;
+        % endfor
+        % endif
+
+        longhands::${ident}::computed_value::List(
+            self.${layer_field_name}.mLayers.iter()
+                .take(self.${layer_field_name}.${field_name}Count as usize)
+                .map(|ref layer| {
+                    match layer.${field_name} {
+                        % for value in longhand.keyword.values_for("gecko"):
+                        % if keyword.needs_cast():
+                        ${keyword.casted_constant_name(value, "u8")}
+                        % else:
+                        structs::${keyword.gecko_constant(value)}
+                        % endif
+                            => Keyword::${to_camel_case(value)},
+                        % endfor
+                        % if keyword.gecko_inexhaustive:
+                        _ => panic!("Found unexpected value in style struct for ${ident} property"),
+                        % endif
+                    }
+                }).collect()
+        )
+    }
+</%def>
+
+<%def name="impl_common_image_layer_properties(shorthand)">
+    <%
+        if shorthand == "background":
+            image_layers_field = "mImage"
+            struct_name = "Background"
+        else:
+            image_layers_field = "mMask"
+            struct_name = "SVG"
+    %>
+
+    <%self:simple_image_array_property name="repeat" shorthand="${shorthand}" field_name="mRepeat">
+        use crate::values::specified::background::BackgroundRepeatKeyword;
+        use crate::gecko_bindings::structs::nsStyleImageLayers_Repeat;
+        use crate::gecko_bindings::structs::StyleImageLayerRepeat;
+
+        fn to_ns(repeat: BackgroundRepeatKeyword) -> StyleImageLayerRepeat {
+            match repeat {
+                BackgroundRepeatKeyword::Repeat => StyleImageLayerRepeat::Repeat,
+                BackgroundRepeatKeyword::Space => StyleImageLayerRepeat::Space,
+                BackgroundRepeatKeyword::Round => StyleImageLayerRepeat::Round,
+                BackgroundRepeatKeyword::NoRepeat => StyleImageLayerRepeat::NoRepeat,
+            }
+        }
+
+        let repeat_x = to_ns(servo.0);
+        let repeat_y = to_ns(servo.1);
+        nsStyleImageLayers_Repeat {
+              mXRepeat: repeat_x,
+              mYRepeat: repeat_y,
+        }
+    </%self:simple_image_array_property>
+
+    pub fn clone_${shorthand}_repeat(&self) -> longhands::${shorthand}_repeat::computed_value::T {
+        use crate::properties::longhands::${shorthand}_repeat::single_value::computed_value::T;
+        use crate::values::specified::background::BackgroundRepeatKeyword;
+        use crate::gecko_bindings::structs::StyleImageLayerRepeat;
+
+        fn to_servo(repeat: StyleImageLayerRepeat) -> BackgroundRepeatKeyword {
+            match repeat {
+                StyleImageLayerRepeat::Repeat => BackgroundRepeatKeyword::Repeat,
+                StyleImageLayerRepeat::Space => BackgroundRepeatKeyword::Space,
+                StyleImageLayerRepeat::Round => BackgroundRepeatKeyword::Round,
+                StyleImageLayerRepeat::NoRepeat => BackgroundRepeatKeyword::NoRepeat,
+                _ => panic!("Found unexpected value in style struct for ${shorthand}_repeat property"),
+            }
+        }
+
+        longhands::${shorthand}_repeat::computed_value::List(
+            self.${image_layers_field}.mLayers.iter()
+                .take(self.${image_layers_field}.mRepeatCount as usize)
+                .map(|ref layer| {
+                    T(to_servo(layer.mRepeat.mXRepeat), to_servo(layer.mRepeat.mYRepeat))
+                }).collect()
+        )
+    }
+
+    <% impl_simple_image_array_property("clip", shorthand, image_layers_field, "mClip", struct_name) %>
+    <% impl_simple_image_array_property("origin", shorthand, image_layers_field, "mOrigin", struct_name) %>
+
+    % for (orientation, keyword) in [("x", "horizontal"), ("y", "vertical")]:
+    pub fn copy_${shorthand}_position_${orientation}_from(&mut self, other: &Self) {
+        use crate::gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
+
+        let count = other.${image_layers_field}.mPosition${orientation.upper()}Count;
+
+        unsafe {
+            Gecko_EnsureImageLayersLength(&mut self.${image_layers_field},
+                                          count as usize,
+                                          LayerType::${shorthand.capitalize()});
+        }
+
+        for (layer, other) in self.${image_layers_field}.mLayers.iter_mut()
+                                  .zip(other.${image_layers_field}.mLayers.iter())
+                                  .take(count as usize) {
+            layer.mPosition.${keyword} = other.mPosition.${keyword}.clone();
+        }
+        self.${image_layers_field}.mPosition${orientation.upper()}Count = count;
+    }
+
+    pub fn reset_${shorthand}_position_${orientation}(&mut self, other: &Self) {
+        self.copy_${shorthand}_position_${orientation}_from(other)
+    }
+
+    pub fn clone_${shorthand}_position_${orientation}(&self)
+        -> longhands::${shorthand}_position_${orientation}::computed_value::T {
+        longhands::${shorthand}_position_${orientation}::computed_value::List(
+            self.${image_layers_field}.mLayers.iter()
+                .take(self.${image_layers_field}.mPosition${orientation.upper()}Count as usize)
+                .map(|position| position.mPosition.${keyword}.clone())
+                .collect()
+        )
+    }
+
+    pub fn set_${shorthand}_position_${orientation[0]}<I>(&mut self,
+                                     v: I)
+        where I: IntoIterator<Item = longhands::${shorthand}_position_${orientation[0]}
+                                              ::computed_value::single_value::T>,
+              I::IntoIter: ExactSizeIterator
+    {
+        use crate::gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
+
+        let v = v.into_iter();
+
+        unsafe {
+            Gecko_EnsureImageLayersLength(&mut self.${image_layers_field}, v.len(),
+                                        LayerType::${shorthand.capitalize()});
+        }
+
+        self.${image_layers_field}.mPosition${orientation[0].upper()}Count = v.len() as u32;
+        for (servo, geckolayer) in v.zip(self.${image_layers_field}
+                                                           .mLayers.iter_mut()) {
+            geckolayer.mPosition.${keyword} = servo;
+        }
+    }
+    % endfor
+
+    <%self:simple_image_array_property name="size" shorthand="${shorthand}" field_name="mSize">
+        servo
+    </%self:simple_image_array_property>
+
+    pub fn clone_${shorthand}_size(&self) -> longhands::${shorthand}_size::computed_value::T {
+        longhands::${shorthand}_size::computed_value::List(
+            self.${image_layers_field}.mLayers.iter().map(|layer| layer.mSize.clone()).collect()
+        )
+    }
+
+    pub fn copy_${shorthand}_image_from(&mut self, other: &Self) {
+        use crate::gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
+        unsafe {
+            let count = other.${image_layers_field}.mImageCount;
+            Gecko_EnsureImageLayersLength(&mut self.${image_layers_field},
+                                          count as usize,
+                                          LayerType::${shorthand.capitalize()});
+
+            for (layer, other) in self.${image_layers_field}.mLayers.iter_mut()
+                                      .zip(other.${image_layers_field}.mLayers.iter())
+                                      .take(count as usize) {
+                layer.mImage = other.mImage.clone();
+            }
+            self.${image_layers_field}.mImageCount = count;
+        }
+    }
+
+    pub fn reset_${shorthand}_image(&mut self, other: &Self) {
+        self.copy_${shorthand}_image_from(other)
+    }
+
+    #[allow(unused_variables)]
+    pub fn set_${shorthand}_image<I>(&mut self, images: I)
+        where I: IntoIterator<Item = longhands::${shorthand}_image::computed_value::single_value::T>,
+              I::IntoIter: ExactSizeIterator
+    {
+        use crate::gecko_bindings::structs::nsStyleImageLayers_LayerType as LayerType;
+
+        let images = images.into_iter();
+
+        unsafe {
+            Gecko_EnsureImageLayersLength(
+                &mut self.${image_layers_field},
+                images.len(),
+                LayerType::${shorthand.title()},
+            );
+        }
+
+        self.${image_layers_field}.mImageCount = images.len() as u32;
+        for (image, geckoimage) in images.zip(self.${image_layers_field}
+                                                  .mLayers.iter_mut()) {
+            geckoimage.mImage = image;
+        }
+    }
+
+    pub fn clone_${shorthand}_image(&self) -> longhands::${shorthand}_image::computed_value::T {
+        longhands::${shorthand}_image::computed_value::List(
+            self.${image_layers_field}.mLayers.iter()
+                .take(self.${image_layers_field}.mImageCount as usize)
+                .map(|layer| layer.mImage.clone())
+                .collect()
+        )
+    }
+
+    <%
+        fill_fields = "mRepeat mClip mOrigin mPositionX mPositionY mImage mSize"
+        if shorthand == "background":
+            fill_fields += " mAttachment mBlendMode"
+        else:
+            # mSourceURI uses mImageCount
+            fill_fields += " mMaskMode mComposite"
+    %>
+    pub fn fill_arrays(&mut self) {
+        use crate::gecko_bindings::bindings::Gecko_FillAllImageLayers;
+        use std::cmp;
+        let mut max_len = 1;
+        % for member in fill_fields.split():
+            max_len = cmp::max(max_len, self.${image_layers_field}.${member}Count);
+        % endfor
+        unsafe {
+            // While we could do this manually, we'd need to also manually
+            // run all the copy constructors, so we just delegate to gecko
+            Gecko_FillAllImageLayers(&mut self.${image_layers_field}, max_len);
+        }
+    }
+</%def>
+
+// TODO: Gecko accepts lists in most background-related properties. We just use
+// the first element (which is the common case), but at some point we want to
+// add support for parsing these lists in servo and pushing to nsTArray's.
+<% skip_background_longhands = """background-repeat
+                                  background-image background-clip
+                                  background-origin background-attachment
+                                  background-size background-position
+                                  background-blend-mode
+                                  background-position-x
+                                  background-position-y""" %>
+<%self:impl_trait style_struct_name="Background"
+                  skip_longhands="${skip_background_longhands}">
+
+    <% impl_common_image_layer_properties("background") %>
+    <% impl_simple_image_array_property("attachment", "background", "mImage", "mAttachment", "Background") %>
+    <% impl_simple_image_array_property("blend_mode", "background", "mImage", "mBlendMode", "Background") %>
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="List" skip_longhands="list-style-type">
+    pub fn set_list_style_type(&mut self, v: longhands::list_style_type::computed_value::T) {
+        use nsstring::{nsACString, nsCStr};
+        use self::longhands::list_style_type::computed_value::T;
+        match v {
+            T::None => unsafe {
+                bindings::Gecko_SetCounterStyleToNone(&mut self.mCounterStyle)
+            }
+            T::CounterStyle(s) => s.to_gecko_value(&mut self.mCounterStyle),
+            T::String(s) => unsafe {
+                bindings::Gecko_SetCounterStyleToString(
+                    &mut self.mCounterStyle,
+                    &nsCStr::from(&s) as &nsACString,
+                )
+            }
+        }
+    }
+
+    pub fn copy_list_style_type_from(&mut self, other: &Self) {
+        unsafe {
+            Gecko_CopyCounterStyle(&mut self.mCounterStyle, &other.mCounterStyle);
+        }
+    }
+
+    pub fn reset_list_style_type(&mut self, other: &Self) {
+        self.copy_list_style_type_from(other)
+    }
+
+    pub fn clone_list_style_type(&self) -> longhands::list_style_type::computed_value::T {
+        use self::longhands::list_style_type::computed_value::T;
+        use crate::values::Either;
+        use crate::values::generics::CounterStyle;
+        use crate::gecko_bindings::bindings;
+
+        let name = unsafe {
+            bindings::Gecko_CounterStyle_GetName(&self.mCounterStyle)
+        };
+        if !name.is_null() {
+            let name = unsafe { Atom::from_raw(name) };
+            if name == atom!("none") {
+                return T::None;
+            }
+        }
+        let result = CounterStyle::from_gecko_value(&self.mCounterStyle);
+        match result {
+            Either::First(counter_style) => T::CounterStyle(counter_style),
+            Either::Second(string) => T::String(string),
+        }
+    }
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="Table">
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="Effects">
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="InheritedBox">
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="InheritedTable"
+                  skip_longhands="border-spacing">
+
+    pub fn set_border_spacing(&mut self, v: longhands::border_spacing::computed_value::T) {
+        self.mBorderSpacingCol = v.horizontal().0;
+        self.mBorderSpacingRow = v.vertical().0;
+    }
+
+    pub fn copy_border_spacing_from(&mut self, other: &Self) {
+        self.mBorderSpacingCol = other.mBorderSpacingCol;
+        self.mBorderSpacingRow = other.mBorderSpacingRow;
+    }
+
+    pub fn reset_border_spacing(&mut self, other: &Self) {
+        self.copy_border_spacing_from(other)
+    }
+
+    pub fn clone_border_spacing(&self) -> longhands::border_spacing::computed_value::T {
+        longhands::border_spacing::computed_value::T::new(
+            Au(self.mBorderSpacingCol).into(),
+            Au(self.mBorderSpacingRow).into()
+        )
+    }
+</%self:impl_trait>
+
+
+<%self:impl_trait style_struct_name="InheritedText">
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="Text" skip_longhands="initial-letter">
+    pub fn set_initial_letter(&mut self, v: longhands::initial_letter::computed_value::T) {
+        use crate::values::generics::text::InitialLetter;
+        match v {
+            InitialLetter::Normal => {
+                self.mInitialLetterSize = 0.;
+                self.mInitialLetterSink = 0;
+            },
+            InitialLetter::Specified(size, sink) => {
+                self.mInitialLetterSize = size;
+                if let Some(sink) = sink {
+                    self.mInitialLetterSink = sink;
+                } else {
+                    self.mInitialLetterSink = size.floor() as i32;
+                }
+            }
+        }
+    }
+
+    pub fn copy_initial_letter_from(&mut self, other: &Self) {
+        self.mInitialLetterSize = other.mInitialLetterSize;
+        self.mInitialLetterSink = other.mInitialLetterSink;
+    }
+
+    pub fn reset_initial_letter(&mut self, other: &Self) {
+        self.copy_initial_letter_from(other)
+    }
+
+    pub fn clone_initial_letter(&self) -> longhands::initial_letter::computed_value::T {
+        use crate::values::generics::text::InitialLetter;
+
+        if self.mInitialLetterSize == 0. && self.mInitialLetterSink == 0 {
+            InitialLetter::Normal
+        } else if self.mInitialLetterSize.floor() as i32 == self.mInitialLetterSink {
+            InitialLetter::Specified(self.mInitialLetterSize, None)
+        } else {
+            InitialLetter::Specified(self.mInitialLetterSize, Some(self.mInitialLetterSink))
+        }
+    }
+</%self:impl_trait>
+
+<% skip_svg_longhands = """
+mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x mask-position-y mask-size mask-image
+"""
+%>
+<%self:impl_trait style_struct_name="SVG"
+                  skip_longhands="${skip_svg_longhands}">
+    <% impl_common_image_layer_properties("mask") %>
+    <% impl_simple_image_array_property("mode", "mask", "mMask", "mMaskMode", "SVG") %>
+    <% impl_simple_image_array_property("composite", "mask", "mMask", "mComposite", "SVG") %>
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="InheritedSVG">
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="InheritedUI">
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="Column"
+                  skip_longhands="column-count column-rule-width column-rule-style">
+
+    #[allow(unused_unsafe)]
+    pub fn set_column_count(&mut self, v: longhands::column_count::computed_value::T) {
+        use crate::gecko_bindings::structs::{nsStyleColumn_kColumnCountAuto, nsStyleColumn_kMaxColumnCount};
+
+        self.mColumnCount = match v {
+            ColumnCount::Integer(integer) => {
+                cmp::min(integer.0 as u32, unsafe { nsStyleColumn_kMaxColumnCount })
+            },
+            ColumnCount::Auto => nsStyleColumn_kColumnCountAuto
+        };
+    }
+
+    ${impl_simple_copy('column_count', 'mColumnCount')}
+
+    pub fn clone_column_count(&self) -> longhands::column_count::computed_value::T {
+        use crate::gecko_bindings::structs::{nsStyleColumn_kColumnCountAuto, nsStyleColumn_kMaxColumnCount};
+        if self.mColumnCount != nsStyleColumn_kColumnCountAuto {
+            debug_assert!(self.mColumnCount >= 1 &&
+                          self.mColumnCount <= nsStyleColumn_kMaxColumnCount);
+            ColumnCount::Integer((self.mColumnCount as i32).into())
+        } else {
+            ColumnCount::Auto
+        }
+    }
+
+    pub fn set_column_rule_style(&mut self, v: longhands::column_rule_style::computed_value::T) {
+        self.mColumnRuleStyle = v;
+        // NB: This is needed to correctly handling the initial value of
+        // column-rule-width when colun-rule-style changes, see the
+        // update_border_${side.ident} comment for more details.
+        self.mActualColumnRuleWidth = self.mColumnRuleWidth;
+    }
+
+    pub fn copy_column_rule_style_from(&mut self, other: &Self) {
+        self.set_column_rule_style(other.mColumnRuleStyle);
+    }
+
+    pub fn reset_column_rule_style(&mut self, other: &Self) {
+        self.copy_column_rule_style_from(other)
+    }
+
+    pub fn clone_column_rule_style(&self) -> longhands::column_rule_style::computed_value::T {
+        self.mColumnRuleStyle.clone()
+    }
+
+    ${impl_border_width("column_rule_width", "mActualColumnRuleWidth", "mColumnRuleWidth")}
+
+    pub fn column_rule_has_nonzero_width(&self) -> bool {
+        self.mActualColumnRuleWidth != 0
+    }
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="Counters">
+    pub fn ineffective_content_property(&self) -> bool {
+        !self.mContent.is_items()
+    }
+</%self:impl_trait>
+
+<% skip_ui_longhands = """animation-name animation-delay animation-duration
+                          animation-direction animation-fill-mode
+                          animation-play-state animation-iteration-count
+                          animation-timing-function animation-composition animation-timeline
+                          transition-duration transition-delay
+                          transition-timing-function transition-property
+                          scroll-timeline-name scroll-timeline-axis
+                          view-timeline-name view-timeline-axis view-timeline-inset""" %>
+
+<%self:impl_trait style_struct_name="UI" skip_longhands="${skip_ui_longhands}">
+    ${impl_coordinated_property('transition', 'delay', 'Delay')}
+    ${impl_coordinated_property('transition', 'duration', 'Duration')}
+    ${impl_coordinated_property('transition', 'timing_function', 'TimingFunction')}
+
+    pub fn transition_combined_duration_at(&self, index: usize) -> Time {
+        // https://drafts.csswg.org/css-transitions/#transition-combined-duration
+        Time::from_seconds(
+            self.transition_duration_at(index).seconds().max(0.0) +
+            self.transition_delay_at(index).seconds()
+        )
+    }
+
+    pub fn set_transition_property<I>(&mut self, v: I)
+    where
+        I: IntoIterator<Item = longhands::transition_property::computed_value::single_value::T>,
+        I::IntoIter: ExactSizeIterator
+    {
+        use crate::gecko_bindings::structs::nsCSSPropertyID::eCSSPropertyExtra_no_properties;
+        use crate::gecko_bindings::structs::nsCSSPropertyID::eCSSPropertyExtra_variable;
+        use crate::gecko_bindings::structs::nsCSSPropertyID::eCSSProperty_UNKNOWN;
+
+        let v = v.into_iter();
+
+        if v.len() != 0 {
+            self.mTransitions.ensure_len(v.len());
+            self.mTransitionPropertyCount = v.len() as u32;
+            for (servo, gecko) in v.zip(self.mTransitions.iter_mut()) {
+                unsafe { gecko.mUnknownProperty.clear() };
+
+                match servo {
+                    TransitionProperty::Unsupported(ident) => {
+                        gecko.mProperty = eCSSProperty_UNKNOWN;
+                        gecko.mUnknownProperty.mRawPtr = ident.0.into_addrefed();
+                    },
+                    TransitionProperty::Custom(name) => {
+                        gecko.mProperty = eCSSPropertyExtra_variable;
+                        gecko.mUnknownProperty.mRawPtr = name.into_addrefed();
+                    }
+                    _ => gecko.mProperty = servo.to_nscsspropertyid().unwrap(),
+                }
+            }
+        } else {
+            // In gecko |none| is represented by eCSSPropertyExtra_no_properties.
+            self.mTransitionPropertyCount = 1;
+            self.mTransitions[0].mProperty = eCSSPropertyExtra_no_properties;
+        }
+    }
+
+    /// Returns whether there are any transitions specified.
+    pub fn specifies_transitions(&self) -> bool {
+        use crate::gecko_bindings::structs::nsCSSPropertyID::eCSSPropertyExtra_all_properties;
+        if self.mTransitionPropertyCount == 1 &&
+            self.mTransitions[0].mProperty == eCSSPropertyExtra_all_properties &&
+            self.transition_combined_duration_at(0).seconds() <= 0.0f32 {
+            return false;
+        }
+
+        self.mTransitionPropertyCount > 0
+    }
+
+    pub fn transition_property_at(&self, index: usize)
+        -> longhands::transition_property::computed_value::SingleComputedValue {
+        use crate::gecko_bindings::structs::nsCSSPropertyID::eCSSPropertyExtra_no_properties;
+        use crate::gecko_bindings::structs::nsCSSPropertyID::eCSSPropertyExtra_variable;
+        use crate::gecko_bindings::structs::nsCSSPropertyID::eCSSProperty_UNKNOWN;
+
+        let property = self.mTransitions[index].mProperty;
+        if property == eCSSProperty_UNKNOWN {
+            let atom = self.mTransitions[index].mUnknownProperty.mRawPtr;
+            debug_assert!(!atom.is_null());
+            TransitionProperty::Unsupported(CustomIdent(unsafe{
+                Atom::from_raw(atom)
+            }))
+        } else if property == eCSSPropertyExtra_variable {
+            let atom = self.mTransitions[index].mUnknownProperty.mRawPtr;
+            debug_assert!(!atom.is_null());
+            TransitionProperty::Custom(unsafe{
+                Atom::from_raw(atom)
+            })
+        } else if property == eCSSPropertyExtra_no_properties {
+            // Actually, we don't expect TransitionProperty::Unsupported also
+            // represents "none", but if the caller wants to convert it, it is
+            // fine. Please use it carefully.
+            //
+            // FIXME(emilio): This is a hack, is this reachable?
+            TransitionProperty::Unsupported(CustomIdent(atom!("none")))
+        } else {
+            property.into()
+        }
+    }
+
+    pub fn transition_nscsspropertyid_at(&self, index: usize) -> nsCSSPropertyID {
+        self.mTransitions[index].mProperty
+    }
+
+    pub fn copy_transition_property_from(&mut self, other: &Self) {
+        use crate::gecko_bindings::structs::nsCSSPropertyID::eCSSPropertyExtra_variable;
+        use crate::gecko_bindings::structs::nsCSSPropertyID::eCSSProperty_UNKNOWN;
+        self.mTransitions.ensure_len(other.mTransitions.len());
+
+        let count = other.mTransitionPropertyCount;
+        self.mTransitionPropertyCount = count;
+
+        for (index, transition) in self.mTransitions.iter_mut().enumerate().take(count as usize) {
+            transition.mProperty = other.mTransitions[index].mProperty;
+            unsafe { transition.mUnknownProperty.clear() };
+            if transition.mProperty == eCSSProperty_UNKNOWN ||
+               transition.mProperty == eCSSPropertyExtra_variable {
+                let atom = other.mTransitions[index].mUnknownProperty.mRawPtr;
+                debug_assert!(!atom.is_null());
+                transition.mUnknownProperty.mRawPtr = unsafe { Atom::from_raw(atom) }.into_addrefed();
+            }
+        }
+    }
+
+    pub fn reset_transition_property(&mut self, other: &Self) {
+        self.copy_transition_property_from(other)
+    }
+
+    ${impl_coordinated_property_count('transition', 'property', 'Property')}
+
+    pub fn animations_equals(&self, other: &Self) -> bool {
+        return self.mAnimationNameCount == other.mAnimationNameCount
+            && self.mAnimationDelayCount == other.mAnimationDelayCount
+            && self.mAnimationDirectionCount == other.mAnimationDirectionCount
+            && self.mAnimationDurationCount == other.mAnimationDurationCount
+            && self.mAnimationFillModeCount == other.mAnimationFillModeCount
+            && self.mAnimationIterationCountCount == other.mAnimationIterationCountCount
+            && self.mAnimationPlayStateCount == other.mAnimationPlayStateCount
+            && self.mAnimationTimingFunctionCount == other.mAnimationTimingFunctionCount
+            && self.mAnimationCompositionCount == other.mAnimationCompositionCount
+            && self.mAnimationTimelineCount == other.mAnimationTimelineCount
+            && unsafe { bindings::Gecko_StyleAnimationsEquals(&self.mAnimations, &other.mAnimations) }
+    }
+
+    pub fn set_animation_name<I>(&mut self, v: I)
+    where
+        I: IntoIterator<Item = longhands::animation_name::computed_value::single_value::T>,
+        I::IntoIter: ExactSizeIterator
+    {
+        let v = v.into_iter();
+        debug_assert_ne!(v.len(), 0);
+        self.mAnimations.ensure_len(v.len());
+
+        self.mAnimationNameCount = v.len() as u32;
+        for (servo, gecko) in v.zip(self.mAnimations.iter_mut()) {
+            let atom = servo.0.as_atom().clone();
+            unsafe { bindings::Gecko_SetAnimationName(gecko, atom.into_addrefed()); }
+        }
+    }
+    pub fn animation_name_at(&self, index: usize)
+        -> longhands::animation_name::computed_value::SingleComputedValue {
+        use crate::properties::longhands::animation_name::single_value::SpecifiedValue as AnimationName;
+
+        let atom = self.mAnimations[index].mName.mRawPtr;
+        AnimationName(KeyframesName::from_atom(unsafe { Atom::from_raw(atom) }))
+    }
+    pub fn copy_animation_name_from(&mut self, other: &Self) {
+        self.mAnimationNameCount = other.mAnimationNameCount;
+        unsafe { bindings::Gecko_CopyAnimationNames(&mut self.mAnimations, &other.mAnimations); }
+    }
+
+    pub fn reset_animation_name(&mut self, other: &Self) {
+        self.copy_animation_name_from(other)
+    }
+
+    ${impl_coordinated_property_count('animation', 'name', 'Name')}
+    ${impl_coordinated_property('animation', 'delay', 'Delay')}
+    ${impl_coordinated_property('animation', 'duration', 'Duration')}
+    ${impl_animation_keyword('direction', 'Direction',
+                             data.longhands_by_name["animation-direction"].keyword)}
+    ${impl_animation_keyword('fill_mode', 'FillMode',
+                             data.longhands_by_name["animation-fill-mode"].keyword)}
+    ${impl_animation_keyword('play_state', 'PlayState',
+                             data.longhands_by_name["animation-play-state"].keyword)}
+    ${impl_animation_keyword('composition', 'Composition',
+                             data.longhands_by_name["animation-composition"].keyword)}
+    ${impl_coordinated_property('animation', 'iteration_count', 'IterationCount')}
+    ${impl_coordinated_property('animation', 'timeline', 'Timeline')}
+    ${impl_coordinated_property('animation', 'timing_function', 'TimingFunction')}
+
+    ${impl_coordinated_property('scroll_timeline', 'name', 'Name')}
+    ${impl_coordinated_property('scroll_timeline', 'axis', 'Axis')}
+
+    pub fn scroll_timelines_equals(&self, other: &Self) -> bool {
+        self.mScrollTimelineNameCount == other.mScrollTimelineNameCount
+            && self.mScrollTimelineAxisCount == other.mScrollTimelineAxisCount
+            && unsafe {
+                bindings::Gecko_StyleScrollTimelinesEquals(
+                    &self.mScrollTimelines,
+                    &other.mScrollTimelines,
+                )
+            }
+    }
+
+    ${impl_coordinated_property('view_timeline', 'name', 'Name')}
+    ${impl_coordinated_property('view_timeline', 'axis', 'Axis')}
+    ${impl_coordinated_property('view_timeline', 'inset', 'Inset')}
+
+    pub fn view_timelines_equals(&self, other: &Self) -> bool {
+        self.mViewTimelineNameCount == other.mViewTimelineNameCount
+            && self.mViewTimelineAxisCount == other.mViewTimelineAxisCount
+            && self.mViewTimelineInsetCount == other.mViewTimelineInsetCount
+            && unsafe {
+                bindings::Gecko_StyleViewTimelinesEquals(
+                    &self.mViewTimelines,
+                    &other.mViewTimelines,
+                )
+            }
+    }
+</%self:impl_trait>
+
+<%self:impl_trait style_struct_name="XUL">
+</%self:impl_trait>
+
+% for style_struct in data.style_structs:
+${impl_style_struct(style_struct)}
+% endfor
+
+/// Assert that the initial values set in Gecko style struct constructors
+/// match the values returned by `get_initial_value()` for each longhand.
+#[cfg(feature = "gecko")]
+#[inline]
+pub fn assert_initial_values_match(data: &PerDocumentStyleData) {
+    if cfg!(debug_assertions) {
+        let data = data.borrow();
+        let cv = data.stylist.device().default_computed_values();
+        <%
+            # Skip properties with initial values that change at computed
+            # value time, or whose initial value depends on the document
+            # / other prefs.
+            SKIPPED = [
+                "border-top-width",
+                "border-bottom-width",
+                "border-left-width",
+                "border-right-width",
+                "column-rule-width",
+                "font-family",
+                "font-size",
+                "outline-width",
+                "color",
+            ]
+            TO_TEST = [p for p in data.longhands if p.enabled_in != "" and not p.logical and not p.name in SKIPPED]
+        %>
+        % for property in TO_TEST:
+        assert_eq!(
+            cv.clone_${property.ident}(),
+            longhands::${property.ident}::get_initial_value(),
+            concat!(
+                "initial value in Gecko style struct for ",
+                stringify!(${property.ident}),
+                " must match longhands::",
+                stringify!(${property.ident}),
+                "::get_initial_value()"
+            )
+        );
+        % endfor
+    }
+}
diff --git a/servo/components/style/properties/helpers.mako.rs b/servo/components/style/properties/helpers.mako.rs
new file mode 100644
index 0000000000..3fe92c967d
--- /dev/null
+++ b/servo/components/style/properties/helpers.mako.rs
@@ -0,0 +1,1031 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%!
+    from data import Keyword, to_rust_ident, to_phys, to_camel_case, SYSTEM_FONT_LONGHANDS
+    from data import (LOGICAL_CORNERS, PHYSICAL_CORNERS, LOGICAL_SIDES,
+                      PHYSICAL_SIDES, LOGICAL_SIZES, LOGICAL_AXES)
+%>
+
+<%def name="predefined_type(name, type, initial_value, parse_method='parse',
+            vector=False, initial_specified_value=None,
+            allow_quirks='No', allow_empty=False, **kwargs)">
+    <%def name="predefined_type_inner(name, type, initial_value, parse_method)">
+        #[allow(unused_imports)]
+        use app_units::Au;
+        #[allow(unused_imports)]
+        use crate::values::specified::AllowQuirks;
+        #[allow(unused_imports)]
+        use crate::Zero;
+        #[allow(unused_imports)]
+        use smallvec::SmallVec;
+        pub use crate::values::specified::${type} as SpecifiedValue;
+        pub mod computed_value {
+            pub use crate::values::computed::${type} as T;
+        }
+        % if initial_value:
+        #[inline] pub fn get_initial_value() -> computed_value::T { ${initial_value} }
+        % endif
+        % if initial_specified_value:
+        #[inline] pub fn get_initial_specified_value() -> SpecifiedValue { ${initial_specified_value} }
+        % endif
+        #[allow(unused_variables)]
+        #[inline]
+        pub fn parse<'i, 't>(
+            context: &ParserContext,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<SpecifiedValue, ParseError<'i>> {
+            % if allow_quirks != "No":
+            specified::${type}::${parse_method}_quirky(context, input, AllowQuirks::${allow_quirks})
+            % elif parse_method != "parse":
+            specified::${type}::${parse_method}(context, input)
+            % else:
+            <specified::${type} as crate::parser::Parse>::parse(context, input)
+            % endif
+        }
+    </%def>
+    % if vector:
+        <%call
+            expr="vector_longhand(name, predefined_type=type, allow_empty=allow_empty or not initial_value, **kwargs)"
+        >
+            ${predefined_type_inner(name, type, initial_value, parse_method)}
+            % if caller:
+            ${caller.body()}
+            % endif
+        </%call>
+    % else:
+        <%call expr="longhand(name, predefined_type=type, **kwargs)">
+            ${predefined_type_inner(name, type, initial_value, parse_method)}
+            % if caller:
+            ${caller.body()}
+            % endif
+        </%call>
+    % endif
+</%def>
+
+// FIXME (Manishearth): Add computed_value_as_specified argument
+// and handle the empty case correctly
+<%doc>
+    To be used in cases where we have a grammar like "<thing> [ , <thing> ]*".
+
+    Setting allow_empty to False allows for cases where the vector
+    is empty. The grammar for these is usually "none | <thing> [ , <thing> ]*".
+    We assume that the default/initial value is an empty vector for these.
+    `initial_value` need not be defined for these.
+</%doc>
+
+// The setup here is roughly:
+//
+//  * UnderlyingList is the list that is stored in the computed value. This may
+//    be a shared ArcSlice if the property is inherited.
+//  * UnderlyingOwnedList is the list that is used for animation.
+//  * Specified values always use OwnedSlice, since it's more compact.
+//  * computed_value::List is just a convenient alias that you can use for the
+//    computed value list, since this is in the computed_value module.
+//
+// If simple_vector_bindings is true, then we don't use the complex iterator
+// machinery and set_foo_from, and just compute the value like any other
+// longhand.
+<%def name="vector_longhand(name, animation_value_type=None,
+                            vector_animation_type=None, allow_empty=False,
+                            simple_vector_bindings=False,
+                            separator='Comma',
+                            **kwargs)">
+    <%call expr="longhand(name, animation_value_type=animation_value_type, vector=True,
+                          simple_vector_bindings=simple_vector_bindings, **kwargs)">
+        #[allow(unused_imports)]
+        use smallvec::SmallVec;
+
+        pub mod single_value {
+            #[allow(unused_imports)]
+            use cssparser::{Parser, BasicParseError};
+            #[allow(unused_imports)]
+            use crate::parser::{Parse, ParserContext};
+            #[allow(unused_imports)]
+            use crate::properties::ShorthandId;
+            #[allow(unused_imports)]
+            use selectors::parser::SelectorParseErrorKind;
+            #[allow(unused_imports)]
+            use style_traits::{ParseError, StyleParseErrorKind};
+            #[allow(unused_imports)]
+            use crate::values::computed::{Context, ToComputedValue};
+            #[allow(unused_imports)]
+            use crate::values::{computed, specified};
+            ${caller.body()}
+        }
+
+        /// The definition of the computed value for ${name}.
+        pub mod computed_value {
+            #[allow(unused_imports)]
+            use crate::values::animated::ToAnimatedValue;
+            #[allow(unused_imports)]
+            use crate::values::resolved::ToResolvedValue;
+            pub use super::single_value::computed_value as single_value;
+            pub use self::single_value::T as SingleComputedValue;
+            % if not allow_empty or allow_empty == "NotInitial":
+            use smallvec::SmallVec;
+            % endif
+            use crate::values::computed::ComputedVecIter;
+
+            <%
+                is_shared_list = allow_empty and allow_empty != "NotInitial" and \
+                    data.longhands_by_name[name].style_struct.inherited
+            %>
+
+            // FIXME(emilio): Add an OwnedNonEmptySlice type, and figure out
+            // something for transition-name, which is the only remaining user
+            // of NotInitial.
+            pub type UnderlyingList<T> =
+                % if allow_empty and allow_empty != "NotInitial":
+                % if data.longhands_by_name[name].style_struct.inherited:
+                    crate::ArcSlice<T>;
+                % else:
+                    crate::OwnedSlice<T>;
+                % endif
+                % else:
+                    SmallVec<[T; 1]>;
+                % endif
+
+            pub type UnderlyingOwnedList<T> =
+                % if allow_empty and allow_empty != "NotInitial":
+                    crate::OwnedSlice<T>;
+                % else:
+                    SmallVec<[T; 1]>;
+                % endif
+
+
+            /// The generic type defining the animated and resolved values for
+            /// this property.
+            ///
+            /// Making this type generic allows the compiler to figure out the
+            /// animated value for us, instead of having to implement it
+            /// manually for every type we care about.
+            #[derive(
+                Clone,
+                Debug,
+                MallocSizeOf,
+                PartialEq,
+                ToAnimatedValue,
+                ToResolvedValue,
+                ToCss,
+            )]
+            % if separator == "Comma":
+            #[css(comma)]
+            % endif
+            pub struct OwnedList<T>(
+                % if not allow_empty:
+                #[css(iterable)]
+                % else:
+                #[css(if_empty = "none", iterable)]
+                % endif
+                pub UnderlyingOwnedList<T>,
+            );
+
+            /// The computed value for this property.
+            % if not is_shared_list:
+            pub type ComputedList = OwnedList<single_value::T>;
+            pub use self::OwnedList as List;
+            % else:
+            pub use self::ComputedList as List;
+
+            #[derive(
+                Clone,
+                Debug,
+                MallocSizeOf,
+                PartialEq,
+                ToCss,
+            )]
+            % if separator == "Comma":
+            #[css(comma)]
+            % endif
+            pub struct ComputedList(
+                % if not allow_empty:
+                #[css(iterable)]
+                % else:
+                #[css(if_empty = "none", iterable)]
+                % endif
+                % if is_shared_list:
+                #[ignore_malloc_size_of = "Arc"]
+                % endif
+                pub UnderlyingList<single_value::T>,
+            );
+
+            type ResolvedList = OwnedList<<single_value::T as ToResolvedValue>::ResolvedValue>;
+            impl ToResolvedValue for ComputedList {
+                type ResolvedValue = ResolvedList;
+
+                fn to_resolved_value(self, context: &crate::values::resolved::Context) -> Self::ResolvedValue {
+                    OwnedList(
+                        self.0
+                            .iter()
+                            .cloned()
+                            .map(|v| v.to_resolved_value(context))
+                            .collect()
+                    )
+                }
+
+                fn from_resolved_value(resolved: Self::ResolvedValue) -> Self {
+                    % if not is_shared_list:
+                    use std::iter::FromIterator;
+                    % endif
+                    let iter =
+                        resolved.0.into_iter().map(ToResolvedValue::from_resolved_value);
+                    ComputedList(UnderlyingList::from_iter(iter))
+                }
+            }
+            % endif
+
+            % if simple_vector_bindings:
+            impl From<ComputedList> for UnderlyingList<single_value::T> {
+                #[inline]
+                fn from(l: ComputedList) -> Self {
+                    l.0
+                }
+            }
+            impl From<UnderlyingList<single_value::T>> for ComputedList {
+                #[inline]
+                fn from(l: UnderlyingList<single_value::T>) -> Self {
+                    List(l)
+                }
+            }
+            % endif
+
+            % if vector_animation_type:
+            % if not animation_value_type:
+                Sorry, this is stupid but needed for now.
+            % endif
+
+            use crate::values::animated::{Animate, ToAnimatedZero, Procedure, lists};
+            use crate::values::distance::{SquaredDistance, ComputeSquaredDistance};
+
+            // FIXME(emilio): For some reason rust thinks that this alias is
+            // unused, even though it's clearly used below?
+            #[allow(unused)]
+            type AnimatedList = OwnedList<<single_value::T as ToAnimatedValue>::AnimatedValue>;
+
+            % if is_shared_list:
+            impl ToAnimatedValue for ComputedList {
+                type AnimatedValue = AnimatedList;
+
+                fn to_animated_value(self) -> Self::AnimatedValue {
+                    OwnedList(
+                        self.0.iter().map(|v| v.clone().to_animated_value()).collect()
+                    )
+                }
+
+                fn from_animated_value(animated: Self::AnimatedValue) -> Self {
+                    let iter =
+                        animated.0.into_iter().map(ToAnimatedValue::from_animated_value);
+                    ComputedList(UnderlyingList::from_iter(iter))
+                }
+            }
+            % endif
+
+            impl ToAnimatedZero for AnimatedList {
+                fn to_animated_zero(&self) -> Result<Self, ()> { Err(()) }
+            }
+
+            impl Animate for AnimatedList {
+                fn animate(
+                    &self,
+                    other: &Self,
+                    procedure: Procedure,
+                ) -> Result<Self, ()> {
+                    Ok(OwnedList(
+                        lists::${vector_animation_type}::animate(&self.0, &other.0, procedure)?
+                    ))
+                }
+            }
+            impl ComputeSquaredDistance for AnimatedList {
+                fn compute_squared_distance(
+                    &self,
+                    other: &Self,
+                ) -> Result<SquaredDistance, ()> {
+                    lists::${vector_animation_type}::squared_distance(&self.0, &other.0)
+                }
+            }
+            % endif
+
+            /// The computed value, effectively a list of single values.
+            pub use self::ComputedList as T;
+
+            pub type Iter<'a, 'cx, 'cx_a> = ComputedVecIter<'a, 'cx, 'cx_a, super::single_value::SpecifiedValue>;
+        }
+
+        /// The specified value of ${name}.
+        #[derive(Clone, Debug, MallocSizeOf, PartialEq, SpecifiedValueInfo, ToCss, ToShmem)]
+        % if separator == "Comma":
+        #[css(comma)]
+        % endif
+        pub struct SpecifiedValue(
+            % if not allow_empty:
+            #[css(iterable)]
+            % else:
+            #[css(if_empty = "none", iterable)]
+            % endif
+            pub crate::OwnedSlice<single_value::SpecifiedValue>,
+        );
+
+        pub fn get_initial_value() -> computed_value::T {
+            % if allow_empty and allow_empty != "NotInitial":
+                computed_value::List(Default::default())
+            % else:
+                let mut v = SmallVec::new();
+                v.push(single_value::get_initial_value());
+                computed_value::List(v)
+            % endif
+        }
+
+        pub fn parse<'i, 't>(
+            context: &ParserContext,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<SpecifiedValue, ParseError<'i>> {
+            use style_traits::Separator;
+
+            % if allow_empty:
+            if input.try_parse(|input| input.expect_ident_matching("none")).is_ok() {
+                return Ok(SpecifiedValue(Default::default()))
+            }
+            % endif
+
+            let v = style_traits::${separator}::parse(input, |parser| {
+                single_value::parse(context, parser)
+            })?;
+            Ok(SpecifiedValue(v.into()))
+        }
+
+        pub use self::single_value::SpecifiedValue as SingleSpecifiedValue;
+
+        % if not simple_vector_bindings and engine == "gecko":
+        impl SpecifiedValue {
+            fn compute_iter<'a, 'cx, 'cx_a>(
+                &'a self,
+                context: &'cx Context<'cx_a>,
+            ) -> computed_value::Iter<'a, 'cx, 'cx_a> {
+                computed_value::Iter::new(context, &self.0)
+            }
+        }
+        % endif
+
+        impl ToComputedValue for SpecifiedValue {
+            type ComputedValue = computed_value::T;
+
+            #[inline]
+            fn to_computed_value(&self, context: &Context) -> computed_value::T {
+                % if not is_shared_list:
+                use std::iter::FromIterator;
+                % endif
+                computed_value::List(computed_value::UnderlyingList::from_iter(
+                    self.0.iter().map(|i| i.to_computed_value(context))
+                ))
+            }
+
+            #[inline]
+            fn from_computed_value(computed: &computed_value::T) -> Self {
+                let iter = computed.0.iter().map(ToComputedValue::from_computed_value);
+                SpecifiedValue(iter.collect())
+            }
+        }
+    </%call>
+</%def>
+<%def name="longhand(*args, **kwargs)">
+    <%
+        property = data.declare_longhand(*args, **kwargs)
+        if property is None:
+            return ""
+    %>
+    /// ${property.spec}
+    pub mod ${property.ident} {
+        #[allow(unused_imports)]
+        use cssparser::{Parser, BasicParseError, Token};
+        #[allow(unused_imports)]
+        use crate::parser::{Parse, ParserContext};
+        #[allow(unused_imports)]
+        use crate::properties::{UnparsedValue, ShorthandId};
+        #[allow(unused_imports)]
+        use crate::error_reporting::ParseErrorReporter;
+        #[allow(unused_imports)]
+        use crate::properties::longhands;
+        #[allow(unused_imports)]
+        use crate::properties::{LonghandId, LonghandIdSet};
+        #[allow(unused_imports)]
+        use crate::properties::{CSSWideKeyword, ComputedValues, PropertyDeclaration};
+        #[allow(unused_imports)]
+        use crate::properties::style_structs;
+        #[allow(unused_imports)]
+        use selectors::parser::SelectorParseErrorKind;
+        #[allow(unused_imports)]
+        use servo_arc::Arc;
+        #[allow(unused_imports)]
+        use style_traits::{ParseError, StyleParseErrorKind};
+        #[allow(unused_imports)]
+        use crate::values::computed::{Context, ToComputedValue};
+        #[allow(unused_imports)]
+        use crate::values::{computed, generics, specified};
+        #[allow(unused_imports)]
+        use crate::Atom;
+        ${caller.body()}
+        #[allow(unused_variables)]
+        pub fn cascade_property(
+            declaration: &PropertyDeclaration,
+            context: &mut computed::Context,
+        ) {
+            context.for_non_inherited_property =
+                % if property.style_struct.inherited:
+                    None;
+                % else:
+                    Some(LonghandId::${property.camel_case});
+                % endif
+
+            let specified_value = match *declaration {
+                PropertyDeclaration::${property.camel_case}(ref value) => value,
+                PropertyDeclaration::CSSWideKeyword(ref declaration) => {
+                    debug_assert_eq!(declaration.id, LonghandId::${property.camel_case});
+                    match declaration.keyword {
+                        % if not property.style_struct.inherited:
+                        CSSWideKeyword::Unset |
+                        % endif
+                        CSSWideKeyword::Initial => {
+                            % if not property.style_struct.inherited:
+                                debug_assert!(false, "Should be handled in apply_properties");
+                            % else:
+                                context.builder.reset_${property.ident}();
+                            % endif
+                        },
+                        % if property.style_struct.inherited:
+                        CSSWideKeyword::Unset |
+                        % endif
+                        CSSWideKeyword::Inherit => {
+                            % if property.style_struct.inherited:
+                                debug_assert!(false, "Should be handled in apply_properties");
+                            % else:
+                                context.rule_cache_conditions.borrow_mut().set_uncacheable();
+                                context.builder.inherit_${property.ident}();
+                            % endif
+                        }
+                        CSSWideKeyword::RevertLayer |
+                        CSSWideKeyword::Revert => unreachable!("Should never get here"),
+                    }
+                    return;
+                }
+                PropertyDeclaration::WithVariables(..) => {
+                    panic!("variables should already have been substituted")
+                }
+                _ => panic!("entered the wrong cascade_property() implementation"),
+            };
+
+            % if property.ident in SYSTEM_FONT_LONGHANDS and engine == "gecko":
+                if let Some(sf) = specified_value.get_system() {
+                    longhands::system_font::resolve_system_font(sf, context);
+                }
+            % endif
+
+            % if not property.style_struct.inherited and property.logical:
+                context.rule_cache_conditions.borrow_mut()
+                    .set_writing_mode_dependency(context.builder.writing_mode);
+            % endif
+
+            % if property.is_vector and not property.simple_vector_bindings and engine == "gecko":
+                // In the case of a vector property we want to pass down an
+                // iterator so that this can be computed without allocation.
+                //
+                // However, computing requires a context, but the style struct
+                // being mutated is on the context. We temporarily remove it,
+                // mutate it, and then put it back. Vector longhands cannot
+                // touch their own style struct whilst computing, else this will
+                // panic.
+                let mut s =
+                    context.builder.take_${data.current_style_struct.name_lower}();
+                {
+                    let iter = specified_value.compute_iter(context);
+                    s.set_${property.ident}(iter);
+                }
+                context.builder.put_${data.current_style_struct.name_lower}(s);
+            % else:
+                % if property.boxed:
+                let computed = (**specified_value).to_computed_value(context);
+                % else:
+                let computed = specified_value.to_computed_value(context);
+                % endif
+                context.builder.set_${property.ident}(computed)
+            % endif
+        }
+
+        pub fn parse_declared<'i, 't>(
+            context: &ParserContext,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<PropertyDeclaration, ParseError<'i>> {
+            % if property.allow_quirks != "No":
+                parse_quirky(context, input, specified::AllowQuirks::${property.allow_quirks})
+            % else:
+                parse(context, input)
+            % endif
+            % if property.boxed:
+                .map(Box::new)
+            % endif
+                .map(PropertyDeclaration::${property.camel_case})
+        }
+    }
+</%def>
+
+<%def name="gecko_keyword_conversion(keyword, values=None, type='SpecifiedValue', cast_to=None)">
+    <%
+        if not values:
+            values = keyword.values_for(engine)
+        maybe_cast = "as %s" % cast_to if cast_to else ""
+        const_type = cast_to if cast_to else "u32"
+    %>
+    #[cfg(feature = "gecko")]
+    impl ${type} {
+        /// Obtain a specified value from a Gecko keyword value
+        ///
+        /// Intended for use with presentation attributes, not style structs
+        pub fn from_gecko_keyword(kw: u32) -> Self {
+            use crate::gecko_bindings::structs;
+            % for value in values:
+                // We can't match on enum values if we're matching on a u32
+                const ${to_rust_ident(value).upper()}: ${const_type}
+                    = structs::${keyword.gecko_constant(value)} as ${const_type};
+            % endfor
+            match kw ${maybe_cast} {
+                % for value in values:
+                    ${to_rust_ident(value).upper()} => ${type}::${to_camel_case(value)},
+                % endfor
+                _ => panic!("Found unexpected value in style struct for ${keyword.name} property"),
+            }
+        }
+    }
+</%def>
+
+<%def name="gecko_bitflags_conversion(bit_map, gecko_bit_prefix, type, kw_type='u8')">
+    #[cfg(feature = "gecko")]
+    impl ${type} {
+        /// Obtain a specified value from a Gecko keyword value
+        ///
+        /// Intended for use with presentation attributes, not style structs
+        pub fn from_gecko_keyword(kw: ${kw_type}) -> Self {
+            % for gecko_bit in bit_map.values():
+            use crate::gecko_bindings::structs::${gecko_bit_prefix}${gecko_bit};
+            % endfor
+
+            let mut bits = ${type}::empty();
+            % for servo_bit, gecko_bit in bit_map.items():
+                if kw & (${gecko_bit_prefix}${gecko_bit} as ${kw_type}) != 0 {
+                    bits |= ${servo_bit};
+                }
+            % endfor
+            bits
+        }
+
+        pub fn to_gecko_keyword(self) -> ${kw_type} {
+            % for gecko_bit in bit_map.values():
+            use crate::gecko_bindings::structs::${gecko_bit_prefix}${gecko_bit};
+            % endfor
+
+            let mut bits: ${kw_type} = 0;
+            // FIXME: if we ensure that the Servo bitflags storage is the same
+            // as Gecko's one, we can just copy it.
+            % for servo_bit, gecko_bit in bit_map.items():
+                if self.contains(${servo_bit}) {
+                    bits |= ${gecko_bit_prefix}${gecko_bit} as ${kw_type};
+                }
+            % endfor
+            bits
+        }
+    }
+</%def>
+
+<%def name="single_keyword(name, values, vector=False,
+            needs_conversion=False, **kwargs)">
+    <%
+        keyword_kwargs = {a: kwargs.pop(a, None) for a in [
+            'gecko_constant_prefix',
+            'gecko_enum_prefix',
+            'extra_gecko_values',
+            'extra_servo_2013_values',
+            'extra_servo_2020_values',
+            'gecko_aliases',
+            'servo_2013_aliases',
+            'servo_2020_aliases',
+            'custom_consts',
+            'gecko_inexhaustive',
+            'gecko_strip_moz_prefix',
+        ]}
+    %>
+
+    <%def name="inner_body(keyword, needs_conversion=False)">
+        pub use self::computed_value::T as SpecifiedValue;
+        pub mod computed_value {
+            #[cfg_attr(feature = "servo", derive(Deserialize, Serialize))]
+            #[derive(Clone, Copy, Debug, Eq, FromPrimitive, MallocSizeOf, Parse, PartialEq, SpecifiedValueInfo, ToComputedValue, ToCss, ToResolvedValue, ToShmem)]
+            pub enum T {
+            % for variant in keyword.values_for(engine):
+            <%
+                aliases = []
+                for alias, v in keyword.aliases_for(engine).items():
+                    if variant == v:
+                        aliases.append(alias)
+            %>
+            % if aliases:
+            #[parse(aliases = "${','.join(sorted(aliases))}")]
+            % endif
+            ${to_camel_case(variant)},
+            % endfor
+            }
+        }
+        #[inline]
+        pub fn get_initial_value() -> computed_value::T {
+            computed_value::T::${to_camel_case(values.split()[0])}
+        }
+        #[inline]
+        pub fn get_initial_specified_value() -> SpecifiedValue {
+            SpecifiedValue::${to_camel_case(values.split()[0])}
+        }
+        #[inline]
+        pub fn parse<'i, 't>(_context: &ParserContext, input: &mut Parser<'i, 't>)
+                             -> Result<SpecifiedValue, ParseError<'i>> {
+            SpecifiedValue::parse(input)
+        }
+
+        % if needs_conversion:
+            <%
+                conversion_values = keyword.values_for(engine) + list(keyword.aliases_for(engine).keys())
+            %>
+            ${gecko_keyword_conversion(keyword, values=conversion_values)}
+        % endif
+    </%def>
+    % if vector:
+        <%call expr="vector_longhand(name, keyword=Keyword(name, values, **keyword_kwargs), **kwargs)">
+            ${inner_body(Keyword(name, values, **keyword_kwargs))}
+            % if caller:
+            ${caller.body()}
+            % endif
+        </%call>
+    % else:
+        <%call expr="longhand(name, keyword=Keyword(name, values, **keyword_kwargs), **kwargs)">
+            ${inner_body(Keyword(name, values, **keyword_kwargs),
+                         needs_conversion=needs_conversion)}
+            % if caller:
+            ${caller.body()}
+            % endif
+        </%call>
+    % endif
+</%def>
+
+<%def name="shorthand(name, sub_properties, derive_serialize=False,
+                      derive_value_info=True, **kwargs)">
+<%
+    shorthand = data.declare_shorthand(name, sub_properties.split(), **kwargs)
+    # mako doesn't accept non-string value in parameters with <% %> form, so
+    # we have to workaround it this way.
+    if not isinstance(derive_value_info, bool):
+        derive_value_info = eval(derive_value_info)
+%>
+    % if shorthand:
+    /// ${shorthand.spec}
+    pub mod ${shorthand.ident} {
+        use cssparser::Parser;
+        use crate::parser::ParserContext;
+        use crate::properties::{PropertyDeclaration, SourcePropertyDeclaration, MaybeBoxed, longhands};
+        #[allow(unused_imports)]
+        use selectors::parser::SelectorParseErrorKind;
+        #[allow(unused_imports)]
+        use std::fmt::{self, Write};
+        #[allow(unused_imports)]
+        use style_traits::{ParseError, StyleParseErrorKind};
+        #[allow(unused_imports)]
+        use style_traits::{CssWriter, KeywordsCollectFn, SpecifiedValueInfo, ToCss};
+
+        % if derive_value_info:
+        #[derive(SpecifiedValueInfo)]
+        % endif
+        pub struct Longhands {
+            % for sub_property in shorthand.sub_properties:
+                pub ${sub_property.ident}:
+                    % if sub_property.boxed:
+                        Box<
+                    % endif
+                    longhands::${sub_property.ident}::SpecifiedValue
+                    % if sub_property.boxed:
+                        >
+                    % endif
+                    ,
+            % endfor
+        }
+
+        /// Represents a serializable set of all of the longhand properties that
+        /// correspond to a shorthand.
+        % if derive_serialize:
+        #[derive(ToCss)]
+        % endif
+        pub struct LonghandsToSerialize<'a> {
+            % for sub_property in shorthand.sub_properties:
+                pub ${sub_property.ident}:
+                % if sub_property.may_be_disabled_in(shorthand, engine):
+                    Option<
+                % endif
+                    &'a longhands::${sub_property.ident}::SpecifiedValue,
+                % if sub_property.may_be_disabled_in(shorthand, engine):
+                    >,
+                % endif
+            % endfor
+        }
+
+        impl<'a> LonghandsToSerialize<'a> {
+            /// Tries to get a serializable set of longhands given a set of
+            /// property declarations.
+            pub fn from_iter(iter: impl Iterator<Item = &'a PropertyDeclaration>) -> Result<Self, ()> {
+                // Define all of the expected variables that correspond to the shorthand
+                % for sub_property in shorthand.sub_properties:
+                    let mut ${sub_property.ident} =
+                        None::< &'a longhands::${sub_property.ident}::SpecifiedValue>;
+                % endfor
+
+                // Attempt to assign the incoming declarations to the expected variables
+                for declaration in iter {
+                    match *declaration {
+                        % for sub_property in shorthand.sub_properties:
+                            PropertyDeclaration::${sub_property.camel_case}(ref value) => {
+                                ${sub_property.ident} = Some(value)
+                            },
+                        % endfor
+                        _ => {}
+                    };
+                }
+
+                // If any of the expected variables are missing, return an error
+                match (
+                    % for sub_property in shorthand.sub_properties:
+                        ${sub_property.ident},
+                    % endfor
+                ) {
+
+                    (
+                    % for sub_property in shorthand.sub_properties:
+                        % if sub_property.may_be_disabled_in(shorthand, engine):
+                        ${sub_property.ident},
+                        % else:
+                        Some(${sub_property.ident}),
+                        % endif
+                    % endfor
+                    ) =>
+                    Ok(LonghandsToSerialize {
+                        % for sub_property in shorthand.sub_properties:
+                            ${sub_property.ident},
+                        % endfor
+                    }),
+                    _ => Err(())
+                }
+            }
+        }
+
+        /// Parse the given shorthand and fill the result into the
+        /// `declarations` vector.
+        pub fn parse_into<'i, 't>(
+            declarations: &mut SourcePropertyDeclaration,
+            context: &ParserContext,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<(), ParseError<'i>> {
+            #[allow(unused_imports)]
+            use crate::properties::{NonCustomPropertyId, LonghandId};
+            input.parse_entirely(|input| parse_value(context, input)).map(|longhands| {
+                % for sub_property in shorthand.sub_properties:
+                % if sub_property.may_be_disabled_in(shorthand, engine):
+                if NonCustomPropertyId::from(LonghandId::${sub_property.camel_case})
+                    .allowed_in_ignoring_rule_type(context) {
+                % endif
+                    declarations.push(PropertyDeclaration::${sub_property.camel_case}(
+                        longhands.${sub_property.ident}
+                    ));
+                % if sub_property.may_be_disabled_in(shorthand, engine):
+                }
+                % endif
+                % endfor
+            })
+        }
+
+        /// Try to serialize a given shorthand to a string.
+        pub fn to_css(declarations: &[&PropertyDeclaration], dest: &mut crate::str::CssStringWriter) -> fmt::Result {
+            match LonghandsToSerialize::from_iter(declarations.iter().cloned()) {
+                Ok(longhands) => longhands.to_css(&mut CssWriter::new(dest)),
+                Err(_) => Ok(())
+            }
+        }
+
+        ${caller.body()}
+    }
+    % endif
+</%def>
+
+// A shorthand of kind `<property-1> <property-2>?` where both properties have
+// the same type.
+<%def name="two_properties_shorthand(
+    name,
+    first_property,
+    second_property,
+    parser_function='crate::parser::Parse::parse',
+    **kwargs
+)">
+<%call expr="self.shorthand(name, sub_properties=' '.join([first_property, second_property]), **kwargs)">
+    #[allow(unused_imports)]
+    use crate::parser::Parse;
+    #[allow(unused_imports)]
+    use crate::values::specified;
+
+    fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let parse_one = |c: &ParserContext, input: &mut Parser<'i, 't>| -> Result<
+            crate::properties::longhands::${to_rust_ident(first_property)}::SpecifiedValue,
+            ParseError<'i>
+        > {
+            ${parser_function}(c, input)
+        };
+
+        let first = parse_one(context, input)?;
+        let second =
+            input.try_parse(|input| parse_one(context, input)).unwrap_or_else(|_| first.clone());
+        Ok(expanded! {
+            ${to_rust_ident(first_property)}: first,
+            ${to_rust_ident(second_property)}: second,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            let first = &self.${to_rust_ident(first_property)};
+            let second = &self.${to_rust_ident(second_property)};
+
+            first.to_css(dest)?;
+            if first != second {
+                dest.write_char(' ')?;
+                second.to_css(dest)?;
+            }
+            Ok(())
+        }
+    }
+</%call>
+</%def>
+
+<%def name="four_sides_shorthand(name, sub_property_pattern,
+                                 parser_function='crate::parser::Parse::parse',
+                                 allow_quirks='No', **kwargs)">
+    <% sub_properties=' '.join(sub_property_pattern % side for side in PHYSICAL_SIDES) %>
+    <%call expr="self.shorthand(name, sub_properties=sub_properties, **kwargs)">
+        #[allow(unused_imports)]
+        use crate::parser::Parse;
+        use crate::values::generics::rect::Rect;
+        #[allow(unused_imports)]
+        use crate::values::specified;
+
+        fn parse_value<'i, 't>(
+            context: &ParserContext,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<Longhands, ParseError<'i>> {
+            let rect = Rect::parse_with(context, input, |c, i| -> Result<
+                crate::properties::longhands::${to_rust_ident(sub_property_pattern % "top")}::SpecifiedValue,
+                ParseError<'i>
+            > {
+            % if allow_quirks != "No":
+                ${parser_function}_quirky(c, i, specified::AllowQuirks::${allow_quirks})
+            % else:
+                ${parser_function}(c, i)
+            % endif
+            })?;
+            Ok(expanded! {
+                % for index, side in enumerate(["top", "right", "bottom", "left"]):
+                    ${to_rust_ident(sub_property_pattern % side)}: rect.${index},
+                % endfor
+            })
+        }
+
+        impl<'a> ToCss for LonghandsToSerialize<'a> {
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+            where
+                W: Write,
+            {
+                let rect = Rect::new(
+                    % for side in ["top", "right", "bottom", "left"]:
+                    &self.${to_rust_ident(sub_property_pattern % side)},
+                    % endfor
+                );
+                rect.to_css(dest)
+            }
+        }
+    </%call>
+</%def>
+
+<%def name="logical_setter_helper(name)">
+    <%
+        side = None
+        size = None
+        corner = None
+        axis = None
+        maybe_side = [s for s in LOGICAL_SIDES if s in name]
+        maybe_size = [s for s in LOGICAL_SIZES if s in name]
+        maybe_corner = [s for s in LOGICAL_CORNERS if s in name]
+        maybe_axis = [s for s in LOGICAL_AXES if name.endswith(s)]
+        if len(maybe_side) == 1:
+            side = maybe_side[0]
+        elif len(maybe_size) == 1:
+            size = maybe_size[0]
+        elif len(maybe_corner) == 1:
+            corner = maybe_corner[0]
+        elif len(maybe_axis) == 1:
+            axis = maybe_axis[0]
+        def phys_ident(side, phy_side):
+            return to_rust_ident(to_phys(name, side, phy_side))
+    %>
+    % if side is not None:
+        use crate::logical_geometry::PhysicalSide;
+        match wm.${to_rust_ident(side)}_physical_side() {
+            % for phy_side in PHYSICAL_SIDES:
+                PhysicalSide::${phy_side.title()} => {
+                    ${caller.inner(physical_ident=phys_ident(side, phy_side))}
+                }
+            % endfor
+        }
+    % elif corner is not None:
+        use crate::logical_geometry::PhysicalCorner;
+        match wm.${to_rust_ident(corner)}_physical_corner() {
+            % for phy_corner in PHYSICAL_CORNERS:
+                PhysicalCorner::${to_camel_case(phy_corner)} => {
+                    ${caller.inner(physical_ident=phys_ident(corner, phy_corner))}
+                }
+            % endfor
+        }
+    % elif size is not None:
+        <%
+            # (horizontal, vertical)
+            physical_size = ("height", "width")
+            if size == "inline-size":
+                physical_size = ("width", "height")
+        %>
+        if wm.is_vertical() {
+            ${caller.inner(physical_ident=phys_ident(size, physical_size[1]))}
+        } else {
+            ${caller.inner(physical_ident=phys_ident(size, physical_size[0]))}
+        }
+    % elif axis is not None:
+        <%
+            if axis == "inline":
+                me, other = "x", "y"
+            else:
+                assert(axis == "block")
+                me, other = "y", "x"
+        %>
+        if wm.is_vertical() {
+            ${caller.inner(physical_ident=phys_ident(axis, other))}
+        } else {
+            ${caller.inner(physical_ident=phys_ident(axis, me))}
+        }
+    % else:
+        <% raise Exception("Don't know what to do with logical property %s" % name) %>
+    % endif
+</%def>
+
+<%def name="logical_setter(name)">
+    /// Set the appropriate physical property for ${name} given a writing mode.
+    pub fn set_${to_rust_ident(name)}(&mut self,
+                                      v: longhands::${to_rust_ident(name)}::computed_value::T,
+                                      wm: WritingMode) {
+        <%self:logical_setter_helper name="${name}">
+            <%def name="inner(physical_ident)">
+                self.set_${physical_ident}(v)
+            </%def>
+        </%self:logical_setter_helper>
+    }
+
+    /// Copy the appropriate physical property from another struct for ${name}
+    /// given a writing mode.
+    pub fn copy_${to_rust_ident(name)}_from(&mut self,
+                                            other: &Self,
+                                            wm: WritingMode) {
+        <%self:logical_setter_helper name="${name}">
+            <%def name="inner(physical_ident)">
+                self.copy_${physical_ident}_from(other)
+            </%def>
+        </%self:logical_setter_helper>
+    }
+
+    /// Copy the appropriate physical property from another struct for ${name}
+    /// given a writing mode.
+    pub fn reset_${to_rust_ident(name)}(&mut self,
+                                        other: &Self,
+                                        wm: WritingMode) {
+        self.copy_${to_rust_ident(name)}_from(other, wm)
+    }
+
+    /// Get the computed value for the appropriate physical property for
+    /// ${name} given a writing mode.
+    pub fn clone_${to_rust_ident(name)}(&self, wm: WritingMode)
+        -> longhands::${to_rust_ident(name)}::computed_value::T {
+    <%self:logical_setter_helper name="${name}">
+        <%def name="inner(physical_ident)">
+            self.clone_${physical_ident}()
+        </%def>
+    </%self:logical_setter_helper>
+    }
+</%def>
diff --git a/servo/components/style/properties/helpers/animated_properties.mako.rs b/servo/components/style/properties/helpers/animated_properties.mako.rs
new file mode 100644
index 0000000000..f1159ac4ec
--- /dev/null
+++ b/servo/components/style/properties/helpers/animated_properties.mako.rs
@@ -0,0 +1,728 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<%
+    from data import to_idl_name, SYSTEM_FONT_LONGHANDS, to_camel_case
+    from itertools import groupby
+%>
+
+#[cfg(feature = "gecko")] use crate::gecko_bindings::structs::nsCSSPropertyID;
+use crate::properties::{CSSWideKeyword, PropertyDeclaration, NonCustomPropertyIterator};
+use crate::properties::longhands;
+use crate::properties::longhands::visibility::computed_value::T as Visibility;
+use crate::properties::LonghandId;
+use servo_arc::Arc;
+use std::ptr;
+use std::mem;
+use fxhash::FxHashMap;
+use super::ComputedValues;
+use crate::values::animated::{Animate, Procedure, ToAnimatedValue, ToAnimatedZero};
+use crate::values::animated::effects::AnimatedFilter;
+#[cfg(feature = "gecko")] use crate::values::computed::TransitionProperty;
+use crate::values::computed::{ClipRect, Context};
+use crate::values::computed::ToComputedValue;
+use crate::values::distance::{ComputeSquaredDistance, SquaredDistance};
+use crate::values::generics::effects::Filter;
+use void::{self, Void};
+
+/// Convert nsCSSPropertyID to TransitionProperty
+#[cfg(feature = "gecko")]
+#[allow(non_upper_case_globals)]
+impl From<nsCSSPropertyID> for TransitionProperty {
+    fn from(property: nsCSSPropertyID) -> TransitionProperty {
+        use crate::properties::ShorthandId;
+        match property {
+            % for prop in data.longhands:
+            ${prop.nscsspropertyid()} => {
+                TransitionProperty::Longhand(LonghandId::${prop.camel_case})
+            }
+            % endfor
+            % for prop in data.shorthands_except_all():
+            ${prop.nscsspropertyid()} => {
+                TransitionProperty::Shorthand(ShorthandId::${prop.camel_case})
+            }
+            % endfor
+            nsCSSPropertyID::eCSSPropertyExtra_all_properties => {
+                TransitionProperty::Shorthand(ShorthandId::All)
+            }
+            _ => {
+                panic!("non-convertible nsCSSPropertyID")
+            }
+        }
+    }
+}
+
+/// A collection of AnimationValue that were composed on an element.
+/// This HashMap stores the values that are the last AnimationValue to be
+/// composed for each TransitionProperty.
+pub type AnimationValueMap = FxHashMap<LonghandId, AnimationValue>;
+
+/// An enum to represent a single computed value belonging to an animated
+/// property in order to be interpolated with another one. When interpolating,
+/// both values need to belong to the same property.
+///
+/// FIXME: We need to add a path for custom properties, but that's trivial after
+/// this (is a similar path to that of PropertyDeclaration).
+#[derive(Debug, MallocSizeOf)]
+#[repr(u16)]
+pub enum AnimationValue {
+    % for prop in data.longhands:
+    /// `${prop.name}`
+    % if prop.animatable and not prop.logical:
+    ${prop.camel_case}(${prop.animated_type()}),
+    % else:
+    ${prop.camel_case}(Void),
+    % endif
+    % endfor
+}
+
+<%
+    animated = []
+    unanimated = []
+    animated_with_logical = []
+    for prop in data.longhands:
+        if prop.animatable:
+            animated_with_logical.append(prop)
+        if prop.animatable and not prop.logical:
+            animated.append(prop)
+        else:
+            unanimated.append(prop)
+%>
+
+#[repr(C)]
+struct AnimationValueVariantRepr<T> {
+    tag: u16,
+    value: T
+}
+
+impl Clone for AnimationValue {
+    #[inline]
+    fn clone(&self) -> Self {
+        use self::AnimationValue::*;
+
+        <%
+            [copy, others] = [list(g) for _, g in groupby(animated, key=lambda x: not x.specified_is_copy())]
+        %>
+
+        let self_tag = unsafe { *(self as *const _ as *const u16) };
+        if self_tag <= LonghandId::${copy[-1].camel_case} as u16 {
+            #[derive(Clone, Copy)]
+            #[repr(u16)]
+            enum CopyVariants {
+                % for prop in copy:
+                _${prop.camel_case}(${prop.animated_type()}),
+                % endfor
+            }
+
+            unsafe {
+                let mut out = mem::MaybeUninit::uninit();
+                ptr::write(
+                    out.as_mut_ptr() as *mut CopyVariants,
+                    *(self as *const _ as *const CopyVariants),
+                );
+                return out.assume_init();
+            }
+        }
+
+        match *self {
+            % for ty, props in groupby(others, key=lambda x: x.animated_type()):
+            <% props = list(props) %>
+            ${" |\n".join("{}(ref value)".format(prop.camel_case) for prop in props)} => {
+                % if len(props) == 1:
+                ${props[0].camel_case}(value.clone())
+                % else:
+                unsafe {
+                    let mut out = mem::MaybeUninit::uninit();
+                    ptr::write(
+                        out.as_mut_ptr() as *mut AnimationValueVariantRepr<${ty}>,
+                        AnimationValueVariantRepr {
+                            tag: *(self as *const _ as *const u16),
+                            value: value.clone(),
+                        },
+                    );
+                    out.assume_init()
+                }
+                % endif
+            }
+            % endfor
+            _ => unsafe { debug_unreachable!() }
+        }
+    }
+}
+
+impl PartialEq for AnimationValue {
+    #[inline]
+    fn eq(&self, other: &Self) -> bool {
+        use self::AnimationValue::*;
+
+        unsafe {
+            let this_tag = *(self as *const _ as *const u16);
+            let other_tag = *(other as *const _ as *const u16);
+            if this_tag != other_tag {
+                return false;
+            }
+
+            match *self {
+                % for ty, props in groupby(animated, key=lambda x: x.animated_type()):
+                ${" |\n".join("{}(ref this)".format(prop.camel_case) for prop in props)} => {
+                    let other_repr =
+                        &*(other as *const _ as *const AnimationValueVariantRepr<${ty}>);
+                    *this == other_repr.value
+                }
+                % endfor
+                ${" |\n".join("{}(void)".format(prop.camel_case) for prop in unanimated)} => {
+                    void::unreachable(void)
+                }
+            }
+        }
+    }
+}
+
+impl AnimationValue {
+    /// Returns the longhand id this animated value corresponds to.
+    #[inline]
+    pub fn id(&self) -> LonghandId {
+        let id = unsafe { *(self as *const _ as *const LonghandId) };
+        debug_assert_eq!(id, match *self {
+            % for prop in data.longhands:
+            % if prop.animatable and not prop.logical:
+            AnimationValue::${prop.camel_case}(..) => LonghandId::${prop.camel_case},
+            % else:
+            AnimationValue::${prop.camel_case}(void) => void::unreachable(void),
+            % endif
+            % endfor
+        });
+        id
+    }
+
+    /// "Uncompute" this animation value in order to be used inside the CSS
+    /// cascade.
+    pub fn uncompute(&self) -> PropertyDeclaration {
+        use crate::properties::longhands;
+        use self::AnimationValue::*;
+
+        use super::PropertyDeclarationVariantRepr;
+
+        match *self {
+            <% keyfunc = lambda x: (x.base_type(), x.specified_type(), x.boxed, x.is_animatable_with_computed_value) %>
+            % for (ty, specified, boxed, computed), props in groupby(animated, key=keyfunc):
+            <% props = list(props) %>
+            ${" |\n".join("{}(ref value)".format(prop.camel_case) for prop in props)} => {
+                % if not computed:
+                let ref value = ToAnimatedValue::from_animated_value(value.clone());
+                % endif
+                let value = ${ty}::from_computed_value(&value);
+                % if boxed:
+                let value = Box::new(value);
+                % endif
+                % if len(props) == 1:
+                PropertyDeclaration::${props[0].camel_case}(value)
+                % else:
+                unsafe {
+                    let mut out = mem::MaybeUninit::uninit();
+                    ptr::write(
+                        out.as_mut_ptr() as *mut PropertyDeclarationVariantRepr<${specified}>,
+                        PropertyDeclarationVariantRepr {
+                            tag: *(self as *const _ as *const u16),
+                            value,
+                        },
+                    );
+                    out.assume_init()
+                }
+                % endif
+            }
+            % endfor
+            ${" |\n".join("{}(void)".format(prop.camel_case) for prop in unanimated)} => {
+                void::unreachable(void)
+            }
+        }
+    }
+
+    /// Construct an AnimationValue from a property declaration.
+    pub fn from_declaration(
+        decl: &PropertyDeclaration,
+        context: &mut Context,
+        extra_custom_properties: Option<<&Arc<crate::custom_properties::CustomPropertiesMap>>,
+        initial: &ComputedValues,
+    ) -> Option<Self> {
+        use super::PropertyDeclarationVariantRepr;
+
+        <%
+            keyfunc = lambda x: (
+                x.specified_type(),
+                x.animated_type(),
+                x.boxed,
+                not x.is_animatable_with_computed_value,
+                x.style_struct.inherited,
+                x.ident in SYSTEM_FONT_LONGHANDS and engine == "gecko",
+            )
+        %>
+
+        let animatable = match *decl {
+            % for (specified_ty, ty, boxed, to_animated, inherit, system), props in groupby(animated_with_logical, key=keyfunc):
+            ${" |\n".join("PropertyDeclaration::{}(ref value)".format(prop.camel_case) for prop in props)} => {
+                let decl_repr = unsafe {
+                    &*(decl as *const _ as *const PropertyDeclarationVariantRepr<${specified_ty}>)
+                };
+                let longhand_id = unsafe {
+                    *(&decl_repr.tag as *const u16 as *const LonghandId)
+                };
+                % if inherit:
+                context.for_non_inherited_property = None;
+                % else:
+                context.for_non_inherited_property = Some(longhand_id);
+                % endif
+                % if system:
+                if let Some(sf) = value.get_system() {
+                    longhands::system_font::resolve_system_font(sf, context)
+                }
+                % endif
+                % if boxed:
+                let value = (**value).to_computed_value(context);
+                % else:
+                let value = value.to_computed_value(context);
+                % endif
+                % if to_animated:
+                let value = value.to_animated_value();
+                % endif
+
+                unsafe {
+                    let mut out = mem::MaybeUninit::uninit();
+                    ptr::write(
+                        out.as_mut_ptr() as *mut AnimationValueVariantRepr<${ty}>,
+                        AnimationValueVariantRepr {
+                            tag: longhand_id.to_physical(context.builder.writing_mode) as u16,
+                            value,
+                        },
+                    );
+                    out.assume_init()
+                }
+            }
+            % endfor
+            PropertyDeclaration::CSSWideKeyword(ref declaration) => {
+                match declaration.id {
+                    // We put all the animatable properties first in the hopes
+                    // that it might increase match locality.
+                    % for prop in data.longhands:
+                    % if prop.animatable:
+                    LonghandId::${prop.camel_case} => {
+                        // FIXME(emilio, bug 1533327): I think revert (and
+                        // revert-layer) handling is not fine here, but what to
+                        // do instead?
+                        //
+                        // Seems we'd need the computed value as if it was
+                        // revert, somehow. Treating it as `unset` seems fine
+                        // for now...
+                        let style_struct = match declaration.keyword {
+                            % if not prop.style_struct.inherited:
+                            CSSWideKeyword::Revert |
+                            CSSWideKeyword::RevertLayer |
+                            CSSWideKeyword::Unset |
+                            % endif
+                            CSSWideKeyword::Initial => {
+                                initial.get_${prop.style_struct.name_lower}()
+                            },
+                            % if prop.style_struct.inherited:
+                            CSSWideKeyword::Revert |
+                            CSSWideKeyword::RevertLayer |
+                            CSSWideKeyword::Unset |
+                            % endif
+                            CSSWideKeyword::Inherit => {
+                                context.builder
+                                       .get_parent_${prop.style_struct.name_lower}()
+                            },
+                        };
+                        let computed = style_struct
+                        % if prop.logical:
+                            .clone_${prop.ident}(context.builder.writing_mode);
+                        % else:
+                            .clone_${prop.ident}();
+                        % endif
+
+                        % if not prop.is_animatable_with_computed_value:
+                        let computed = computed.to_animated_value();
+                        % endif
+
+                        % if prop.logical:
+                        let wm = context.builder.writing_mode;
+                        <%helpers:logical_setter_helper name="${prop.name}">
+                        <%def name="inner(physical_ident)">
+                            AnimationValue::${to_camel_case(physical_ident)}(computed)
+                        </%def>
+                        </%helpers:logical_setter_helper>
+                        % else:
+                            AnimationValue::${prop.camel_case}(computed)
+                        % endif
+                    },
+                    % endif
+                    % endfor
+                    % for prop in data.longhands:
+                    % if not prop.animatable:
+                    LonghandId::${prop.camel_case} => return None,
+                    % endif
+                    % endfor
+                }
+            },
+            PropertyDeclaration::WithVariables(ref declaration) => {
+                let mut cache = Default::default();
+                let substituted = {
+                    let custom_properties =
+                        extra_custom_properties.or_else(|| context.style().custom_properties());
+
+                    declaration.value.substitute_variables(
+                        declaration.id,
+                        context.builder.writing_mode,
+                        custom_properties,
+                        context.quirks_mode,
+                        context.device(),
+                        &mut cache,
+                    )
+                };
+                return AnimationValue::from_declaration(
+                    &substituted,
+                    context,
+                    extra_custom_properties,
+                    initial,
+                )
+            },
+            _ => return None // non animatable properties will get included because of shorthands. ignore.
+        };
+        Some(animatable)
+    }
+
+    /// Get an AnimationValue for an AnimatableLonghand from a given computed values.
+    pub fn from_computed_values(
+        property: LonghandId,
+        style: &ComputedValues,
+    ) -> Option<Self> {
+        let property = property.to_physical(style.writing_mode);
+        Some(match property {
+            % for prop in data.longhands:
+            % if prop.animatable and not prop.logical:
+            LonghandId::${prop.camel_case} => {
+                let computed = style.clone_${prop.ident}();
+                AnimationValue::${prop.camel_case}(
+                % if prop.is_animatable_with_computed_value:
+                    computed
+                % else:
+                    computed.to_animated_value()
+                % endif
+                )
+            }
+            % endif
+            % endfor
+            _ => return None,
+        })
+    }
+
+    /// Update `style` with the value of this `AnimationValue`.
+    ///
+    /// SERVO ONLY: This doesn't properly handle things like updating 'em' units
+    /// when animated font-size.
+    #[cfg(feature = "servo")]
+    pub fn set_in_style_for_servo(&self, style: &mut ComputedValues) {
+        match self {
+            % for prop in data.longhands:
+            % if prop.animatable and not prop.logical:
+            AnimationValue::${prop.camel_case}(ref value) => {
+                % if not prop.is_animatable_with_computed_value:
+                let value: longhands::${prop.ident}::computed_value::T =
+                    ToAnimatedValue::from_animated_value(value.clone());
+                    style.mutate_${prop.style_struct.name_lower}().set_${prop.ident}(value);
+                % else:
+                    style.mutate_${prop.style_struct.name_lower}().set_${prop.ident}(value.clone());
+                % endif
+            }
+            % else:
+            AnimationValue::${prop.camel_case}(..) => unreachable!(),
+            % endif
+            % endfor
+        }
+    }
+
+    /// As above, but a stub for Gecko.
+    #[cfg(feature = "gecko")]
+    pub fn set_in_style_for_servo(&self, _: &mut ComputedValues) {
+    }
+}
+
+fn animate_discrete<T: Clone>(this: &T, other: &T, procedure: Procedure) -> Result<T, ()> {
+    if let Procedure::Interpolate { progress } = procedure {
+        Ok(if progress < 0.5 { this.clone() } else { other.clone() })
+    } else {
+        Err(())
+    }
+}
+
+impl Animate for AnimationValue {
+    fn animate(&self, other: &Self, procedure: Procedure) -> Result<Self, ()> {
+        Ok(unsafe {
+            use self::AnimationValue::*;
+
+            let this_tag = *(self as *const _ as *const u16);
+            let other_tag = *(other as *const _ as *const u16);
+            if this_tag != other_tag {
+                panic!("Unexpected AnimationValue::animate call");
+            }
+
+            match *self {
+                <% keyfunc = lambda x: (x.animated_type(), x.animation_value_type == "discrete") %>
+                % for (ty, discrete), props in groupby(animated, key=keyfunc):
+                ${" |\n".join("{}(ref this)".format(prop.camel_case) for prop in props)} => {
+                    let other_repr =
+                        &*(other as *const _ as *const AnimationValueVariantRepr<${ty}>);
+                    % if discrete:
+                    let value = animate_discrete(this, &other_repr.value, procedure)?;
+                    % else:
+                    let value = this.animate(&other_repr.value, procedure)?;
+                    % endif
+
+                    let mut out = mem::MaybeUninit::uninit();
+                    ptr::write(
+                        out.as_mut_ptr() as *mut AnimationValueVariantRepr<${ty}>,
+                        AnimationValueVariantRepr {
+                            tag: this_tag,
+                            value,
+                        },
+                    );
+                    out.assume_init()
+                }
+                % endfor
+                ${" |\n".join("{}(void)".format(prop.camel_case) for prop in unanimated)} => {
+                    void::unreachable(void)
+                }
+            }
+        })
+    }
+}
+
+<%
+    nondiscrete = []
+    for prop in animated:
+        if prop.animation_value_type != "discrete":
+            nondiscrete.append(prop)
+%>
+
+impl ComputeSquaredDistance for AnimationValue {
+    fn compute_squared_distance(&self, other: &Self) -> Result<SquaredDistance, ()> {
+        unsafe {
+            use self::AnimationValue::*;
+
+            let this_tag = *(self as *const _ as *const u16);
+            let other_tag = *(other as *const _ as *const u16);
+            if this_tag != other_tag {
+                panic!("Unexpected AnimationValue::compute_squared_distance call");
+            }
+
+            match *self {
+                % for ty, props in groupby(nondiscrete, key=lambda x: x.animated_type()):
+                ${" |\n".join("{}(ref this)".format(prop.camel_case) for prop in props)} => {
+                    let other_repr =
+                        &*(other as *const _ as *const AnimationValueVariantRepr<${ty}>);
+
+                    this.compute_squared_distance(&other_repr.value)
+                }
+                % endfor
+                _ => Err(()),
+            }
+        }
+    }
+}
+
+impl ToAnimatedZero for AnimationValue {
+    #[inline]
+    fn to_animated_zero(&self) -> Result<Self, ()> {
+        match *self {
+            % for prop in data.longhands:
+            % if prop.animatable and not prop.logical and prop.animation_value_type != "discrete":
+            AnimationValue::${prop.camel_case}(ref base) => {
+                Ok(AnimationValue::${prop.camel_case}(base.to_animated_zero()?))
+            },
+            % endif
+            % endfor
+            _ => Err(()),
+        }
+    }
+}
+
+/// <https://drafts.csswg.org/web-animations-1/#animating-visibility>
+impl Animate for Visibility {
+    #[inline]
+    fn animate(&self, other: &Self, procedure: Procedure) -> Result<Self, ()> {
+        match procedure {
+            Procedure::Interpolate { .. } => {
+                let (this_weight, other_weight) = procedure.weights();
+                match (*self, *other) {
+                    (Visibility::Visible, _) => {
+                        Ok(if this_weight > 0.0 { *self } else { *other })
+                    },
+                    (_, Visibility::Visible) => {
+                        Ok(if other_weight > 0.0 { *other } else { *self })
+                    },
+                    _ => Err(()),
+                }
+            },
+            _ => Err(()),
+        }
+    }
+}
+
+impl ComputeSquaredDistance for Visibility {
+    #[inline]
+    fn compute_squared_distance(&self, other: &Self) -> Result<SquaredDistance, ()> {
+        Ok(SquaredDistance::from_sqrt(if *self == *other { 0. } else { 1. }))
+    }
+}
+
+impl ToAnimatedZero for Visibility {
+    #[inline]
+    fn to_animated_zero(&self) -> Result<Self, ()> {
+        Err(())
+    }
+}
+
+/// <https://drafts.csswg.org/css-transitions/#animtype-rect>
+impl Animate for ClipRect {
+    #[inline]
+    fn animate(&self, other: &Self, procedure: Procedure) -> Result<Self, ()> {
+        use crate::values::computed::LengthOrAuto;
+        let animate_component = |this: &LengthOrAuto, other: &LengthOrAuto| {
+            let result = this.animate(other, procedure)?;
+            if let Procedure::Interpolate { .. } = procedure {
+                return Ok(result);
+            }
+            if result.is_auto() {
+                // FIXME(emilio): Why? A couple SMIL tests fail without this,
+                // but it seems extremely fishy.
+                return Err(());
+            }
+            Ok(result)
+        };
+
+        Ok(ClipRect {
+            top: animate_component(&self.top, &other.top)?,
+            right: animate_component(&self.right, &other.right)?,
+            bottom: animate_component(&self.bottom, &other.bottom)?,
+            left: animate_component(&self.left, &other.left)?,
+        })
+    }
+}
+
+<%
+    FILTER_FUNCTIONS = [ 'Blur', 'Brightness', 'Contrast', 'Grayscale',
+                         'HueRotate', 'Invert', 'Opacity', 'Saturate',
+                         'Sepia' ]
+%>
+
+/// <https://drafts.fxtf.org/filters/#animation-of-filters>
+impl Animate for AnimatedFilter {
+    fn animate(
+        &self,
+        other: &Self,
+        procedure: Procedure,
+    ) -> Result<Self, ()> {
+        use crate::values::animated::animate_multiplicative_factor;
+        match (self, other) {
+            % for func in ['Blur', 'Grayscale', 'HueRotate', 'Invert', 'Sepia']:
+            (&Filter::${func}(ref this), &Filter::${func}(ref other)) => {
+                Ok(Filter::${func}(this.animate(other, procedure)?))
+            },
+            % endfor
+            % for func in ['Brightness', 'Contrast', 'Opacity', 'Saturate']:
+            (&Filter::${func}(this), &Filter::${func}(other)) => {
+                Ok(Filter::${func}(animate_multiplicative_factor(this, other, procedure)?))
+            },
+            % endfor
+            % if engine == "gecko":
+            (&Filter::DropShadow(ref this), &Filter::DropShadow(ref other)) => {
+                Ok(Filter::DropShadow(this.animate(other, procedure)?))
+            },
+            % endif
+            _ => Err(()),
+        }
+    }
+}
+
+/// <http://dev.w3.org/csswg/css-transforms/#none-transform-animation>
+impl ToAnimatedZero for AnimatedFilter {
+    fn to_animated_zero(&self) -> Result<Self, ()> {
+        match *self {
+            % for func in ['Blur', 'Grayscale', 'HueRotate', 'Invert', 'Sepia']:
+            Filter::${func}(ref this) => Ok(Filter::${func}(this.to_animated_zero()?)),
+            % endfor
+            % for func in ['Brightness', 'Contrast', 'Opacity', 'Saturate']:
+            Filter::${func}(_) => Ok(Filter::${func}(1.)),
+            % endfor
+            % if engine == "gecko":
+            Filter::DropShadow(ref this) => Ok(Filter::DropShadow(this.to_animated_zero()?)),
+            % endif
+            _ => Err(()),
+        }
+    }
+}
+
+/// An iterator over all the properties that transition on a given style.
+pub struct TransitionPropertyIterator<'a> {
+    style: &'a ComputedValues,
+    index_range: core::ops::Range<usize>,
+    longhand_iterator: Option<NonCustomPropertyIterator<LonghandId>>,
+}
+
+impl<'a> TransitionPropertyIterator<'a> {
+    /// Create a `TransitionPropertyIterator` for the given style.
+    pub fn from_style(style: &'a ComputedValues) -> Self {
+        Self {
+            style,
+            index_range: 0..style.get_ui().transition_property_count(),
+            longhand_iterator: None,
+        }
+    }
+}
+
+/// A single iteration of the TransitionPropertyIterator.
+pub struct TransitionPropertyIteration {
+    /// The id of the longhand for this property.
+    pub longhand_id: LonghandId,
+
+    /// The index of this property in the list of transition properties for this
+    /// iterator's style.
+    pub index: usize,
+}
+
+impl<'a> Iterator for TransitionPropertyIterator<'a> {
+    type Item = TransitionPropertyIteration;
+
+    fn next(&mut self) -> Option<Self::Item> {
+        use crate::values::computed::TransitionProperty;
+        loop {
+            if let Some(ref mut longhand_iterator) = self.longhand_iterator {
+                if let Some(longhand_id) = longhand_iterator.next() {
+                    return Some(TransitionPropertyIteration {
+                        longhand_id,
+                        index: self.index_range.start - 1,
+                    });
+                }
+                self.longhand_iterator = None;
+            }
+
+            let index = self.index_range.next()?;
+            match self.style.get_ui().transition_property_at(index) {
+                TransitionProperty::Longhand(longhand_id) => {
+                    return Some(TransitionPropertyIteration {
+                        longhand_id,
+                        index,
+                    })
+                }
+                // In the other cases, we set up our state so that we are ready to
+                // compute the next value of the iterator and then loop (equivalent
+                // to calling self.next()).
+                TransitionProperty::Shorthand(ref shorthand_id) =>
+                    self.longhand_iterator = Some(shorthand_id.longhands()),
+                TransitionProperty::Custom(..) | TransitionProperty::Unsupported(..) => {}
+            }
+        }
+    }
+}
diff --git a/servo/components/style/properties/longhands/background.mako.rs b/servo/components/style/properties/longhands/background.mako.rs
new file mode 100644
index 0000000000..76b71b12cd
--- /dev/null
+++ b/servo/components/style/properties/longhands/background.mako.rs
@@ -0,0 +1,116 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<% data.new_style_struct("Background", inherited=False) %>
+
+${helpers.predefined_type(
+    "background-color",
+    "Color",
+    "computed::Color::transparent()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="SpecifiedValue::transparent()",
+    spec="https://drafts.csswg.org/css-backgrounds/#background-color",
+    animation_value_type="AnimatedColor",
+    ignored_when_colors_disabled=True,
+    allow_quirks="Yes",
+    flags="CAN_ANIMATE_ON_COMPOSITOR",
+)}
+
+${helpers.predefined_type(
+    "background-image",
+    "Image",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::Image::None",
+    initial_specified_value="specified::Image::None",
+    spec="https://drafts.csswg.org/css-backgrounds/#the-background-image",
+    vector="True",
+    animation_value_type="discrete",
+    ignored_when_colors_disabled="True",
+)}
+
+% for (axis, direction, initial) in [("x", "Horizontal", "left"), ("y", "Vertical", "top")]:
+    ${helpers.predefined_type(
+        "background-position-" + axis,
+        "position::" + direction + "Position",
+        "computed::LengthPercentage::zero_percent()",
+        engines="gecko servo-2013 servo-2020",
+        initial_specified_value="SpecifiedValue::initial_specified_value()",
+        spec="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-" + axis,
+        animation_value_type="ComputedValue",
+        vector=True,
+        vector_animation_type="repeatable_list",
+    )}
+% endfor
+
+${helpers.predefined_type(
+    "background-repeat",
+    "BackgroundRepeat",
+    "computed::BackgroundRepeat::repeat()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::BackgroundRepeat::repeat()",
+    animation_value_type="discrete",
+    vector=True,
+    spec="https://drafts.csswg.org/css-backgrounds/#the-background-repeat",
+)}
+
+${helpers.single_keyword(
+    "background-attachment",
+    "scroll" + (" fixed" if engine in ["gecko", "servo-2013"] else "") + (" local" if engine == "gecko" else ""),
+    engines="gecko servo-2013 servo-2020",
+    vector=True,
+    gecko_enum_prefix="StyleImageLayerAttachment",
+    spec="https://drafts.csswg.org/css-backgrounds/#the-background-attachment",
+    animation_value_type="discrete",
+)}
+
+${helpers.single_keyword(
+    "background-clip",
+    "border-box padding-box content-box",
+    engines="gecko servo-2013 servo-2020",
+    extra_gecko_values="text",
+    vector=True, extra_prefixes="webkit",
+    gecko_enum_prefix="StyleGeometryBox",
+    gecko_inexhaustive=True,
+    spec="https://drafts.csswg.org/css-backgrounds/#the-background-clip",
+    animation_value_type="discrete",
+)}
+
+${helpers.single_keyword(
+    "background-origin",
+    "padding-box border-box content-box",
+    engines="gecko servo-2013 servo-2020",
+    vector=True, extra_prefixes="webkit",
+    gecko_enum_prefix="StyleGeometryBox",
+    gecko_inexhaustive=True,
+    spec="https://drafts.csswg.org/css-backgrounds/#the-background-origin",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "background-size",
+    "BackgroundSize",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::BackgroundSize::auto()",
+    initial_specified_value="specified::BackgroundSize::auto()",
+    spec="https://drafts.csswg.org/css-backgrounds/#the-background-size",
+    vector=True,
+    vector_animation_type="repeatable_list",
+    animation_value_type="BackgroundSizeList",
+    extra_prefixes="webkit")}
+
+// https://drafts.fxtf.org/compositing/#background-blend-mode
+${helpers.single_keyword(
+    "background-blend-mode",
+    """normal multiply screen overlay darken lighten color-dodge
+    color-burn hard-light soft-light difference exclusion hue
+    saturation color luminosity""",
+    gecko_enum_prefix="StyleBlend",
+    vector=True,
+    engines="gecko",
+    animation_value_type="discrete",
+    gecko_inexhaustive=True,
+    spec="https://drafts.fxtf.org/compositing/#background-blend-mode",
+)}
diff --git a/servo/components/style/properties/longhands/border.mako.rs b/servo/components/style/properties/longhands/border.mako.rs
new file mode 100644
index 0000000000..299b330b66
--- /dev/null
+++ b/servo/components/style/properties/longhands/border.mako.rs
@@ -0,0 +1,159 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import Keyword, Method, ALL_CORNERS, PHYSICAL_SIDES, ALL_SIDES, maybe_moz_logical_alias %>
+
+<% data.new_style_struct("Border", inherited=False,
+                   additional_methods=[Method("border_" + side + "_has_nonzero_width",
+                                              "bool") for side in ["top", "right", "bottom", "left"]]) %>
+<%
+    def maybe_logical_spec(side, kind):
+        if side[1]: # if it is logical
+            return "https://drafts.csswg.org/css-logical-props/#propdef-border-%s-%s" % (side[0], kind)
+        else:
+            return "https://drafts.csswg.org/css-backgrounds/#border-%s-%s" % (side[0], kind)
+%>
+% for side in ALL_SIDES:
+    <%
+        side_name = side[0]
+        is_logical = side[1]
+    %>
+    ${helpers.predefined_type(
+        "border-%s-color" % side_name, "Color",
+        "computed_value::T::currentcolor()",
+        engines="gecko servo-2013 servo-2020",
+        aliases=maybe_moz_logical_alias(engine, side, "-moz-border-%s-color"),
+        spec=maybe_logical_spec(side, "color"),
+        animation_value_type="AnimatedColor",
+        logical=is_logical,
+        logical_group="border-color",
+        allow_quirks="No" if is_logical else "Yes",
+        ignored_when_colors_disabled=True,
+    )}
+
+    ${helpers.predefined_type(
+        "border-%s-style" % side_name, "BorderStyle",
+        "specified::BorderStyle::None",
+        engines="gecko servo-2013 servo-2020",
+        aliases=maybe_moz_logical_alias(engine, side, "-moz-border-%s-style"),
+        spec=maybe_logical_spec(side, "style"),
+        animation_value_type="discrete" if not is_logical else "none",
+        logical=is_logical,
+        logical_group="border-style",
+    )}
+
+    ${helpers.predefined_type(
+        "border-%s-width" % side_name,
+        "BorderSideWidth",
+        "app_units::Au::from_px(3)",
+        engines="gecko servo-2013 servo-2020",
+        aliases=maybe_moz_logical_alias(engine, side, "-moz-border-%s-width"),
+        spec=maybe_logical_spec(side, "width"),
+        animation_value_type="NonNegativeLength",
+        logical=is_logical,
+        logical_group="border-width",
+        allow_quirks="No" if is_logical else "Yes",
+        servo_restyle_damage="reflow rebuild_and_reflow_inline"
+    )}
+% endfor
+
+% for corner in ALL_CORNERS:
+    <%
+        corner_name = corner[0]
+        is_logical = corner[1]
+        if is_logical:
+            prefixes = None
+        else:
+            prefixes = "webkit"
+    %>
+    ${helpers.predefined_type(
+        "border-%s-radius" % corner_name,
+        "BorderCornerRadius",
+        "computed::BorderCornerRadius::zero()",
+        "parse",
+        engines="gecko servo-2013 servo-2020",
+        extra_prefixes=prefixes,
+        spec=maybe_logical_spec(corner, "radius"),
+        boxed=True,
+        animation_value_type="BorderCornerRadius",
+        logical_group="border-radius",
+        logical=is_logical,
+    )}
+% endfor
+
+${helpers.single_keyword(
+    "box-decoration-break",
+    "slice clone",
+    engines="gecko",
+    gecko_enum_prefix="StyleBoxDecorationBreak",
+    spec="https://drafts.csswg.org/css-break/#propdef-box-decoration-break",
+    animation_value_type="discrete",
+)}
+
+${helpers.single_keyword(
+    "-moz-float-edge",
+    "content-box margin-box",
+    engines="gecko",
+    gecko_ffi_name="mFloatEdge",
+    gecko_enum_prefix="StyleFloatEdge",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-float-edge)",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "border-image-source",
+    "Image",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::Image::None",
+    initial_specified_value="specified::Image::None",
+    spec="https://drafts.csswg.org/css-backgrounds/#the-background-image",
+    vector=False,
+    animation_value_type="discrete",
+    boxed=engine == "servo-2013",
+    ignored_when_colors_disabled=True
+)}
+
+${helpers.predefined_type(
+    "border-image-outset",
+    "NonNegativeLengthOrNumberRect",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="generics::rect::Rect::all(computed::NonNegativeLengthOrNumber::zero())",
+    initial_specified_value="generics::rect::Rect::all(specified::NonNegativeLengthOrNumber::zero())",
+    spec="https://drafts.csswg.org/css-backgrounds/#border-image-outset",
+    animation_value_type="NonNegativeLengthOrNumberRect",
+    boxed=True,
+)}
+
+${helpers.predefined_type(
+    "border-image-repeat",
+    "BorderImageRepeat",
+    "computed::BorderImageRepeat::stretch()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::BorderImageRepeat::stretch()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-backgrounds/#the-border-image-repeat",
+)}
+
+${helpers.predefined_type(
+    "border-image-width",
+    "BorderImageWidth",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::BorderImageWidth::all(computed::BorderImageSideWidth::one())",
+    initial_specified_value="specified::BorderImageWidth::all(specified::BorderImageSideWidth::one())",
+    spec="https://drafts.csswg.org/css-backgrounds/#border-image-width",
+    animation_value_type="BorderImageWidth",
+    boxed=True,
+)}
+
+${helpers.predefined_type(
+    "border-image-slice",
+    "BorderImageSlice",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::BorderImageSlice::hundred_percent()",
+    initial_specified_value="specified::BorderImageSlice::hundred_percent()",
+    spec="https://drafts.csswg.org/css-backgrounds/#border-image-slice",
+    animation_value_type="BorderImageSlice",
+    boxed=True,
+)}
diff --git a/servo/components/style/properties/longhands/box.mako.rs b/servo/components/style/properties/longhands/box.mako.rs
new file mode 100644
index 0000000000..e8212a3296
--- /dev/null
+++ b/servo/components/style/properties/longhands/box.mako.rs
@@ -0,0 +1,587 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import ALL_AXES, Keyword, Method, to_rust_ident, to_camel_case%>
+
+<% data.new_style_struct("Box",
+                         inherited=False,
+                         gecko_name="Display") %>
+
+${helpers.predefined_type(
+    "display",
+    "Display",
+    "computed::Display::inline()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::Display::inline()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-display/#propdef-display",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.single_keyword(
+    "-moz-top-layer",
+    "none top",
+    engines="gecko",
+    gecko_enum_prefix="StyleTopLayer",
+    gecko_ffi_name="mTopLayer",
+    animation_value_type="none",
+    enabled_in="ua",
+    spec="Internal (not web-exposed)",
+)}
+
+// An internal-only property for elements in a top layer
+// https://fullscreen.spec.whatwg.org/#top-layer
+${helpers.single_keyword(
+    "-servo-top-layer",
+    "none top",
+    engines="servo-2013 servo-2020",
+    animation_value_type="none",
+    enabled_in="ua",
+    spec="Internal (not web-exposed)",
+)}
+
+<%helpers:single_keyword
+    name="position"
+    values="static absolute relative fixed ${'sticky' if engine in ['gecko', 'servo-2013'] else ''}"
+    engines="gecko servo-2013 servo-2020"
+    animation_value_type="discrete"
+    gecko_enum_prefix="StylePositionProperty"
+    spec="https://drafts.csswg.org/css-position/#position-property"
+    servo_restyle_damage="rebuild_and_reflow"
+>
+impl computed_value::T {
+    pub fn is_absolutely_positioned(self) -> bool {
+        matches!(self, Self::Absolute | Self::Fixed)
+    }
+    pub fn is_relative(self) -> bool {
+        self == Self::Relative
+    }
+}
+</%helpers:single_keyword>
+
+${helpers.predefined_type(
+    "float",
+    "Float",
+    "computed::Float::None",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    initial_specified_value="specified::Float::None",
+    spec="https://drafts.csswg.org/css-box/#propdef-float",
+    animation_value_type="discrete",
+    servo_restyle_damage="rebuild_and_reflow",
+    gecko_ffi_name="mFloat",
+)}
+
+${helpers.predefined_type(
+    "clear",
+    "Clear",
+    "computed::Clear::None",
+    engines="gecko servo-2013",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css2/#propdef-clear",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "vertical-align",
+    "VerticalAlign",
+    "computed::VerticalAlign::baseline()",
+    engines="gecko servo-2013",
+    animation_value_type="ComputedValue",
+    spec="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align",
+    servo_restyle_damage = "reflow",
+)}
+
+${helpers.predefined_type(
+    "baseline-source",
+    "BaselineSource",
+    "computed::BaselineSource::Auto",
+    engines="gecko servo-2013",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-inline-3/#baseline-source",
+    servo_restyle_damage = "reflow",
+)}
+
+// CSS 2.1, Section 11 - Visual effects
+
+${helpers.single_keyword(
+    "-servo-overflow-clip-box",
+    "padding-box content-box",
+    engines="servo-2013",
+    animation_value_type="none",
+    enabled_in="ua",
+    spec="Internal, not web-exposed, \
+          may be standardized in the future (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-box)",
+)}
+
+% for direction in ["inline", "block"]:
+    ${helpers.predefined_type(
+        "overflow-clip-box-" + direction,
+        "OverflowClipBox",
+        "computed::OverflowClipBox::PaddingBox",
+        engines="gecko",
+        enabled_in="ua",
+        gecko_pref="layout.css.overflow-clip-box.enabled",
+        animation_value_type="discrete",
+        spec="Internal, may be standardized in the future: \
+              https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-box",
+    )}
+% endfor
+
+% for (axis, logical) in ALL_AXES:
+    <% full_name = "overflow-{}".format(axis) %>
+    ${helpers.predefined_type(
+        full_name,
+        "Overflow",
+        "computed::Overflow::Visible",
+        engines="gecko servo-2013 servo-2020",
+        logical_group="overflow",
+        logical=logical,
+        animation_value_type="discrete",
+        spec="https://drafts.csswg.org/css-overflow-3/#propdef-{}".format(full_name),
+        servo_restyle_damage = "reflow",
+        gecko_pref="layout.css.overflow-logical.enabled" if logical else None,
+    )}
+% endfor
+
+${helpers.predefined_type(
+    "overflow-anchor",
+    "OverflowAnchor",
+    "computed::OverflowAnchor::Auto",
+    engines="gecko",
+    initial_specified_value="specified::OverflowAnchor::Auto",
+    gecko_pref="layout.css.scroll-anchoring.enabled",
+    spec="https://drafts.csswg.org/css-scroll-anchoring/#exclusion-api",
+    animation_value_type="discrete",
+)}
+
+<% transform_extra_prefixes = "moz:layout.css.prefixes.transforms webkit" %>
+
+${helpers.predefined_type(
+    "transform",
+    "Transform",
+    "generics::transform::Transform::none()",
+    engines="gecko servo-2013 servo-2020",
+    extra_prefixes=transform_extra_prefixes,
+    animation_value_type="ComputedValue",
+    flags="CAN_ANIMATE_ON_COMPOSITOR",
+    spec="https://drafts.csswg.org/css-transforms/#propdef-transform",
+    servo_restyle_damage="reflow_out_of_flow",
+)}
+
+${helpers.predefined_type(
+    "rotate",
+    "Rotate",
+    "generics::transform::Rotate::None",
+    engines="gecko servo-2013",
+    animation_value_type="ComputedValue",
+    boxed=True,
+    flags="CAN_ANIMATE_ON_COMPOSITOR",
+    gecko_pref="layout.css.individual-transform.enabled",
+    spec="https://drafts.csswg.org/css-transforms-2/#individual-transforms",
+    servo_restyle_damage = "reflow_out_of_flow",
+)}
+
+${helpers.predefined_type(
+    "scale",
+    "Scale",
+    "generics::transform::Scale::None",
+    engines="gecko servo-2013",
+    animation_value_type="ComputedValue",
+    boxed=True,
+    flags="CAN_ANIMATE_ON_COMPOSITOR",
+    gecko_pref="layout.css.individual-transform.enabled",
+    spec="https://drafts.csswg.org/css-transforms-2/#individual-transforms",
+    servo_restyle_damage = "reflow_out_of_flow",
+)}
+
+${helpers.predefined_type(
+    "translate",
+    "Translate",
+    "generics::transform::Translate::None",
+    engines="gecko servo-2013",
+    animation_value_type="ComputedValue",
+    boxed=True,
+    flags="CAN_ANIMATE_ON_COMPOSITOR",
+    gecko_pref="layout.css.individual-transform.enabled",
+    spec="https://drafts.csswg.org/css-transforms-2/#individual-transforms",
+    servo_restyle_damage="reflow_out_of_flow",
+)}
+
+// Motion Path Module Level 1
+${helpers.predefined_type(
+    "offset-path",
+    "OffsetPath",
+    "computed::OffsetPath::none()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    gecko_pref="layout.css.motion-path.enabled",
+    flags="CAN_ANIMATE_ON_COMPOSITOR",
+    spec="https://drafts.fxtf.org/motion-1/#offset-path-property",
+    servo_restyle_damage="reflow_out_of_flow"
+)}
+
+// Motion Path Module Level 1
+${helpers.predefined_type(
+    "offset-distance",
+    "LengthPercentage",
+    "computed::LengthPercentage::zero()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    gecko_pref="layout.css.motion-path.enabled",
+    flags="CAN_ANIMATE_ON_COMPOSITOR",
+    spec="https://drafts.fxtf.org/motion-1/#offset-distance-property",
+    servo_restyle_damage="reflow_out_of_flow"
+)}
+
+// Motion Path Module Level 1
+${helpers.predefined_type(
+    "offset-rotate",
+    "OffsetRotate",
+    "computed::OffsetRotate::auto()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    gecko_pref="layout.css.motion-path.enabled",
+    flags="CAN_ANIMATE_ON_COMPOSITOR",
+    spec="https://drafts.fxtf.org/motion-1/#offset-rotate-property",
+    servo_restyle_damage="reflow_out_of_flow"
+)}
+
+// Motion Path Module Level 1
+${helpers.predefined_type(
+    "offset-anchor",
+    "PositionOrAuto",
+    "computed::PositionOrAuto::auto()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    gecko_pref="layout.css.motion-path.enabled",
+    flags="CAN_ANIMATE_ON_COMPOSITOR",
+    spec="https://drafts.fxtf.org/motion-1/#offset-anchor-property",
+    servo_restyle_damage="reflow_out_of_flow",
+    boxed=True
+)}
+
+// Motion Path Module Level 1
+${helpers.predefined_type(
+    "offset-position",
+    "OffsetPosition",
+    "computed::OffsetPosition::auto()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    gecko_pref="layout.css.motion-path-offset-position.enabled",
+    spec="https://drafts.fxtf.org/motion-1/#offset-position-property",
+    servo_restyle_damage="reflow_out_of_flow",
+    boxed=True
+)}
+
+// CSSOM View Module
+// https://www.w3.org/TR/cssom-view-1/
+${helpers.single_keyword(
+    "scroll-behavior",
+    "auto smooth",
+    engines="gecko",
+    spec="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior",
+    animation_value_type="discrete",
+    gecko_enum_prefix="StyleScrollBehavior",
+)}
+
+${helpers.predefined_type(
+    "scroll-snap-align",
+    "ScrollSnapAlign",
+    "computed::ScrollSnapAlign::none()",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "scroll-snap-type",
+    "ScrollSnapType",
+    "computed::ScrollSnapType::none()",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "scroll-snap-stop",
+    "ScrollSnapStop",
+    "computed::ScrollSnapStop::Normal",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-stop",
+    animation_value_type="discrete",
+)}
+
+% for (axis, logical) in ALL_AXES:
+    ${helpers.predefined_type(
+        "overscroll-behavior-" + axis,
+        "OverscrollBehavior",
+        "computed::OverscrollBehavior::Auto",
+        engines="gecko",
+        logical_group="overscroll-behavior",
+        logical=logical,
+        gecko_pref="layout.css.overscroll-behavior.enabled",
+        spec="https://wicg.github.io/overscroll-behavior/#overscroll-behavior-properties",
+        animation_value_type="discrete",
+    )}
+% endfor
+
+// Compositing and Blending Level 1
+// http://www.w3.org/TR/compositing-1/
+${helpers.single_keyword(
+    "isolation",
+    "auto isolate",
+    engines="gecko",
+    spec="https://drafts.fxtf.org/compositing/#isolation",
+    gecko_enum_prefix="StyleIsolation",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "break-after",
+    "BreakBetween",
+    "computed::BreakBetween::Auto",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-break/#propdef-break-after",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "break-before",
+    "BreakBetween",
+    "computed::BreakBetween::Auto",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-break/#propdef-break-before",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "break-inside",
+    "BreakWithin",
+    "computed::BreakWithin::Auto",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-break/#propdef-break-inside",
+    animation_value_type="discrete",
+)}
+
+// CSS Basic User Interface Module Level 3
+// http://dev.w3.org/csswg/css-ui
+${helpers.predefined_type(
+    "resize",
+    "Resize",
+    "computed::Resize::None",
+    engines="gecko",
+    animation_value_type="discrete",
+    gecko_ffi_name="mResize",
+    spec="https://drafts.csswg.org/css-ui/#propdef-resize",
+)}
+
+${helpers.predefined_type(
+    "perspective",
+    "Perspective",
+    "computed::Perspective::none()",
+    engines="gecko servo-2013 servo-2020",
+    gecko_ffi_name="mChildPerspective",
+    spec="https://drafts.csswg.org/css-transforms/#perspective",
+    extra_prefixes=transform_extra_prefixes,
+    animation_value_type="AnimatedPerspective",
+    servo_restyle_damage = "reflow_out_of_flow",
+)}
+
+${helpers.predefined_type(
+    "perspective-origin",
+    "Position",
+    "computed::position::Position::center()",
+    engines="gecko servo-2013 servo-2020",
+    boxed=True,
+    extra_prefixes=transform_extra_prefixes,
+    spec="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property",
+    animation_value_type="ComputedValue",
+    servo_restyle_damage="reflow_out_of_flow"
+)}
+
+${helpers.single_keyword(
+    "backface-visibility",
+    "visible hidden",
+    engines="gecko servo-2013 servo-2020",
+    gecko_enum_prefix="StyleBackfaceVisibility",
+    spec="https://drafts.csswg.org/css-transforms/#backface-visibility-property",
+    extra_prefixes=transform_extra_prefixes,
+    animation_value_type="discrete",
+)}
+
+${helpers.single_keyword(
+    "transform-box",
+    "border-box fill-box view-box",
+    engines="gecko",
+    gecko_enum_prefix="StyleGeometryBox",
+    spec="https://drafts.csswg.org/css-transforms/#transform-box",
+    gecko_inexhaustive="True",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "transform-style",
+    "TransformStyle",
+    "computed::TransformStyle::Flat",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://drafts.csswg.org/css-transforms-2/#transform-style-property",
+    extra_prefixes=transform_extra_prefixes,
+    animation_value_type="discrete",
+    servo_restyle_damage = "reflow_out_of_flow",
+)}
+
+${helpers.predefined_type(
+    "transform-origin",
+    "TransformOrigin",
+    "computed::TransformOrigin::initial_value()",
+    engines="gecko servo-2013 servo-2020",
+    animation_value_type="ComputedValue",
+    extra_prefixes=transform_extra_prefixes,
+    gecko_ffi_name="mTransformOrigin",
+    boxed=True,
+    spec="https://drafts.csswg.org/css-transforms/#transform-origin-property",
+    servo_restyle_damage="reflow_out_of_flow",
+)}
+
+${helpers.predefined_type(
+    "contain",
+    "Contain",
+    "specified::Contain::empty()",
+    engines="gecko",
+    animation_value_type="none",
+    spec="https://drafts.csswg.org/css-contain/#contain-property",
+)}
+
+${helpers.predefined_type(
+    "content-visibility",
+    "ContentVisibility",
+    "computed::ContentVisibility::Visible",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-contain/#content-visibility",
+    gecko_pref="layout.css.content-visibility.enabled",
+    animation_value_type="none",
+)}
+
+${helpers.predefined_type(
+    "container-type",
+    "ContainerType",
+    "computed::ContainerType::Normal",
+    engines="gecko",
+    animation_value_type="none",
+    enabled_in="ua",
+    gecko_pref="layout.css.container-queries.enabled",
+    spec="https://drafts.csswg.org/css-contain-3/#container-type",
+)}
+
+${helpers.predefined_type(
+    "container-name",
+    "ContainerName",
+    "computed::ContainerName::none()",
+    engines="gecko",
+    animation_value_type="none",
+    enabled_in="ua",
+    gecko_pref="layout.css.container-queries.enabled",
+    spec="https://drafts.csswg.org/css-contain-3/#container-name",
+)}
+
+${helpers.predefined_type(
+    "appearance",
+    "Appearance",
+    "computed::Appearance::None",
+    engines="gecko",
+    aliases="-moz-appearance -webkit-appearance",
+    spec="https://drafts.csswg.org/css-ui-4/#propdef-appearance",
+    animation_value_type="discrete",
+    gecko_ffi_name="mAppearance",
+)}
+
+// The inherent widget type of an element, selected by specifying
+// `appearance: auto`.
+${helpers.predefined_type(
+    "-moz-default-appearance",
+    "Appearance",
+    "computed::Appearance::None",
+    engines="gecko",
+    animation_value_type="none",
+    spec="Internal (not web-exposed)",
+    enabled_in="chrome",
+    gecko_ffi_name="mDefaultAppearance",
+)}
+
+${helpers.single_keyword(
+    "-moz-orient",
+    "inline block horizontal vertical",
+    engines="gecko",
+    gecko_ffi_name="mOrient",
+    gecko_enum_prefix="StyleOrient",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-orient)",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "will-change",
+    "WillChange",
+    "computed::WillChange::auto()",
+    engines="gecko",
+    animation_value_type="none",
+    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",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property",
+)}
+
+${helpers.predefined_type(
+    "shape-margin",
+    "NonNegativeLengthPercentage",
+    "computed::NonNegativeLengthPercentage::zero()",
+    engines="gecko",
+    animation_value_type="NonNegativeLengthPercentage",
+    spec="https://drafts.csswg.org/css-shapes/#shape-margin-property",
+)}
+
+${helpers.predefined_type(
+    "shape-outside",
+    "basic_shape::ShapeOutside",
+    "generics::basic_shape::ShapeOutside::None",
+    engines="gecko",
+    animation_value_type="basic_shape::ShapeOutside",
+    spec="https://drafts.csswg.org/css-shapes/#shape-outside-property",
+)}
+
+${helpers.predefined_type(
+    "touch-action",
+    "TouchAction",
+    "computed::TouchAction::auto()",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://compat.spec.whatwg.org/#touch-action",
+)}
+
+${helpers.predefined_type(
+    "-webkit-line-clamp",
+    "LineClamp",
+    "computed::LineClamp::none()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-overflow-3/#line-clamp",
+)}
+
+${helpers.predefined_type(
+    "scrollbar-gutter",
+    "ScrollbarGutter",
+    "computed::ScrollbarGutter::AUTO",
+    engines="gecko",
+    gecko_pref="layout.css.scrollbar-gutter.enabled",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter-property",
+)}
diff --git a/servo/components/style/properties/longhands/column.mako.rs b/servo/components/style/properties/longhands/column.mako.rs
new file mode 100644
index 0000000000..1e0e92b7f3
--- /dev/null
+++ b/servo/components/style/properties/longhands/column.mako.rs
@@ -0,0 +1,83 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<% data.new_style_struct("Column", inherited=False) %>
+
+${helpers.predefined_type(
+    "column-width",
+    "length::NonNegativeLengthOrAuto",
+    "computed::length::NonNegativeLengthOrAuto::auto()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    initial_specified_value="specified::length::NonNegativeLengthOrAuto::auto()",
+    animation_value_type="NonNegativeLengthOrAuto",
+    servo_2013_pref="layout.columns.enabled",
+    spec="https://drafts.csswg.org/css-multicol/#propdef-column-width",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "column-count",
+    "ColumnCount",
+    "computed::ColumnCount::auto()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    initial_specified_value="specified::ColumnCount::auto()",
+    servo_2013_pref="layout.columns.enabled",
+    animation_value_type="AnimatedColumnCount",
+    spec="https://drafts.csswg.org/css-multicol/#propdef-column-count",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.single_keyword(
+    "column-fill",
+    "balance auto",
+    engines="gecko",
+    animation_value_type="discrete",
+    gecko_enum_prefix="StyleColumnFill",
+    spec="https://drafts.csswg.org/css-multicol/#propdef-column-fill",
+)}
+
+${helpers.predefined_type(
+    "column-rule-width",
+    "BorderSideWidth",
+    "app_units::Au::from_px(3)",
+    engines="gecko",
+    initial_specified_value="specified::BorderSideWidth::medium()",
+    spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width",
+    animation_value_type="NonNegativeLength",
+)}
+
+// https://drafts.csswg.org/css-multicol-1/#crc
+${helpers.predefined_type(
+    "column-rule-color",
+    "Color",
+    "computed_value::T::currentcolor()",
+    engines="gecko",
+    initial_specified_value="specified::Color::currentcolor()",
+    animation_value_type="AnimatedColor",
+    ignored_when_colors_disabled=True,
+    spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color",
+)}
+
+${helpers.single_keyword(
+    "column-span",
+    "none all",
+    engines="gecko",
+    animation_value_type="discrete",
+    gecko_enum_prefix="StyleColumnSpan",
+    spec="https://drafts.csswg.org/css-multicol/#propdef-column-span",
+)}
+
+${helpers.predefined_type(
+    "column-rule-style",
+    "BorderStyle",
+    "computed::BorderStyle::None",
+    engines="gecko",
+    initial_specified_value="specified::BorderStyle::None",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style",
+)}
diff --git a/servo/components/style/properties/longhands/counters.mako.rs b/servo/components/style/properties/longhands/counters.mako.rs
new file mode 100644
index 0000000000..2ad0f72cd4
--- /dev/null
+++ b/servo/components/style/properties/longhands/counters.mako.rs
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<% data.new_style_struct("Counters", inherited=False, gecko_name="Content") %>
+
+${helpers.predefined_type(
+    "content",
+    "Content",
+    "computed::Content::normal()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::Content::normal()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-content/#propdef-content",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "counter-increment",
+    "CounterIncrement",
+    engines="gecko servo-2013",
+    initial_value="Default::default()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-lists/#propdef-counter-increment",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "counter-reset",
+    "CounterReset",
+    engines="gecko servo-2013",
+    initial_value="Default::default()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-lists-3/#propdef-counter-reset",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "counter-set",
+    "CounterSet",
+    engines="gecko",
+    initial_value="Default::default()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-lists-3/#propdef-counter-set",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
diff --git a/servo/components/style/properties/longhands/effects.mako.rs b/servo/components/style/properties/longhands/effects.mako.rs
new file mode 100644
index 0000000000..1860f4b179
--- /dev/null
+++ b/servo/components/style/properties/longhands/effects.mako.rs
@@ -0,0 +1,86 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+// Box-shadow, etc.
+<% data.new_style_struct("Effects", inherited=False) %>
+
+${helpers.predefined_type(
+    "opacity",
+    "Opacity",
+    "1.0",
+    engines="gecko servo-2013 servo-2020",
+    animation_value_type="ComputedValue",
+    flags="CAN_ANIMATE_ON_COMPOSITOR",
+    spec="https://drafts.csswg.org/css-color/#transparency",
+    servo_restyle_damage = "reflow_out_of_flow",
+)}
+
+${helpers.predefined_type(
+    "box-shadow",
+    "BoxShadow",
+    None,
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    vector=True,
+    simple_vector_bindings=True,
+    animation_value_type="AnimatedBoxShadowList",
+    vector_animation_type="with_zero",
+    extra_prefixes="webkit",
+    ignored_when_colors_disabled=True,
+    spec="https://drafts.csswg.org/css-backgrounds/#box-shadow",
+)}
+
+${helpers.predefined_type(
+    "clip",
+    "ClipRectOrAuto",
+    "computed::ClipRectOrAuto::auto()",
+    engines="gecko servo-2013 servo-2020",
+    animation_value_type="ComputedValue",
+    boxed=True,
+    allow_quirks="Yes",
+    spec="https://drafts.fxtf.org/css-masking/#clip-property",
+)}
+
+${helpers.predefined_type(
+    "filter",
+    "Filter",
+    None,
+    engines="gecko servo-2013 servo-2020",
+    vector=True,
+    simple_vector_bindings=True,
+    gecko_ffi_name="mFilters",
+    separator="Space",
+    animation_value_type="AnimatedFilterList",
+    vector_animation_type="with_zero",
+    extra_prefixes="webkit",
+    spec="https://drafts.fxtf.org/filters/#propdef-filter",
+)}
+
+${helpers.predefined_type(
+    "backdrop-filter",
+    "Filter",
+    None,
+    engines="gecko",
+    vector=True,
+    simple_vector_bindings=True,
+    gecko_ffi_name="mBackdropFilters",
+    separator="Space",
+    animation_value_type="AnimatedFilterList",
+    vector_animation_type="with_zero",
+    gecko_pref="layout.css.backdrop-filter.enabled",
+    spec="https://drafts.fxtf.org/filter-effects-2/#propdef-backdrop-filter",
+)}
+
+${helpers.single_keyword(
+    "mix-blend-mode",
+    """normal multiply screen overlay darken lighten color-dodge
+    color-burn hard-light soft-light difference exclusion hue
+    saturation color luminosity plus-lighter""",
+    engines="gecko servo-2013 servo-2020",
+    gecko_enum_prefix="StyleBlend",
+    animation_value_type="discrete",
+    spec="https://drafts.fxtf.org/compositing/#propdef-mix-blend-mode",
+)}
diff --git a/servo/components/style/properties/longhands/font.mako.rs b/servo/components/style/properties/longhands/font.mako.rs
new file mode 100644
index 0000000000..3f975aa198
--- /dev/null
+++ b/servo/components/style/properties/longhands/font.mako.rs
@@ -0,0 +1,488 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import Method, to_camel_case, to_rust_ident, to_camel_case_lower, SYSTEM_FONT_LONGHANDS %>
+
+<% data.new_style_struct("Font", inherited=True) %>
+
+${helpers.predefined_type(
+    "font-family",
+    "FontFamily",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::FontFamily::serif()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-family",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "font-style",
+    "FontStyle",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::FontStyle::normal()",
+    initial_specified_value="specified::FontStyle::normal()",
+    animation_value_type="FontStyle",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-style",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+<% font_variant_caps_custom_consts= { "small-caps": "SMALLCAPS",
+                                      "all-small-caps": "ALLSMALL",
+                                      "petite-caps": "PETITECAPS",
+                                      "all-petite-caps": "ALLPETITE",
+                                      "titling-caps": "TITLING" } %>
+
+${helpers.single_keyword(
+    "font-variant-caps",
+    "normal small-caps",
+    engines="gecko servo-2013 servo-2020",
+    extra_gecko_values="all-small-caps petite-caps all-petite-caps unicase titling-caps",
+    gecko_constant_prefix="NS_FONT_VARIANT_CAPS",
+    gecko_ffi_name="mFont.variantCaps",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-caps",
+    custom_consts=font_variant_caps_custom_consts,
+    animation_value_type="discrete",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "font-weight",
+    "FontWeight",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::FontWeight::normal()",
+    initial_specified_value="specified::FontWeight::normal()",
+    animation_value_type="Number",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-weight",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "font-size",
+    "FontSize",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::FontSize::medium()",
+    initial_specified_value="specified::FontSize::medium()",
+    animation_value_type="NonNegativeLength",
+    allow_quirks="Yes",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-size",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "font-size-adjust",
+    "FontSizeAdjust",
+    engines="gecko",
+    initial_value="computed::FontSizeAdjust::None",
+    initial_specified_value="specified::FontSizeAdjust::None",
+    animation_value_type="FontSizeAdjust",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-size-adjust",
+)}
+
+${helpers.predefined_type(
+    "font-synthesis-weight",
+    "FontSynthesis",
+    engines="gecko",
+    initial_value="computed::FontSynthesis::Auto",
+    initial_specified_value="specified::FontSynthesis::Auto",
+    gecko_ffi_name="mFont.synthesisWeight",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-fonts-4/#font-synthesis-weight",
+)}
+
+${helpers.predefined_type(
+    "font-synthesis-style",
+    "FontSynthesis",
+    engines="gecko",
+    initial_value="computed::FontSynthesis::Auto",
+    initial_specified_value="specified::FontSynthesis::Auto",
+    gecko_ffi_name="mFont.synthesisStyle",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-fonts-4/#font-synthesis-style",
+)}
+
+${helpers.predefined_type(
+    "font-synthesis-small-caps",
+    "FontSynthesis",
+    engines="gecko",
+    initial_value="computed::FontSynthesis::Auto",
+    initial_specified_value="specified::FontSynthesis::Auto",
+    gecko_ffi_name="mFont.synthesisSmallCaps",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-fonts-4/#font-synthesis-small-caps",
+)}
+
+${helpers.predefined_type(
+    "font-stretch",
+    "FontStretch",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::FontStretch::hundred()",
+    initial_specified_value="specified::FontStretch::normal()",
+    animation_value_type="Percentage",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-stretch",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.single_keyword(
+    "font-kerning",
+    "auto none normal",
+    engines="gecko",
+    gecko_ffi_name="mFont.kerning",
+    gecko_constant_prefix="NS_FONT_KERNING",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-kerning",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "font-variant-alternates",
+    "FontVariantAlternates",
+    engines="gecko",
+    initial_value="computed::FontVariantAlternates::default()",
+    initial_specified_value="specified::FontVariantAlternates::default()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-alternates",
+)}
+
+${helpers.predefined_type(
+    "font-variant-east-asian",
+    "FontVariantEastAsian",
+    engines="gecko",
+    initial_value="computed::FontVariantEastAsian::empty()",
+    initial_specified_value="specified::FontVariantEastAsian::empty()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-east-asian",
+)}
+
+${helpers.single_keyword(
+    "font-variant-emoji",
+    "normal text emoji unicode",
+    engines="gecko",
+    gecko_pref="layout.css.font-variant-emoji.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    gecko_enum_prefix="StyleFontVariantEmoji",
+    gecko_ffi_name="mFont.variantEmoji",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-emoji",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "font-variant-ligatures",
+    "FontVariantLigatures",
+    engines="gecko",
+    initial_value="computed::FontVariantLigatures::empty()",
+    initial_specified_value="specified::FontVariantLigatures::empty()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-ligatures",
+)}
+
+${helpers.predefined_type(
+    "font-variant-numeric",
+    "FontVariantNumeric",
+    engines="gecko",
+    initial_value="computed::FontVariantNumeric::empty()",
+    initial_specified_value="specified::FontVariantNumeric::empty()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-numeric",
+)}
+
+${helpers.single_keyword(
+    "font-variant-position",
+    "normal sub super",
+    engines="gecko",
+    gecko_ffi_name="mFont.variantPosition",
+    gecko_constant_prefix="NS_FONT_VARIANT_POSITION",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-position",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "font-feature-settings",
+    "FontFeatureSettings",
+    engines="gecko",
+    initial_value="computed::FontFeatureSettings::normal()",
+    initial_specified_value="specified::FontFeatureSettings::normal()",
+    extra_prefixes="moz:layout.css.prefixes.font-features",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-feature-settings",
+)}
+
+${helpers.predefined_type(
+    "font-variation-settings",
+    "FontVariationSettings",
+    engines="gecko",
+    gecko_pref="layout.css.font-variations.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    initial_value="computed::FontVariationSettings::normal()",
+    initial_specified_value="specified::FontVariationSettings::normal()",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-fonts-4/#propdef-font-variation-settings"
+)}
+
+${helpers.predefined_type(
+    "font-language-override",
+    "FontLanguageOverride",
+    engines="gecko",
+    initial_value="computed::FontLanguageOverride::normal()",
+    initial_specified_value="specified::FontLanguageOverride::normal()",
+    animation_value_type="discrete",
+    extra_prefixes="moz:layout.css.prefixes.font-features",
+    spec="https://drafts.csswg.org/css-fonts-3/#propdef-font-language-override",
+)}
+
+${helpers.single_keyword(
+    "font-optical-sizing",
+    "auto none",
+    engines="gecko",
+    gecko_pref="layout.css.font-variations.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    gecko_ffi_name="mFont.opticalSizing",
+    gecko_constant_prefix="NS_FONT_OPTICAL_SIZING",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/css-fonts-4/#font-optical-sizing-def",
+)}
+
+${helpers.predefined_type(
+    "font-palette",
+    "FontPalette",
+    engines="gecko",
+    initial_value="computed::FontPalette::normal()",
+    initial_specified_value="specified::FontPalette::normal()",
+    animation_value_type="discrete",
+    gecko_pref="layout.css.font-palette.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    spec="https://drafts.csswg.org/css-fonts/#font-palette-prop",
+)}
+
+${helpers.predefined_type(
+    "-x-lang",
+    "XLang",
+    engines="gecko",
+    initial_value="computed::XLang::get_initial_value()",
+    animation_value_type="none",
+    enabled_in="",
+    has_effect_on_gecko_scrollbars=False,
+    spec="Internal (not web-exposed)",
+)}
+
+${helpers.predefined_type(
+    "-moz-script-size-multiplier",
+    "MozScriptSizeMultiplier",
+    engines="gecko",
+    initial_value="computed::MozScriptSizeMultiplier::get_initial_value()",
+    animation_value_type="none",
+    gecko_ffi_name="mScriptSizeMultiplier",
+    enabled_in="",
+    has_effect_on_gecko_scrollbars=False,
+    spec="Internal (not web-exposed)",
+)}
+
+${helpers.predefined_type(
+    "math-depth",
+    "MathDepth",
+    "0",
+    engines="gecko",
+    gecko_pref="layout.css.math-depth.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    animation_value_type="none",
+    enabled_in="ua",
+    spec="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property",
+)}
+
+${helpers.single_keyword(
+    "math-style",
+    "normal compact",
+    engines="gecko",
+    gecko_enum_prefix="StyleMathStyle",
+    gecko_pref="layout.css.math-style.enabled",
+    spec="https://mathml-refresh.github.io/mathml-core/#the-math-style-property",
+    has_effect_on_gecko_scrollbars=False,
+    animation_value_type="none",
+    enabled_in="ua",
+    needs_conversion=True,
+)}
+
+${helpers.single_keyword(
+    "-moz-math-variant",
+    """none normal bold italic bold-italic script bold-script
+    fraktur double-struck bold-fraktur sans-serif
+    bold-sans-serif sans-serif-italic sans-serif-bold-italic
+    monospace initial tailed looped stretched""",
+    engines="gecko",
+    gecko_enum_prefix="StyleMathVariant",
+    gecko_ffi_name="mMathVariant",
+    spec="Internal (not web-exposed)",
+    animation_value_type="none",
+    enabled_in="",
+    has_effect_on_gecko_scrollbars=False,
+    needs_conversion=True,
+)}
+
+${helpers.predefined_type(
+    "-moz-script-min-size",
+    "MozScriptMinSize",
+    "specified::MozScriptMinSize::get_initial_value()",
+    engines="gecko",
+    animation_value_type="none",
+    enabled_in="",
+    has_effect_on_gecko_scrollbars=False,
+    gecko_ffi_name="mScriptMinSize",
+    spec="Internal (not web-exposed)",
+)}
+
+${helpers.predefined_type(
+    "-x-text-scale",
+    "XTextScale",
+    "computed::XTextScale::All",
+    engines="gecko",
+    animation_value_type="none",
+    enabled_in="",
+    has_effect_on_gecko_scrollbars=False,
+    spec="Internal (not web-exposed)",
+)}
+
+% if engine == "gecko":
+pub mod system_font {
+    //! We deal with system fonts here
+    //!
+    //! System fonts can only be set as a group via the font shorthand.
+    //! They resolve at compute time (not parse time -- this lets the
+    //! browser respond to changes to the OS font settings).
+    //!
+    //! While Gecko handles these as a separate property and keyword
+    //! values on each property indicating that the font should be picked
+    //! from the -x-system-font property, we avoid this. Instead,
+    //! each font longhand has a special SystemFont variant which contains
+    //! the specified system font. When the cascade function (in helpers)
+    //! detects that a value has a system font, it will resolve it, and
+    //! cache it on the ComputedValues. After this, it can be just fetched
+    //! whenever a font longhand on the same element needs the system font.
+    //!
+    //! When a longhand property is holding a SystemFont, it's serialized
+    //! to an empty string as if its value comes from a shorthand with
+    //! variable reference. We may want to improve this behavior at some
+    //! point. See also https://github.com/w3c/csswg-drafts/issues/1586.
+
+    use crate::properties::longhands;
+    use std::hash::{Hash, Hasher};
+    use crate::values::computed::{ToComputedValue, Context};
+    use crate::values::specified::font::SystemFont;
+    // ComputedValues are compared at times
+    // so we need these impls. We don't want to
+    // add Eq to Number (which contains a float)
+    // so instead we have an eq impl which skips the
+    // cached values
+    impl PartialEq for ComputedSystemFont {
+        fn eq(&self, other: &Self) -> bool {
+            self.system_font == other.system_font
+        }
+    }
+    impl Eq for ComputedSystemFont {}
+
+    impl Hash for ComputedSystemFont {
+        fn hash<H: Hasher>(&self, hasher: &mut H) {
+            self.system_font.hash(hasher)
+        }
+    }
+
+    impl ToComputedValue for SystemFont {
+        type ComputedValue = ComputedSystemFont;
+
+        fn to_computed_value(&self, cx: &Context) -> Self::ComputedValue {
+            use crate::gecko_bindings::bindings;
+            use crate::gecko_bindings::structs::nsFont;
+            use crate::values::computed::font::FontSize;
+            use crate::values::specified::font::KeywordInfo;
+            use crate::values::generics::NonNegative;
+            use std::mem;
+
+            let mut system = mem::MaybeUninit::<nsFont>::uninit();
+            let system = unsafe {
+                bindings::Gecko_nsFont_InitSystem(
+                    system.as_mut_ptr(),
+                    *self,
+                    &**cx.style().get_font(),
+                    cx.device().document()
+                );
+                &mut *system.as_mut_ptr()
+            };
+            let size = NonNegative(cx.maybe_zoom_text(system.size.0));
+            let ret = ComputedSystemFont {
+                font_family: system.family.clone(),
+                font_size: FontSize {
+                    computed_size: size,
+                    used_size: size,
+                    keyword_info: KeywordInfo::none()
+                },
+                font_weight: system.weight,
+                font_stretch: system.stretch,
+                font_style: system.style,
+                system_font: *self,
+            };
+            unsafe { bindings::Gecko_nsFont_Destroy(system); }
+            ret
+        }
+
+        fn from_computed_value(_: &ComputedSystemFont) -> Self {
+            unreachable!()
+        }
+    }
+
+    #[inline]
+    /// Compute and cache a system font
+    ///
+    /// Must be called before attempting to compute a system font
+    /// specified value
+    pub fn resolve_system_font(system: SystemFont, context: &mut Context) {
+        // Checking if context.cached_system_font.is_none() isn't enough,
+        // if animating from one system font to another the cached system font
+        // may change
+        if Some(system) != context.cached_system_font.as_ref().map(|x| x.system_font) {
+            let computed = system.to_computed_value(context);
+            context.cached_system_font = Some(computed);
+        }
+    }
+
+    #[derive(Clone, Debug)]
+    pub struct ComputedSystemFont {
+        % for name in SYSTEM_FONT_LONGHANDS:
+            pub ${name}: longhands::${name}::computed_value::T,
+        % endfor
+        pub system_font: SystemFont,
+    }
+
+}
+% endif
+
+${helpers.single_keyword(
+    "-moz-osx-font-smoothing",
+    "auto grayscale",
+    engines="gecko",
+    gecko_constant_prefix="NS_FONT_SMOOTHING",
+    gecko_ffi_name="mFont.smoothing",
+    gecko_pref="layout.css.osx-font-smoothing.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth)",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "-moz-font-smoothing-background-color",
+    "color::MozFontSmoothingBackgroundColor",
+    "computed::color::MozFontSmoothingBackgroundColor::transparent()",
+    engines="gecko",
+    animation_value_type="none",
+    gecko_ffi_name="mFont.fontSmoothingBackgroundColor",
+    enabled_in="chrome",
+    spec="None (Nonstandard internal property)",
+)}
+
+${helpers.predefined_type(
+    "-moz-min-font-size-ratio",
+    "Percentage",
+    "computed::Percentage::hundred()",
+    engines="gecko",
+    animation_value_type="none",
+    enabled_in="ua",
+    spec="Nonstandard (Internal-only)",
+)}
diff --git a/servo/components/style/properties/longhands/inherited_box.mako.rs b/servo/components/style/properties/longhands/inherited_box.mako.rs
new file mode 100644
index 0000000000..0b41a76ea6
--- /dev/null
+++ b/servo/components/style/properties/longhands/inherited_box.mako.rs
@@ -0,0 +1,97 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<% data.new_style_struct("InheritedBox", inherited=True, gecko_name="Visibility") %>
+
+// TODO: collapse. Well, do tables first.
+${helpers.single_keyword(
+    "visibility",
+    "visible hidden collapse",
+    engines="gecko servo-2013 servo-2020",
+    gecko_ffi_name="mVisible",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-box/#propdef-visibility",
+    gecko_enum_prefix="StyleVisibility",
+)}
+
+// CSS Writing Modes Level 3
+// https://drafts.csswg.org/css-writing-modes-3
+${helpers.single_keyword(
+    "writing-mode",
+    "horizontal-tb vertical-rl vertical-lr",
+    engines="gecko servo-2013 servo-2020",
+    extra_gecko_values="sideways-rl sideways-lr",
+    gecko_aliases="lr=horizontal-tb lr-tb=horizontal-tb \
+                         rl=horizontal-tb rl-tb=horizontal-tb \
+                         tb=vertical-rl   tb-rl=vertical-rl",
+    servo_2013_pref="layout.writing-mode.enabled",
+    servo_2020_pref="layout.writing-mode.enabled",
+    animation_value_type="none",
+    spec="https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode",
+    gecko_enum_prefix="StyleWritingModeProperty",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.single_keyword(
+    "direction",
+    "ltr rtl",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    animation_value_type="none",
+    spec="https://drafts.csswg.org/css-writing-modes/#propdef-direction",
+    gecko_enum_prefix="StyleDirection",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.single_keyword(
+    "-moz-box-collapse",
+    "flex legacy",
+    engines="gecko",
+    gecko_enum_prefix="StyleMozBoxCollapse",
+    animation_value_type="none",
+    enabled_in="chrome",
+    spec="None (internal)",
+)}
+
+${helpers.single_keyword(
+    "text-orientation",
+    "mixed upright sideways",
+    engines="gecko",
+    gecko_aliases="sideways-right=sideways",
+    gecko_enum_prefix="StyleTextOrientation",
+    animation_value_type="none",
+    spec="https://drafts.csswg.org/css-writing-modes/#propdef-text-orientation",
+)}
+
+${helpers.predefined_type(
+    "print-color-adjust",
+    "PrintColorAdjust",
+    "computed::PrintColorAdjust::Economy",
+    engines="gecko",
+    aliases="color-adjust",
+    spec="https://drafts.csswg.org/css-color-adjust/#print-color-adjust",
+    animation_value_type="discrete",
+)}
+
+// According to to CSS-IMAGES-3, `optimizespeed` and `optimizequality` are synonyms for `auto`
+// And, firefox doesn't support `pixelated` yet (https://bugzilla.mozilla.org/show_bug.cgi?id=856337)
+${helpers.predefined_type(
+    "image-rendering",
+    "ImageRendering",
+    "computed::ImageRendering::Auto",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://drafts.csswg.org/css-images/#propdef-image-rendering",
+    animation_value_type="discrete",
+)}
+
+${helpers.single_keyword(
+    "image-orientation",
+    "from-image none",
+    engines="gecko",
+    gecko_enum_prefix="StyleImageOrientation",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-images/#propdef-image-orientation",
+)}
diff --git a/servo/components/style/properties/longhands/inherited_svg.mako.rs b/servo/components/style/properties/longhands/inherited_svg.mako.rs
new file mode 100644
index 0000000000..b9d55c01b2
--- /dev/null
+++ b/servo/components/style/properties/longhands/inherited_svg.mako.rs
@@ -0,0 +1,217 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+// SVG 1.1 (Second Edition)
+// https://www.w3.org/TR/SVG/
+<% data.new_style_struct("InheritedSVG", inherited=True, gecko_name="SVG") %>
+
+// Section 10 - Text
+
+${helpers.single_keyword(
+    "dominant-baseline",
+    """auto ideographic alphabetic hanging mathematical central middle
+       text-after-edge text-before-edge""",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/css-inline-3/#propdef-dominant-baseline",
+    gecko_enum_prefix="StyleDominantBaseline",
+)}
+
+${helpers.single_keyword(
+    "text-anchor",
+    "start middle end",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG/text.html#TextAnchorProperty",
+    gecko_enum_prefix="StyleTextAnchor",
+)}
+
+// Section 11 - Painting: Filling, Stroking and Marker Symbols
+${helpers.single_keyword(
+    "color-interpolation",
+    "srgb auto linearrgb",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty",
+    gecko_enum_prefix="StyleColorInterpolation",
+)}
+
+${helpers.single_keyword(
+    "color-interpolation-filters",
+    "linearrgb auto srgb",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationFiltersProperty",
+    gecko_enum_prefix="StyleColorInterpolation",
+)}
+
+${helpers.predefined_type(
+    "fill",
+    "SVGPaint",
+    "crate::values::computed::SVGPaint::black()",
+    engines="gecko",
+    animation_value_type="IntermediateSVGPaint",
+    boxed=True,
+    spec="https://www.w3.org/TR/SVG2/painting.html#SpecifyingFillPaint",
+)}
+
+${helpers.predefined_type(
+    "fill-opacity",
+    "SVGOpacity",
+    "Default::default()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://svgwg.org/svg2-draft/painting.html#FillOpacity",
+)}
+
+${helpers.predefined_type(
+    "fill-rule",
+    "FillRule",
+    "Default::default()",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG11/painting.html#FillRuleProperty",
+)}
+
+${helpers.single_keyword(
+    "shape-rendering",
+    "auto optimizespeed crispedges geometricprecision",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty",
+    gecko_enum_prefix = "StyleShapeRendering",
+)}
+
+${helpers.predefined_type(
+    "stroke",
+    "SVGPaint",
+    "Default::default()",
+    engines="gecko",
+    animation_value_type="IntermediateSVGPaint",
+    boxed=True,
+    spec="https://www.w3.org/TR/SVG2/painting.html#SpecifyingStrokePaint",
+)}
+
+${helpers.predefined_type(
+    "stroke-width",
+    "SVGWidth",
+    "computed::SVGWidth::one()",
+    engines="gecko",
+    animation_value_type="crate::values::computed::SVGWidth",
+    spec="https://www.w3.org/TR/SVG2/painting.html#StrokeWidth",
+)}
+
+${helpers.single_keyword(
+    "stroke-linecap",
+    "butt round square",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty",
+    gecko_enum_prefix = "StyleStrokeLinecap",
+)}
+
+${helpers.single_keyword(
+    "stroke-linejoin",
+    "miter round bevel",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty",
+    gecko_enum_prefix = "StyleStrokeLinejoin",
+)}
+
+${helpers.predefined_type(
+    "stroke-miterlimit",
+    "NonNegativeNumber",
+    "From::from(4.0)",
+    engines="gecko",
+    animation_value_type="crate::values::computed::NonNegativeNumber",
+    spec="https://www.w3.org/TR/SVG2/painting.html#StrokeMiterlimitProperty",
+)}
+
+${helpers.predefined_type(
+    "stroke-opacity",
+    "SVGOpacity",
+    "Default::default()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://svgwg.org/svg2-draft/painting.html#StrokeOpacity",
+)}
+
+${helpers.predefined_type(
+    "stroke-dasharray",
+    "SVGStrokeDashArray",
+    "Default::default()",
+    engines="gecko",
+    animation_value_type="crate::values::computed::SVGStrokeDashArray",
+    spec="https://www.w3.org/TR/SVG2/painting.html#StrokeDashing",
+)}
+
+${helpers.predefined_type(
+    "stroke-dashoffset",
+    "SVGLength",
+    "computed::SVGLength::zero()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://www.w3.org/TR/SVG2/painting.html#StrokeDashing",
+)}
+
+// Section 14 - Clipping, Masking and Compositing
+${helpers.predefined_type(
+    "clip-rule",
+    "FillRule",
+    "Default::default()",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG11/masking.html#ClipRuleProperty",
+)}
+
+${helpers.predefined_type(
+    "marker-start",
+    "url::UrlOrNone",
+    "computed::url::UrlOrNone::none()",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties",
+)}
+
+${helpers.predefined_type(
+    "marker-mid",
+    "url::UrlOrNone",
+    "computed::url::UrlOrNone::none()",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties",
+)}
+
+${helpers.predefined_type(
+    "marker-end",
+    "url::UrlOrNone",
+    "computed::url::UrlOrNone::none()",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties",
+)}
+
+${helpers.predefined_type(
+    "paint-order",
+    "SVGPaintOrder",
+    "computed::SVGPaintOrder::normal()",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG2/painting.html#PaintOrder",
+)}
+
+${helpers.predefined_type(
+    "-moz-context-properties",
+    "MozContextProperties",
+    "computed::MozContextProperties::default()",
+    engines="gecko",
+    enabled_in="chrome",
+    gecko_pref="svg.context-properties.content.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    animation_value_type="none",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-context-properties)",
+)}
diff --git a/servo/components/style/properties/longhands/inherited_table.mako.rs b/servo/components/style/properties/longhands/inherited_table.mako.rs
new file mode 100644
index 0000000000..b38df2423a
--- /dev/null
+++ b/servo/components/style/properties/longhands/inherited_table.mako.rs
@@ -0,0 +1,49 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<% data.new_style_struct("InheritedTable", inherited=True, gecko_name="TableBorder") %>
+
+${helpers.single_keyword(
+    "border-collapse",
+    "separate collapse",
+    engines="gecko servo-2013",
+    gecko_enum_prefix="StyleBorderCollapse",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-tables/#propdef-border-collapse",
+    servo_restyle_damage = "reflow",
+)}
+
+${helpers.single_keyword(
+    "empty-cells",
+    "show hide",
+    engines="gecko servo-2013",
+    gecko_enum_prefix="StyleEmptyCells",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-tables/#propdef-empty-cells",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "caption-side",
+    "table::CaptionSide",
+    "computed::table::CaptionSide::Top",
+    engines="gecko servo-2013",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-tables/#propdef-caption-side",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "border-spacing",
+    "BorderSpacing",
+    "computed::BorderSpacing::zero()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    animation_value_type="BorderSpacing",
+    boxed=True,
+    spec="https://drafts.csswg.org/css-tables/#propdef-border-spacing",
+    servo_restyle_damage="reflow",
+)}
diff --git a/servo/components/style/properties/longhands/inherited_text.mako.rs b/servo/components/style/properties/longhands/inherited_text.mako.rs
new file mode 100644
index 0000000000..c1b110c086
--- /dev/null
+++ b/servo/components/style/properties/longhands/inherited_text.mako.rs
@@ -0,0 +1,408 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import Keyword %>
+<% data.new_style_struct("InheritedText", inherited=True, gecko_name="Text") %>
+
+${helpers.predefined_type(
+    "color",
+    "ColorPropertyValue",
+    "crate::color::AbsoluteColor::black()",
+    engines="gecko servo-2013 servo-2020",
+    animation_value_type="AbsoluteColor",
+    ignored_when_colors_disabled="True",
+    spec="https://drafts.csswg.org/css-color/#color",
+)}
+
+${helpers.predefined_type(
+    "line-height",
+    "LineHeight",
+    "computed::LineHeight::normal()",
+    engines="gecko servo-2013 servo-2020",
+    animation_value_type="LineHeight",
+    spec="https://drafts.csswg.org/css2/visudet.html#propdef-line-height",
+    servo_restyle_damage="reflow"
+)}
+
+// CSS Text Module Level 3
+
+${helpers.predefined_type(
+    "text-transform",
+    "TextTransform",
+    "computed::TextTransform::none()",
+    engines="gecko servo-2013",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text/#propdef-text-transform",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.single_keyword(
+    "hyphens",
+    "manual none auto",
+    engines="gecko",
+    gecko_enum_prefix="StyleHyphens",
+    animation_value_type="discrete",
+    extra_prefixes="moz",
+    spec="https://drafts.csswg.org/css-text/#propdef-hyphens",
+)}
+
+// TODO: Support <percentage>
+${helpers.single_keyword(
+    "-moz-text-size-adjust",
+    "auto none",
+    engines="gecko",
+    gecko_enum_prefix="StyleTextSizeAdjust",
+    gecko_ffi_name="mTextSizeAdjust",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-size-adjust/#adjustment-control",
+    aliases="-webkit-text-size-adjust",
+)}
+
+${helpers.predefined_type(
+    "text-indent",
+    "LengthPercentage",
+    "computed::LengthPercentage::zero()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-text/#propdef-text-indent",
+    allow_quirks="Yes",
+    servo_restyle_damage = "reflow",
+)}
+
+// Also known as "word-wrap" (which is more popular because of IE), but this is
+// the preferred name per CSS-TEXT 6.2.
+${helpers.predefined_type(
+    "overflow-wrap",
+    "OverflowWrap",
+    "computed::OverflowWrap::Normal",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text/#propdef-overflow-wrap",
+    aliases="word-wrap",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "word-break",
+    "WordBreak",
+    "computed::WordBreak::Normal",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text/#propdef-word-break",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "text-justify",
+    "TextJustify",
+    "computed::TextJustify::Auto",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text/#propdef-text-justify",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "text-align-last",
+    "TextAlignLast",
+    "computed::text::TextAlignLast::Auto",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text/#propdef-text-align-last",
+)}
+
+// TODO make this a shorthand and implement text-align-last/text-align-all
+${helpers.predefined_type(
+    "text-align",
+    "TextAlign",
+    "computed::TextAlign::Start",
+    engines="gecko servo-2013 servo-2020",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text/#propdef-text-align",
+    servo_restyle_damage = "reflow",
+)}
+
+${helpers.predefined_type(
+    "letter-spacing",
+    "LetterSpacing",
+    "computed::LetterSpacing::normal()",
+    engines="gecko servo-2013 servo-2020",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-text/#propdef-letter-spacing",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "word-spacing",
+    "WordSpacing",
+    "computed::WordSpacing::zero()",
+    engines="gecko servo-2013 servo-2020",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-text/#propdef-word-spacing",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+<%helpers:single_keyword
+    name="white-space"
+    values="normal pre nowrap pre-wrap pre-line"
+    engines="gecko servo-2013 servo-2020",
+    extra_gecko_values="break-spaces -moz-pre-space"
+    gecko_enum_prefix="StyleWhiteSpace"
+    needs_conversion="True"
+    animation_value_type="discrete"
+    spec="https://drafts.csswg.org/css-text/#propdef-white-space"
+    servo_restyle_damage="rebuild_and_reflow"
+>
+    % if engine in ["servo-2013", "servo-2020"]:
+    impl SpecifiedValue {
+        pub fn allow_wrap(&self) -> bool {
+            match *self {
+                SpecifiedValue::Nowrap |
+                SpecifiedValue::Pre => false,
+                SpecifiedValue::Normal |
+                SpecifiedValue::PreWrap |
+                SpecifiedValue::PreLine => true,
+            }
+        }
+
+        pub fn preserve_newlines(&self) -> bool {
+            match *self {
+                SpecifiedValue::Normal |
+                SpecifiedValue::Nowrap => false,
+                SpecifiedValue::Pre |
+                SpecifiedValue::PreWrap |
+                SpecifiedValue::PreLine => true,
+            }
+        }
+
+        pub fn preserve_spaces(&self) -> bool {
+            match *self {
+                SpecifiedValue::Normal |
+                SpecifiedValue::Nowrap |
+                SpecifiedValue::PreLine => false,
+                SpecifiedValue::Pre |
+                SpecifiedValue::PreWrap => true,
+            }
+        }
+    }
+    % endif
+</%helpers:single_keyword>
+
+${helpers.predefined_type(
+    "text-shadow",
+    "SimpleShadow",
+    None,
+    engines="gecko servo-2013",
+    vector=True,
+    vector_animation_type="with_zero",
+    animation_value_type="AnimatedTextShadowList",
+    ignored_when_colors_disabled=True,
+    simple_vector_bindings=True,
+    spec="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property",
+)}
+
+${helpers.predefined_type(
+    "text-emphasis-style",
+    "TextEmphasisStyle",
+    "computed::TextEmphasisStyle::None",
+    engines="gecko",
+    initial_specified_value="SpecifiedValue::None",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-style",
+)}
+
+${helpers.predefined_type(
+    "text-emphasis-position",
+    "TextEmphasisPosition",
+    "computed::TextEmphasisPosition::OVER",
+    engines="gecko",
+    initial_specified_value="specified::TextEmphasisPosition::OVER",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-position",
+)}
+
+${helpers.predefined_type(
+    "text-emphasis-color",
+    "Color",
+    "computed_value::T::currentcolor()",
+    engines="gecko",
+    initial_specified_value="specified::Color::currentcolor()",
+    animation_value_type="AnimatedColor",
+    ignored_when_colors_disabled=True,
+    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-color",
+)}
+
+${helpers.predefined_type(
+    "tab-size",
+    "NonNegativeLengthOrNumber",
+    "generics::length::LengthOrNumber::Number(From::from(8.0))",
+    engines="gecko",
+    animation_value_type="LengthOrNumber",
+    spec="https://drafts.csswg.org/css-text-3/#tab-size-property",
+    aliases="-moz-tab-size",
+)}
+
+${helpers.predefined_type(
+    "line-break",
+    "LineBreak",
+    "computed::LineBreak::Auto",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text-3/#line-break-property",
+)}
+
+// CSS Compatibility
+// https://compat.spec.whatwg.org
+${helpers.predefined_type(
+    "-webkit-text-fill-color",
+    "Color",
+    "computed_value::T::currentcolor()",
+    engines="gecko",
+    animation_value_type="AnimatedColor",
+    ignored_when_colors_disabled=True,
+    spec="https://compat.spec.whatwg.org/#the-webkit-text-fill-color",
+)}
+
+${helpers.predefined_type(
+    "-webkit-text-stroke-color",
+    "Color",
+    "computed_value::T::currentcolor()",
+    initial_specified_value="specified::Color::currentcolor()",
+    engines="gecko",
+    animation_value_type="AnimatedColor",
+    ignored_when_colors_disabled=True,
+    spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke-color",
+)}
+
+${helpers.predefined_type(
+    "-webkit-text-stroke-width",
+    "LineWidth",
+    "app_units::Au(0)",
+    engines="gecko",
+    initial_specified_value="specified::LineWidth::zero()",
+    spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke-width",
+    animation_value_type="discrete",
+)}
+
+// CSS Ruby Layout Module Level 1
+// https://drafts.csswg.org/css-ruby/
+${helpers.single_keyword(
+    "ruby-align",
+    "space-around start center space-between",
+    engines="gecko",
+    animation_value_type="discrete",
+    gecko_enum_prefix="StyleRubyAlign",
+    spec="https://drafts.csswg.org/css-ruby/#ruby-align-property",
+)}
+
+${helpers.predefined_type(
+    "ruby-position",
+    "RubyPosition",
+    "computed::RubyPosition::AlternateOver",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-ruby/#ruby-position-property",
+    animation_value_type="discrete",
+)}
+
+// CSS Writing Modes Module Level 3
+// https://drafts.csswg.org/css-writing-modes-3/
+
+${helpers.single_keyword(
+    "text-combine-upright",
+    "none all",
+    engines="gecko",
+    gecko_enum_prefix="StyleTextCombineUpright",
+    animation_value_type="none",
+    spec="https://drafts.csswg.org/css-writing-modes-3/#text-combine-upright",
+)}
+
+// SVG 1.1: Section 11 - Painting: Filling, Stroking and Marker Symbols
+${helpers.single_keyword(
+    "text-rendering",
+    "auto optimizespeed optimizelegibility geometricprecision",
+    engines="gecko servo-2013 servo-2020",
+    gecko_enum_prefix="StyleTextRendering",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "-moz-control-character-visibility",
+    "text::MozControlCharacterVisibility",
+    "Default::default()",
+    engines="gecko",
+    enabled_in="chrome",
+    gecko_pref="layout.css.moz-control-character-visibility.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    animation_value_type="none",
+    spec="Nonstandard"
+)}
+
+// text underline offset
+${helpers.predefined_type(
+    "text-underline-offset",
+    "LengthPercentageOrAuto",
+    "computed::LengthPercentageOrAuto::auto()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-text-decor-4/#underline-offset",
+)}
+
+// text underline position
+${helpers.predefined_type(
+    "text-underline-position",
+    "TextUnderlinePosition",
+    "computed::TextUnderlinePosition::AUTO",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text-decor-3/#text-underline-position-property",
+)}
+
+// text decoration skip ink
+${helpers.predefined_type(
+    "text-decoration-skip-ink",
+    "TextDecorationSkipInk",
+    "computed::TextDecorationSkipInk::Auto",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-ink-property",
+)}
+
+// hyphenation character
+${helpers.predefined_type(
+    "hyphenate-character",
+    "HyphenateCharacter",
+    "computed::HyphenateCharacter::Auto",
+    engines="gecko",
+    gecko_pref="layout.css.hyphenate-character.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/css-text-4/#hyphenate-character",
+)}
+
+${helpers.predefined_type(
+    "forced-color-adjust",
+    "ForcedColorAdjust",
+    "computed::ForcedColorAdjust::Auto",
+    engines="gecko",
+    gecko_pref="layout.css.forced-color-adjust.enabled",
+    has_effect_on_gecko_scrollbars=False,
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-color-adjust-1/#forced-color-adjust-prop",
+)}
+
+${helpers.single_keyword(
+    "-webkit-text-security",
+    "none circle disc square",
+    engines="gecko",
+    gecko_enum_prefix="StyleTextSecurity",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text/#MISSING",
+)}
diff --git a/servo/components/style/properties/longhands/inherited_ui.mako.rs b/servo/components/style/properties/longhands/inherited_ui.mako.rs
new file mode 100644
index 0000000000..b58bde355e
--- /dev/null
+++ b/servo/components/style/properties/longhands/inherited_ui.mako.rs
@@ -0,0 +1,118 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<% data.new_style_struct("InheritedUI", inherited=True, gecko_name="UI") %>
+
+${helpers.predefined_type(
+    "cursor",
+    "Cursor",
+    "computed::Cursor::auto()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::Cursor::auto()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-ui/#cursor",
+)}
+
+// NB: `pointer-events: auto` (and use of `pointer-events` in anything that isn't SVG, in fact)
+// is nonstandard, slated for CSS4-UI.
+// TODO(pcwalton): SVG-only values.
+${helpers.single_keyword(
+    "pointer-events",
+    "auto none",
+    engines="gecko servo-2013 servo-2020",
+    animation_value_type="discrete",
+    extra_gecko_values="visiblepainted visiblefill visiblestroke visible painted fill stroke all",
+    spec="https://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty",
+    gecko_enum_prefix="StylePointerEvents",
+)}
+
+${helpers.single_keyword(
+    "-moz-inert",
+    "none inert",
+    engines="gecko",
+    gecko_ffi_name="mInert",
+    gecko_enum_prefix="StyleInert",
+    animation_value_type="discrete",
+    enabled_in="ua",
+    spec="Nonstandard (https://html.spec.whatwg.org/multipage/#inert-subtrees)",
+)}
+
+${helpers.single_keyword(
+    "-moz-user-input",
+    "auto none",
+    engines="gecko",
+    gecko_ffi_name="mUserInput",
+    gecko_enum_prefix="StyleUserInput",
+    animation_value_type="discrete",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-input)",
+)}
+
+${helpers.single_keyword(
+    "-moz-user-modify",
+    "read-only read-write write-only",
+    engines="gecko",
+    gecko_ffi_name="mUserModify",
+    gecko_enum_prefix="StyleUserModify",
+    needs_conversion=True,
+    animation_value_type="discrete",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-modify)",
+)}
+
+${helpers.single_keyword(
+    "-moz-user-focus",
+    "none ignore normal select-after select-before select-menu select-same select-all",
+    engines="gecko",
+    gecko_ffi_name="mUserFocus",
+    gecko_enum_prefix="StyleUserFocus",
+    animation_value_type="discrete",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-focus)",
+)}
+
+${helpers.predefined_type(
+    "caret-color",
+    "color::CaretColor",
+    "generics::color::CaretColor::auto()",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-ui/#caret-color",
+    animation_value_type="CaretColor",
+    ignored_when_colors_disabled=True,
+)}
+
+${helpers.predefined_type(
+    "accent-color",
+    "ColorOrAuto",
+    "generics::color::ColorOrAuto::Auto",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-ui-4/#widget-accent",
+    gecko_pref="layout.css.accent-color.enabled",
+    animation_value_type="ColorOrAuto",
+    ignored_when_colors_disabled=True,
+    has_effect_on_gecko_scrollbars=False,
+)}
+
+${helpers.predefined_type(
+    "color-scheme",
+    "ColorScheme",
+    "specified::color::ColorScheme::normal()",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-color-adjust/#color-scheme-prop",
+    gecko_pref="layout.css.color-scheme.enabled",
+    animation_value_type="discrete",
+    has_effect_on_gecko_scrollbars=False,
+    ignored_when_colors_disabled=True,
+    enabled_in="chrome",
+)}
+
+${helpers.predefined_type(
+    "scrollbar-color",
+    "ui::ScrollbarColor",
+    "Default::default()",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color",
+    animation_value_type="ScrollbarColor",
+    boxed=True,
+    ignored_when_colors_disabled=True,
+)}
diff --git a/servo/components/style/properties/longhands/list.mako.rs b/servo/components/style/properties/longhands/list.mako.rs
new file mode 100644
index 0000000000..51f5bf1192
--- /dev/null
+++ b/servo/components/style/properties/longhands/list.mako.rs
@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<% data.new_style_struct("List", inherited=True) %>
+
+${helpers.single_keyword(
+    "list-style-position",
+    "outside inside",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    gecko_enum_prefix="StyleListStylePosition",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-lists/#propdef-list-style-position",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+// TODO(pcwalton): Implement the full set of counter styles per CSS-COUNTER-STYLES [1] 6.1:
+//
+//     decimal-leading-zero, armenian, upper-armenian, lower-armenian, georgian, lower-roman,
+//     upper-roman
+//
+// [1]: http://dev.w3.org/csswg/css-counter-styles/
+% if engine in ["servo-2013", "servo-2020"]:
+    ${helpers.single_keyword(
+        "list-style-type",
+        "disc none circle square disclosure-open disclosure-closed",
+        extra_servo_2013_values="""
+            decimal lower-alpha upper-alpha arabic-indic bengali cambodian cjk-decimal devanagari
+            gujarati gurmukhi kannada khmer lao malayalam mongolian myanmar oriya persian telugu
+            thai tibetan cjk-earthly-branch cjk-heavenly-stem lower-greek hiragana hiragana-iroha
+            katakana katakana-iroha
+        """,
+        engines="servo-2013 servo-2020",
+        animation_value_type="discrete",
+        spec="https://drafts.csswg.org/css-lists/#propdef-list-style-type",
+        servo_restyle_damage="rebuild_and_reflow",
+    )}
+% endif
+% if engine == "gecko":
+    ${helpers.predefined_type(
+        "list-style-type",
+        "ListStyleType",
+        "computed::ListStyleType::disc()",
+        engines="gecko",
+        initial_specified_value="specified::ListStyleType::disc()",
+        animation_value_type="discrete",
+        boxed=True,
+        spec="https://drafts.csswg.org/css-lists/#propdef-list-style-type",
+        servo_restyle_damage="rebuild_and_reflow",
+    )}
+% endif
+
+${helpers.predefined_type(
+    "list-style-image",
+    "Image",
+    engines="gecko servo-2013 servo-2020",
+    initial_value="computed::Image::None",
+    initial_specified_value="specified::Image::None",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-lists/#propdef-list-style-image",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "quotes",
+    "Quotes",
+    "computed::Quotes::get_initial_value()",
+    engines="gecko servo-2013",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-content/#propdef-quotes",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
diff --git a/servo/components/style/properties/longhands/margin.mako.rs b/servo/components/style/properties/longhands/margin.mako.rs
new file mode 100644
index 0000000000..5c46cebdf2
--- /dev/null
+++ b/servo/components/style/properties/longhands/margin.mako.rs
@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import ALL_SIDES, DEFAULT_RULES_AND_PAGE, maybe_moz_logical_alias %>
+<% data.new_style_struct("Margin", inherited=False) %>
+
+% for side in ALL_SIDES:
+    <%
+        spec = "https://drafts.csswg.org/css-box/#propdef-margin-%s" % side[0]
+        if side[1]:
+            spec = "https://drafts.csswg.org/css-logical-props/#propdef-margin-%s" % side[1]
+    %>
+    ${helpers.predefined_type(
+        "margin-%s" % side[0],
+        "LengthPercentageOrAuto",
+        "computed::LengthPercentageOrAuto::zero()",
+        engines="gecko servo-2013 servo-2020",
+        aliases=maybe_moz_logical_alias(engine, side, "-moz-margin-%s"),
+        allow_quirks="No" if side[1] else "Yes",
+        animation_value_type="ComputedValue",
+        logical=side[1],
+        logical_group="margin",
+        spec=spec,
+        rule_types_allowed=DEFAULT_RULES_AND_PAGE,
+        servo_restyle_damage="reflow"
+    )}
+% endfor
+
+${helpers.predefined_type(
+    "overflow-clip-margin",
+    "Length",
+    "computed::Length::zero()",
+    parse_method="parse_non_negative",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-overflow/#propdef-overflow-clip-margin",
+    animation_value_type="ComputedValue",
+)}
+
+% for side in ALL_SIDES:
+    ${helpers.predefined_type(
+        "scroll-margin-%s" % side[0],
+        "Length",
+        "computed::Length::zero()",
+        engines="gecko",
+        logical=side[1],
+        logical_group="scroll-margin",
+        spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-%s" % side[0],
+        animation_value_type="ComputedValue",
+    )}
+% endfor
diff --git a/servo/components/style/properties/longhands/outline.mako.rs b/servo/components/style/properties/longhands/outline.mako.rs
new file mode 100644
index 0000000000..e5ae1810b4
--- /dev/null
+++ b/servo/components/style/properties/longhands/outline.mako.rs
@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import Method %>
+
+<% data.new_style_struct("Outline",
+                         inherited=False,
+                         additional_methods=[Method("outline_has_nonzero_width", "bool")]) %>
+
+// TODO(pcwalton): `invert`
+${helpers.predefined_type(
+    "outline-color",
+    "Color",
+    "computed_value::T::currentcolor()",
+    engines="gecko servo-2013",
+    initial_specified_value="specified::Color::currentcolor()",
+    animation_value_type="AnimatedColor",
+    ignored_when_colors_disabled=True,
+    spec="https://drafts.csswg.org/css-ui/#propdef-outline-color",
+)}
+
+${helpers.predefined_type(
+    "outline-style",
+    "OutlineStyle",
+    "computed::OutlineStyle::none()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    initial_specified_value="specified::OutlineStyle::none()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-ui/#propdef-outline-style",
+)}
+
+${helpers.predefined_type(
+    "outline-width",
+    "BorderSideWidth",
+    "app_units::Au::from_px(3)",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    initial_specified_value="specified::BorderSideWidth::medium()",
+    animation_value_type="NonNegativeLength",
+    spec="https://drafts.csswg.org/css-ui/#propdef-outline-width",
+)}
+
+${helpers.predefined_type(
+    "outline-offset",
+    "Length",
+    "crate::values::computed::Length::new(0.)",
+    engines="gecko servo-2013",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-ui/#propdef-outline-offset",
+)}
diff --git a/servo/components/style/properties/longhands/padding.mako.rs b/servo/components/style/properties/longhands/padding.mako.rs
new file mode 100644
index 0000000000..84683412f2
--- /dev/null
+++ b/servo/components/style/properties/longhands/padding.mako.rs
@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import ALL_SIDES, maybe_moz_logical_alias %>
+<% data.new_style_struct("Padding", inherited=False) %>
+
+% for side in ALL_SIDES:
+    <%
+        spec = "https://drafts.csswg.org/css-box/#propdef-padding-%s" % side[0]
+        if side[1]:
+            spec = "https://drafts.csswg.org/css-logical-props/#propdef-padding-%s" % side[1]
+    %>
+    ${helpers.predefined_type(
+        "padding-%s" % side[0],
+        "NonNegativeLengthPercentage",
+        "computed::NonNegativeLengthPercentage::zero()",
+        engines="gecko servo-2013 servo-2020",
+        aliases=maybe_moz_logical_alias(engine, side, "-moz-padding-%s"),
+        animation_value_type="NonNegativeLengthPercentage",
+        logical=side[1],
+        logical_group="padding",
+        spec=spec,
+        allow_quirks="No" if side[1] else "Yes",
+        servo_restyle_damage="reflow rebuild_and_reflow_inline"
+    )}
+% endfor
+
+% for side in ALL_SIDES:
+    ${helpers.predefined_type(
+        "scroll-padding-%s" % side[0],
+        "NonNegativeLengthPercentageOrAuto",
+        "computed::NonNegativeLengthPercentageOrAuto::auto()",
+        engines="gecko",
+        logical=side[1],
+        logical_group="scroll-padding",
+        spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-%s" % side[0],
+        animation_value_type="NonNegativeLengthPercentageOrAuto",
+    )}
+% endfor
diff --git a/servo/components/style/properties/longhands/page.mako.rs b/servo/components/style/properties/longhands/page.mako.rs
new file mode 100644
index 0000000000..b857ce0ca3
--- /dev/null
+++ b/servo/components/style/properties/longhands/page.mako.rs
@@ -0,0 +1,42 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import PAGE_RULE %>
+
+<% data.new_style_struct("Page", inherited=False) %>
+
+${helpers.predefined_type(
+    "size",
+    "PageSize",
+    "computed::PageSize::auto()",
+    engines="gecko",
+    gecko_pref="layout.css.page-size.enabled",
+    initial_specified_value="specified::PageSize::auto()",
+    spec="https://drafts.csswg.org/css-page-3/#page-size-prop",
+    boxed=True,
+    animation_value_type="none",
+    rule_types_allowed=PAGE_RULE,
+)}
+
+${helpers.predefined_type(
+    "page",
+    "PageName",
+    "computed::PageName::auto()",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-page-3/#using-named-pages",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "page-orientation",
+    "PageOrientation",
+    "computed::PageOrientation::Upright",
+    engines="gecko",
+    gecko_pref="layout.css.page-orientation.enabled",
+    initial_specified_value="specified::PageOrientation::Upright",
+    spec="https://drafts.csswg.org/css-page-3/#page-orientation-prop",
+    animation_value_type="none",
+    rule_types_allowed=PAGE_RULE,
+)}
diff --git a/servo/components/style/properties/longhands/position.mako.rs b/servo/components/style/properties/longhands/position.mako.rs
new file mode 100644
index 0000000000..4c974ef9dc
--- /dev/null
+++ b/servo/components/style/properties/longhands/position.mako.rs
@@ -0,0 +1,448 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%! from data import to_rust_ident %>
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import ALL_SIZES, PHYSICAL_SIDES, LOGICAL_SIDES %>
+
+<% data.new_style_struct("Position", inherited=False) %>
+
+// "top" / "left" / "bottom" / "right"
+% for side in PHYSICAL_SIDES:
+    ${helpers.predefined_type(
+        side,
+        "LengthPercentageOrAuto",
+        "computed::LengthPercentageOrAuto::auto()",
+        engines="gecko servo-2013 servo-2020",
+        spec="https://www.w3.org/TR/CSS2/visuren.html#propdef-%s" % side,
+        animation_value_type="ComputedValue",
+        allow_quirks="Yes",
+        servo_restyle_damage="reflow_out_of_flow",
+        logical_group="inset",
+    )}
+% endfor
+// inset-* logical properties, map to "top" / "left" / "bottom" / "right"
+% for side in LOGICAL_SIDES:
+    ${helpers.predefined_type(
+        "inset-%s" % side,
+        "LengthPercentageOrAuto",
+        "computed::LengthPercentageOrAuto::auto()",
+        engines="gecko servo-2013 servo-2020",
+        spec="https://drafts.csswg.org/css-logical-props/#propdef-inset-%s" % side,
+        animation_value_type="ComputedValue",
+        logical=True,
+        logical_group="inset",
+    )}
+% endfor
+
+${helpers.predefined_type(
+    "z-index",
+    "ZIndex",
+    "computed::ZIndex::auto()",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://www.w3.org/TR/CSS2/visuren.html#z-index",
+    animation_value_type="ComputedValue",
+)}
+
+// CSS Flexible Box Layout Module Level 1
+// http://www.w3.org/TR/css3-flexbox/
+
+// Flex container properties
+${helpers.single_keyword(
+    "flex-direction",
+    "row row-reverse column column-reverse",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
+    spec="https://drafts.csswg.org/css-flexbox/#flex-direction-property",
+    extra_prefixes="webkit",
+    animation_value_type="discrete",
+    servo_restyle_damage = "reflow",
+    gecko_enum_prefix = "StyleFlexDirection",
+)}
+
+${helpers.single_keyword(
+    "flex-wrap",
+    "nowrap wrap wrap-reverse",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
+    spec="https://drafts.csswg.org/css-flexbox/#flex-wrap-property",
+    extra_prefixes="webkit",
+    animation_value_type="discrete",
+    servo_restyle_damage = "reflow",
+    gecko_enum_prefix = "StyleFlexWrap",
+)}
+
+% if engine == "servo-2013":
+    // FIXME: Update Servo to support the same Syntax as Gecko.
+    ${helpers.single_keyword(
+        "justify-content",
+        "flex-start stretch flex-end center space-between space-around",
+        engines="servo-2013",
+        extra_prefixes="webkit",
+        spec="https://drafts.csswg.org/css-align/#propdef-justify-content",
+        animation_value_type="discrete",
+        servo_restyle_damage = "reflow",
+    )}
+% endif
+% if engine == "gecko":
+    ${helpers.predefined_type(
+        "justify-content",
+        "JustifyContent",
+        "specified::JustifyContent(specified::ContentDistribution::normal())",
+        engines="gecko",
+        spec="https://drafts.csswg.org/css-align/#propdef-justify-content",
+        extra_prefixes="webkit",
+        animation_value_type="discrete",
+        servo_restyle_damage="reflow",
+    )}
+
+    ${helpers.predefined_type(
+        "justify-tracks",
+        "JustifyTracks",
+        "specified::JustifyTracks::default()",
+        engines="gecko",
+        gecko_pref="layout.css.grid-template-masonry-value.enabled",
+        animation_value_type="discrete",
+        servo_restyle_damage="reflow",
+        spec="https://github.com/w3c/csswg-drafts/issues/4650",
+    )}
+% endif
+
+% if engine in ["servo-2013", "servo-2020"]:
+    // FIXME: Update Servo to support the same Syntax as Gecko.
+    ${helpers.single_keyword(
+        "align-content",
+        "stretch flex-start flex-end center space-between space-around",
+        engines="servo-2013",
+        extra_prefixes="webkit",
+        spec="https://drafts.csswg.org/css-align/#propdef-align-content",
+        animation_value_type="discrete",
+        servo_restyle_damage="reflow",
+    )}
+
+    ${helpers.single_keyword(
+        "align-items",
+        "stretch flex-start flex-end center baseline",
+        engines="servo-2013 servo-2020",
+        servo_2020_pref="layout.flexbox.enabled",
+        extra_prefixes="webkit",
+        spec="https://drafts.csswg.org/css-flexbox/#align-items-property",
+        animation_value_type="discrete",
+        servo_restyle_damage="reflow",
+    )}
+% endif
+% if engine == "gecko":
+    ${helpers.predefined_type(
+        "align-content",
+        "AlignContent",
+        "specified::AlignContent(specified::ContentDistribution::normal())",
+        engines="gecko",
+        spec="https://drafts.csswg.org/css-align/#propdef-align-content",
+        extra_prefixes="webkit",
+        animation_value_type="discrete",
+        servo_restyle_damage="reflow",
+    )}
+
+    ${helpers.predefined_type(
+        "align-tracks",
+        "AlignTracks",
+        "specified::AlignTracks::default()",
+        engines="gecko",
+        gecko_pref="layout.css.grid-template-masonry-value.enabled",
+        animation_value_type="discrete",
+        servo_restyle_damage="reflow",
+        spec="https://github.com/w3c/csswg-drafts/issues/4650",
+    )}
+
+    ${helpers.predefined_type(
+        "align-items",
+        "AlignItems",
+        "specified::AlignItems::normal()",
+        engines="gecko",
+        spec="https://drafts.csswg.org/css-align/#propdef-align-items",
+        extra_prefixes="webkit",
+        animation_value_type="discrete",
+        servo_restyle_damage="reflow",
+    )}
+
+    ${helpers.predefined_type(
+        "justify-items",
+        "JustifyItems",
+        "computed::JustifyItems::legacy()",
+        engines="gecko",
+        spec="https://drafts.csswg.org/css-align/#propdef-justify-items",
+        animation_value_type="discrete",
+    )}
+% endif
+
+// Flex item properties
+${helpers.predefined_type(
+    "flex-grow",
+    "NonNegativeNumber",
+    "From::from(0.0)",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
+    spec="https://drafts.csswg.org/css-flexbox/#flex-grow-property",
+    extra_prefixes="webkit",
+    animation_value_type="NonNegativeNumber",
+    servo_restyle_damage="reflow",
+)}
+
+${helpers.predefined_type(
+    "flex-shrink",
+    "NonNegativeNumber",
+    "From::from(1.0)",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
+    spec="https://drafts.csswg.org/css-flexbox/#flex-shrink-property",
+    extra_prefixes="webkit",
+    animation_value_type="NonNegativeNumber",
+    servo_restyle_damage = "reflow",
+)}
+
+// https://drafts.csswg.org/css-align/#align-self-property
+% if engine in ["servo-2013", "servo-2020"]:
+    // FIXME: Update Servo to support the same syntax as Gecko.
+    ${helpers.single_keyword(
+        "align-self",
+        "auto stretch flex-start flex-end center baseline",
+        engines="servo-2013 servo-2020",
+        servo_2020_pref="layout.flexbox.enabled",
+        extra_prefixes="webkit",
+        spec="https://drafts.csswg.org/css-flexbox/#propdef-align-self",
+        animation_value_type="discrete",
+        servo_restyle_damage = "reflow",
+    )}
+% endif
+% if engine == "gecko":
+    ${helpers.predefined_type(
+        "align-self",
+        "AlignSelf",
+        "specified::AlignSelf(specified::SelfAlignment::auto())",
+        engines="gecko",
+        spec="https://drafts.csswg.org/css-align/#align-self-property",
+        extra_prefixes="webkit",
+        animation_value_type="discrete",
+    )}
+
+    ${helpers.predefined_type(
+        "justify-self",
+        "JustifySelf",
+        "specified::JustifySelf(specified::SelfAlignment::auto())",
+        engines="gecko",
+        spec="https://drafts.csswg.org/css-align/#justify-self-property",
+        animation_value_type="discrete",
+    )}
+% endif
+
+// https://drafts.csswg.org/css-flexbox/#propdef-order
+${helpers.predefined_type(
+    "order",
+    "Integer",
+    "0",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
+    extra_prefixes="webkit",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-flexbox/#order-property",
+    servo_restyle_damage="reflow",
+)}
+
+${helpers.predefined_type(
+    "flex-basis",
+    "FlexBasis",
+    "computed::FlexBasis::auto()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
+    spec="https://drafts.csswg.org/css-flexbox/#flex-basis-property",
+    extra_prefixes="webkit",
+    animation_value_type="FlexBasis",
+    servo_restyle_damage="reflow",
+    boxed=True,
+)}
+
+% for (size, logical) in ALL_SIZES:
+    <%
+        spec = "https://drafts.csswg.org/css-box/#propdef-%s"
+        if logical:
+            spec = "https://drafts.csswg.org/css-logical-props/#propdef-%s"
+    %>
+    // width, height, block-size, inline-size
+    ${helpers.predefined_type(
+        size,
+        "Size",
+        "computed::Size::auto()",
+        engines="gecko servo-2013 servo-2020",
+        logical=logical,
+        logical_group="size",
+        allow_quirks="No" if logical else "Yes",
+        spec=spec % size,
+        animation_value_type="Size",
+        servo_restyle_damage="reflow",
+    )}
+    // min-width, min-height, min-block-size, min-inline-size
+    ${helpers.predefined_type(
+        "min-%s" % size,
+        "Size",
+        "computed::Size::auto()",
+        engines="gecko servo-2013 servo-2020",
+        logical=logical,
+        logical_group="min-size",
+        allow_quirks="No" if logical else "Yes",
+        spec=spec % size,
+        animation_value_type="Size",
+        servo_restyle_damage="reflow",
+    )}
+    ${helpers.predefined_type(
+        "max-%s" % size,
+        "MaxSize",
+        "computed::MaxSize::none()",
+        engines="gecko servo-2013 servo-2020",
+        logical=logical,
+        logical_group="max-size",
+        allow_quirks="No" if logical else "Yes",
+        spec=spec % size,
+        animation_value_type="MaxSize",
+        servo_restyle_damage="reflow",
+    )}
+% endfor
+
+${helpers.single_keyword(
+    "box-sizing",
+    "content-box border-box",
+    engines="gecko servo-2013 servo-2020",
+    extra_prefixes="moz:layout.css.prefixes.box-sizing webkit",
+    spec="https://drafts.csswg.org/css-ui/#propdef-box-sizing",
+    gecko_enum_prefix="StyleBoxSizing",
+    custom_consts={ "content-box": "Content", "border-box": "Border" },
+    animation_value_type="discrete",
+    servo_restyle_damage = "reflow",
+)}
+
+${helpers.single_keyword(
+    "object-fit",
+    "fill contain cover none scale-down",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-images/#propdef-object-fit",
+    gecko_enum_prefix = "StyleObjectFit",
+)}
+
+${helpers.predefined_type(
+    "object-position",
+    "Position",
+    "computed::Position::center()",
+    engines="gecko",
+    boxed=True,
+    spec="https://drafts.csswg.org/css-images-3/#the-object-position",
+    animation_value_type="ComputedValue",
+)}
+
+% for kind in ["row", "column"]:
+    % for range in ["start", "end"]:
+        ${helpers.predefined_type(
+            "grid-%s-%s" % (kind, range),
+            "GridLine",
+            "Default::default()",
+            engines="gecko",
+            animation_value_type="discrete",
+            spec="https://drafts.csswg.org/css-grid/#propdef-grid-%s-%s" % (kind, range),
+        )}
+    % endfor
+
+    ${helpers.predefined_type(
+        "grid-auto-%ss" % kind,
+        "ImplicitGridTracks",
+        "Default::default()",
+        engines="gecko",
+        animation_value_type="discrete",
+        spec="https://drafts.csswg.org/css-grid/#propdef-grid-auto-%ss" % kind,
+    )}
+
+    ${helpers.predefined_type(
+        "grid-template-%ss" % kind,
+        "GridTemplateComponent",
+        "specified::GenericGridTemplateComponent::None",
+        engines="gecko",
+        spec="https://drafts.csswg.org/css-grid/#propdef-grid-template-%ss" % kind,
+        animation_value_type="ComputedValue",
+    )}
+
+% endfor
+
+${helpers.predefined_type(
+    "masonry-auto-flow",
+    "MasonryAutoFlow",
+    "computed::MasonryAutoFlow::initial()",
+    engines="gecko",
+    gecko_pref="layout.css.grid-template-masonry-value.enabled",
+    animation_value_type="discrete",
+    spec="https://github.com/w3c/csswg-drafts/issues/4650",
+)}
+
+${helpers.predefined_type(
+    "grid-auto-flow",
+    "GridAutoFlow",
+    "computed::GridAutoFlow::ROW",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow",
+)}
+
+${helpers.predefined_type(
+    "grid-template-areas",
+    "GridTemplateAreas",
+    "computed::GridTemplateAreas::none()",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-grid/#propdef-grid-template-areas",
+)}
+
+${helpers.predefined_type(
+    "column-gap",
+    "length::NonNegativeLengthPercentageOrNormal",
+    "computed::length::NonNegativeLengthPercentageOrNormal::normal()",
+    engines="gecko servo-2013",
+    aliases="grid-column-gap" if engine == "gecko" else "",
+    servo_2013_pref="layout.columns.enabled",
+    spec="https://drafts.csswg.org/css-align-3/#propdef-column-gap",
+    animation_value_type="NonNegativeLengthPercentageOrNormal",
+    servo_restyle_damage="reflow",
+)}
+
+// no need for -moz- prefixed alias for this property
+${helpers.predefined_type(
+    "row-gap",
+    "length::NonNegativeLengthPercentageOrNormal",
+    "computed::length::NonNegativeLengthPercentageOrNormal::normal()",
+    engines="gecko",
+    aliases="grid-row-gap",
+    spec="https://drafts.csswg.org/css-align-3/#propdef-row-gap",
+    animation_value_type="NonNegativeLengthPercentageOrNormal",
+    servo_restyle_damage="reflow",
+)}
+
+${helpers.predefined_type(
+    "aspect-ratio",
+    "AspectRatio",
+    "computed::AspectRatio::auto()",
+    engines="gecko servo-2013",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.csswg.org/css-sizing-4/#aspect-ratio",
+    servo_restyle_damage="reflow",
+)}
+
+% for (size, logical) in ALL_SIZES:
+    ${helpers.predefined_type(
+        "contain-intrinsic-" + size,
+        "ContainIntrinsicSize",
+        "computed::ContainIntrinsicSize::None",
+        engines="gecko",
+        logical_group="contain-intrinsic-size",
+        logical=logical,
+        gecko_pref="layout.css.contain-intrinsic-size.enabled",
+        spec="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override",
+        animation_value_type="NonNegativeLength",
+    )}
+% endfor
diff --git a/servo/components/style/properties/longhands/svg.mako.rs b/servo/components/style/properties/longhands/svg.mako.rs
new file mode 100644
index 0000000000..d579473a02
--- /dev/null
+++ b/servo/components/style/properties/longhands/svg.mako.rs
@@ -0,0 +1,258 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<% data.new_style_struct("SVG", inherited=False, gecko_name="SVGReset") %>
+
+${helpers.single_keyword(
+    "vector-effect",
+    "none non-scaling-stroke",
+    engines="gecko",
+    gecko_enum_prefix="StyleVectorEffect",
+    animation_value_type="discrete",
+    spec="https://www.w3.org/TR/SVGTiny12/painting.html#VectorEffectProperty",
+)}
+
+// Section 13 - Gradients and Patterns
+
+${helpers.predefined_type(
+    "stop-color",
+    "Color",
+    "computed::Color::black()",
+    engines="gecko",
+    animation_value_type="AnimatedRGBA",
+    spec="https://www.w3.org/TR/SVGTiny12/painting.html#StopColorProperty",
+)}
+
+${helpers.predefined_type(
+    "stop-opacity",
+    "Opacity",
+    "1.0",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://svgwg.org/svg2-draft/pservers.html#StopOpacityProperty",
+)}
+
+// Section 15 - Filter Effects
+
+${helpers.predefined_type(
+    "flood-color",
+    "Color",
+    "computed::Color::black()",
+    engines="gecko",
+    animation_value_type="AnimatedColor",
+    spec="https://www.w3.org/TR/SVG/filters.html#FloodColorProperty",
+)}
+
+${helpers.predefined_type(
+    "flood-opacity",
+    "Opacity",
+    "1.0",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://drafts.fxtf.org/filter-effects/#FloodOpacityProperty",
+)}
+
+${helpers.predefined_type(
+    "lighting-color",
+    "Color",
+    "computed::Color::white()",
+    engines="gecko",
+    animation_value_type="AnimatedColor",
+    spec="https://www.w3.org/TR/SVG/filters.html#LightingColorProperty",
+)}
+
+// CSS Masking Module Level 1
+// https://drafts.fxtf.org/css-masking
+${helpers.single_keyword(
+    "mask-type",
+    "luminance alpha",
+    engines="gecko",
+    gecko_enum_prefix="StyleMaskType",
+    animation_value_type="discrete",
+    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-type",
+)}
+
+${helpers.predefined_type(
+    "clip-path",
+    "basic_shape::ClipPath",
+    "generics::basic_shape::ClipPath::None",
+    engines="gecko",
+    extra_prefixes="webkit",
+    animation_value_type="basic_shape::ClipPath",
+    spec="https://drafts.fxtf.org/css-masking/#propdef-clip-path",
+)}
+
+${helpers.single_keyword(
+    "mask-mode",
+    "match-source alpha luminance",
+    engines="gecko",
+    gecko_enum_prefix="StyleMaskMode",
+    vector=True,
+    animation_value_type="discrete",
+    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-mode",
+)}
+
+${helpers.predefined_type(
+    "mask-repeat",
+    "BackgroundRepeat",
+    "computed::BackgroundRepeat::repeat()",
+    engines="gecko",
+    initial_specified_value="specified::BackgroundRepeat::repeat()",
+    extra_prefixes="webkit",
+    animation_value_type="discrete",
+    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-repeat",
+    vector=True,
+)}
+
+% for (axis, direction) in [("x", "Horizontal"), ("y", "Vertical")]:
+    ${helpers.predefined_type(
+        "mask-position-" + axis,
+        "position::" + direction + "Position",
+        "computed::LengthPercentage::zero_percent()",
+        engines="gecko",
+        extra_prefixes="webkit",
+        initial_specified_value="specified::PositionComponent::Center",
+        spec="https://drafts.fxtf.org/css-masking/#propdef-mask-position",
+        animation_value_type="ComputedValue",
+        vector_animation_type="repeatable_list",
+        vector=True,
+    )}
+% endfor
+
+${helpers.single_keyword(
+    "mask-clip",
+    "border-box content-box padding-box",
+    engines="gecko",
+    extra_gecko_values="fill-box stroke-box view-box no-clip",
+    vector=True,
+    extra_prefixes="webkit",
+    gecko_enum_prefix="StyleGeometryBox",
+    gecko_inexhaustive=True,
+    animation_value_type="discrete",
+    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-clip",
+)}
+
+${helpers.single_keyword(
+    "mask-origin",
+    "border-box content-box padding-box",
+    engines="gecko",
+    extra_gecko_values="fill-box stroke-box view-box",
+    vector=True,
+    extra_prefixes="webkit",
+    gecko_enum_prefix="StyleGeometryBox",
+    gecko_inexhaustive=True,
+    animation_value_type="discrete",
+    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-origin",
+)}
+
+${helpers.predefined_type(
+    "mask-size",
+    "background::BackgroundSize",
+    "computed::BackgroundSize::auto()",
+    engines="gecko",
+    initial_specified_value="specified::BackgroundSize::auto()",
+    extra_prefixes="webkit",
+    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-size",
+    animation_value_type="MaskSizeList",
+    vector=True,
+    vector_animation_type="repeatable_list",
+)}
+
+${helpers.single_keyword(
+    "mask-composite",
+    "add subtract intersect exclude",
+    engines="gecko",
+    gecko_enum_prefix="StyleMaskComposite",
+    vector=True,
+    extra_prefixes="webkit",
+    animation_value_type="discrete",
+    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-composite",
+)}
+
+${helpers.predefined_type(
+    "mask-image",
+    "Image",
+    engines="gecko",
+    initial_value="computed::Image::None",
+    initial_specified_value="specified::Image::None",
+    parse_method="parse_with_cors_anonymous",
+    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-image",
+    vector=True,
+    extra_prefixes="webkit",
+    animation_value_type="discrete",
+)}
+
+${helpers.predefined_type(
+    "x",
+    "LengthPercentage",
+    "computed::LengthPercentage::zero()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://svgwg.org/svg2-draft/geometry.html#X",
+)}
+
+${helpers.predefined_type(
+    "y",
+    "LengthPercentage",
+    "computed::LengthPercentage::zero()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://svgwg.org/svg2-draft/geometry.html#Y",
+)}
+
+${helpers.predefined_type(
+    "cx",
+    "LengthPercentage",
+    "computed::LengthPercentage::zero()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://svgwg.org/svg2-draft/geometry.html#CX",
+)}
+
+${helpers.predefined_type(
+    "cy",
+    "LengthPercentage",
+    "computed::LengthPercentage::zero()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://svgwg.org/svg2-draft/geometry.html#CY",
+)}
+
+${helpers.predefined_type(
+    "rx",
+    "NonNegativeLengthPercentageOrAuto",
+    "computed::NonNegativeLengthPercentageOrAuto::auto()",
+    engines="gecko",
+    animation_value_type="LengthPercentageOrAuto",
+    spec="https://svgwg.org/svg2-draft/geometry.html#RX",
+)}
+
+${helpers.predefined_type(
+    "ry",
+    "NonNegativeLengthPercentageOrAuto",
+    "computed::NonNegativeLengthPercentageOrAuto::auto()",
+    engines="gecko",
+    animation_value_type="LengthPercentageOrAuto",
+    spec="https://svgwg.org/svg2-draft/geometry.html#RY",
+)}
+
+${helpers.predefined_type(
+    "r",
+    "NonNegativeLengthPercentage",
+    "computed::NonNegativeLengthPercentage::zero()",
+    engines="gecko",
+    animation_value_type="LengthPercentage",
+    spec="https://svgwg.org/svg2-draft/geometry.html#R",
+)}
+
+${helpers.predefined_type(
+    "d",
+    "DProperty",
+    "specified::DProperty::none()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="https://svgwg.org/svg2-draft/paths.html#TheDProperty",
+)}
diff --git a/servo/components/style/properties/longhands/table.mako.rs b/servo/components/style/properties/longhands/table.mako.rs
new file mode 100644
index 0000000000..104c28b8e0
--- /dev/null
+++ b/servo/components/style/properties/longhands/table.mako.rs
@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<% data.new_style_struct("Table", inherited=False) %>
+
+${helpers.single_keyword(
+    "table-layout",
+    "auto fixed",
+    engines="gecko servo-2013",
+    gecko_ffi_name="mLayoutStrategy",
+    animation_value_type="discrete",
+    gecko_enum_prefix="StyleTableLayout",
+    spec="https://drafts.csswg.org/css-tables/#propdef-table-layout",
+    servo_restyle_damage="reflow",
+)}
+
+${helpers.predefined_type(
+    "-x-span",
+    "Integer",
+    "1",
+    engines="gecko",
+    spec="Internal-only (for `<col span>` pres attr)",
+    animation_value_type="none",
+    enabled_in="",
+)}
diff --git a/servo/components/style/properties/longhands/text.mako.rs b/servo/components/style/properties/longhands/text.mako.rs
new file mode 100644
index 0000000000..71fe83b729
--- /dev/null
+++ b/servo/components/style/properties/longhands/text.mako.rs
@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import Method %>
+
+<% data.new_style_struct("Text", inherited=False, gecko_name="TextReset") %>
+
+${helpers.predefined_type(
+    "text-overflow",
+    "TextOverflow",
+    "computed::TextOverflow::get_initial_value()",
+    engines="gecko servo-2013",
+    animation_value_type="discrete",
+    boxed=True,
+    spec="https://drafts.csswg.org/css-ui/#propdef-text-overflow",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.single_keyword(
+    "unicode-bidi",
+    "normal embed isolate bidi-override isolate-override plaintext",
+    engines="gecko servo-2013",
+    gecko_enum_prefix="StyleUnicodeBidi",
+    animation_value_type="none",
+    spec="https://drafts.csswg.org/css-writing-modes/#propdef-unicode-bidi",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.predefined_type(
+    "text-decoration-line",
+    "TextDecorationLine",
+    "specified::TextDecorationLine::none()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::TextDecorationLine::none()",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-line",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
+
+${helpers.single_keyword(
+    "text-decoration-style",
+    "solid double dotted dashed wavy -moz-none",
+    engines="gecko servo-2020",
+    gecko_enum_prefix="StyleTextDecorationStyle",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-style",
+)}
+
+${helpers.predefined_type(
+    "text-decoration-color",
+    "Color",
+    "computed_value::T::currentcolor()",
+    engines="gecko servo-2020",
+    initial_specified_value="specified::Color::currentcolor()",
+    animation_value_type="AnimatedColor",
+    ignored_when_colors_disabled=True,
+    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-color",
+)}
+
+${helpers.predefined_type(
+    "initial-letter",
+    "InitialLetter",
+    "computed::InitialLetter::normal()",
+    engines="gecko",
+    initial_specified_value="specified::InitialLetter::normal()",
+    animation_value_type="discrete",
+    gecko_pref="layout.css.initial-letter.enabled",
+    spec="https://drafts.csswg.org/css-inline/#sizing-drop-initials",
+)}
+
+${helpers.predefined_type(
+   "text-decoration-thickness",
+   "TextDecorationLength",
+   "generics::text::GenericTextDecorationLength::Auto",
+   engines="gecko",
+   initial_specified_value="generics::text::GenericTextDecorationLength::Auto",
+   animation_value_type="ComputedValue",
+   spec="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property"
+)}
diff --git a/servo/components/style/properties/longhands/ui.mako.rs b/servo/components/style/properties/longhands/ui.mako.rs
new file mode 100644
index 0000000000..3ece832fef
--- /dev/null
+++ b/servo/components/style/properties/longhands/ui.mako.rs
@@ -0,0 +1,395 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import DEFAULT_RULES_EXCEPT_KEYFRAME, Method %>
+
+// CSS Basic User Interface Module Level 1
+// https://drafts.csswg.org/css-ui-3/
+<% data.new_style_struct("UI", inherited=False, gecko_name="UIReset") %>
+
+// TODO spec says that UAs should not support this
+// we should probably remove from gecko (https://bugzilla.mozilla.org/show_bug.cgi?id=1328331)
+${helpers.single_keyword(
+    "ime-mode",
+    "auto normal active disabled inactive",
+    engines="gecko",
+    gecko_enum_prefix="StyleImeMode",
+    gecko_ffi_name="mIMEMode",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-ui/#input-method-editor",
+)}
+
+${helpers.single_keyword(
+    "scrollbar-width",
+    "auto thin none",
+    engines="gecko",
+    gecko_enum_prefix="StyleScrollbarWidth",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width"
+)}
+
+${helpers.predefined_type(
+    "user-select",
+    "UserSelect",
+    "computed::UserSelect::Auto",
+    engines="gecko",
+    extra_prefixes="moz webkit",
+    animation_value_type="discrete",
+    spec="https://drafts.csswg.org/css-ui-4/#propdef-user-select",
+)}
+
+// TODO(emilio): This probably should be hidden from content.
+${helpers.single_keyword(
+    "-moz-window-dragging",
+    "default drag no-drag",
+    engines="gecko",
+    gecko_ffi_name="mWindowDragging",
+    gecko_enum_prefix="StyleWindowDragging",
+    animation_value_type="discrete",
+    spec="None (Nonstandard Firefox-only property)",
+)}
+
+// TODO(emilio): Maybe make shadow behavior on macOS match Linux / Windows, and remove this
+// property.
+${helpers.single_keyword(
+    "-moz-window-shadow",
+    "default none",
+    engines="gecko",
+    gecko_ffi_name="mWindowShadow",
+    gecko_enum_prefix="StyleWindowShadow",
+    gecko_inexhaustive=True,
+    animation_value_type="discrete",
+    enabled_in="chrome",
+    spec="None (Nonstandard internal property)",
+)}
+
+${helpers.predefined_type(
+    "-moz-window-opacity",
+    "Opacity",
+    "1.0",
+    engines="gecko",
+    gecko_ffi_name="mWindowOpacity",
+    animation_value_type="ComputedValue",
+    spec="None (Nonstandard internal property)",
+    enabled_in="chrome",
+)}
+
+${helpers.predefined_type(
+    "-moz-window-transform",
+    "Transform",
+    "generics::transform::Transform::none()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="None (Nonstandard internal property)",
+    enabled_in="chrome",
+)}
+
+${helpers.predefined_type(
+    "-moz-window-transform-origin",
+    "TransformOrigin",
+    "computed::TransformOrigin::initial_value()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    gecko_ffi_name="mWindowTransformOrigin",
+    boxed=True,
+    spec="None (Nonstandard internal property)",
+    enabled_in="chrome",
+)}
+
+${helpers.predefined_type(
+    "-moz-window-input-region-margin",
+    "Length",
+    "computed::Length::zero()",
+    engines="gecko",
+    animation_value_type="ComputedValue",
+    spec="None (Nonstandard internal property)",
+    enabled_in="chrome",
+)}
+
+// Hack to allow chrome to hide stuff only visually (without hiding it from
+// a11y).
+${helpers.predefined_type(
+    "-moz-subtree-hidden-only-visually",
+    "BoolInteger",
+    "computed::BoolInteger::zero()",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="None (Nonstandard internal property)",
+    enabled_in="chrome",
+)}
+
+// TODO(emilio): Probably also should be hidden from content.
+${helpers.predefined_type(
+    "-moz-force-broken-image-icon",
+    "BoolInteger",
+    "computed::BoolInteger::zero()",
+    engines="gecko",
+    animation_value_type="discrete",
+    spec="None (Nonstandard Firefox-only property)",
+)}
+
+<% transition_extra_prefixes = "moz:layout.css.prefixes.transitions webkit" %>
+
+${helpers.predefined_type(
+    "transition-duration",
+    "Time",
+    "computed::Time::zero()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::Time::zero()",
+    parse_method="parse_non_negative",
+    vector=True,
+    need_index=True,
+    animation_value_type="none",
+    extra_prefixes=transition_extra_prefixes,
+    spec="https://drafts.csswg.org/css-transitions/#propdef-transition-duration",
+)}
+
+${helpers.predefined_type(
+    "transition-timing-function",
+    "TimingFunction",
+    "computed::TimingFunction::ease()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::TimingFunction::ease()",
+    vector=True,
+    need_index=True,
+    animation_value_type="none",
+    extra_prefixes=transition_extra_prefixes,
+    spec="https://drafts.csswg.org/css-transitions/#propdef-transition-timing-function",
+)}
+
+${helpers.predefined_type(
+    "transition-property",
+    "TransitionProperty",
+    "computed::TransitionProperty::all()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::TransitionProperty::all()",
+    vector=True,
+    allow_empty="NotInitial",
+    need_index=True,
+    animation_value_type="none",
+    extra_prefixes=transition_extra_prefixes,
+    spec="https://drafts.csswg.org/css-transitions/#propdef-transition-property",
+)}
+
+${helpers.predefined_type(
+    "transition-delay",
+    "Time",
+    "computed::Time::zero()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::Time::zero()",
+    vector=True,
+    need_index=True,
+    animation_value_type="none",
+    extra_prefixes=transition_extra_prefixes,
+    spec="https://drafts.csswg.org/css-transitions/#propdef-transition-delay",
+)}
+
+<% animation_extra_prefixes = "moz:layout.css.prefixes.animations webkit" %>
+
+${helpers.predefined_type(
+    "animation-name",
+    "AnimationName",
+    "computed::AnimationName::none()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::AnimationName::none()",
+    vector=True,
+    need_index=True,
+    animation_value_type="none",
+    extra_prefixes=animation_extra_prefixes,
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+    spec="https://drafts.csswg.org/css-animations/#propdef-animation-name",
+)}
+
+${helpers.predefined_type(
+    "animation-duration",
+    "Time",
+    "computed::Time::zero()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::Time::zero()",
+    parse_method="parse_non_negative",
+    vector=True,
+    need_index=True,
+    animation_value_type="none",
+    extra_prefixes=animation_extra_prefixes,
+    spec="https://drafts.csswg.org/css-transitions/#propdef-transition-duration",
+)}
+
+// animation-timing-function is the exception to the rule for allowed_in_keyframe_block:
+// https://drafts.csswg.org/css-animations/#keyframes
+${helpers.predefined_type(
+    "animation-timing-function",
+    "TimingFunction",
+    "computed::TimingFunction::ease()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::TimingFunction::ease()",
+    vector=True,
+    need_index=True,
+    animation_value_type="none",
+    extra_prefixes=animation_extra_prefixes,
+    spec="https://drafts.csswg.org/css-transitions/#propdef-animation-timing-function",
+)}
+
+${helpers.predefined_type(
+    "animation-iteration-count",
+    "AnimationIterationCount",
+    "computed::AnimationIterationCount::one()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::AnimationIterationCount::one()",
+    vector=True,
+    need_index=True,
+    animation_value_type="none",
+    extra_prefixes=animation_extra_prefixes,
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+    spec="https://drafts.csswg.org/css-animations/#propdef-animation-iteration-count",
+)}
+
+<% animation_direction_custom_consts = { "alternate-reverse": "Alternate_reverse" } %>
+${helpers.single_keyword(
+    "animation-direction",
+    "normal reverse alternate alternate-reverse",
+    engines="gecko servo-2013 servo-2020",
+    need_index=True,
+    animation_value_type="none",
+    vector=True,
+    gecko_enum_prefix="PlaybackDirection",
+    custom_consts=animation_direction_custom_consts,
+    extra_prefixes=animation_extra_prefixes,
+    gecko_inexhaustive=True,
+    spec="https://drafts.csswg.org/css-animations/#propdef-animation-direction",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
+${helpers.single_keyword(
+    "animation-play-state",
+    "running paused",
+    engines="gecko servo-2013 servo-2020",
+    need_index=True,
+    animation_value_type="none",
+    vector=True,
+    extra_prefixes=animation_extra_prefixes,
+    gecko_enum_prefix="StyleAnimationPlayState",
+    spec="https://drafts.csswg.org/css-animations/#propdef-animation-play-state",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
+${helpers.single_keyword(
+    "animation-fill-mode",
+    "none forwards backwards both",
+    engines="gecko servo-2013 servo-2020",
+    need_index=True,
+    animation_value_type="none",
+    vector=True,
+    gecko_enum_prefix="FillMode",
+    extra_prefixes=animation_extra_prefixes,
+    gecko_inexhaustive=True,
+    spec="https://drafts.csswg.org/css-animations/#propdef-animation-fill-mode",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
+${helpers.single_keyword(
+    "animation-composition",
+    "replace add accumulate",
+    engines="gecko",
+    need_index=True,
+    animation_value_type="none",
+    vector=True,
+    gecko_enum_prefix="CompositeOperation",
+    gecko_inexhaustive=True,
+    gecko_pref="layout.css.animation-composition.enabled",
+    spec="https://drafts.csswg.org/css-animations-2/#animation-composition",
+)}
+
+${helpers.predefined_type(
+    "animation-delay",
+    "Time",
+    "computed::Time::zero()",
+    engines="gecko servo-2013 servo-2020",
+    initial_specified_value="specified::Time::zero()",
+    vector=True,
+    need_index=True,
+    animation_value_type="none",
+    extra_prefixes=animation_extra_prefixes,
+    spec="https://drafts.csswg.org/css-animations/#propdef-animation-delay",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
+${helpers.predefined_type(
+    "animation-timeline",
+    "AnimationTimeline",
+    "computed::AnimationTimeline::auto()",
+    engines="gecko",
+    initial_specified_value="specified::AnimationTimeline::auto()",
+    vector=True,
+    need_index=True,
+    animation_value_type="none",
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/css-animations-2/#propdef-animation-timeline",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
+${helpers.predefined_type(
+    "scroll-timeline-name",
+    "ScrollTimelineName",
+    "computed::ScrollTimelineName::none()",
+    vector=True,
+    need_index=True,
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-name",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
+${helpers.predefined_type(
+    "scroll-timeline-axis",
+    "ScrollAxis",
+    "computed::ScrollAxis::default()",
+    vector=True,
+    need_index=True,
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-axis",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
+${helpers.predefined_type(
+    "view-timeline-name",
+    "ScrollTimelineName",
+    "computed::ScrollTimelineName::none()",
+    vector=True,
+    need_index=True,
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
+${helpers.predefined_type(
+    "view-timeline-axis",
+    "ScrollAxis",
+    "computed::ScrollAxis::default()",
+    vector=True,
+    need_index=True,
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
+${helpers.predefined_type(
+    "view-timeline-inset",
+    "ViewTimelineInset",
+    "computed::ViewTimelineInset::default()",
+    vector=True,
+    need_index=True,
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
diff --git a/servo/components/style/properties/longhands/xul.mako.rs b/servo/components/style/properties/longhands/xul.mako.rs
new file mode 100644
index 0000000000..a939b01892
--- /dev/null
+++ b/servo/components/style/properties/longhands/xul.mako.rs
@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import Method %>
+
+// Non-standard properties that Gecko uses for XUL elements.
+<% data.new_style_struct("XUL", inherited=False) %>
+
+${helpers.single_keyword(
+    "-moz-box-align",
+    "stretch start center baseline end",
+    engines="gecko",
+    gecko_ffi_name="mBoxAlign",
+    gecko_enum_prefix="StyleBoxAlign",
+    animation_value_type="discrete",
+    aliases="-webkit-box-align",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-align)",
+)}
+
+${helpers.single_keyword(
+    "-moz-box-direction",
+    "normal reverse",
+    engines="gecko",
+    gecko_ffi_name="mBoxDirection",
+    gecko_enum_prefix="StyleBoxDirection",
+    animation_value_type="discrete",
+    aliases="-webkit-box-direction",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-direction)",
+)}
+
+${helpers.predefined_type(
+    "-moz-box-flex",
+    "NonNegativeNumber",
+    "From::from(0.)",
+    engines="gecko",
+    gecko_ffi_name="mBoxFlex",
+    animation_value_type="NonNegativeNumber",
+    aliases="-webkit-box-flex",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex)",
+)}
+
+${helpers.single_keyword(
+    "-moz-box-orient",
+    "horizontal vertical",
+    engines="gecko",
+    gecko_ffi_name="mBoxOrient",
+    gecko_aliases="inline-axis=horizontal block-axis=vertical",
+    gecko_enum_prefix="StyleBoxOrient",
+    animation_value_type="discrete",
+    aliases="-webkit-box-orient",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient)",
+)}
+
+${helpers.single_keyword(
+    "-moz-box-pack",
+    "start center end justify",
+    engines="gecko",
+    gecko_ffi_name="mBoxPack",
+    gecko_enum_prefix="StyleBoxPack",
+    animation_value_type="discrete",
+    aliases="-webkit-box-pack",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack)",
+)}
+
+// NOTE(heycam): Odd that the initial value is 1 yet 0 is a valid value. There
+// are uses of `-moz-box-ordinal-group: 0` in the tree, too.
+${helpers.predefined_type(
+    "-moz-box-ordinal-group",
+    "Integer",
+    "1",
+    engines="gecko",
+    parse_method="parse_non_negative",
+    aliases="-webkit-box-ordinal-group",
+    gecko_ffi_name="mBoxOrdinal",
+    animation_value_type="discrete",
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-box-ordinal-group)",
+)}
diff --git a/servo/components/style/properties/mod.rs b/servo/components/style/properties/mod.rs
new file mode 100644
index 0000000000..9eb567ca6f
--- /dev/null
+++ b/servo/components/style/properties/mod.rs
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+//! Supported CSS properties and the cascade.
+
+pub mod cascade;
+pub mod declaration_block;
+
+/// The CSS properties supported by the style system.
+/// Generated from the properties.mako.rs template by build.rs
+#[macro_use]
+#[allow(unsafe_code)]
+#[deny(missing_docs)]
+pub mod generated {
+    include!(concat!(env!("OUT_DIR"), "/properties.rs"));
+
+    #[cfg(feature = "gecko")]
+    #[allow(unsafe_code, missing_docs)]
+    pub mod gecko {
+        include!(concat!(env!("OUT_DIR"), "/gecko_properties.rs"));
+    }
+}
+
+pub use self::cascade::*;
+pub use self::declaration_block::*;
+pub use self::generated::*;
diff --git a/servo/components/style/properties/properties.html.mako b/servo/components/style/properties/properties.html.mako
new file mode 100644
index 0000000000..5c51593517
--- /dev/null
+++ b/servo/components/style/properties/properties.html.mako
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Supported CSS properties in Servo</title>
+    <link rel="stylesheet" type="text/css" href="../normalize.css">
+    <link rel="stylesheet" type="text/css" href="../rustdoc.css">
+    <link rel="stylesheet" type="text/css" href="../light.css">
+</head>
+<body class="rustdoc">
+    <section id='main' class="content mod">
+      <h1 class='fqn'><span class='in-band'>CSS properties currently supported in Servo</span></h1>
+      % for kind, props in sorted(properties.items()):
+      <h2>${kind.capitalize()}</h2>
+      <table>
+        <tr>
+          <th>Name</th>
+          <th>Pref</th>
+        </tr>
+        % for name, data in sorted(props.items()):
+          <tr>
+            <td><code>${name}</code></td>
+            <td><code>${data['pref'] or ''}</code></td>
+          </tr>
+        % endfor
+      </table>
+      % endfor
+    </section>
+</body>
+</html>
diff --git a/servo/components/style/properties/properties.mako.rs b/servo/components/style/properties/properties.mako.rs
new file mode 100644
index 0000000000..63b3f971f9
--- /dev/null
+++ b/servo/components/style/properties/properties.mako.rs
@@ -0,0 +1,4273 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+// This file is a Mako template: http://www.makotemplates.org/
+
+// Please note that valid Rust syntax may be mangled by the Mako parser.
+// For example, Vec<&Foo> will be mangled as Vec&Foo>. To work around these issues, the code
+// can be escaped. In the above example, Vec<<&Foo> or Vec< &Foo> achieves the desired result of Vec<&Foo>.
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+use app_units::Au;
+use arrayvec::{ArrayVec, Drain as ArrayVecDrain};
+use servo_arc::{Arc, UniqueArc};
+use std::borrow::Cow;
+use std::{ops, ptr};
+use std::fmt::{self, Write};
+use std::mem;
+
+use cssparser::{Parser, TokenSerializationType};
+use cssparser::ParserInput;
+#[cfg(feature = "servo")] use euclid::SideOffsets2D;
+use crate::context::QuirksMode;
+#[cfg(feature = "gecko")] use crate::gecko_bindings::structs::{self, nsCSSPropertyID};
+#[cfg(feature = "servo")] use crate::logical_geometry::LogicalMargin;
+#[cfg(feature = "servo")] use crate::computed_values;
+use crate::logical_geometry::WritingMode;
+use malloc_size_of::{MallocSizeOf, MallocSizeOfOps};
+use crate::computed_value_flags::*;
+use fxhash::FxHashMap;
+use crate::media_queries::Device;
+use crate::parser::ParserContext;
+use crate::selector_parser::PseudoElement;
+#[cfg(feature = "servo")] use servo_config::prefs;
+use style_traits::{CssWriter, KeywordsCollectFn, ParseError, ParsingMode};
+use style_traits::{SpecifiedValueInfo, StyleParseErrorKind, ToCss};
+use to_shmem::impl_trivial_to_shmem;
+use crate::stylesheets::{CssRuleType, CssRuleTypes, Origin, UrlExtraData};
+use crate::use_counters::UseCounters;
+use crate::values::generics::text::LineHeight;
+use crate::values::{computed, resolved, serialize_atom_name};
+use crate::values::specified::font::SystemFont;
+use crate::rule_tree::StrongRuleNode;
+use crate::str::{CssString, CssStringWriter};
+use std::cell::Cell;
+use super::declaration_block::AppendableValue;
+
+<%!
+    from collections import defaultdict
+    from data import Method, PropertyRestrictions, Keyword, to_rust_ident, \
+                     to_camel_case, RULE_VALUES, SYSTEM_FONT_LONGHANDS
+    import os.path
+%>
+
+/// Conversion with fewer impls than From/Into
+pub trait MaybeBoxed<Out> {
+    /// Convert
+    fn maybe_boxed(self) -> Out;
+}
+
+impl<T> MaybeBoxed<T> for T {
+    #[inline]
+    fn maybe_boxed(self) -> T { self }
+}
+
+impl<T> MaybeBoxed<Box<T>> for T {
+    #[inline]
+    fn maybe_boxed(self) -> Box<T> { Box::new(self) }
+}
+
+macro_rules! expanded {
+    ( $( $name: ident: $value: expr ),+ ) => {
+        expanded!( $( $name: $value, )+ )
+    };
+    ( $( $name: ident: $value: expr, )+ ) => {
+        Longhands {
+            $(
+                $name: MaybeBoxed::maybe_boxed($value),
+            )+
+        }
+    }
+}
+
+/// A module with all the code for longhand properties.
+#[allow(missing_docs)]
+pub mod longhands {
+    % for style_struct in data.style_structs:
+    include!("${repr(os.path.join(OUT_DIR, 'longhands/{}.rs'.format(style_struct.name_lower)))[1:-1]}");
+    % endfor
+    pub const ANIMATABLE_PROPERTY_COUNT: usize = ${sum(1 for prop in data.longhands if prop.animatable)};
+}
+
+macro_rules! unwrap_or_initial {
+    ($prop: ident) => (unwrap_or_initial!($prop, $prop));
+    ($prop: ident, $expr: expr) =>
+        ($expr.unwrap_or_else(|| $prop::get_initial_specified_value()));
+}
+
+/// A module with code for all the shorthand css properties, and a few
+/// serialization helpers.
+#[allow(missing_docs)]
+pub mod shorthands {
+    use cssparser::Parser;
+    use crate::parser::{Parse, ParserContext};
+    use style_traits::{ParseError, StyleParseErrorKind};
+    use crate::values::specified;
+
+    use style_traits::{CssWriter, ToCss};
+    use crate::values::specified::{BorderStyle, Color};
+    use std::fmt::{self, Write};
+
+    fn serialize_directional_border<W, I,>(
+        dest: &mut CssWriter<W>,
+        width: &I,
+        style: &BorderStyle,
+        color: &Color,
+    ) -> fmt::Result
+    where
+        W: Write,
+        I: ToCss,
+    {
+        width.to_css(dest)?;
+        // FIXME(emilio): Should we really serialize the border style if it's
+        // `solid`?
+        dest.write_char(' ')?;
+        style.to_css(dest)?;
+        if *color != Color::CurrentColor {
+            dest.write_char(' ')?;
+            color.to_css(dest)?;
+        }
+        Ok(())
+    }
+
+    % for style_struct in data.style_structs:
+    include!("${repr(os.path.join(OUT_DIR, 'shorthands/{}.rs'.format(style_struct.name_lower)))[1:-1]}");
+    % endfor
+
+    // We didn't define the 'all' shorthand using the regular helpers:shorthand
+    // mechanism, since it causes some very large types to be generated.
+    //
+    // Also, make sure logical properties appear before its physical
+    // counter-parts, in order to prevent bugs like:
+    //
+    //   https://bugzilla.mozilla.org/show_bug.cgi?id=1410028
+    //
+    // FIXME(emilio): Adopt the resolution from:
+    //
+    //   https://github.com/w3c/csswg-drafts/issues/1898
+    //
+    // when there is one, whatever that is.
+    <%
+        logical_longhands = []
+        other_longhands = []
+
+        for p in data.longhands:
+            if p.name in ['direction', 'unicode-bidi']:
+                continue;
+            if not p.enabled_in_content() and not p.experimental(engine):
+                continue;
+            if "Style" not in p.rule_types_allowed_names():
+                continue;
+            if p.logical:
+                logical_longhands.append(p.name)
+            else:
+                other_longhands.append(p.name)
+
+        data.declare_shorthand(
+            "all",
+            logical_longhands + other_longhands,
+            engines="gecko servo-2013 servo-2020",
+            spec="https://drafts.csswg.org/css-cascade-3/#all-shorthand"
+        )
+    %>
+
+    /// The max amount of longhands that the `all` shorthand will ever contain.
+    pub const ALL_SHORTHAND_MAX_LEN: usize = ${len(logical_longhands + other_longhands)};
+}
+
+<%
+    from itertools import groupby
+
+    # After this code, `data.longhands` is sorted in the following order:
+    # - first all keyword variants and all variants known to be Copy,
+    # - second all the other variants, such as all variants with the same field
+    #   have consecutive discriminants.
+    # The variable `variants` contain the same entries as `data.longhands` in
+    # the same order, but must exist separately to the data source, because
+    # we then need to add three additional variants `WideKeywordDeclaration`,
+    # `VariableDeclaration` and `CustomDeclaration`.
+
+    variants = []
+    for property in data.longhands:
+        variants.append({
+            "name": property.camel_case,
+            "type": property.specified_type(),
+            "doc": "`" + property.name + "`",
+            "copy": property.specified_is_copy(),
+        })
+
+    groups = {}
+    keyfunc = lambda x: x["type"]
+    sortkeys = {}
+    for ty, group in groupby(sorted(variants, key=keyfunc), keyfunc):
+        group = list(group)
+        groups[ty] = group
+        for v in group:
+            if len(group) == 1:
+                sortkeys[v["name"]] = (not v["copy"], 1, v["name"], "")
+            else:
+                sortkeys[v["name"]] = (not v["copy"], len(group), ty, v["name"])
+    variants.sort(key=lambda x: sortkeys[x["name"]])
+
+    # It is extremely important to sort the `data.longhands` array here so
+    # that it is in the same order as `variants`, for `LonghandId` and
+    # `PropertyDeclarationId` to coincide.
+    data.longhands.sort(key=lambda x: sortkeys[x.camel_case])
+%>
+
+// WARNING: It is *really* important for the variants of `LonghandId`
+// and `PropertyDeclaration` to be defined in the exact same order,
+// with the exception of `CSSWideKeyword`, `WithVariables` and `Custom`,
+// which don't exist in `LonghandId`.
+
+<%
+    extra_variants = [
+        {
+            "name": "CSSWideKeyword",
+            "type": "WideKeywordDeclaration",
+            "doc": "A CSS-wide keyword.",
+            "copy": False,
+        },
+        {
+            "name": "WithVariables",
+            "type": "VariableDeclaration",
+            "doc": "An unparsed declaration.",
+            "copy": False,
+        },
+        {
+            "name": "Custom",
+            "type": "CustomDeclaration",
+            "doc": "A custom property declaration.",
+            "copy": False,
+        },
+    ]
+    for v in extra_variants:
+        variants.append(v)
+        groups[v["type"]] = [v]
+%>
+
+/// Servo's representation for a property declaration.
+#[derive(ToShmem)]
+#[repr(u16)]
+pub enum PropertyDeclaration {
+    % for variant in variants:
+    /// ${variant["doc"]}
+    ${variant["name"]}(${variant["type"]}),
+    % endfor
+}
+
+// There's one of these for each parsed declaration so it better be small.
+size_of_test!(PropertyDeclaration, 32);
+
+#[repr(C)]
+struct PropertyDeclarationVariantRepr<T> {
+    tag: u16,
+    value: T
+}
+
+impl Clone for PropertyDeclaration {
+    #[inline]
+    fn clone(&self) -> Self {
+        use self::PropertyDeclaration::*;
+
+        <%
+            [copy, others] = [list(g) for _, g in groupby(variants, key=lambda x: not x["copy"])]
+        %>
+
+        let self_tag = unsafe {
+            (*(self as *const _ as *const PropertyDeclarationVariantRepr<()>)).tag
+        };
+        if self_tag <= LonghandId::${copy[-1]["name"]} as u16 {
+            #[derive(Clone, Copy)]
+            #[repr(u16)]
+            enum CopyVariants {
+                % for v in copy:
+                _${v["name"]}(${v["type"]}),
+                % endfor
+            }
+
+            unsafe {
+                let mut out = mem::MaybeUninit::uninit();
+                ptr::write(
+                    out.as_mut_ptr() as *mut CopyVariants,
+                    *(self as *const _ as *const CopyVariants),
+                );
+                return out.assume_init();
+            }
+        }
+
+        // This function ensures that all properties not handled above
+        // do not have a specified value implements Copy. If you hit
+        // compile error here, you may want to add the type name into
+        // Longhand.specified_is_copy in data.py.
+        fn _static_assert_others_are_not_copy() {
+            struct Helper<T>(T);
+            trait AssertCopy { fn assert() {} }
+            trait AssertNotCopy { fn assert() {} }
+            impl<T: Copy> AssertCopy for Helper<T> {}
+            % for ty in sorted(set(x["type"] for x in others)):
+            impl AssertNotCopy for Helper<${ty}> {}
+            Helper::<${ty}>::assert();
+            % endfor
+        }
+
+        match *self {
+            ${" |\n".join("{}(..)".format(v["name"]) for v in copy)} => {
+                unsafe { debug_unreachable!() }
+            }
+            % for ty, vs in groupby(others, key=lambda x: x["type"]):
+            <%
+                vs = list(vs)
+            %>
+            % if len(vs) == 1:
+            ${vs[0]["name"]}(ref value) => {
+                ${vs[0]["name"]}(value.clone())
+            }
+            % else:
+            ${" |\n".join("{}(ref value)".format(v["name"]) for v in vs)} => {
+                unsafe {
+                    let mut out = mem::MaybeUninit::uninit();
+                    ptr::write(
+                        out.as_mut_ptr() as *mut PropertyDeclarationVariantRepr<${ty}>,
+                        PropertyDeclarationVariantRepr {
+                            tag: *(self as *const _ as *const u16),
+                            value: value.clone(),
+                        },
+                    );
+                    out.assume_init()
+                }
+            }
+            % endif
+            % endfor
+        }
+    }
+}
+
+impl PartialEq for PropertyDeclaration {
+    #[inline]
+    fn eq(&self, other: &Self) -> bool {
+        use self::PropertyDeclaration::*;
+
+        unsafe {
+            let this_repr =
+                &*(self as *const _ as *const PropertyDeclarationVariantRepr<()>);
+            let other_repr =
+                &*(other as *const _ as *const PropertyDeclarationVariantRepr<()>);
+            if this_repr.tag != other_repr.tag {
+                return false;
+            }
+            match *self {
+                % for ty, vs in groupby(variants, key=lambda x: x["type"]):
+                ${" |\n".join("{}(ref this)".format(v["name"]) for v in vs)} => {
+                    let other_repr =
+                        &*(other as *const _ as *const PropertyDeclarationVariantRepr<${ty}>);
+                    *this == other_repr.value
+                }
+                % endfor
+            }
+        }
+    }
+}
+
+impl MallocSizeOf for PropertyDeclaration {
+    #[inline]
+    fn size_of(&self, ops: &mut MallocSizeOfOps) -> usize {
+        use self::PropertyDeclaration::*;
+
+        match *self {
+            % for ty, vs in groupby(variants, key=lambda x: x["type"]):
+            ${" | ".join("{}(ref value)".format(v["name"]) for v in vs)} => {
+                value.size_of(ops)
+            }
+            % endfor
+        }
+    }
+}
+
+
+impl PropertyDeclaration {
+    /// Returns whether this is a variant of the Longhand(Value) type, rather
+    /// than one of the special variants in extra_variants.
+    fn is_longhand_value(&self) -> bool {
+        match *self {
+            % for v in extra_variants:
+            PropertyDeclaration::${v["name"]}(..) => false,
+            % endfor
+            _ => true,
+        }
+    }
+
+    /// Like the method on ToCss, but without the type parameter to avoid
+    /// accidentally monomorphizing this large function multiple times for
+    /// different writers.
+    pub fn to_css(&self, dest: &mut CssStringWriter) -> fmt::Result {
+        use self::PropertyDeclaration::*;
+
+        let mut dest = CssWriter::new(dest);
+        match *self {
+            % for ty, vs in groupby(variants, key=lambda x: x["type"]):
+            ${" | ".join("{}(ref value)".format(v["name"]) for v in vs)} => {
+                value.to_css(&mut dest)
+            }
+            % endfor
+        }
+    }
+
+    /// Returns the color value of a given property, for high-contrast-mode
+    /// tweaks.
+    pub(super) fn color_value(&self) -> Option<<&crate::values::specified::Color> {
+        ${static_longhand_id_set("COLOR_PROPERTIES", lambda p: p.predefined_type == "Color")}
+        <%
+            # sanity check
+            assert data.longhands_by_name["background-color"].predefined_type == "Color"
+
+            color_specified_type = data.longhands_by_name["background-color"].specified_type()
+        %>
+        let id = self.id().as_longhand()?;
+        if !COLOR_PROPERTIES.contains(id) || !self.is_longhand_value() {
+            return None;
+        }
+        let repr = self as *const _ as *const PropertyDeclarationVariantRepr<${color_specified_type}>;
+        Some(unsafe { &(*repr).value })
+    }
+}
+
+/// A module with all the code related to animated properties.
+///
+/// This needs to be "included" by mako at least after all longhand modules,
+/// given they populate the global data.
+pub mod animated_properties {
+    <%include file="/helpers/animated_properties.mako.rs" />
+}
+
+/// A longhand or shorthand property.
+#[derive(Clone, Copy, Debug)]
+pub struct NonCustomPropertyId(usize);
+
+/// The length of all the non-custom properties.
+pub const NON_CUSTOM_PROPERTY_ID_COUNT: usize =
+    ${len(data.longhands) + len(data.shorthands) + len(data.all_aliases())};
+
+/// The length of all counted unknown properties.
+pub const COUNTED_UNKNOWN_PROPERTY_COUNT: usize = ${len(data.counted_unknown_properties)};
+
+% if engine == "gecko":
+#[allow(dead_code)]
+unsafe fn static_assert_nscsspropertyid() {
+    % for i, property in enumerate(data.longhands + data.shorthands + data.all_aliases()):
+    std::mem::transmute::<[u8; ${i}], [u8; ${property.nscsspropertyid()} as usize]>([0; ${i}]); // ${property.name}
+    % endfor
+}
+% endif
+
+impl NonCustomPropertyId {
+    /// Returns the underlying index, used for use counter.
+    pub fn bit(self) -> usize {
+        self.0
+    }
+
+    /// Convert a `NonCustomPropertyId` into a `nsCSSPropertyID`.
+    #[cfg(feature = "gecko")]
+    #[inline]
+    pub fn to_nscsspropertyid(self) -> nsCSSPropertyID {
+        // unsafe: guaranteed by static_assert_nscsspropertyid above.
+        unsafe { std::mem::transmute(self.0 as i32) }
+    }
+
+    /// Convert an `nsCSSPropertyID` into a `NonCustomPropertyId`.
+    #[cfg(feature = "gecko")]
+    #[inline]
+    pub fn from_nscsspropertyid(prop: nsCSSPropertyID) -> Result<Self, ()> {
+        let prop = prop as i32;
+        if prop < 0 {
+            return Err(());
+        }
+        if prop >= NON_CUSTOM_PROPERTY_ID_COUNT as i32 {
+            return Err(());
+        }
+        // unsafe: guaranteed by static_assert_nscsspropertyid above.
+        Ok(unsafe { std::mem::transmute(prop as usize) })
+    }
+
+    /// Get the property name.
+    #[inline]
+    pub fn name(self) -> &'static str {
+        static MAP: [&'static str; NON_CUSTOM_PROPERTY_ID_COUNT] = [
+            % for property in data.longhands + data.shorthands + data.all_aliases():
+            "${property.name}",
+            % endfor
+        ];
+        MAP[self.0]
+    }
+
+    /// Returns whether this property is transitionable.
+    #[inline]
+    pub fn is_transitionable(self) -> bool {
+        ${static_non_custom_property_id_set("TRANSITIONABLE", lambda p: p.transitionable)}
+        TRANSITIONABLE.contains(self)
+    }
+
+    /// Returns whether this property is animatable.
+    #[inline]
+    pub fn is_animatable(self) -> bool {
+        ${static_non_custom_property_id_set("ANIMATABLE", lambda p: p.animatable)}
+        ANIMATABLE.contains(self)
+    }
+
+    #[inline]
+    fn enabled_for_all_content(self) -> bool {
+        ${static_non_custom_property_id_set(
+            "EXPERIMENTAL",
+            lambda p: p.experimental(engine)
+        )}
+
+        ${static_non_custom_property_id_set(
+            "ALWAYS_ENABLED",
+            lambda p: (not p.experimental(engine)) and p.enabled_in_content()
+        )}
+
+        let passes_pref_check = || {
+            % if engine == "gecko":
+                unsafe { structs::nsCSSProps_gPropertyEnabled[self.0] }
+            % else:
+                static PREF_NAME: [Option< &str>; ${
+                    len(data.longhands) + len(data.shorthands) + len(data.all_aliases())
+                }] = [
+                    % for property in data.longhands + data.shorthands + data.all_aliases():
+                        <%
+                            attrs = {"servo-2013": "servo_2013_pref", "servo-2020": "servo_2020_pref"}
+                            pref = getattr(property, attrs[engine])
+                        %>
+                        % if pref:
+                            Some("${pref}"),
+                        % else:
+                            None,
+                        % endif
+                    % endfor
+                ];
+                let pref = match PREF_NAME[self.0] {
+                    None => return true,
+                    Some(pref) => pref,
+                };
+
+                prefs::pref_map().get(pref).as_bool().unwrap_or(false)
+            % endif
+        };
+
+        if ALWAYS_ENABLED.contains(self) {
+            return true
+        }
+
+        if EXPERIMENTAL.contains(self) && passes_pref_check() {
+            return true
+        }
+
+        false
+    }
+
+    /// Returns whether a given rule allows a given property.
+    #[inline]
+    pub fn allowed_in_rule(self, rule_types: CssRuleTypes) -> bool {
+        debug_assert!(
+            rule_types.contains(CssRuleType::Keyframe) ||
+            rule_types.contains(CssRuleType::Page) ||
+            rule_types.contains(CssRuleType::Style),
+            "Declarations are only expected inside a keyframe, page, or style rule."
+        );
+
+        static MAP: [u32; NON_CUSTOM_PROPERTY_ID_COUNT] = [
+            % for property in data.longhands + data.shorthands + data.all_aliases():
+            % for name in RULE_VALUES:
+            % if property.rule_types_allowed & RULE_VALUES[name] != 0:
+            CssRuleType::${name}.bit() |
+            % endif
+            % endfor
+            0,
+            % endfor
+        ];
+        MAP[self.0] & rule_types.bits() != 0
+    }
+
+    fn allowed_in(self, context: &ParserContext) -> bool {
+        if !self.allowed_in_rule(context.rule_types()) {
+            return false;
+        }
+
+        self.allowed_in_ignoring_rule_type(context)
+    }
+
+
+    fn allowed_in_ignoring_rule_type(self, context: &ParserContext) -> bool {
+        // The semantics of these are kinda hard to reason about, what follows
+        // is a description of the different combinations that can happen with
+        // these three sets.
+        //
+        // Experimental properties are generally controlled by prefs, but an
+        // experimental property explicitly enabled in certain context (UA or
+        // chrome sheets) is always usable in the context regardless of the
+        // pref value.
+        //
+        // Non-experimental properties are either normal properties which are
+        // usable everywhere, or internal-only properties which are only usable
+        // in certain context they are explicitly enabled in.
+        if self.enabled_for_all_content() {
+            return true;
+        }
+
+        ${static_non_custom_property_id_set(
+            "ENABLED_IN_UA_SHEETS",
+            lambda p: p.explicitly_enabled_in_ua_sheets()
+        )}
+        ${static_non_custom_property_id_set(
+            "ENABLED_IN_CHROME",
+            lambda p: p.explicitly_enabled_in_chrome()
+        )}
+
+        if context.stylesheet_origin == Origin::UserAgent &&
+            ENABLED_IN_UA_SHEETS.contains(self)
+        {
+            return true
+        }
+
+        if context.chrome_rules_enabled() && ENABLED_IN_CHROME.contains(self) {
+            return true
+        }
+
+        false
+    }
+
+    /// The supported types of this property. The return value should be
+    /// style_traits::CssType when it can become a bitflags type.
+    fn supported_types(&self) -> u8 {
+        const SUPPORTED_TYPES: [u8; ${len(data.longhands) + len(data.shorthands)}] = [
+            % for prop in data.longhands:
+                <${prop.specified_type()} as SpecifiedValueInfo>::SUPPORTED_TYPES,
+            % endfor
+            % for prop in data.shorthands:
+            % if prop.name == "all":
+                0, // 'all' accepts no value other than CSS-wide keywords
+            % else:
+                <shorthands::${prop.ident}::Longhands as SpecifiedValueInfo>::SUPPORTED_TYPES,
+            % endif
+            % endfor
+        ];
+        SUPPORTED_TYPES[self.0]
+    }
+
+    /// See PropertyId::collect_property_completion_keywords.
+    fn collect_property_completion_keywords(&self, f: KeywordsCollectFn) {
+        fn do_nothing(_: KeywordsCollectFn) {}
+        const COLLECT_FUNCTIONS: [fn(KeywordsCollectFn);
+                                  ${len(data.longhands) + len(data.shorthands)}] = [
+            % for prop in data.longhands:
+                <${prop.specified_type()} as SpecifiedValueInfo>::collect_completion_keywords,
+            % endfor
+            % for prop in data.shorthands:
+            % if prop.name == "all":
+                do_nothing, // 'all' accepts no value other than CSS-wide keywords
+            % else:
+                <shorthands::${prop.ident}::Longhands as SpecifiedValueInfo>::
+                    collect_completion_keywords,
+            % endif
+            % endfor
+        ];
+        COLLECT_FUNCTIONS[self.0](f);
+    }
+
+    /// Turns this `NonCustomPropertyId` into a `PropertyId`.
+    #[inline]
+    pub fn to_property_id(self) -> PropertyId {
+        use std::mem::transmute;
+        if self.0 < ${len(data.longhands)} {
+            return unsafe {
+                PropertyId::Longhand(transmute(self.0 as u16))
+            }
+        }
+        if self.0 < ${len(data.longhands) + len(data.shorthands)} {
+            return unsafe {
+                PropertyId::Shorthand(transmute((self.0 - ${len(data.longhands)}) as u16))
+            }
+        }
+        assert!(self.0 < NON_CUSTOM_PROPERTY_ID_COUNT);
+        let alias_id: AliasId = unsafe {
+            transmute((self.0 - ${len(data.longhands) + len(data.shorthands)}) as u16)
+        };
+
+        match alias_id.aliased_property() {
+            AliasedPropertyId::Longhand(longhand) => PropertyId::LonghandAlias(longhand, alias_id),
+            AliasedPropertyId::Shorthand(shorthand) => PropertyId::ShorthandAlias(shorthand, alias_id),
+        }
+    }
+}
+
+impl From<LonghandId> for NonCustomPropertyId {
+    #[inline]
+    fn from(id: LonghandId) -> Self {
+        NonCustomPropertyId(id as usize)
+    }
+}
+
+impl From<ShorthandId> for NonCustomPropertyId {
+    #[inline]
+    fn from(id: ShorthandId) -> Self {
+        NonCustomPropertyId((id as usize) + ${len(data.longhands)})
+    }
+}
+
+impl From<AliasId> for NonCustomPropertyId {
+    #[inline]
+    fn from(id: AliasId) -> Self {
+        NonCustomPropertyId(id as usize + ${len(data.longhands) + len(data.shorthands)})
+    }
+}
+
+/// A set of all properties
+#[derive(Clone, PartialEq, Default)]
+pub struct NonCustomPropertyIdSet {
+    storage: [u32; (NON_CUSTOM_PROPERTY_ID_COUNT - 1 + 32) / 32]
+}
+
+impl NonCustomPropertyIdSet {
+    /// Creates an empty `NonCustomPropertyIdSet`.
+    pub fn new() -> Self {
+        Self {
+            storage: Default::default(),
+        }
+    }
+
+    /// Insert a non-custom-property in the set.
+    #[inline]
+    pub fn insert(&mut self, id: NonCustomPropertyId) {
+        let bit = id.0;
+        self.storage[bit / 32] |= 1 << (bit % 32);
+    }
+
+    /// Return whether the given property is in the set
+    #[inline]
+    pub fn contains(&self, id: NonCustomPropertyId) -> bool {
+        let bit = id.0;
+        (self.storage[bit / 32] & (1 << (bit % 32))) != 0
+    }
+}
+
+<%def name="static_non_custom_property_id_set(name, is_member)">
+static ${name}: NonCustomPropertyIdSet = NonCustomPropertyIdSet {
+    <%
+        storage = [0] * int((len(data.longhands) + len(data.shorthands) + len(data.all_aliases()) - 1 + 32) / 32)
+        for i, property in enumerate(data.longhands + data.shorthands + data.all_aliases()):
+            if is_member(property):
+                storage[int(i / 32)] |= 1 << (i % 32)
+    %>
+    storage: [${", ".join("0x%x" % word for word in storage)}]
+};
+</%def>
+
+<%def name="static_longhand_id_set(name, is_member)">
+static ${name}: LonghandIdSet = LonghandIdSet {
+    <%
+        storage = [0] * int((len(data.longhands) - 1 + 32) / 32)
+        for i, property in enumerate(data.longhands):
+            if is_member(property):
+                storage[int(i / 32)] |= 1 << (i % 32)
+    %>
+    storage: [${", ".join("0x%x" % word for word in storage)}]
+};
+</%def>
+
+<%
+    logical_groups = defaultdict(list)
+    for prop in data.longhands:
+        if prop.logical_group:
+            logical_groups[prop.logical_group].append(prop)
+
+    for group, props in logical_groups.items():
+        logical_count = sum(1 for p in props if p.logical)
+        if logical_count * 2 != len(props):
+            raise RuntimeError("Logical group {} has ".format(group) +
+                               "unbalanced logical / physical properties")
+
+    FIRST_LINE_RESTRICTIONS = PropertyRestrictions.first_line(data)
+    FIRST_LETTER_RESTRICTIONS = PropertyRestrictions.first_letter(data)
+    MARKER_RESTRICTIONS = PropertyRestrictions.marker(data)
+    PLACEHOLDER_RESTRICTIONS = PropertyRestrictions.placeholder(data)
+    CUE_RESTRICTIONS = PropertyRestrictions.cue(data)
+
+    def restriction_flags(property):
+        name = property.name
+        flags = []
+        if name in FIRST_LINE_RESTRICTIONS:
+            flags.append("APPLIES_TO_FIRST_LINE")
+        if name in FIRST_LETTER_RESTRICTIONS:
+            flags.append("APPLIES_TO_FIRST_LETTER")
+        if name in PLACEHOLDER_RESTRICTIONS:
+            flags.append("APPLIES_TO_PLACEHOLDER")
+        if name in MARKER_RESTRICTIONS:
+            flags.append("APPLIES_TO_MARKER")
+        if name in CUE_RESTRICTIONS:
+            flags.append("APPLIES_TO_CUE")
+        return flags
+
+%>
+
+/// A group for properties which may override each other
+/// via logical resolution.
+#[derive(Clone, Copy, Eq, Hash, PartialEq)]
+#[repr(u8)]
+pub enum LogicalGroup {
+    % for i, group in enumerate(logical_groups.keys()):
+    /// ${group}
+    ${to_camel_case(group)} = ${i},
+    % endfor
+}
+
+
+/// A set of logical groups.
+#[derive(Clone, Copy, Debug, Default, MallocSizeOf, PartialEq)]
+pub struct LogicalGroupSet {
+    storage: [u32; (${len(logical_groups)} - 1 + 32) / 32]
+}
+
+impl LogicalGroupSet {
+    /// Creates an empty `NonCustomPropertyIdSet`.
+    pub fn new() -> Self {
+        Self {
+            storage: Default::default(),
+        }
+    }
+
+    /// Return whether the given group is in the set
+    #[inline]
+    pub fn contains(&self, g: LogicalGroup) -> bool {
+        let bit = g as usize;
+        (self.storage[bit / 32] & (1 << (bit % 32))) != 0
+    }
+
+    /// Insert a group the set.
+    #[inline]
+    pub fn insert(&mut self, g: LogicalGroup) {
+        let bit = g as usize;
+        self.storage[bit / 32] |= 1 << (bit % 32);
+    }
+}
+
+/// A set of longhand properties
+#[derive(Clone, Copy, Debug, Default, MallocSizeOf, PartialEq)]
+pub struct LonghandIdSet {
+    storage: [u32; (${len(data.longhands)} - 1 + 32) / 32]
+}
+
+impl_trivial_to_shmem!(LonghandIdSet);
+
+/// An iterator over a set of longhand ids.
+pub struct LonghandIdSetIterator<'a> {
+    longhands: &'a LonghandIdSet,
+    cur: usize,
+}
+
+impl<'a> Iterator for LonghandIdSetIterator<'a> {
+    type Item = LonghandId;
+
+    fn next(&mut self) -> Option<Self::Item> {
+        use std::mem;
+
+        loop {
+            if self.cur >= ${len(data.longhands)} {
+                return None;
+            }
+
+            let id: LonghandId = unsafe { mem::transmute(self.cur as u16) };
+            self.cur += 1;
+
+            if self.longhands.contains(id) {
+                return Some(id);
+            }
+        }
+    }
+}
+
+<%
+
+CASCADE_GROUPS = {
+    # The writing-mode group has the most priority of all property groups, as
+    # sizes like font-size can depend on it.
+    "writing_mode": [
+        "writing-mode",
+        "direction",
+        "text-orientation",
+    ],
+    # The fonts and colors group has the second priority, as all other lengths
+    # and colors depend on them.
+    #
+    # There are some interdependencies between these, but we fix them up in
+    # Cascade::fixup_font_stuff.
+    "fonts_and_color": [
+        # Needed to properly compute the zoomed font-size.
+        "-x-text-scale",
+        # Needed to do font-size computation in a language-dependent way.
+        "-x-lang",
+        # Needed for ruby to respect language-dependent min-font-size
+        # preferences properly, see bug 1165538.
+        "-moz-min-font-size-ratio",
+        # font-size depends on math-depth's computed value.
+        "math-depth",
+        # Needed to compute the first available font and its used size,
+        # in order to compute font-relative units correctly.
+        "font-size",
+        "font-size-adjust",
+        "font-weight",
+        "font-stretch",
+        "font-style",
+        "font-family",
+        # color-scheme affects how system colors resolve.
+        "color-scheme",
+        "forced-color-adjust",
+    ],
+}
+def in_late_group(p):
+    return p.name not in CASCADE_GROUPS["writing_mode"] and p.name not in CASCADE_GROUPS["fonts_and_color"]
+
+def is_visited_dependent(p):
+    return p.name in [
+        "column-rule-color",
+        "text-emphasis-color",
+        "-webkit-text-fill-color",
+        "-webkit-text-stroke-color",
+        "text-decoration-color",
+        "fill",
+        "stroke",
+        "caret-color",
+        "background-color",
+        "border-top-color",
+        "border-right-color",
+        "border-bottom-color",
+        "border-left-color",
+        "border-block-start-color",
+        "border-inline-end-color",
+        "border-block-end-color",
+        "border-inline-start-color",
+        "outline-color",
+        "color",
+    ]
+
+%>
+
+impl LonghandIdSet {
+    #[inline]
+    fn reset() -> &'static Self {
+        ${static_longhand_id_set("RESET", lambda p: not p.style_struct.inherited)}
+        &RESET
+    }
+
+    #[inline]
+    fn animatable() -> &'static Self {
+        ${static_longhand_id_set("ANIMATABLE", lambda p: p.animatable)}
+        &ANIMATABLE
+    }
+
+    #[inline]
+    fn discrete_animatable() -> &'static Self {
+        ${static_longhand_id_set("DISCRETE_ANIMATABLE", lambda p: p.animation_value_type == "discrete")}
+        &DISCRETE_ANIMATABLE
+    }
+
+    #[inline]
+    fn logical() -> &'static Self {
+        ${static_longhand_id_set("LOGICAL", lambda p: p.logical)}
+        &LOGICAL
+    }
+
+    /// Returns the set of longhands that are ignored when document colors are
+    /// disabled.
+    #[inline]
+    fn ignored_when_colors_disabled() -> &'static Self {
+        ${static_longhand_id_set(
+            "IGNORED_WHEN_COLORS_DISABLED",
+            lambda p: p.ignored_when_colors_disabled
+        )}
+        &IGNORED_WHEN_COLORS_DISABLED
+    }
+
+    /// Only a few properties are allowed to depend on the visited state of
+    /// links. When cascading visited styles, we can save time by only
+    /// processing these properties.
+    pub(super) fn visited_dependent() -> &'static Self {
+        ${static_longhand_id_set(
+            "VISITED_DEPENDENT",
+            lambda p: is_visited_dependent(p)
+        )}
+        debug_assert!(Self::late_group().contains_all(&VISITED_DEPENDENT));
+        &VISITED_DEPENDENT
+    }
+
+    #[inline]
+    pub(super) fn writing_mode_group() -> &'static Self {
+        ${static_longhand_id_set(
+            "WRITING_MODE_GROUP",
+            lambda p: p.name in CASCADE_GROUPS["writing_mode"]
+        )}
+        &WRITING_MODE_GROUP
+    }
+
+    #[inline]
+    pub(super) fn fonts_and_color_group() -> &'static Self {
+        ${static_longhand_id_set(
+            "FONTS_AND_COLOR_GROUP",
+            lambda p: p.name in CASCADE_GROUPS["fonts_and_color"]
+        )}
+        &FONTS_AND_COLOR_GROUP
+    }
+
+    #[inline]
+    pub(super) fn late_group_only_inherited() -> &'static Self {
+        ${static_longhand_id_set("LATE_GROUP_ONLY_INHERITED", lambda p: p.style_struct.inherited and in_late_group(p))}
+        &LATE_GROUP_ONLY_INHERITED
+    }
+
+    #[inline]
+    pub(super) fn late_group() -> &'static Self {
+        ${static_longhand_id_set("LATE_GROUP", lambda p: in_late_group(p))}
+        &LATE_GROUP
+    }
+
+    /// Returns the set of properties that are declared as having no effect on
+    /// Gecko <scrollbar> elements or their descendant scrollbar parts.
+    #[cfg(debug_assertions)]
+    #[cfg(feature = "gecko")]
+    #[inline]
+    pub fn has_no_effect_on_gecko_scrollbars() -> &'static Self {
+        // data.py asserts that has_no_effect_on_gecko_scrollbars is True or
+        // False for properties that are inherited and Gecko pref controlled,
+        // and is None for all other properties.
+        ${static_longhand_id_set(
+            "HAS_NO_EFFECT_ON_SCROLLBARS",
+            lambda p: p.has_effect_on_gecko_scrollbars is False
+        )}
+        &HAS_NO_EFFECT_ON_SCROLLBARS
+    }
+
+    /// Returns the set of border properties for the purpose of disabling native
+    /// appearance.
+    #[inline]
+    pub fn border_background_properties() -> &'static Self {
+        ${static_longhand_id_set(
+            "BORDER_BACKGROUND_PROPERTIES",
+            lambda p: (p.logical_group and p.logical_group.startswith("border")) or \
+                       p.name in ["background-color", "background-image"]
+        )}
+        &BORDER_BACKGROUND_PROPERTIES
+    }
+
+    /// Iterate over the current longhand id set.
+    pub fn iter(&self) -> LonghandIdSetIterator {
+        LonghandIdSetIterator { longhands: self, cur: 0, }
+    }
+
+    /// Returns whether this set contains at least every longhand that `other`
+    /// also contains.
+    pub fn contains_all(&self, other: &Self) -> bool {
+        for (self_cell, other_cell) in self.storage.iter().zip(other.storage.iter()) {
+            if (*self_cell & *other_cell) != *other_cell {
+                return false;
+            }
+        }
+        true
+    }
+
+    /// Returns whether this set contains any longhand that `other` also contains.
+    pub fn contains_any(&self, other: &Self) -> bool {
+        for (self_cell, other_cell) in self.storage.iter().zip(other.storage.iter()) {
+            if (*self_cell & *other_cell) != 0 {
+                return true;
+            }
+        }
+        false
+    }
+
+    /// Remove all the given properties from the set.
+    #[inline]
+    pub fn remove_all(&mut self, other: &Self) {
+        for (self_cell, other_cell) in self.storage.iter_mut().zip(other.storage.iter()) {
+            *self_cell &= !*other_cell;
+        }
+    }
+
+    /// Create an empty set
+    #[inline]
+    pub fn new() -> LonghandIdSet {
+        LonghandIdSet { storage: [0; (${len(data.longhands)} - 1 + 32) / 32] }
+    }
+
+    /// Return whether the given property is in the set
+    #[inline]
+    pub fn contains(&self, id: LonghandId) -> bool {
+        let bit = id as usize;
+        (self.storage[bit / 32] & (1 << (bit % 32))) != 0
+    }
+
+    /// Return whether this set contains any reset longhand.
+    #[inline]
+    pub fn contains_any_reset(&self) -> bool {
+        self.contains_any(Self::reset())
+    }
+
+    /// Add the given property to the set
+    #[inline]
+    pub fn insert(&mut self, id: LonghandId) {
+        let bit = id as usize;
+        self.storage[bit / 32] |= 1 << (bit % 32);
+    }
+
+    /// Remove the given property from the set
+    #[inline]
+    pub fn remove(&mut self, id: LonghandId) {
+        let bit = id as usize;
+        self.storage[bit / 32] &= !(1 << (bit % 32));
+    }
+
+    /// Clear all bits
+    #[inline]
+    pub fn clear(&mut self) {
+        for cell in &mut self.storage {
+            *cell = 0
+        }
+    }
+
+    /// Returns whether the set is empty.
+    #[inline]
+    pub fn is_empty(&self) -> bool {
+        self.storage.iter().all(|c| *c == 0)
+    }
+}
+
+/// An enum to represent a CSS Wide keyword.
+#[derive(Clone, Copy, Debug, Eq, MallocSizeOf, PartialEq, SpecifiedValueInfo,
+         ToCss, ToShmem)]
+pub enum CSSWideKeyword {
+    /// The `initial` keyword.
+    Initial,
+    /// The `inherit` keyword.
+    Inherit,
+    /// The `unset` keyword.
+    Unset,
+    /// The `revert` keyword.
+    Revert,
+    /// The `revert-layer` keyword.
+    RevertLayer,
+}
+
+impl CSSWideKeyword {
+    fn to_str(&self) -> &'static str {
+        match *self {
+            CSSWideKeyword::Initial => "initial",
+            CSSWideKeyword::Inherit => "inherit",
+            CSSWideKeyword::Unset => "unset",
+            CSSWideKeyword::Revert => "revert",
+            CSSWideKeyword::RevertLayer => "revert-layer",
+        }
+    }
+}
+
+impl CSSWideKeyword {
+    /// Parses a CSS wide keyword from a CSS identifier.
+    pub fn from_ident(ident: &str) -> Result<Self, ()> {
+        Ok(match_ignore_ascii_case! { ident,
+            "initial" => CSSWideKeyword::Initial,
+            "inherit" => CSSWideKeyword::Inherit,
+            "unset" => CSSWideKeyword::Unset,
+            "revert" => CSSWideKeyword::Revert,
+            "revert-layer" => CSSWideKeyword::RevertLayer,
+            _ => return Err(()),
+        })
+    }
+
+    fn parse(input: &mut Parser) -> Result<Self, ()> {
+        let keyword = {
+            let ident = input.expect_ident().map_err(|_| ())?;
+            Self::from_ident(ident)?
+        };
+        input.expect_exhausted().map_err(|_| ())?;
+        Ok(keyword)
+    }
+}
+
+bitflags! {
+    /// A set of flags for properties.
+    #[derive(Clone, Copy)]
+    pub struct PropertyFlags: u16 {
+        /// This longhand property applies to ::first-letter.
+        const APPLIES_TO_FIRST_LETTER = 1 << 1;
+        /// This longhand property applies to ::first-line.
+        const APPLIES_TO_FIRST_LINE = 1 << 2;
+        /// This longhand property applies to ::placeholder.
+        const APPLIES_TO_PLACEHOLDER = 1 << 3;
+        ///  This longhand property applies to ::cue.
+        const APPLIES_TO_CUE = 1 << 4;
+        /// This longhand property applies to ::marker.
+        const APPLIES_TO_MARKER = 1 << 5;
+        /// This property is a legacy shorthand.
+        ///
+        /// https://drafts.csswg.org/css-cascade/#legacy-shorthand
+        const IS_LEGACY_SHORTHAND = 1 << 6;
+
+        /* The following flags are currently not used in Rust code, they
+         * only need to be listed in corresponding properties so that
+         * they can be checked in the C++ side via ServoCSSPropList.h. */
+        /// This property can be animated on the compositor.
+        const CAN_ANIMATE_ON_COMPOSITOR = 0;
+        /// This shorthand property is accessible from getComputedStyle.
+        const SHORTHAND_IN_GETCS = 0;
+    }
+}
+
+/// An identifier for a given longhand property.
+#[derive(Clone, Copy, Eq, Hash, MallocSizeOf, PartialEq, ToComputedValue, ToResolvedValue, ToShmem)]
+#[repr(u16)]
+pub enum LonghandId {
+    % for i, property in enumerate(data.longhands):
+        /// ${property.name}
+        ${property.camel_case} = ${i},
+    % endfor
+}
+
+impl ToCss for LonghandId {
+    #[inline]
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
+        dest.write_str(self.name())
+    }
+}
+
+impl fmt::Debug for LonghandId {
+    fn fmt(&self, formatter: &mut fmt::Formatter) -> fmt::Result {
+        formatter.write_str(self.name())
+    }
+}
+
+impl LonghandId {
+    /// Get the name of this longhand property.
+    #[inline]
+    pub fn name(&self) -> &'static str {
+        NonCustomPropertyId::from(*self).name()
+    }
+
+    /// Returns whether the longhand property is inherited by default.
+    #[inline]
+    pub fn inherited(self) -> bool {
+        !LonghandIdSet::reset().contains(self)
+    }
+
+    /// Returns an iterator over all the shorthands that include this longhand.
+    pub fn shorthands(&self) -> NonCustomPropertyIterator<ShorthandId> {
+        // first generate longhand to shorthands lookup map
+        //
+        // NOTE(emilio): This currently doesn't exclude the "all" shorthand. It
+        // could potentially do so, which would speed up serialization
+        // algorithms and what not, I guess.
+        <%
+            from functools import cmp_to_key
+            longhand_to_shorthand_map = {}
+            num_sub_properties = {}
+            for shorthand in data.shorthands:
+                num_sub_properties[shorthand.camel_case] = len(shorthand.sub_properties)
+                for sub_property in shorthand.sub_properties:
+                    if sub_property.ident not in longhand_to_shorthand_map:
+                        longhand_to_shorthand_map[sub_property.ident] = []
+
+                    longhand_to_shorthand_map[sub_property.ident].append(shorthand.camel_case)
+
+            def cmp(a, b):
+                return (a > b) - (a < b)
+
+            def preferred_order(x, y):
+                # Since we want properties in order from most subproperties to least,
+                # reverse the arguments to cmp from the expected order.
+                result = cmp(num_sub_properties.get(y, 0), num_sub_properties.get(x, 0))
+                if result:
+                    return result
+                # Fall back to lexicographic comparison.
+                return cmp(x, y)
+
+            # Sort the lists of shorthand properties according to preferred order:
+            # https://drafts.csswg.org/cssom/#concept-shorthands-preferred-order
+            for shorthand_list in longhand_to_shorthand_map.values():
+                shorthand_list.sort(key=cmp_to_key(preferred_order))
+        %>
+
+        // based on lookup results for each longhand, create result arrays
+        % for property in data.longhands:
+            static ${property.ident.upper()}: &'static [ShorthandId] = &[
+                % for shorthand in longhand_to_shorthand_map.get(property.ident, []):
+                    ShorthandId::${shorthand},
+                % endfor
+            ];
+        % endfor
+
+        NonCustomPropertyIterator {
+            filter: NonCustomPropertyId::from(*self).enabled_for_all_content(),
+            iter: match *self {
+                % for property in data.longhands:
+                    LonghandId::${property.camel_case} => ${property.ident.upper()},
+                % endfor
+            }.iter(),
+        }
+    }
+
+    fn parse_value<'i, 't>(
+        &self,
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<PropertyDeclaration, ParseError<'i>> {
+        type ParsePropertyFn = for<'i, 't> fn(
+            context: &ParserContext,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<PropertyDeclaration, ParseError<'i>>;
+        static PARSE_PROPERTY: [ParsePropertyFn; ${len(data.longhands)}] = [
+        % for property in data.longhands:
+            longhands::${property.ident}::parse_declared,
+        % endfor
+        ];
+        (PARSE_PROPERTY[*self as usize])(context, input)
+    }
+
+    /// Returns whether this property is animatable.
+    #[inline]
+    pub fn is_animatable(self) -> bool {
+        LonghandIdSet::animatable().contains(self)
+    }
+
+    /// Returns whether this property is animatable in a discrete way.
+    #[inline]
+    pub fn is_discrete_animatable(self) -> bool {
+        LonghandIdSet::discrete_animatable().contains(self)
+    }
+
+    /// Converts from a LonghandId to an adequate nsCSSPropertyID.
+    #[cfg(feature = "gecko")]
+    #[inline]
+    pub fn to_nscsspropertyid(self) -> nsCSSPropertyID {
+        NonCustomPropertyId::from(self).to_nscsspropertyid()
+    }
+
+    #[cfg(feature = "gecko")]
+    #[allow(non_upper_case_globals)]
+    /// Returns a longhand id from Gecko's nsCSSPropertyID.
+    pub fn from_nscsspropertyid(id: nsCSSPropertyID) -> Result<Self, ()> {
+        match PropertyId::from_nscsspropertyid(id) {
+            Ok(PropertyId::Longhand(id)) |
+            Ok(PropertyId::LonghandAlias(id, _)) => Ok(id),
+            _ => Err(()),
+        }
+    }
+
+    /// Return whether this property is logical.
+    #[inline]
+    pub fn is_logical(self) -> bool {
+        LonghandIdSet::logical().contains(self)
+    }
+
+    /// If this is a logical property, return the corresponding physical one in
+    /// the given writing mode.
+    ///
+    /// Otherwise, return unchanged.
+    #[inline]
+    pub fn to_physical(&self, wm: WritingMode) -> Self {
+        match *self {
+            % for property in data.longhands:
+            % if property.logical:
+                <% logical_group = property.logical_group %>
+                LonghandId::${property.camel_case} => {
+                    <%helpers:logical_setter_helper name="${property.name}">
+                    <%def name="inner(physical_ident)">
+                        <%
+                            physical_name = physical_ident.replace("_", "-")
+                            physical_property = data.longhands_by_name[physical_name]
+                            assert logical_group == physical_property.logical_group
+                        %>
+                        LonghandId::${to_camel_case(physical_ident)}
+                    </%def>
+                    </%helpers:logical_setter_helper>
+                }
+            % endif
+            % endfor
+            _ => *self
+        }
+    }
+
+    /// Return the logical group of this longhand property.
+    pub fn logical_group(&self) -> Option<LogicalGroup> {
+        const LOGICAL_GROUPS: [Option<LogicalGroup>; ${len(data.longhands)}] = [
+            % for prop in data.longhands:
+            % if prop.logical_group:
+            Some(LogicalGroup::${to_camel_case(prop.logical_group)}),
+            % else:
+            None,
+            % endif
+            % endfor
+        ];
+        LOGICAL_GROUPS[*self as usize]
+    }
+
+    /// Returns PropertyFlags for given longhand property.
+    #[inline(always)]
+    pub fn flags(self) -> PropertyFlags {
+        // TODO(emilio): This can be simplified further as Rust gains more
+        // constant expression support.
+        const FLAGS: [u16; ${len(data.longhands)}] = [
+            % for property in data.longhands:
+                % for flag in property.flags + restriction_flags(property):
+                    PropertyFlags::${flag}.bits |
+                % endfor
+                0,
+            % endfor
+        ];
+        PropertyFlags::from_bits_retain(FLAGS[self as usize])
+    }
+
+    /// Returns true if the property is one that is ignored when document
+    /// colors are disabled.
+    #[inline]
+    pub fn ignored_when_document_colors_disabled(self) -> bool {
+        LonghandIdSet::ignored_when_colors_disabled().contains(self)
+    }
+}
+
+/// An iterator over all the property ids that are enabled for a given
+/// shorthand, if that shorthand is enabled for all content too.
+pub struct NonCustomPropertyIterator<Item: 'static> {
+    filter: bool,
+    iter: std::slice::Iter<'static, Item>,
+}
+
+impl<Item> Iterator for NonCustomPropertyIterator<Item>
+where
+    Item: 'static + Copy + Into<NonCustomPropertyId>,
+{
+    type Item = Item;
+
+    fn next(&mut self) -> Option<Self::Item> {
+        loop {
+            let id = *self.iter.next()?;
+            if !self.filter || id.into().enabled_for_all_content() {
+                return Some(id)
+            }
+        }
+    }
+}
+
+/// An identifier for a given shorthand property.
+#[derive(Clone, Copy, Debug, Eq, Hash, MallocSizeOf, PartialEq, ToComputedValue, ToResolvedValue, ToShmem)]
+#[repr(u16)]
+pub enum ShorthandId {
+    % for i, property in enumerate(data.shorthands):
+        /// ${property.name}
+        ${property.camel_case} = ${i},
+    % endfor
+}
+
+impl ToCss for ShorthandId {
+    #[inline]
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
+        dest.write_str(self.name())
+    }
+}
+
+impl ShorthandId {
+    /// Get the name for this shorthand property.
+    #[inline]
+    pub fn name(&self) -> &'static str {
+        NonCustomPropertyId::from(*self).name()
+    }
+
+    /// Converts from a ShorthandId to an adequate nsCSSPropertyID.
+    #[cfg(feature = "gecko")]
+    #[inline]
+    pub fn to_nscsspropertyid(self) -> nsCSSPropertyID {
+        NonCustomPropertyId::from(self).to_nscsspropertyid()
+    }
+
+    /// Converts from a nsCSSPropertyID to a ShorthandId.
+    #[cfg(feature = "gecko")]
+    #[inline]
+    pub fn from_nscsspropertyid(prop: nsCSSPropertyID) -> Result<Self, ()> {
+        PropertyId::from_nscsspropertyid(prop)?.as_shorthand().map_err(|_| ())
+    }
+
+    /// Get the longhand ids that form this shorthand.
+    pub fn longhands(&self) -> NonCustomPropertyIterator<LonghandId> {
+        % for property in data.shorthands:
+            static ${property.ident.upper()}: &'static [LonghandId] = &[
+                % for sub in property.sub_properties:
+                    LonghandId::${sub.camel_case},
+                % endfor
+            ];
+        % endfor
+        NonCustomPropertyIterator {
+            filter: NonCustomPropertyId::from(*self).enabled_for_all_content(),
+            iter: match *self {
+                % for property in data.shorthands:
+                    ShorthandId::${property.camel_case} => ${property.ident.upper()},
+                % endfor
+            }.iter()
+        }
+    }
+
+    /// Try to serialize the given declarations as this shorthand.
+    ///
+    /// Returns an error if writing to the stream fails, or if the declarations
+    /// do not map to a shorthand.
+    pub fn longhands_to_css(
+        &self,
+        declarations: &[&PropertyDeclaration],
+        dest: &mut CssStringWriter,
+    ) -> fmt::Result {
+        type LonghandsToCssFn = for<'a, 'b> fn(&'a [&'b PropertyDeclaration], &mut CssStringWriter) -> fmt::Result;
+        fn all_to_css(_: &[&PropertyDeclaration], _: &mut CssStringWriter) -> fmt::Result {
+            // No need to try to serialize the declarations as the 'all'
+            // shorthand, since it only accepts CSS-wide keywords (and variable
+            // references), which will be handled in
+            // get_shorthand_appendable_value.
+            Ok(())
+        }
+
+        static LONGHANDS_TO_CSS: [LonghandsToCssFn; ${len(data.shorthands)}] = [
+            % for shorthand in data.shorthands:
+            % if shorthand.ident == "all":
+                all_to_css,
+            % else:
+                shorthands::${shorthand.ident}::to_css,
+            % endif
+            % endfor
+        ];
+
+        LONGHANDS_TO_CSS[*self as usize](declarations, dest)
+    }
+
+    /// Finds and returns an appendable value for the given declarations.
+    ///
+    /// Returns the optional appendable value.
+    pub fn get_shorthand_appendable_value<'a, 'b: 'a>(
+        self,
+        declarations: &'a [&'b PropertyDeclaration],
+    ) -> Option<AppendableValue<'a, 'b>> {
+        let first_declaration = declarations.get(0)?;
+        let rest = || declarations.iter().skip(1);
+
+        // https://drafts.csswg.org/css-variables/#variables-in-shorthands
+        if let Some(css) = first_declaration.with_variables_from_shorthand(self) {
+            if rest().all(|d| d.with_variables_from_shorthand(self) == Some(css)) {
+               return Some(AppendableValue::Css(css));
+            }
+            return None;
+        }
+
+        // Check whether they are all the same CSS-wide keyword.
+        if let Some(keyword) = first_declaration.get_css_wide_keyword() {
+            if rest().all(|d| d.get_css_wide_keyword() == Some(keyword)) {
+                return Some(AppendableValue::Css(keyword.to_str()))
+            }
+            return None;
+        }
+
+        if self == ShorthandId::All {
+            // 'all' only supports variables and CSS wide keywords.
+            return None;
+        }
+
+        // Check whether all declarations can be serialized as part of shorthand.
+        if declarations.iter().all(|d| d.may_serialize_as_part_of_shorthand()) {
+            return Some(AppendableValue::DeclarationsForShorthand(self, declarations));
+        }
+
+        None
+    }
+
+    /// Returns PropertyFlags for the given shorthand property.
+    #[inline]
+    pub fn flags(self) -> PropertyFlags {
+        const FLAGS: [u16; ${len(data.shorthands)}] = [
+            % for property in data.shorthands:
+                % for flag in property.flags:
+                    PropertyFlags::${flag}.bits |
+                % endfor
+                0,
+            % endfor
+        ];
+        PropertyFlags::from_bits_retain(FLAGS[self as usize])
+    }
+
+    /// Returns whether this property is a legacy shorthand.
+    #[inline]
+    pub fn is_legacy_shorthand(self) -> bool {
+        self.flags().contains(PropertyFlags::IS_LEGACY_SHORTHAND)
+    }
+
+    /// Returns the order in which this property appears relative to other
+    /// shorthands in idl-name-sorting order.
+    #[inline]
+    pub fn idl_name_sort_order(self) -> u32 {
+        <%
+            from data import to_idl_name
+            ordered = {}
+            sorted_shorthands = sorted(data.shorthands, key=lambda p: to_idl_name(p.ident))
+            for order, shorthand in enumerate(sorted_shorthands):
+                ordered[shorthand.ident] = order
+        %>
+        static IDL_NAME_SORT_ORDER: [u32; ${len(data.shorthands)}] = [
+            % for property in data.shorthands:
+            ${ordered[property.ident]},
+            % endfor
+        ];
+        IDL_NAME_SORT_ORDER[self as usize]
+    }
+
+    fn parse_into<'i, 't>(
+        &self,
+        declarations: &mut SourcePropertyDeclaration,
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<(), ParseError<'i>> {
+        type ParseIntoFn = for<'i, 't> fn(
+            declarations: &mut SourcePropertyDeclaration,
+            context: &ParserContext,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<(), ParseError<'i>>;
+
+        fn parse_all<'i, 't>(
+            _: &mut SourcePropertyDeclaration,
+            _: &ParserContext,
+            input: &mut Parser<'i, 't>
+        ) -> Result<(), ParseError<'i>> {
+            // 'all' accepts no value other than CSS-wide keywords
+            Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+        }
+
+
+        static PARSE_INTO: [ParseIntoFn; ${len(data.shorthands)}] = [
+            % for shorthand in data.shorthands:
+            % if shorthand.ident == "all":
+            parse_all,
+            % else:
+            shorthands::${shorthand.ident}::parse_into,
+            % endif
+            % endfor
+        ];
+
+        (PARSE_INTO[*self as usize])(declarations, context, input)
+    }
+}
+
+/// An unparsed property value that contains `var()` functions.
+#[derive(Debug, Eq, PartialEq, ToShmem)]
+pub struct UnparsedValue {
+    /// The css serialization for this value.
+    css: String,
+    /// The first token type for this serialization.
+    first_token_type: TokenSerializationType,
+    /// The url data for resolving url values.
+    url_data: UrlExtraData,
+    /// The shorthand this came from.
+    from_shorthand: Option<ShorthandId>,
+}
+
+impl ToCss for UnparsedValue {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
+        // https://drafts.csswg.org/css-variables/#variables-in-shorthands
+        if self.from_shorthand.is_none() {
+            dest.write_str(&*self.css)?;
+        }
+        Ok(())
+    }
+}
+
+/// A simple cache for properties that come from a shorthand and have variable
+/// references.
+///
+/// This cache works because of the fact that you can't have competing values
+/// for a given longhand coming from the same shorthand (but note that this is
+/// why the shorthand needs to be part of the cache key).
+pub type ShorthandsWithPropertyReferencesCache =
+    FxHashMap<(ShorthandId, LonghandId), PropertyDeclaration>;
+
+impl UnparsedValue {
+    pub(super) fn substitute_variables<'cache>(
+        &self,
+        longhand_id: LonghandId,
+        writing_mode: WritingMode,
+        custom_properties: Option<<&Arc<crate::custom_properties::CustomPropertiesMap>>,
+        quirks_mode: QuirksMode,
+        device: &Device,
+        shorthand_cache: &'cache mut ShorthandsWithPropertyReferencesCache,
+    ) -> Cow<'cache, PropertyDeclaration> {
+        let invalid_at_computed_value_time = || {
+            let keyword = if longhand_id.inherited() {
+                CSSWideKeyword::Inherit
+            } else {
+                CSSWideKeyword::Initial
+            };
+            Cow::Owned(PropertyDeclaration::css_wide_keyword(longhand_id, keyword))
+        };
+
+        if let Some(shorthand_id) = self.from_shorthand {
+            let key = (shorthand_id, longhand_id);
+            if shorthand_cache.contains_key(&key) {
+                // FIXME: This double lookup should be avoidable, but rustc
+                // doesn't like that, see:
+                //
+                // https://github.com/rust-lang/rust/issues/82146
+                return Cow::Borrowed(&shorthand_cache[&key]);
+            }
+        }
+
+        let css = match crate::custom_properties::substitute(
+            &self.css,
+            self.first_token_type,
+            custom_properties,
+            device,
+        ) {
+            Ok(css) => css,
+            Err(..) => return invalid_at_computed_value_time(),
+        };
+
+        // As of this writing, only the base URL is used for property
+        // values.
+        //
+        // NOTE(emilio): we intentionally pase `None` as the rule type here.
+        // If something starts depending on it, it's probably a bug, since
+        // it'd change how values are parsed depending on whether we're in a
+        // @keyframes rule or not, for example... So think twice about
+        // whether you want to do this!
+        //
+        // FIXME(emilio): ParsingMode is slightly fishy...
+        let context = ParserContext::new(
+            Origin::Author,
+            &self.url_data,
+            None,
+            ParsingMode::DEFAULT,
+            quirks_mode,
+            /* namespaces = */ Default::default(),
+            None,
+            None,
+        );
+
+        let mut input = ParserInput::new(&css);
+        let mut input = Parser::new(&mut input);
+        input.skip_whitespace();
+
+        if let Ok(keyword) = input.try_parse(CSSWideKeyword::parse) {
+            return Cow::Owned(PropertyDeclaration::css_wide_keyword(longhand_id, keyword));
+        }
+
+        let shorthand = match self.from_shorthand {
+            None => {
+                return match input.parse_entirely(|input| longhand_id.parse_value(&context, input)) {
+                    Ok(decl) => Cow::Owned(decl),
+                    Err(..) => invalid_at_computed_value_time(),
+                }
+            },
+            Some(shorthand) => shorthand,
+        };
+
+        let mut decls = SourcePropertyDeclaration::default();
+        // parse_into takes care of doing `parse_entirely` for us.
+        if shorthand.parse_into(&mut decls, &context, &mut input).is_err() {
+            return invalid_at_computed_value_time();
+        }
+
+        for declaration in decls.declarations.drain(..) {
+            let longhand = declaration.id().as_longhand().unwrap();
+            if longhand.is_logical() {
+                shorthand_cache.insert((shorthand, longhand.to_physical(writing_mode)), declaration.clone());
+            }
+            shorthand_cache.insert((shorthand, longhand), declaration);
+        }
+
+        let key = (shorthand, longhand_id);
+        match shorthand_cache.get(&key) {
+            Some(decl) => Cow::Borrowed(decl),
+            None => {
+                // FIXME: We should always have the key here but it seems
+                // sometimes we don't, see bug 1696409.
+                #[cfg(feature = "gecko")]
+                {
+                    if structs::GECKO_IS_NIGHTLY {
+                        panic!("Expected {:?} to be in the cache but it was not!", key);
+                    }
+                }
+                invalid_at_computed_value_time()
+            }
+        }
+    }
+}
+
+/// An identifier for a given property declaration, which can be either a
+/// longhand or a custom property.
+#[derive(Clone, Copy, Debug, PartialEq)]
+#[cfg_attr(feature = "servo", derive(MallocSizeOf))]
+pub enum PropertyDeclarationId<'a> {
+    /// A longhand.
+    Longhand(LonghandId),
+    /// A custom property declaration.
+    Custom(&'a crate::custom_properties::Name),
+}
+
+impl<'a> ToCss for PropertyDeclarationId<'a> {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
+        match *self {
+            PropertyDeclarationId::Longhand(id) => dest.write_str(id.name()),
+            PropertyDeclarationId::Custom(ref name) => {
+                dest.write_str("--")?;
+                serialize_atom_name(name, dest)
+            }
+        }
+    }
+}
+
+impl<'a> PropertyDeclarationId<'a> {
+    /// Whether a given declaration id is either the same as `other`, or a
+    /// longhand of it.
+    pub fn is_or_is_longhand_of(&self, other: &PropertyId) -> bool {
+        match *self {
+            PropertyDeclarationId::Longhand(id) => {
+                match *other {
+                    PropertyId::Longhand(other_id) |
+                    PropertyId::LonghandAlias(other_id, _) => id == other_id,
+                    PropertyId::Shorthand(shorthand) |
+                    PropertyId::ShorthandAlias(shorthand, _) => self.is_longhand_of(shorthand),
+                    PropertyId::Custom(_) => false,
+                }
+            }
+            PropertyDeclarationId::Custom(name) => {
+                matches!(*other, PropertyId::Custom(ref other_name) if name == other_name)
+            }
+        }
+    }
+
+    /// Whether a given declaration id is a longhand belonging to this
+    /// shorthand.
+    pub fn is_longhand_of(&self, shorthand: ShorthandId) -> bool {
+        match *self {
+            PropertyDeclarationId::Longhand(ref id) => id.shorthands().any(|s| s == shorthand),
+            _ => false,
+        }
+    }
+
+    /// Returns the name of the property without CSS escaping.
+    pub fn name(&self) -> Cow<'static, str> {
+        match *self {
+            PropertyDeclarationId::Longhand(id) => id.name().into(),
+            PropertyDeclarationId::Custom(name) => {
+                let mut s = String::new();
+                write!(&mut s, "--{}", name).unwrap();
+                s.into()
+            }
+        }
+    }
+
+    /// Returns longhand id if it is, None otherwise.
+    #[inline]
+    pub fn as_longhand(&self) -> Option<LonghandId> {
+        match *self {
+            PropertyDeclarationId::Longhand(id) => Some(id),
+            _ => None,
+        }
+    }
+}
+
+/// Servo's representation of a CSS property, that is, either a longhand, a
+/// shorthand, or a custom property.
+#[derive(Clone, Eq, PartialEq)]
+pub enum PropertyId {
+    /// A longhand property.
+    Longhand(LonghandId),
+    /// A shorthand property.
+    Shorthand(ShorthandId),
+    /// An alias for a longhand property.
+    LonghandAlias(LonghandId, AliasId),
+    /// An alias for a shorthand property.
+    ShorthandAlias(ShorthandId, AliasId),
+    /// A custom property.
+    Custom(crate::custom_properties::Name),
+}
+
+impl fmt::Debug for PropertyId {
+    fn fmt(&self, formatter: &mut fmt::Formatter) -> fmt::Result {
+        self.to_css(&mut CssWriter::new(formatter))
+    }
+}
+
+impl ToCss for PropertyId {
+    fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result
+    where
+        W: Write,
+    {
+        match *self {
+            PropertyId::Longhand(id) => dest.write_str(id.name()),
+            PropertyId::Shorthand(id) => dest.write_str(id.name()),
+            PropertyId::LonghandAlias(id, _) => dest.write_str(id.name()),
+            PropertyId::ShorthandAlias(id, _) => dest.write_str(id.name()),
+            PropertyId::Custom(ref name) => {
+                dest.write_str("--")?;
+                serialize_atom_name(name, dest)
+            }
+        }
+    }
+}
+
+/// The counted unknown property list which is used for css use counters.
+///
+/// FIXME: This should be just #[repr(u8)], but can't be because of ABI issues,
+/// see https://bugs.llvm.org/show_bug.cgi?id=44228.
+#[derive(Clone, Copy, Debug, Eq, FromPrimitive, Hash, PartialEq)]
+#[repr(u32)]
+pub enum CountedUnknownProperty {
+    % for prop in data.counted_unknown_properties:
+    /// ${prop.name}
+    ${prop.camel_case},
+    % endfor
+}
+
+impl CountedUnknownProperty {
+    /// Parse the counted unknown property, for testing purposes only.
+    pub fn parse_for_testing(property_name: &str) -> Option<Self> {
+        ascii_case_insensitive_phf_map! {
+            unknown_id -> CountedUnknownProperty = {
+                % for property in data.counted_unknown_properties:
+                "${property.name}" => CountedUnknownProperty::${property.camel_case},
+                % endfor
+            }
+        }
+        unknown_id(property_name).cloned()
+    }
+
+    /// Returns the underlying index, used for use counter.
+    #[inline]
+    pub fn bit(self) -> usize {
+        self as usize
+    }
+}
+
+impl PropertyId {
+    /// Return the longhand id that this property id represents.
+    #[inline]
+    pub fn longhand_id(&self) -> Option<LonghandId> {
+        Some(match *self {
+            PropertyId::Longhand(id) => id,
+            PropertyId::LonghandAlias(id, _) => id,
+            _ => return None,
+        })
+    }
+
+    /// Returns a given property from the given name, _regardless of whether it
+    /// is enabled or not_, or Err(()) for unknown properties.
+    ///
+    /// Do not use for non-testing purposes.
+    pub fn parse_unchecked_for_testing(name: &str) -> Result<Self, ()> {
+        Self::parse_unchecked(name, None)
+    }
+
+    /// Returns a given property from the given name, _regardless of whether it
+    /// is enabled or not_, or Err(()) for unknown properties.
+    fn parse_unchecked(
+        property_name: &str,
+        use_counters: Option< &UseCounters>,
+    ) -> Result<Self, ()> {
+        // A special id for css use counters.
+        // ShorthandAlias is not used in the Servo build.
+        // That's why we need to allow dead_code.
+        #[allow(dead_code)]
+        pub enum StaticId {
+            Longhand(LonghandId),
+            Shorthand(ShorthandId),
+            LonghandAlias(LonghandId, AliasId),
+            ShorthandAlias(ShorthandId, AliasId),
+            CountedUnknown(CountedUnknownProperty),
+        }
+        ascii_case_insensitive_phf_map! {
+            static_id -> StaticId = {
+                % for (kind, properties) in [("Longhand", data.longhands), ("Shorthand", data.shorthands)]:
+                % for property in properties:
+                "${property.name}" => StaticId::${kind}(${kind}Id::${property.camel_case}),
+                % for alias in property.aliases:
+                "${alias.name}" => {
+                    StaticId::${kind}Alias(
+                        ${kind}Id::${property.camel_case},
+                        AliasId::${alias.camel_case},
+                    )
+                },
+                % endfor
+                % endfor
+                % endfor
+                % for property in data.counted_unknown_properties:
+                "${property.name}" => {
+                    StaticId::CountedUnknown(CountedUnknownProperty::${property.camel_case})
+                },
+                % endfor
+            }
+        }
+
+        if let Some(id) = static_id(property_name) {
+            return Ok(match *id {
+                StaticId::Longhand(id) => PropertyId::Longhand(id),
+                StaticId::Shorthand(id) => {
+                    #[cfg(feature = "gecko")]
+                    {
+                        // We want to count `zoom` even if disabled.
+                        if matches!(id, ShorthandId::Zoom) {
+                            if let Some(counters) = use_counters {
+                                counters.non_custom_properties.record(id.into());
+                            }
+                        }
+                    }
+
+                    PropertyId::Shorthand(id)
+                },
+                StaticId::LonghandAlias(id, alias) => PropertyId::LonghandAlias(id, alias),
+                StaticId::ShorthandAlias(id, alias) => PropertyId::ShorthandAlias(id, alias),
+                StaticId::CountedUnknown(unknown_prop) => {
+                    if let Some(counters) = use_counters {
+                        counters.counted_unknown_properties.record(unknown_prop);
+                    }
+
+                    // Always return Err(()) because these aren't valid custom property names.
+                    return Err(());
+                }
+            });
+        }
+
+        let name = crate::custom_properties::parse_name(property_name)?;
+        Ok(PropertyId::Custom(crate::custom_properties::Name::from(name)))
+    }
+
+    /// Parses a property name, and returns an error if it's unknown or isn't
+    /// enabled for all content.
+    #[inline]
+    pub fn parse_enabled_for_all_content(name: &str) -> Result<Self, ()> {
+        let id = Self::parse_unchecked(name, None)?;
+
+        if !id.enabled_for_all_content() {
+            return Err(());
+        }
+
+        Ok(id)
+    }
+
+
+    /// Parses a property name, and returns an error if it's unknown or isn't
+    /// allowed in this context.
+    #[inline]
+    pub fn parse(name: &str, context: &ParserContext) -> Result<Self, ()> {
+        let id = Self::parse_unchecked(name, context.use_counters)?;
+
+        if !id.allowed_in(context) {
+            return Err(());
+        }
+
+        Ok(id)
+    }
+
+    /// Parses a property name, and returns an error if it's unknown or isn't
+    /// allowed in this context, ignoring the rule_type checks.
+    ///
+    /// This is useful for parsing stuff from CSS values, for example.
+    #[inline]
+    pub fn parse_ignoring_rule_type(
+        name: &str,
+        context: &ParserContext,
+    ) -> Result<Self, ()> {
+        let id = Self::parse_unchecked(name, None)?;
+
+        if !id.allowed_in_ignoring_rule_type(context) {
+            return Err(());
+        }
+
+        Ok(id)
+    }
+
+    /// Returns a property id from Gecko's nsCSSPropertyID.
+    #[cfg(feature = "gecko")]
+    #[allow(non_upper_case_globals)]
+    #[inline]
+    pub fn from_nscsspropertyid(id: nsCSSPropertyID) -> Result<Self, ()> {
+        Ok(NonCustomPropertyId::from_nscsspropertyid(id)?.to_property_id())
+    }
+
+    /// Returns true if the property is a shorthand or shorthand alias.
+    #[inline]
+    pub fn is_shorthand(&self) -> bool {
+        self.as_shorthand().is_ok()
+    }
+
+    /// Given this property id, get it either as a shorthand or as a
+    /// `PropertyDeclarationId`.
+    pub fn as_shorthand(&self) -> Result<ShorthandId, PropertyDeclarationId> {
+        match *self {
+            PropertyId::ShorthandAlias(id, _) |
+            PropertyId::Shorthand(id) => Ok(id),
+            PropertyId::LonghandAlias(id, _) |
+            PropertyId::Longhand(id) => Err(PropertyDeclarationId::Longhand(id)),
+            PropertyId::Custom(ref name) => Err(PropertyDeclarationId::Custom(name)),
+        }
+    }
+
+    /// Returns the `NonCustomPropertyId` corresponding to this property id.
+    pub fn non_custom_id(&self) -> Option<NonCustomPropertyId> {
+        Some(match *self {
+            PropertyId::Custom(_) => return None,
+            PropertyId::Shorthand(shorthand_id) => shorthand_id.into(),
+            PropertyId::Longhand(longhand_id) => longhand_id.into(),
+            PropertyId::ShorthandAlias(_, alias_id) => alias_id.into(),
+            PropertyId::LonghandAlias(_, alias_id) => alias_id.into(),
+        })
+    }
+
+    /// Returns non-alias NonCustomPropertyId corresponding to this
+    /// property id.
+    fn non_custom_non_alias_id(&self) -> Option<NonCustomPropertyId> {
+        Some(match *self {
+            PropertyId::Custom(_) => return None,
+            PropertyId::Shorthand(id) => id.into(),
+            PropertyId::Longhand(id) => id.into(),
+            PropertyId::ShorthandAlias(id, _) => id.into(),
+            PropertyId::LonghandAlias(id, _) => id.into(),
+        })
+    }
+
+    /// Whether the property is enabled for all content regardless of the
+    /// stylesheet it was declared on (that is, in practice only checks prefs).
+    #[inline]
+    pub fn enabled_for_all_content(&self) -> bool {
+        let id = match self.non_custom_id() {
+            // Custom properties are allowed everywhere
+            None => return true,
+            Some(id) => id,
+        };
+
+        id.enabled_for_all_content()
+    }
+
+    /// Converts this PropertyId in nsCSSPropertyID, resolving aliases to the
+    /// resolved property, and returning eCSSPropertyExtra_variable for custom
+    /// properties.
+    #[cfg(feature = "gecko")]
+    #[inline]
+    pub fn to_nscsspropertyid_resolving_aliases(&self) -> nsCSSPropertyID {
+        match self.non_custom_non_alias_id() {
+            Some(id) => id.to_nscsspropertyid(),
+            None => nsCSSPropertyID::eCSSPropertyExtra_variable,
+        }
+    }
+
+    fn allowed_in(&self, context: &ParserContext) -> bool {
+        let id = match self.non_custom_id() {
+            // Custom properties are allowed everywhere
+            None => return true,
+            Some(id) => id,
+        };
+        id.allowed_in(context)
+    }
+
+    #[inline]
+    fn allowed_in_ignoring_rule_type(&self, context: &ParserContext) -> bool {
+        let id = match self.non_custom_id() {
+            // Custom properties are allowed everywhere
+            None => return true,
+            Some(id) => id,
+        };
+        id.allowed_in_ignoring_rule_type(context)
+    }
+
+    /// Whether the property supports the given CSS type.
+    /// `ty` should a bitflags of constants in style_traits::CssType.
+    pub fn supports_type(&self, ty: u8) -> bool {
+        let id = self.non_custom_non_alias_id();
+        id.map_or(0, |id| id.supported_types()) & ty != 0
+    }
+
+    /// Collect supported starting word of values of this property.
+    ///
+    /// See style_traits::SpecifiedValueInfo::collect_completion_keywords for more
+    /// details.
+    pub fn collect_property_completion_keywords(&self, f: KeywordsCollectFn) {
+        if let Some(id) = self.non_custom_non_alias_id() {
+            id.collect_property_completion_keywords(f);
+        }
+        CSSWideKeyword::collect_completion_keywords(f);
+    }
+}
+
+/// A declaration using a CSS-wide keyword.
+#[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
+#[derive(Clone, PartialEq, ToCss, ToShmem)]
+pub struct WideKeywordDeclaration {
+    #[css(skip)]
+    id: LonghandId,
+    /// The CSS-wide keyword.
+    pub keyword: CSSWideKeyword,
+}
+
+/// An unparsed declaration that contains `var()` functions.
+#[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
+#[derive(Clone, PartialEq, ToCss, ToShmem)]
+pub struct VariableDeclaration {
+    /// The id of the property this declaration represents.
+    #[css(skip)]
+    pub id: LonghandId,
+    /// The unparsed value of the variable.
+    #[cfg_attr(feature = "gecko", ignore_malloc_size_of = "XXX: how to handle this?")]
+    pub value: Arc<UnparsedValue>,
+}
+
+/// A custom property declaration value is either an unparsed value or a CSS
+/// wide-keyword.
+#[derive(Clone, PartialEq, ToCss, ToShmem)]
+pub enum CustomDeclarationValue {
+    /// A value.
+    Value(Arc<crate::custom_properties::SpecifiedValue>),
+    /// A wide keyword.
+    CSSWideKeyword(CSSWideKeyword),
+}
+
+/// A custom property declaration with the property name and the declared value.
+#[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
+#[derive(Clone, PartialEq, ToCss, ToShmem)]
+pub struct CustomDeclaration {
+    /// The name of the custom property.
+    #[css(skip)]
+    pub name: crate::custom_properties::Name,
+    /// The value of the custom property.
+    #[cfg_attr(feature = "gecko", ignore_malloc_size_of = "XXX: how to handle this?")]
+    pub value: CustomDeclarationValue,
+}
+
+impl fmt::Debug for PropertyDeclaration {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        self.id().to_css(&mut CssWriter::new(f))?;
+        f.write_str(": ")?;
+
+        // Because PropertyDeclaration::to_css requires CssStringWriter, we can't write
+        // it directly to f, and need to allocate an intermediate string. This is
+        // fine for debug-only code.
+        let mut s = CssString::new();
+        self.to_css(&mut s)?;
+        write!(f, "{}", s)
+    }
+}
+
+impl PropertyDeclaration {
+    /// Given a property declaration, return the property declaration id.
+    #[inline]
+    pub fn id(&self) -> PropertyDeclarationId {
+        match *self {
+            PropertyDeclaration::Custom(ref declaration) => {
+                return PropertyDeclarationId::Custom(&declaration.name)
+            }
+            PropertyDeclaration::CSSWideKeyword(ref declaration) => {
+                return PropertyDeclarationId::Longhand(declaration.id);
+            }
+            PropertyDeclaration::WithVariables(ref declaration) => {
+                return PropertyDeclarationId::Longhand(declaration.id);
+            }
+            _ => {}
+        }
+        // This is just fine because PropertyDeclaration and LonghandId
+        // have corresponding discriminants.
+        let id = unsafe { *(self as *const _ as *const LonghandId) };
+        debug_assert_eq!(id, match *self {
+            % for property in data.longhands:
+            PropertyDeclaration::${property.camel_case}(..) => LonghandId::${property.camel_case},
+            % endfor
+            _ => id,
+        });
+        PropertyDeclarationId::Longhand(id)
+    }
+
+    /// Given a declaration, convert it into a declaration for a corresponding
+    /// physical property.
+    #[inline]
+    pub fn to_physical(&self, wm: WritingMode) -> Self {
+        match *self {
+            PropertyDeclaration::WithVariables(VariableDeclaration {
+                id,
+                ref value,
+            }) => {
+                return PropertyDeclaration::WithVariables(VariableDeclaration {
+                    id: id.to_physical(wm),
+                    value: value.clone(),
+                })
+            }
+            PropertyDeclaration::CSSWideKeyword(WideKeywordDeclaration {
+                id,
+                keyword,
+            }) => {
+                return PropertyDeclaration::CSSWideKeyword(WideKeywordDeclaration {
+                    id: id.to_physical(wm),
+                    keyword,
+                })
+            }
+            PropertyDeclaration::Custom(..) => return self.clone(),
+            % for prop in data.longhands:
+            PropertyDeclaration::${prop.camel_case}(..) => {},
+            % endfor
+        }
+
+        let mut ret = self.clone();
+
+        % for prop in data.longhands:
+        % for physical_property in prop.all_physical_mapped_properties(data):
+        % if physical_property.specified_type() != prop.specified_type():
+            <% raise "Logical property %s should share specified value with physical property %s" % \
+                     (prop.name, physical_property.name) %>
+        % endif
+        % endfor
+        % endfor
+
+        unsafe {
+            let longhand_id = *(&mut ret as *mut _ as *mut LonghandId);
+
+            debug_assert_eq!(
+                PropertyDeclarationId::Longhand(longhand_id),
+                ret.id()
+            );
+
+            // This is just fine because PropertyDeclaration and LonghandId
+            // have corresponding discriminants.
+            *(&mut ret as *mut _ as *mut LonghandId) = longhand_id.to_physical(wm);
+
+            debug_assert_eq!(
+                PropertyDeclarationId::Longhand(longhand_id.to_physical(wm)),
+                ret.id()
+            );
+        }
+
+        ret
+    }
+
+    fn with_variables_from_shorthand(&self, shorthand: ShorthandId) -> Option< &str> {
+        match *self {
+            PropertyDeclaration::WithVariables(ref declaration) => {
+                let s = declaration.value.from_shorthand?;
+                if s != shorthand {
+                    return None;
+                }
+                Some(&*declaration.value.css)
+            },
+            _ => None,
+        }
+    }
+
+    /// Returns a CSS-wide keyword declaration for a given property.
+    #[inline]
+    pub fn css_wide_keyword(id: LonghandId, keyword: CSSWideKeyword) -> Self {
+        Self::CSSWideKeyword(WideKeywordDeclaration { id, keyword })
+    }
+
+    /// Returns a CSS-wide keyword if the declaration's value is one.
+    #[inline]
+    pub fn get_css_wide_keyword(&self) -> Option<CSSWideKeyword> {
+        match *self {
+            PropertyDeclaration::CSSWideKeyword(ref declaration) => {
+                Some(declaration.keyword)
+            },
+            _ => None,
+        }
+    }
+
+    /// Returns whether or not the property is set by a system font
+    pub fn get_system(&self) -> Option<SystemFont> {
+        match *self {
+            % if engine == "gecko":
+            % for prop in SYSTEM_FONT_LONGHANDS:
+                PropertyDeclaration::${to_camel_case(prop)}(ref prop) => {
+                    prop.get_system()
+                }
+            % endfor
+            % endif
+            _ => None,
+        }
+    }
+
+    /// Is it the default value of line-height?
+    pub fn is_default_line_height(&self) -> bool {
+        match *self {
+            PropertyDeclaration::LineHeight(LineHeight::Normal) => true,
+            _ => false
+        }
+    }
+
+    /// Returns whether the declaration may be serialized as part of a shorthand.
+    ///
+    /// This method returns false if this declaration contains variable or has a
+    /// CSS-wide keyword value, since these values cannot be serialized as part
+    /// of a shorthand.
+    ///
+    /// Caller should check `with_variables_from_shorthand()` and whether all
+    /// needed declarations has the same CSS-wide keyword first.
+    ///
+    /// Note that, serialization of a shorthand may still fail because of other
+    /// property-specific requirement even when this method returns true for all
+    /// the longhand declarations.
+    pub fn may_serialize_as_part_of_shorthand(&self) -> bool {
+        match *self {
+            PropertyDeclaration::CSSWideKeyword(..) |
+            PropertyDeclaration::WithVariables(..) => false,
+            PropertyDeclaration::Custom(..) =>
+                unreachable!("Serializing a custom property as part of shorthand?"),
+            _ => true,
+        }
+    }
+
+    /// Return whether the value is stored as it was in the CSS source,
+    /// preserving whitespace (as opposed to being parsed into a more abstract
+    /// data structure).
+    ///
+    /// This is the case of custom properties and values that contain
+    /// unsubstituted variables.
+    pub fn value_is_unparsed(&self) -> bool {
+        match *self {
+            PropertyDeclaration::WithVariables(..) => true,
+            PropertyDeclaration::Custom(ref declaration) => {
+                matches!(declaration.value, CustomDeclarationValue::Value(..))
+            }
+            _ => false,
+        }
+    }
+
+    /// Returns true if this property declaration is for one of the animatable
+    /// properties.
+    pub fn is_animatable(&self) -> bool {
+        match self.id() {
+            PropertyDeclarationId::Longhand(id) => id.is_animatable(),
+            PropertyDeclarationId::Custom(..) => false,
+        }
+    }
+
+    /// Returns true if this property is a custom property, false
+    /// otherwise.
+    pub fn is_custom(&self) -> bool {
+        matches!(*self, PropertyDeclaration::Custom(..))
+    }
+
+    /// The `context` parameter controls this:
+    ///
+    /// <https://drafts.csswg.org/css-animations/#keyframes>
+    /// > The <declaration-list> inside of <keyframe-block> accepts any CSS property
+    /// > except those defined in this specification,
+    /// > but does accept the `animation-play-state` property and interprets it specially.
+    ///
+    /// This will not actually parse Importance values, and will always set things
+    /// to Importance::Normal. Parsing Importance values is the job of PropertyDeclarationParser,
+    /// we only set them here so that we don't have to reallocate
+    pub fn parse_into<'i, 't>(
+        declarations: &mut SourcePropertyDeclaration,
+        id: PropertyId,
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<(), ParseError<'i>> {
+        assert!(declarations.is_empty());
+        debug_assert!(id.allowed_in(context), "{:?}", id);
+
+        let non_custom_id = id.non_custom_id();
+        input.skip_whitespace();
+
+        let start = input.state();
+        match id {
+            PropertyId::Custom(property_name) => {
+                let value = match input.try_parse(CSSWideKeyword::parse) {
+                    Ok(keyword) => CustomDeclarationValue::CSSWideKeyword(keyword),
+                    Err(()) => CustomDeclarationValue::Value(
+                        crate::custom_properties::SpecifiedValue::parse(input)?
+                    ),
+                };
+                declarations.push(PropertyDeclaration::Custom(CustomDeclaration {
+                    name: property_name,
+                    value,
+                }));
+                return Ok(());
+            }
+            PropertyId::LonghandAlias(id, _) |
+            PropertyId::Longhand(id) => {
+                input.try_parse(CSSWideKeyword::parse).map(|keyword| {
+                    PropertyDeclaration::css_wide_keyword(id, keyword)
+                }).or_else(|()| {
+                    input.look_for_var_or_env_functions();
+                    input.parse_entirely(|input| id.parse_value(context, input))
+                    .or_else(|err| {
+                        while let Ok(_) = input.next() {}  // Look for var() after the error.
+                        if !input.seen_var_or_env_functions() {
+                            return Err(err);
+                        }
+                        input.reset(&start);
+                        let (first_token_type, css) =
+                            crate::custom_properties::parse_non_custom_with_var(input)?;
+                        Ok(PropertyDeclaration::WithVariables(VariableDeclaration {
+                            id,
+                            value: Arc::new(UnparsedValue {
+                                css: css.into_owned(),
+                                first_token_type,
+                                url_data: context.url_data.clone(),
+                                from_shorthand: None,
+                            }),
+                        }))
+                    })
+                }).map(|declaration| {
+                    declarations.push(declaration)
+                })?;
+            }
+            PropertyId::ShorthandAlias(id, _) |
+            PropertyId::Shorthand(id) => {
+                if let Ok(keyword) = input.try_parse(CSSWideKeyword::parse) {
+                    if id == ShorthandId::All {
+                        declarations.all_shorthand = AllShorthand::CSSWideKeyword(keyword)
+                    } else {
+                        for longhand in id.longhands() {
+                            declarations.push(PropertyDeclaration::css_wide_keyword(longhand, keyword));
+                        }
+                    }
+                } else {
+                    input.look_for_var_or_env_functions();
+                    // Not using parse_entirely here: each
+                    // ${shorthand.ident}::parse_into function needs to do so
+                    // *before* pushing to `declarations`.
+                    id.parse_into(declarations, context, input).or_else(|err| {
+                        while let Ok(_) = input.next() {}  // Look for var() after the error.
+                        if !input.seen_var_or_env_functions() {
+                            return Err(err);
+                        }
+
+                        input.reset(&start);
+                        let (first_token_type, css) =
+                            crate::custom_properties::parse_non_custom_with_var(input)?;
+                        let unparsed = Arc::new(UnparsedValue {
+                            css: css.into_owned(),
+                            first_token_type,
+                            url_data: context.url_data.clone(),
+                            from_shorthand: Some(id),
+                        });
+                        if id == ShorthandId::All {
+                            declarations.all_shorthand = AllShorthand::WithVariables(unparsed)
+                        } else {
+                            for id in id.longhands() {
+                                declarations.push(
+                                    PropertyDeclaration::WithVariables(VariableDeclaration {
+                                        id,
+                                        value: unparsed.clone(),
+                                    })
+                                )
+                            }
+                        }
+                        Ok(())
+                    })?;
+                }
+            }
+        }
+        debug_assert!(non_custom_id.is_some(), "Custom properties should've returned earlier");
+        if let Some(use_counters) = context.use_counters {
+            use_counters.non_custom_properties.record(non_custom_id.unwrap());
+        }
+        Ok(())
+    }
+}
+
+const SUB_PROPERTIES_ARRAY_CAP: usize =
+    ${max(len(s.sub_properties) for s in data.shorthands_except_all()) \
+          if data.shorthands_except_all() else 0};
+
+/// An ArrayVec of subproperties, contains space for the longest shorthand except all.
+pub type SubpropertiesVec<T> = ArrayVec<T, SUB_PROPERTIES_ARRAY_CAP>;
+
+/// A stack-allocated vector of `PropertyDeclaration`
+/// large enough to parse one CSS `key: value` declaration.
+/// (Shorthands expand to multiple `PropertyDeclaration`s.)
+#[derive(Default)]
+pub struct SourcePropertyDeclaration {
+    /// The storage for the actual declarations (except for all).
+    pub declarations: SubpropertiesVec<PropertyDeclaration>,
+    /// Stored separately to keep SubpropertiesVec smaller.
+    pub all_shorthand: AllShorthand,
+}
+
+// This is huge, but we allocate it on the stack and then never move it,
+// we only pass `&mut SourcePropertyDeclaration` references around.
+size_of_test!(SourcePropertyDeclaration, 632);
+
+impl SourcePropertyDeclaration {
+    /// Create one with a single PropertyDeclaration.
+    #[inline]
+    pub fn with_one(decl: PropertyDeclaration) -> Self {
+        let mut result = Self::default();
+        result.declarations.push(decl);
+        result
+    }
+
+    /// Similar to Vec::drain: leaves this empty when the return value is dropped.
+    pub fn drain(&mut self) -> SourcePropertyDeclarationDrain {
+        SourcePropertyDeclarationDrain {
+            declarations: self.declarations.drain(..),
+            all_shorthand: mem::replace(&mut self.all_shorthand, AllShorthand::NotSet),
+        }
+    }
+
+    /// Reset to initial state
+    pub fn clear(&mut self) {
+        self.declarations.clear();
+        self.all_shorthand = AllShorthand::NotSet;
+    }
+
+    fn is_empty(&self) -> bool {
+        self.declarations.is_empty() && matches!(self.all_shorthand, AllShorthand::NotSet)
+    }
+
+    fn push(&mut self, declaration: PropertyDeclaration) {
+        let _result = self.declarations.try_push(declaration);
+        debug_assert!(_result.is_ok());
+    }
+}
+
+/// Return type of SourcePropertyDeclaration::drain
+pub struct SourcePropertyDeclarationDrain<'a> {
+    /// A drain over the non-all declarations.
+    pub declarations: ArrayVecDrain<'a, PropertyDeclaration, SUB_PROPERTIES_ARRAY_CAP>,
+    /// The all shorthand that was set.
+    pub all_shorthand: AllShorthand,
+}
+
+/// A parsed all-shorthand value.
+pub enum AllShorthand {
+    /// Not present.
+    NotSet,
+    /// A CSS-wide keyword.
+    CSSWideKeyword(CSSWideKeyword),
+    /// An all shorthand with var() references that we can't resolve right now.
+    WithVariables(Arc<UnparsedValue>)
+}
+
+impl Default for AllShorthand {
+    fn default() -> Self {
+        Self::NotSet
+    }
+}
+
+impl AllShorthand {
+    /// Iterates property declarations from the given all shorthand value.
+    #[inline]
+    pub fn declarations(&self) -> AllShorthandDeclarationIterator {
+        AllShorthandDeclarationIterator {
+            all_shorthand: self,
+            longhands: ShorthandId::All.longhands(),
+        }
+    }
+}
+
+/// An iterator over the all shorthand's shorthand declarations.
+pub struct AllShorthandDeclarationIterator<'a> {
+    all_shorthand: &'a AllShorthand,
+    longhands: NonCustomPropertyIterator<LonghandId>,
+}
+
+impl<'a> Iterator for AllShorthandDeclarationIterator<'a> {
+    type Item = PropertyDeclaration;
+
+    #[inline]
+    fn next(&mut self) -> Option<Self::Item> {
+        match *self.all_shorthand {
+            AllShorthand::NotSet => None,
+            AllShorthand::CSSWideKeyword(ref keyword) => {
+                Some(PropertyDeclaration::css_wide_keyword(self.longhands.next()?, *keyword))
+            }
+            AllShorthand::WithVariables(ref unparsed) => {
+                Some(PropertyDeclaration::WithVariables(
+                    VariableDeclaration {
+                        id: self.longhands.next()?,
+                        value: unparsed.clone()
+                    }
+                ))
+            }
+        }
+    }
+}
+
+#[cfg(feature = "gecko")]
+pub use super::gecko::style_structs;
+
+/// The module where all the style structs are defined.
+#[cfg(feature = "servo")]
+pub mod style_structs {
+    use fxhash::FxHasher;
+    use super::longhands;
+    use std::hash::{Hash, Hasher};
+    use crate::logical_geometry::WritingMode;
+    use crate::media_queries::Device;
+    use crate::values::computed::NonNegativeLength;
+
+    % for style_struct in data.active_style_structs():
+        % if style_struct.name == "Font":
+        #[derive(Clone, Debug, MallocSizeOf)]
+        #[cfg_attr(feature = "servo", derive(Serialize, Deserialize))]
+        % else:
+        #[derive(Clone, Debug, MallocSizeOf, PartialEq)]
+        % endif
+        /// The ${style_struct.name} style struct.
+        pub struct ${style_struct.name} {
+            % for longhand in style_struct.longhands:
+                % if not longhand.logical:
+                    /// The ${longhand.name} computed value.
+                    pub ${longhand.ident}: longhands::${longhand.ident}::computed_value::T,
+                % endif
+            % endfor
+            % if style_struct.name == "InheritedText":
+                /// The "used" text-decorations that apply to this box.
+                ///
+                /// FIXME(emilio): This is technically a box-tree concept, and
+                /// would be nice to move away from style.
+                pub text_decorations_in_effect: crate::values::computed::text::TextDecorationsInEffect,
+            % endif
+            % if style_struct.name == "Font":
+                /// The font hash, used for font caching.
+                pub hash: u64,
+            % endif
+            % if style_struct.name == "Box":
+                /// The display value specified by the CSS stylesheets (without any style adjustments),
+                /// which is needed for hypothetical layout boxes.
+                pub original_display: longhands::display::computed_value::T,
+            % endif
+        }
+        % if style_struct.name == "Font":
+        impl PartialEq for Font {
+            fn eq(&self, other: &Font) -> bool {
+                self.hash == other.hash
+                % for longhand in style_struct.longhands:
+                    && self.${longhand.ident} == other.${longhand.ident}
+                % endfor
+            }
+        }
+        % endif
+
+        impl ${style_struct.name} {
+            % for longhand in style_struct.longhands:
+                % if longhand.logical:
+                    ${helpers.logical_setter(name=longhand.name)}
+                % else:
+                    % if longhand.ident == "display":
+                        /// Set `display`.
+                        ///
+                        /// We need to keep track of the original display for hypothetical boxes,
+                        /// so we need to special-case this.
+                        #[allow(non_snake_case)]
+                        #[inline]
+                        pub fn set_display(&mut self, v: longhands::display::computed_value::T) {
+                            self.display = v;
+                            self.original_display = v;
+                        }
+                    % else:
+                        /// Set ${longhand.name}.
+                        #[allow(non_snake_case)]
+                        #[inline]
+                        pub fn set_${longhand.ident}(&mut self, v: longhands::${longhand.ident}::computed_value::T) {
+                            self.${longhand.ident} = v;
+                        }
+                    % endif
+                    % if longhand.ident == "display":
+                        /// Set `display` from other struct.
+                        ///
+                        /// Same as `set_display` above.
+                        /// Thus, we need to special-case this.
+                        #[allow(non_snake_case)]
+                        #[inline]
+                        pub fn copy_display_from(&mut self, other: &Self) {
+                            self.display = other.display.clone();
+                            self.original_display = other.display.clone();
+                        }
+                    % else:
+                        /// Set ${longhand.name} from other struct.
+                        #[allow(non_snake_case)]
+                        #[inline]
+                        pub fn copy_${longhand.ident}_from(&mut self, other: &Self) {
+                            self.${longhand.ident} = other.${longhand.ident}.clone();
+                        }
+                    % endif
+                    /// Reset ${longhand.name} from the initial struct.
+                    #[allow(non_snake_case)]
+                    #[inline]
+                    pub fn reset_${longhand.ident}(&mut self, other: &Self) {
+                        self.copy_${longhand.ident}_from(other)
+                    }
+
+                    /// Get the computed value for ${longhand.name}.
+                    #[allow(non_snake_case)]
+                    #[inline]
+                    pub fn clone_${longhand.ident}(&self) -> longhands::${longhand.ident}::computed_value::T {
+                        self.${longhand.ident}.clone()
+                    }
+                % endif
+                % if longhand.need_index:
+                    /// If this longhand is indexed, get the number of elements.
+                    #[allow(non_snake_case)]
+                    pub fn ${longhand.ident}_count(&self) -> usize {
+                        self.${longhand.ident}.0.len()
+                    }
+
+                    /// If this longhand is indexed, get the element at given
+                    /// index.
+                    #[allow(non_snake_case)]
+                    pub fn ${longhand.ident}_at(&self, index: usize)
+                        -> longhands::${longhand.ident}::computed_value::SingleComputedValue {
+                        self.${longhand.ident}.0[index].clone()
+                    }
+                % endif
+            % endfor
+            % if style_struct.name == "Border":
+                % for side in ["top", "right", "bottom", "left"]:
+                    /// Whether the border-${side} property has nonzero width.
+                    #[allow(non_snake_case)]
+                    pub fn border_${side}_has_nonzero_width(&self) -> bool {
+                        use crate::Zero;
+                        !self.border_${side}_width.is_zero()
+                    }
+                % endfor
+            % elif style_struct.name == "Font":
+                /// Computes a font hash in order to be able to cache fonts
+                /// effectively in GFX and layout.
+                pub fn compute_font_hash(&mut self) {
+                    // Corresponds to the fields in
+                    // `gfx::font_template::FontTemplateDescriptor`.
+                    let mut hasher: FxHasher = Default::default();
+                    self.font_weight.hash(&mut hasher);
+                    self.font_stretch.hash(&mut hasher);
+                    self.font_style.hash(&mut hasher);
+                    self.font_family.hash(&mut hasher);
+                    self.hash = hasher.finish()
+                }
+
+                /// (Servo does not handle MathML, so this just calls copy_font_size_from)
+                pub fn inherit_font_size_from(&mut self, parent: &Self,
+                                              _: Option<NonNegativeLength>,
+                                              _: &Device) {
+                    self.copy_font_size_from(parent);
+                }
+                /// (Servo does not handle MathML, so this just calls set_font_size)
+                pub fn apply_font_size(&mut self,
+                                       v: longhands::font_size::computed_value::T,
+                                       _: &Self,
+                                       _: &Device) -> Option<NonNegativeLength> {
+                    self.set_font_size(v);
+                    None
+                }
+                /// (Servo does not handle MathML, so this does nothing)
+                pub fn apply_unconstrained_font_size(&mut self, _: NonNegativeLength) {
+                }
+
+            % elif style_struct.name == "Outline":
+                /// Whether the outline-width property is non-zero.
+                #[inline]
+                pub fn outline_has_nonzero_width(&self) -> bool {
+                    use crate::Zero;
+                    !self.outline_width.is_zero()
+                }
+            % elif style_struct.name == "Box":
+                /// Sets the display property, but without touching original_display,
+                /// except when the adjustment comes from root or item display fixups.
+                pub fn set_adjusted_display(
+                    &mut self,
+                    dpy: longhands::display::computed_value::T,
+                    is_item_or_root: bool
+                ) {
+                    self.display = dpy;
+                    if is_item_or_root {
+                        self.original_display = dpy;
+                    }
+                }
+            % endif
+        }
+
+    % endfor
+}
+
+% for style_struct in data.active_style_structs():
+    impl style_structs::${style_struct.name} {
+        % for longhand in style_struct.longhands:
+            % if longhand.need_index:
+                /// Iterate over the values of ${longhand.name}.
+                #[allow(non_snake_case)]
+                #[inline]
+                pub fn ${longhand.ident}_iter(&self) -> ${longhand.camel_case}Iter {
+                    ${longhand.camel_case}Iter {
+                        style_struct: self,
+                        current: 0,
+                        max: self.${longhand.ident}_count(),
+                    }
+                }
+
+                /// Get a value mod `index` for the property ${longhand.name}.
+                #[allow(non_snake_case)]
+                #[inline]
+                pub fn ${longhand.ident}_mod(&self, index: usize)
+                    -> longhands::${longhand.ident}::computed_value::SingleComputedValue {
+                    self.${longhand.ident}_at(index % self.${longhand.ident}_count())
+                }
+
+                /// Clone the computed value for the property.
+                #[allow(non_snake_case)]
+                #[inline]
+                #[cfg(feature = "gecko")]
+                pub fn clone_${longhand.ident}(
+                    &self,
+                ) -> longhands::${longhand.ident}::computed_value::T {
+                    longhands::${longhand.ident}::computed_value::List(
+                        self.${longhand.ident}_iter().collect()
+                    )
+                }
+            % endif
+        % endfor
+
+        % if style_struct.name == "UI":
+            /// Returns whether there is any animation specified with
+            /// animation-name other than `none`.
+            pub fn specifies_animations(&self) -> bool {
+                self.animation_name_iter().any(|name| !name.is_none())
+            }
+
+            /// Returns whether there are any transitions specified.
+            #[cfg(feature = "servo")]
+            pub fn specifies_transitions(&self) -> bool {
+                (0..self.transition_property_count()).any(|index| {
+                    let combined_duration =
+                        self.transition_duration_mod(index).seconds().max(0.) +
+                        self.transition_delay_mod(index).seconds();
+                    combined_duration > 0.
+                })
+            }
+
+            /// Returns whether there is any named progress timeline specified with
+            /// scroll-timeline-name other than `none`.
+            pub fn specifies_scroll_timelines(&self) -> bool {
+                self.scroll_timeline_name_iter().any(|name| !name.is_none())
+            }
+
+            /// Returns whether there is any named progress timeline specified with
+            /// view-timeline-name other than `none`.
+            pub fn specifies_view_timelines(&self) -> bool {
+                self.view_timeline_name_iter().any(|name| !name.is_none())
+            }
+
+            /// Returns true if animation properties are equal between styles, but without
+            /// considering keyframe data and animation-timeline.
+            #[cfg(feature = "servo")]
+            pub fn animations_equals(&self, other: &Self) -> bool {
+                self.animation_name_iter().eq(other.animation_name_iter()) &&
+                self.animation_delay_iter().eq(other.animation_delay_iter()) &&
+                self.animation_direction_iter().eq(other.animation_direction_iter()) &&
+                self.animation_duration_iter().eq(other.animation_duration_iter()) &&
+                self.animation_fill_mode_iter().eq(other.animation_fill_mode_iter()) &&
+                self.animation_iteration_count_iter().eq(other.animation_iteration_count_iter()) &&
+                self.animation_play_state_iter().eq(other.animation_play_state_iter()) &&
+                self.animation_timing_function_iter().eq(other.animation_timing_function_iter())
+            }
+
+        % elif style_struct.name == "Column":
+            /// Whether this is a multicol style.
+            #[cfg(feature = "servo")]
+            pub fn is_multicol(&self) -> bool {
+                !self.column_width.is_auto() || !self.column_count.is_auto()
+            }
+        % endif
+    }
+
+    % for longhand in style_struct.longhands:
+        % if longhand.need_index:
+            /// An iterator over the values of the ${longhand.name} properties.
+            pub struct ${longhand.camel_case}Iter<'a> {
+                style_struct: &'a style_structs::${style_struct.name},
+                current: usize,
+                max: usize,
+            }
+
+            impl<'a> Iterator for ${longhand.camel_case}Iter<'a> {
+                type Item = longhands::${longhand.ident}::computed_value::SingleComputedValue;
+
+                fn next(&mut self) -> Option<Self::Item> {
+                    self.current += 1;
+                    if self.current <= self.max {
+                        Some(self.style_struct.${longhand.ident}_at(self.current - 1))
+                    } else {
+                        None
+                    }
+                }
+            }
+        % endif
+    % endfor
+% endfor
+
+
+#[cfg(feature = "gecko")]
+pub use super::gecko::{ComputedValues, ComputedValuesInner};
+
+#[cfg(feature = "servo")]
+#[cfg_attr(feature = "servo", derive(Clone, Debug))]
+/// Actual data of ComputedValues, to match up with Gecko
+pub struct ComputedValuesInner {
+    % for style_struct in data.active_style_structs():
+        ${style_struct.ident}: Arc<style_structs::${style_struct.name}>,
+    % endfor
+    custom_properties: Option<Arc<crate::custom_properties::CustomPropertiesMap>>,
+    /// The writing mode of this computed values struct.
+    pub writing_mode: WritingMode,
+
+    /// A set of flags we use to store misc information regarding this style.
+    pub flags: ComputedValueFlags,
+
+    /// The rule node representing the ordered list of rules matched for this
+    /// node.  Can be None for default values and text nodes.  This is
+    /// essentially an optimization to avoid referencing the root rule node.
+    pub rules: Option<StrongRuleNode>,
+
+    /// The element's computed values if visited, only computed if there's a
+    /// relevant link for this element. A element's "relevant link" is the
+    /// element being matched if it is a link or the nearest ancestor link.
+    visited_style: Option<Arc<ComputedValues>>,
+}
+
+/// The struct that Servo uses to represent computed values.
+///
+/// This struct contains an immutable atomically-reference-counted pointer to
+/// every kind of style struct.
+///
+/// When needed, the structs may be copied in order to get mutated.
+#[cfg(feature = "servo")]
+#[cfg_attr(feature = "servo", derive(Clone, Debug))]
+pub struct ComputedValues {
+    /// The actual computed values
+    ///
+    /// In Gecko the outer ComputedValues is actually a ComputedStyle, whereas
+    /// ComputedValuesInner is the core set of computed values.
+    ///
+    /// We maintain this distinction in servo to reduce the amount of special
+    /// casing.
+    inner: ComputedValuesInner,
+
+    /// The pseudo-element that we're using.
+    pseudo: Option<PseudoElement>,
+}
+
+impl ComputedValues {
+    /// Returns the pseudo-element that this style represents.
+    #[cfg(feature = "servo")]
+    pub fn pseudo(&self) -> Option<<&PseudoElement> {
+        self.pseudo.as_ref()
+    }
+
+    /// Returns true if this is the style for a pseudo-element.
+    #[cfg(feature = "servo")]
+    pub fn is_pseudo_style(&self) -> bool {
+        self.pseudo().is_some()
+    }
+
+    /// Returns whether this style's display value is equal to contents.
+    pub fn is_display_contents(&self) -> bool {
+        self.clone_display().is_contents()
+    }
+
+    /// Gets a reference to the rule node. Panic if no rule node exists.
+    pub fn rules(&self) -> &StrongRuleNode {
+        self.rules.as_ref().unwrap()
+    }
+
+    /// Returns the visited rules, if applicable.
+    pub fn visited_rules(&self) -> Option<<&StrongRuleNode> {
+        self.visited_style().and_then(|s| s.rules.as_ref())
+    }
+
+    /// Gets a reference to the custom properties map (if one exists).
+    pub fn custom_properties(&self) -> Option<<&Arc<crate::custom_properties::CustomPropertiesMap>> {
+        self.custom_properties.as_ref()
+    }
+
+    /// Returns whether we have the same custom properties as another style.
+    ///
+    /// This should effectively be just:
+    ///
+    ///   self.custom_properties() == other.custom_properties()
+    ///
+    /// But that's not really the case because IndexMap equality doesn't
+    /// consider ordering, which we have to account for. Also, for the same
+    /// reason, IndexMap equality comparisons are slower than needed.
+    ///
+    /// See https://github.com/bluss/indexmap/issues/153
+    pub fn custom_properties_equal(&self, other: &Self) -> bool {
+        match (self.custom_properties(), other.custom_properties()) {
+            (Some(l), Some(r)) => {
+                l.len() == r.len() && l.iter().zip(r.iter()).all(|((k1, v1), (k2, v2))| k1 == k2 && v1 == v2)
+            },
+            (None, None) => true,
+            _ => false,
+        }
+    }
+
+% for prop in data.longhands:
+    /// Gets the computed value of a given property.
+    #[inline(always)]
+    #[allow(non_snake_case)]
+    pub fn clone_${prop.ident}(
+        &self,
+    ) -> longhands::${prop.ident}::computed_value::T {
+        self.get_${prop.style_struct.ident.strip("_")}()
+        % if prop.logical:
+            .clone_${prop.ident}(self.writing_mode)
+        % else:
+            .clone_${prop.ident}()
+        % endif
+    }
+% endfor
+
+    /// Writes the (resolved or computed) value of the given longhand as a string in `dest`.
+    ///
+    /// TODO(emilio): We should move all the special resolution from
+    /// nsComputedDOMStyle to ToResolvedValue instead.
+    pub fn computed_or_resolved_value(
+        &self,
+        property_id: LonghandId,
+        context: Option<<&resolved::Context>,
+        dest: &mut CssStringWriter,
+    ) -> fmt::Result {
+        use crate::values::resolved::ToResolvedValue;
+        let mut dest = CssWriter::new(dest);
+        match property_id {
+            % for specified_type, props in groupby(data.longhands, key=lambda x: x.specified_type()):
+            <% props = list(props) %>
+            ${" |\n".join("LonghandId::{}".format(p.camel_case) for p in props)} => {
+                let value = match property_id {
+                    % for prop in props:
+                    LonghandId::${prop.camel_case} => self.clone_${prop.ident}(),
+                    % endfor
+                    _ => unsafe { debug_unreachable!() },
+                };
+                if let Some(c) = context {
+                    value.to_resolved_value(c).to_css(&mut dest)
+                } else {
+                    value.to_css(&mut dest)
+                }
+            }
+            % endfor
+        }
+    }
+
+    /// Returns the given longhand's resolved value as a property declaration.
+    pub fn computed_or_resolved_declaration(
+        &self,
+        property_id: LonghandId,
+        context: Option<<&resolved::Context>,
+    ) -> PropertyDeclaration {
+        use crate::values::resolved::ToResolvedValue;
+        use crate::values::computed::ToComputedValue;
+        match property_id {
+            % for specified_type, props in groupby(data.longhands, key=lambda x: x.specified_type()):
+            <% props = list(props) %>
+            ${" |\n".join("LonghandId::{}".format(p.camel_case) for p in props)} => {
+                let mut computed_value = match property_id {
+                    % for prop in props:
+                    LonghandId::${prop.camel_case} => self.clone_${prop.ident}(),
+                    % endfor
+                    _ => unsafe { debug_unreachable!() },
+                };
+                if let Some(c) = context {
+                    let resolved = computed_value.to_resolved_value(c);
+                    computed_value = ToResolvedValue::from_resolved_value(resolved);
+                }
+                let specified = ToComputedValue::from_computed_value(&computed_value);
+                % if props[0].boxed:
+                let specified = Box::new(specified);
+                % endif
+                % if len(props) == 1:
+                PropertyDeclaration::${props[0].camel_case}(specified)
+                % else:
+                unsafe {
+                    let mut out = mem::MaybeUninit::uninit();
+                    ptr::write(
+                        out.as_mut_ptr() as *mut PropertyDeclarationVariantRepr<${specified_type}>,
+                        PropertyDeclarationVariantRepr {
+                            tag: property_id as u16,
+                            value: specified,
+                        },
+                    );
+                    out.assume_init()
+                }
+                % endif
+            }
+            % endfor
+        }
+    }
+
+    /// Resolves the currentColor keyword.
+    ///
+    /// Any color value from computed values (except for the 'color' property
+    /// itself) should go through this method.
+    ///
+    /// Usage example:
+    /// let top_color =
+    ///   style.resolve_color(style.get_border().clone_border_top_color());
+    #[inline]
+    pub fn resolve_color(&self, color: computed::Color) -> crate::color::AbsoluteColor {
+        let current_color = self.get_inherited_text().clone_color();
+        color.resolve_to_absolute(&current_color)
+    }
+
+    /// Returns which longhand properties have different values in the two
+    /// ComputedValues.
+    #[cfg(feature = "gecko_debug")]
+    pub fn differing_properties(&self, other: &ComputedValues) -> LonghandIdSet {
+        let mut set = LonghandIdSet::new();
+        % for prop in data.longhands:
+        if self.clone_${prop.ident}() != other.clone_${prop.ident}() {
+            set.insert(LonghandId::${prop.camel_case});
+        }
+        % endfor
+        set
+    }
+
+    /// Create a `TransitionPropertyIterator` for this styles transition properties.
+    pub fn transition_properties<'a>(
+        &'a self
+    ) -> animated_properties::TransitionPropertyIterator<'a> {
+        animated_properties::TransitionPropertyIterator::from_style(self)
+    }
+}
+
+#[cfg(feature = "servo")]
+impl ComputedValues {
+    /// Create a new refcounted `ComputedValues`
+    pub fn new(
+        pseudo: Option<<&PseudoElement>,
+        custom_properties: Option<Arc<crate::custom_properties::CustomPropertiesMap>>,
+        writing_mode: WritingMode,
+        flags: ComputedValueFlags,
+        rules: Option<StrongRuleNode>,
+        visited_style: Option<Arc<ComputedValues>>,
+        % for style_struct in data.active_style_structs():
+        ${style_struct.ident}: Arc<style_structs::${style_struct.name}>,
+        % endfor
+    ) -> Arc<Self> {
+        Arc::new(Self {
+            inner: ComputedValuesInner {
+                custom_properties,
+                writing_mode,
+                rules,
+                visited_style,
+                flags,
+            % for style_struct in data.active_style_structs():
+                ${style_struct.ident},
+            % endfor
+            },
+            pseudo: pseudo.cloned(),
+        })
+    }
+
+    /// Get the initial computed values.
+    pub fn initial_values() -> &'static Self { &*INITIAL_SERVO_VALUES }
+
+    /// Serializes the computed value of this property as a string.
+    pub fn computed_value_to_string(&self, property: PropertyDeclarationId) -> String {
+        match property {
+            PropertyDeclarationId::Longhand(id) => {
+                let mut s = String::new();
+                self.get_longhand_property_value(
+                    id,
+                    &mut CssWriter::new(&mut s)
+                ).unwrap();
+                s
+            }
+            PropertyDeclarationId::Custom(name) => {
+                self.custom_properties
+                    .as_ref()
+                    .and_then(|map| map.get(name))
+                    .map_or(String::new(), |value| value.to_css_string())
+            }
+        }
+    }
+}
+
+#[cfg(feature = "servo")]
+impl ops::Deref for ComputedValues {
+    type Target = ComputedValuesInner;
+    fn deref(&self) -> &ComputedValuesInner {
+        &self.inner
+    }
+}
+
+#[cfg(feature = "servo")]
+impl ops::DerefMut for ComputedValues {
+    fn deref_mut(&mut self) -> &mut ComputedValuesInner {
+        &mut self.inner
+    }
+}
+
+#[cfg(feature = "servo")]
+impl ComputedValuesInner {
+    /// Returns the visited style, if any.
+    pub fn visited_style(&self) -> Option<<&ComputedValues> {
+        self.visited_style.as_deref()
+    }
+
+    % for style_struct in data.active_style_structs():
+        /// Clone the ${style_struct.name} struct.
+        #[inline]
+        pub fn clone_${style_struct.name_lower}(&self) -> Arc<style_structs::${style_struct.name}> {
+            self.${style_struct.ident}.clone()
+        }
+
+        /// Get a immutable reference to the ${style_struct.name} struct.
+        #[inline]
+        pub fn get_${style_struct.name_lower}(&self) -> &style_structs::${style_struct.name} {
+            &self.${style_struct.ident}
+        }
+
+        /// Get a mutable reference to the ${style_struct.name} struct.
+        #[inline]
+        pub fn mutate_${style_struct.name_lower}(&mut self) -> &mut style_structs::${style_struct.name} {
+            Arc::make_mut(&mut self.${style_struct.ident})
+        }
+    % endfor
+
+    /// Gets a reference to the rule node. Panic if no rule node exists.
+    pub fn rules(&self) -> &StrongRuleNode {
+        self.rules.as_ref().unwrap()
+    }
+
+    #[inline]
+    /// Returns whether the "content" property for the given style is completely
+    /// ineffective, and would yield an empty `::before` or `::after`
+    /// pseudo-element.
+    pub fn ineffective_content_property(&self) -> bool {
+        use crate::values::generics::counters::Content;
+        match self.get_counters().content {
+            Content::Normal | Content::None => true,
+            Content::Items(ref items) => items.is_empty(),
+        }
+    }
+
+    /// Whether the current style or any of its ancestors is multicolumn.
+    #[inline]
+    pub fn can_be_fragmented(&self) -> bool {
+        self.flags.contains(ComputedValueFlags::CAN_BE_FRAGMENTED)
+    }
+
+    /// Whether the current style is multicolumn.
+    #[inline]
+    pub fn is_multicol(&self) -> bool {
+        self.get_column().is_multicol()
+    }
+
+    /// Get the logical computed inline size.
+    #[inline]
+    pub fn content_inline_size(&self) -> &computed::Size {
+        let position_style = self.get_position();
+        if self.writing_mode.is_vertical() {
+            &position_style.height
+        } else {
+            &position_style.width
+        }
+    }
+
+    /// Get the logical computed block size.
+    #[inline]
+    pub fn content_block_size(&self) -> &computed::Size {
+        let position_style = self.get_position();
+        if self.writing_mode.is_vertical() { &position_style.width } else { &position_style.height }
+    }
+
+    /// Get the logical computed min inline size.
+    #[inline]
+    pub fn min_inline_size(&self) -> &computed::Size {
+        let position_style = self.get_position();
+        if self.writing_mode.is_vertical() { &position_style.min_height } else { &position_style.min_width }
+    }
+
+    /// Get the logical computed min block size.
+    #[inline]
+    pub fn min_block_size(&self) -> &computed::Size {
+        let position_style = self.get_position();
+        if self.writing_mode.is_vertical() { &position_style.min_width } else { &position_style.min_height }
+    }
+
+    /// Get the logical computed max inline size.
+    #[inline]
+    pub fn max_inline_size(&self) -> &computed::MaxSize {
+        let position_style = self.get_position();
+        if self.writing_mode.is_vertical() { &position_style.max_height } else { &position_style.max_width }
+    }
+
+    /// Get the logical computed max block size.
+    #[inline]
+    pub fn max_block_size(&self) -> &computed::MaxSize {
+        let position_style = self.get_position();
+        if self.writing_mode.is_vertical() { &position_style.max_width } else { &position_style.max_height }
+    }
+
+    /// Get the logical computed padding for this writing mode.
+    #[inline]
+    pub fn logical_padding(&self) -> LogicalMargin<<&computed::LengthPercentage> {
+        let padding_style = self.get_padding();
+        LogicalMargin::from_physical(self.writing_mode, SideOffsets2D::new(
+            &padding_style.padding_top.0,
+            &padding_style.padding_right.0,
+            &padding_style.padding_bottom.0,
+            &padding_style.padding_left.0,
+        ))
+    }
+
+    /// Get the logical border width
+    #[inline]
+    pub fn border_width_for_writing_mode(&self, writing_mode: WritingMode) -> LogicalMargin<Au> {
+        let border_style = self.get_border();
+        LogicalMargin::from_physical(writing_mode, SideOffsets2D::new(
+            Au::from(border_style.border_top_width),
+            Au::from(border_style.border_right_width),
+            Au::from(border_style.border_bottom_width),
+            Au::from(border_style.border_left_width),
+        ))
+    }
+
+    /// Gets the logical computed border widths for this style.
+    #[inline]
+    pub fn logical_border_width(&self) -> LogicalMargin<Au> {
+        self.border_width_for_writing_mode(self.writing_mode)
+    }
+
+    /// Gets the logical computed margin from this style.
+    #[inline]
+    pub fn logical_margin(&self) -> LogicalMargin<<&computed::LengthPercentageOrAuto> {
+        let margin_style = self.get_margin();
+        LogicalMargin::from_physical(self.writing_mode, SideOffsets2D::new(
+            &margin_style.margin_top,
+            &margin_style.margin_right,
+            &margin_style.margin_bottom,
+            &margin_style.margin_left,
+        ))
+    }
+
+    /// Gets the logical position from this style.
+    #[inline]
+    pub fn logical_position(&self) -> LogicalMargin<<&computed::LengthPercentageOrAuto> {
+        // FIXME(SimonSapin): should be the writing mode of the containing block, maybe?
+        let position_style = self.get_position();
+        LogicalMargin::from_physical(self.writing_mode, SideOffsets2D::new(
+            &position_style.top,
+            &position_style.right,
+            &position_style.bottom,
+            &position_style.left,
+        ))
+    }
+
+    /// Return true if the effects force the transform style to be Flat
+    pub fn overrides_transform_style(&self) -> bool {
+        use crate::computed_values::mix_blend_mode::T as MixBlendMode;
+
+        let effects = self.get_effects();
+        // TODO(gw): Add clip-path, isolation, mask-image, mask-border-source when supported.
+        effects.opacity < 1.0 ||
+           !effects.filter.0.is_empty() ||
+           !effects.clip.is_auto() ||
+           effects.mix_blend_mode != MixBlendMode::Normal
+    }
+
+    /// <https://drafts.csswg.org/css-transforms/#grouping-property-values>
+    pub fn get_used_transform_style(&self) -> computed_values::transform_style::T {
+        use crate::computed_values::transform_style::T as TransformStyle;
+
+        let box_ = self.get_box();
+
+        if self.overrides_transform_style() {
+            TransformStyle::Flat
+        } else {
+            // Return the computed value if not overridden by the above exceptions
+            box_.transform_style
+        }
+    }
+
+    /// Whether given this transform value, the compositor would require a
+    /// layer.
+    pub fn transform_requires_layer(&self) -> bool {
+        use crate::values::generics::transform::TransformOperation;
+        // Check if the transform matrix is 2D or 3D
+        for transform in &*self.get_box().transform.0 {
+            match *transform {
+                TransformOperation::Perspective(..) => {
+                    return true;
+                }
+                TransformOperation::Matrix3D(m) => {
+                    // See http://dev.w3.org/csswg/css-transforms/#2d-matrix
+                    if m.m31 != 0.0 || m.m32 != 0.0 ||
+                       m.m13 != 0.0 || m.m23 != 0.0 ||
+                       m.m43 != 0.0 || m.m14 != 0.0 ||
+                       m.m24 != 0.0 || m.m34 != 0.0 ||
+                       m.m33 != 1.0 || m.m44 != 1.0 {
+                        return true;
+                    }
+                }
+                TransformOperation::Translate3D(_, _, z) |
+                TransformOperation::TranslateZ(z) => {
+                    if z.px() != 0. {
+                        return true;
+                    }
+                }
+                _ => {}
+            }
+        }
+
+        // Neither perspective nor transform present
+        false
+    }
+}
+
+/// A reference to a style struct of the parent, or our own style struct.
+pub enum StyleStructRef<'a, T: 'static> {
+    /// A borrowed struct from the parent, for example, for inheriting style.
+    Borrowed(&'a T),
+    /// An owned struct, that we've already mutated.
+    Owned(UniqueArc<T>),
+    /// Temporarily vacated, will panic if accessed
+    Vacated,
+}
+
+impl<'a, T: 'a> StyleStructRef<'a, T>
+where
+    T: Clone,
+{
+    /// Ensure a mutable reference of this value exists, either cloning the
+    /// borrowed value, or returning the owned one.
+    pub fn mutate(&mut self) -> &mut T {
+        if let StyleStructRef::Borrowed(v) = *self {
+            *self = StyleStructRef::Owned(UniqueArc::new(v.clone()));
+        }
+
+        match *self {
+            StyleStructRef::Owned(ref mut v) => v,
+            StyleStructRef::Borrowed(..) => unreachable!(),
+            StyleStructRef::Vacated => panic!("Accessed vacated style struct")
+        }
+    }
+
+    /// Whether this is pointer-equal to the struct we're going to copy the
+    /// value from.
+    ///
+    /// This is used to avoid allocations when people write stuff like `font:
+    /// inherit` or such `all: initial`.
+    #[inline]
+    pub fn ptr_eq(&self, struct_to_copy_from: &T) -> bool {
+        match *self {
+            StyleStructRef::Owned(..) => false,
+            StyleStructRef::Borrowed(s) => {
+                s as *const T == struct_to_copy_from as *const T
+            }
+            StyleStructRef::Vacated => panic!("Accessed vacated style struct")
+        }
+    }
+
+    /// Extract a unique Arc from this struct, vacating it.
+    ///
+    /// The vacated state is a transient one, please put the Arc back
+    /// when done via `put()`. This function is to be used to separate
+    /// the struct being mutated from the computed context
+    pub fn take(&mut self) -> UniqueArc<T> {
+        use std::mem::replace;
+        let inner = replace(self, StyleStructRef::Vacated);
+
+        match inner {
+            StyleStructRef::Owned(arc) => arc,
+            StyleStructRef::Borrowed(s) => UniqueArc::new(s.clone()),
+            StyleStructRef::Vacated => panic!("Accessed vacated style struct"),
+        }
+    }
+
+    /// Replace vacated ref with an arc
+    pub fn put(&mut self, arc: UniqueArc<T>) {
+        debug_assert!(matches!(*self, StyleStructRef::Vacated));
+        *self = StyleStructRef::Owned(arc);
+    }
+
+    /// Get a mutable reference to the owned struct, or `None` if the struct
+    /// hasn't been mutated.
+    pub fn get_if_mutated(&mut self) -> Option<<&mut T> {
+        match *self {
+            StyleStructRef::Owned(ref mut v) => Some(v),
+            StyleStructRef::Borrowed(..) => None,
+            StyleStructRef::Vacated => panic!("Accessed vacated style struct")
+        }
+    }
+
+    /// Returns an `Arc` to the internal struct, constructing one if
+    /// appropriate.
+    pub fn build(self) -> Arc<T> {
+        match self {
+            StyleStructRef::Owned(v) => v.shareable(),
+            // SAFETY: We know all style structs are arc-allocated.
+            StyleStructRef::Borrowed(v) => unsafe { Arc::from_raw_addrefed(v) },
+            StyleStructRef::Vacated => panic!("Accessed vacated style struct")
+        }
+    }
+}
+
+impl<'a, T: 'a> ops::Deref for StyleStructRef<'a, T> {
+    type Target = T;
+
+    fn deref(&self) -> &T {
+        match *self {
+            StyleStructRef::Owned(ref v) => &**v,
+            StyleStructRef::Borrowed(v) => v,
+            StyleStructRef::Vacated => panic!("Accessed vacated style struct")
+        }
+    }
+}
+
+/// A type used to compute a struct with minimal overhead.
+///
+/// This allows holding references to the parent/default computed values without
+/// actually cloning them, until we either build the style, or mutate the
+/// inherited value.
+pub struct StyleBuilder<'a> {
+    /// The device we're using to compute style.
+    ///
+    /// This provides access to viewport unit ratios, etc.
+    pub device: &'a Device,
+
+    /// The style we're inheriting from.
+    ///
+    /// This is effectively
+    /// `parent_style.unwrap_or(device.default_computed_values())`.
+    inherited_style: &'a ComputedValues,
+
+    /// The style we're inheriting from for properties that don't inherit from
+    /// ::first-line.  This is the same as inherited_style, unless
+    /// inherited_style is a ::first-line style.
+    inherited_style_ignoring_first_line: &'a ComputedValues,
+
+    /// The style we're getting reset structs from.
+    reset_style: &'a ComputedValues,
+
+    /// The rule node representing the ordered list of rules matched for this
+    /// node.
+    pub rules: Option<StrongRuleNode>,
+
+    custom_properties: Option<Arc<crate::custom_properties::CustomPropertiesMap>>,
+
+    /// The pseudo-element this style will represent.
+    pub pseudo: Option<<&'a PseudoElement>,
+
+    /// Whether we have mutated any reset structs since the the last time
+    /// `clear_modified_reset` was called.  This is used to tell whether the
+    /// `StyleAdjuster` did any work.
+    modified_reset: bool,
+
+    /// Whether this is the style for the root element.
+    pub is_root_element: bool,
+
+    /// The writing mode flags.
+    ///
+    /// TODO(emilio): Make private.
+    pub writing_mode: WritingMode,
+
+    /// Flags for the computed value.
+    pub flags: Cell<ComputedValueFlags>,
+
+    /// The element's style if visited, only computed if there's a relevant link
+    /// for this element.  A element's "relevant link" is the element being
+    /// matched if it is a link or the nearest ancestor link.
+    pub visited_style: Option<Arc<ComputedValues>>,
+    % for style_struct in data.active_style_structs():
+        ${style_struct.ident}: StyleStructRef<'a, style_structs::${style_struct.name}>,
+    % endfor
+}
+
+impl<'a> StyleBuilder<'a> {
+    /// Trivially construct a `StyleBuilder`.
+    pub(super) fn new(
+        device: &'a Device,
+        parent_style: Option<<&'a ComputedValues>,
+        parent_style_ignoring_first_line: Option<<&'a ComputedValues>,
+        pseudo: Option<<&'a PseudoElement>,
+        rules: Option<StrongRuleNode>,
+        custom_properties: Option<Arc<crate::custom_properties::CustomPropertiesMap>>,
+        is_root_element: bool,
+    ) -> Self {
+        debug_assert_eq!(parent_style.is_some(), parent_style_ignoring_first_line.is_some());
+        #[cfg(feature = "gecko")]
+        debug_assert!(parent_style.is_none() ||
+                      std::ptr::eq(parent_style.unwrap(),
+                                     parent_style_ignoring_first_line.unwrap()) ||
+                      parent_style.unwrap().is_first_line_style());
+        let reset_style = device.default_computed_values();
+        let inherited_style = parent_style.unwrap_or(reset_style);
+        let inherited_style_ignoring_first_line = parent_style_ignoring_first_line.unwrap_or(reset_style);
+
+        let flags = inherited_style.flags.inherited();
+
+        StyleBuilder {
+            device,
+            inherited_style,
+            inherited_style_ignoring_first_line,
+            reset_style,
+            pseudo,
+            rules,
+            modified_reset: false,
+            is_root_element,
+            custom_properties,
+            writing_mode: inherited_style.writing_mode,
+            flags: Cell::new(flags),
+            visited_style: None,
+            % for style_struct in data.active_style_structs():
+            % if style_struct.inherited:
+            ${style_struct.ident}: StyleStructRef::Borrowed(inherited_style.get_${style_struct.name_lower}()),
+            % else:
+            ${style_struct.ident}: StyleStructRef::Borrowed(reset_style.get_${style_struct.name_lower}()),
+            % endif
+            % endfor
+        }
+    }
+
+    /// NOTE(emilio): This is done so we can compute relative units with respect
+    /// to the parent style, but all the early properties / writing-mode / etc
+    /// are already set to the right ones on the kid.
+    ///
+    /// Do _not_ actually call this to construct a style, this should mostly be
+    /// used for animations.
+    pub fn for_animation(
+        device: &'a Device,
+        style_to_derive_from: &'a ComputedValues,
+        parent_style: Option<<&'a ComputedValues>,
+    ) -> Self {
+        let reset_style = device.default_computed_values();
+        let inherited_style = parent_style.unwrap_or(reset_style);
+        #[cfg(feature = "gecko")]
+        debug_assert!(parent_style.is_none() ||
+                      !parent_style.unwrap().is_first_line_style());
+        StyleBuilder {
+            device,
+            inherited_style,
+            // None of our callers pass in ::first-line parent styles.
+            inherited_style_ignoring_first_line: inherited_style,
+            reset_style,
+            pseudo: None,
+            modified_reset: false,
+            is_root_element: false,
+            rules: None,
+            custom_properties: style_to_derive_from.custom_properties().cloned(),
+            writing_mode: style_to_derive_from.writing_mode,
+            flags: Cell::new(style_to_derive_from.flags),
+            visited_style: None,
+            % for style_struct in data.active_style_structs():
+            ${style_struct.ident}: StyleStructRef::Borrowed(
+                style_to_derive_from.get_${style_struct.name_lower}()
+            ),
+            % endfor
+        }
+    }
+
+    /// Copy the reset properties from `style`.
+    pub fn copy_reset_from(&mut self, style: &'a ComputedValues) {
+        % for style_struct in data.active_style_structs():
+        % if not style_struct.inherited:
+        self.${style_struct.ident} =
+            StyleStructRef::Borrowed(style.get_${style_struct.name_lower}());
+        % endif
+        % endfor
+    }
+
+    % for property in data.longhands:
+    % if not property.style_struct.inherited:
+    /// Inherit `${property.ident}` from our parent style.
+    #[allow(non_snake_case)]
+    pub fn inherit_${property.ident}(&mut self) {
+        let inherited_struct =
+            self.inherited_style_ignoring_first_line
+                .get_${property.style_struct.name_lower}();
+
+        self.modified_reset = true;
+        self.add_flags(ComputedValueFlags::INHERITS_RESET_STYLE);
+
+        % if property.ident == "content":
+        self.add_flags(ComputedValueFlags::CONTENT_DEPENDS_ON_INHERITED_STYLE);
+        % endif
+
+        % if property.ident == "display":
+        self.add_flags(ComputedValueFlags::DISPLAY_DEPENDS_ON_INHERITED_STYLE);
+        % endif
+
+        if self.${property.style_struct.ident}.ptr_eq(inherited_struct) {
+            return;
+        }
+
+        self.${property.style_struct.ident}.mutate()
+            .copy_${property.ident}_from(
+                inherited_struct,
+                % if property.logical:
+                self.writing_mode,
+                % endif
+            );
+    }
+    % else:
+    /// Reset `${property.ident}` to the initial value.
+    #[allow(non_snake_case)]
+    pub fn reset_${property.ident}(&mut self) {
+        let reset_struct =
+            self.reset_style.get_${property.style_struct.name_lower}();
+
+        if self.${property.style_struct.ident}.ptr_eq(reset_struct) {
+            return;
+        }
+
+        self.${property.style_struct.ident}.mutate()
+            .reset_${property.ident}(
+                reset_struct,
+                % if property.logical:
+                self.writing_mode,
+                % endif
+            );
+    }
+    % endif
+
+    % if not property.is_vector or property.simple_vector_bindings or engine in ["servo-2013", "servo-2020"]:
+    /// Set the `${property.ident}` to the computed value `value`.
+    #[allow(non_snake_case)]
+    pub fn set_${property.ident}(
+        &mut self,
+        value: longhands::${property.ident}::computed_value::T
+    ) {
+        % if not property.style_struct.inherited:
+        self.modified_reset = true;
+        % endif
+
+        self.${property.style_struct.ident}.mutate()
+            .set_${property.ident}(
+                value,
+                % if property.logical:
+                self.writing_mode,
+                % endif
+            );
+    }
+    % endif
+    % endfor
+    <% del property %>
+
+    /// Inherits style from the parent element, accounting for the default
+    /// computed values that need to be provided as well.
+    pub fn for_inheritance(
+        device: &'a Device,
+        parent: Option<<&'a ComputedValues>,
+        pseudo: Option<<&'a PseudoElement>,
+    ) -> Self {
+        // Rebuild the visited style from the parent, ensuring that it will also
+        // not have rules.  This matches the unvisited style that will be
+        // produced by this builder.  This assumes that the caller doesn't need
+        // to adjust or process visited style, so we can just build visited
+        // style here for simplicity.
+        let visited_style = parent.and_then(|parent| {
+            parent.visited_style().map(|style| {
+                Self::for_inheritance(
+                    device,
+                    Some(style),
+                    pseudo,
+                ).build()
+            })
+        });
+        let mut ret = Self::new(
+            device,
+            parent,
+            parent,
+            pseudo,
+            /* rules = */ None,
+            parent.and_then(|p| p.custom_properties().cloned()),
+            /* is_root_element = */ false,
+        );
+        ret.visited_style = visited_style;
+        ret
+    }
+
+    /// Returns whether we have a visited style.
+    pub fn has_visited_style(&self) -> bool {
+        self.visited_style.is_some()
+    }
+
+    /// Returns whether we're a pseudo-elements style.
+    pub fn is_pseudo_element(&self) -> bool {
+        self.pseudo.map_or(false, |p| !p.is_anon_box())
+    }
+
+    /// Returns the style we're getting reset properties from.
+    pub fn default_style(&self) -> &'a ComputedValues {
+        self.reset_style
+    }
+
+    % for style_struct in data.active_style_structs():
+        /// Gets an immutable view of the current `${style_struct.name}` style.
+        pub fn get_${style_struct.name_lower}(&self) -> &style_structs::${style_struct.name} {
+            &self.${style_struct.ident}
+        }
+
+        /// Gets a mutable view of the current `${style_struct.name}` style.
+        pub fn mutate_${style_struct.name_lower}(&mut self) -> &mut style_structs::${style_struct.name} {
+            % if not style_struct.inherited:
+            self.modified_reset = true;
+            % endif
+            self.${style_struct.ident}.mutate()
+        }
+
+        /// Gets a mutable view of the current `${style_struct.name}` style.
+        pub fn take_${style_struct.name_lower}(&mut self) -> UniqueArc<style_structs::${style_struct.name}> {
+            % if not style_struct.inherited:
+            self.modified_reset = true;
+            % endif
+            self.${style_struct.ident}.take()
+        }
+
+        /// Gets a mutable view of the current `${style_struct.name}` style.
+        pub fn put_${style_struct.name_lower}(&mut self, s: UniqueArc<style_structs::${style_struct.name}>) {
+            self.${style_struct.ident}.put(s)
+        }
+
+        /// Gets a mutable view of the current `${style_struct.name}` style,
+        /// only if it's been mutated before.
+        pub fn get_${style_struct.name_lower}_if_mutated(&mut self)
+                                                         -> Option<<&mut style_structs::${style_struct.name}> {
+            self.${style_struct.ident}.get_if_mutated()
+        }
+
+        /// Reset the current `${style_struct.name}` style to its default value.
+        pub fn reset_${style_struct.name_lower}_struct(&mut self) {
+            self.${style_struct.ident} =
+                StyleStructRef::Borrowed(self.reset_style.get_${style_struct.name_lower}());
+        }
+    % endfor
+    <% del style_struct %>
+
+    /// Returns whether this computed style represents a floated object.
+    pub fn is_floating(&self) -> bool {
+        self.get_box().clone_float().is_floating()
+    }
+
+    /// Returns whether this computed style represents an absolutely-positioned
+    /// object.
+    pub fn is_absolutely_positioned(&self) -> bool {
+        self.get_box().clone_position().is_absolutely_positioned()
+    }
+
+    /// Whether this style has a top-layer style.
+    #[cfg(feature = "servo")]
+    pub fn in_top_layer(&self) -> bool {
+        matches!(self.get_box().clone__servo_top_layer(),
+                 longhands::_servo_top_layer::computed_value::T::Top)
+    }
+
+    /// Whether this style has a top-layer style.
+    #[cfg(feature = "gecko")]
+    pub fn in_top_layer(&self) -> bool {
+        matches!(self.get_box().clone__moz_top_layer(),
+                 longhands::_moz_top_layer::computed_value::T::Top)
+    }
+
+    /// Clears the "have any reset structs been modified" flag.
+    pub fn clear_modified_reset(&mut self) {
+        self.modified_reset = false;
+    }
+
+    /// Returns whether we have mutated any reset structs since the the last
+    /// time `clear_modified_reset` was called.
+    pub fn modified_reset(&self) -> bool {
+        self.modified_reset
+    }
+
+    /// Return the current flags.
+    #[inline]
+    pub fn flags(&self) -> ComputedValueFlags {
+        self.flags.get()
+    }
+
+    /// Add a flag to the current builder.
+    #[inline]
+    pub fn add_flags(&self, flag: ComputedValueFlags) {
+        let flags = self.flags() | flag;
+        self.flags.set(flags);
+    }
+
+    /// Removes a flag to the current builder.
+    #[inline]
+    pub fn remove_flags(&self, flag: ComputedValueFlags) {
+        let flags = self.flags() & !flag;
+        self.flags.set(flags);
+    }
+
+    /// Turns this `StyleBuilder` into a proper `ComputedValues` instance.
+    pub fn build(self) -> Arc<ComputedValues> {
+        ComputedValues::new(
+            self.pseudo,
+            self.custom_properties,
+            self.writing_mode,
+            self.flags.get(),
+            self.rules,
+            self.visited_style,
+            % for style_struct in data.active_style_structs():
+            self.${style_struct.ident}.build(),
+            % endfor
+        )
+    }
+
+    /// Get the custom properties map if necessary.
+    pub fn custom_properties(&self) -> Option<<&Arc<crate::custom_properties::CustomPropertiesMap>> {
+        self.custom_properties.as_ref()
+    }
+
+    /// Access to various information about our inherited styles.  We don't
+    /// expose an inherited ComputedValues directly, because in the
+    /// ::first-line case some of the inherited information needs to come from
+    /// one ComputedValues instance and some from a different one.
+
+    /// Inherited writing-mode.
+    pub fn inherited_writing_mode(&self) -> &WritingMode {
+        &self.inherited_style.writing_mode
+    }
+
+    /// The computed value flags of our parent.
+    #[inline]
+    pub fn get_parent_flags(&self) -> ComputedValueFlags {
+        self.inherited_style.flags
+    }
+
+    /// And access to inherited style structs.
+    % for style_struct in data.active_style_structs():
+        /// Gets our inherited `${style_struct.name}`.  We don't name these
+        /// accessors `inherited_${style_struct.name_lower}` because we already
+        /// have things like "box" vs "inherited_box" as struct names.  Do the
+        /// next-best thing and call them `parent_${style_struct.name_lower}`
+        /// instead.
+        pub fn get_parent_${style_struct.name_lower}(&self) -> &style_structs::${style_struct.name} {
+            % if style_struct.inherited:
+            self.inherited_style.get_${style_struct.name_lower}()
+            % else:
+            self.inherited_style_ignoring_first_line.get_${style_struct.name_lower}()
+            % endif
+        }
+    % endfor
+}
+
+#[cfg(feature = "servo")]
+pub use self::lazy_static_module::INITIAL_SERVO_VALUES;
+
+// Use a module to work around #[cfg] on lazy_static! not being applied to every generated item.
+#[cfg(feature = "servo")]
+#[allow(missing_docs)]
+mod lazy_static_module {
+    use crate::logical_geometry::WritingMode;
+    use crate::computed_value_flags::ComputedValueFlags;
+    use servo_arc::Arc;
+    use super::{ComputedValues, ComputedValuesInner, longhands, style_structs};
+
+    lazy_static! {
+        /// The initial values for all style structs as defined by the specification.
+        pub static ref INITIAL_SERVO_VALUES: ComputedValues = ComputedValues {
+            inner: ComputedValuesInner {
+                % for style_struct in data.active_style_structs():
+                    ${style_struct.ident}: Arc::new(style_structs::${style_struct.name} {
+                        % for longhand in style_struct.longhands:
+                            % if not longhand.logical:
+                                ${longhand.ident}: longhands::${longhand.ident}::get_initial_value(),
+                            % endif
+                        % endfor
+                        % if style_struct.name == "InheritedText":
+                            text_decorations_in_effect:
+                                crate::values::computed::text::TextDecorationsInEffect::default(),
+                        % endif
+                        % if style_struct.name == "Font":
+                            hash: 0,
+                        % endif
+                        % if style_struct.name == "Box":
+                            original_display: longhands::display::get_initial_value(),
+                        % endif
+                    }),
+                % endfor
+                custom_properties: None,
+                writing_mode: WritingMode::empty(),
+                rules: None,
+                visited_style: None,
+                flags: ComputedValueFlags::empty(),
+            },
+            pseudo: None,
+        };
+    }
+}
+
+/// A per-longhand function that performs the CSS cascade for that longhand.
+pub type CascadePropertyFn =
+    extern "Rust" fn(
+        declaration: &PropertyDeclaration,
+        context: &mut computed::Context,
+    );
+
+/// A per-longhand array of functions to perform the CSS cascade on each of
+/// them, effectively doing virtual dispatch.
+pub static CASCADE_PROPERTY: [CascadePropertyFn; ${len(data.longhands)}] = [
+    % for property in data.longhands:
+        longhands::${property.ident}::cascade_property,
+    % endfor
+];
+
+
+/// See StyleAdjuster::adjust_for_border_width.
+pub fn adjust_border_width(style: &mut StyleBuilder) {
+    % for side in ["top", "right", "bottom", "left"]:
+        // Like calling to_computed_value, which wouldn't type check.
+        if style.get_border().clone_border_${side}_style().none_or_hidden() &&
+           style.get_border().border_${side}_has_nonzero_width() {
+            style.set_border_${side}_width(Au(0));
+        }
+    % endfor
+}
+
+/// An identifier for a given alias property.
+#[derive(Clone, Copy, Eq, PartialEq, MallocSizeOf)]
+#[repr(u16)]
+pub enum AliasId {
+    % for i, property in enumerate(data.all_aliases()):
+        /// ${property.name}
+        ${property.camel_case} = ${i},
+    % endfor
+}
+
+#[derive(Clone, Copy, Eq, PartialEq)]
+enum AliasedPropertyId {
+    #[allow(dead_code)] // Servo doesn't have aliased shorthands.
+    Shorthand(ShorthandId),
+    Longhand(LonghandId),
+}
+
+impl fmt::Debug for AliasId {
+    fn fmt(&self, formatter: &mut fmt::Formatter) -> fmt::Result {
+        let name = NonCustomPropertyId::from(*self).name();
+        formatter.write_str(name)
+    }
+}
+
+impl AliasId {
+    /// Returns the property we're aliasing, as a longhand or a shorthand.
+    #[inline]
+    fn aliased_property(self) -> AliasedPropertyId {
+        static MAP: [AliasedPropertyId; ${len(data.all_aliases())}] = [
+        % for alias in data.all_aliases():
+            % if alias.original.type() == "longhand":
+            AliasedPropertyId::Longhand(LonghandId::${alias.original.camel_case}),
+            % else:
+            <% assert alias.original.type() == "shorthand" %>
+            AliasedPropertyId::Shorthand(ShorthandId::${alias.original.camel_case}),
+            % endif
+        % endfor
+        ];
+        MAP[self as usize]
+    }
+}
+
+/// Call the given macro with tokens like this for each longhand and shorthand properties
+/// that is enabled in content:
+///
+/// ```
+/// [CamelCaseName, SetCamelCaseName, PropertyId::Longhand(LonghandId::CamelCaseName)],
+/// ```
+///
+/// NOTE(emilio): Callers are responsible to deal with prefs.
+#[macro_export]
+macro_rules! css_properties_accessors {
+    ($macro_name: ident) => {
+        $macro_name! {
+            % for kind, props in [("Longhand", data.longhands), ("Shorthand", data.shorthands)]:
+                % for property in props:
+                    % if property.enabled_in_content():
+                        % for prop in [property] + property.aliases:
+                            % if '-' in prop.name:
+                                [${prop.ident.capitalize()}, Set${prop.ident.capitalize()},
+                                 PropertyId::${kind}(${kind}Id::${property.camel_case})],
+                            % endif
+                            [${prop.camel_case}, Set${prop.camel_case},
+                             PropertyId::${kind}(${kind}Id::${property.camel_case})],
+                        % endfor
+                    % endif
+                % endfor
+            % endfor
+        }
+    }
+}
+
+/// Call the given macro with tokens like this for each longhand properties:
+///
+/// ```
+/// { snake_case_ident }
+/// ```
+#[macro_export]
+macro_rules! longhand_properties_idents {
+    ($macro_name: ident) => {
+        $macro_name! {
+            % for property in data.longhands:
+                { ${property.ident} }
+            % endfor
+        }
+    }
+}
+
+// Large pages generate tens of thousands of ComputedValues.
+size_of_test!(ComputedValues, 232);
+// FFI relies on this.
+size_of_test!(Option<Arc<ComputedValues>>, 8);
+
+// There are two reasons for this test to fail:
+//
+//   * Your changes made a specified value type for a given property go
+//     over the threshold. In that case, you should try to shrink it again
+//     or, if not possible, mark the property as boxed in the property
+//     definition.
+//
+//   * Your changes made a specified value type smaller, so that it no
+//     longer needs to be boxed. In this case you just need to remove
+//     boxed=True from the property definition. Nice job!
+#[cfg(target_pointer_width = "64")]
+#[allow(dead_code)] // https://github.com/rust-lang/rust/issues/96952
+const BOX_THRESHOLD: usize = 24;
+% for longhand in data.longhands:
+#[cfg(target_pointer_width = "64")]
+% if longhand.boxed:
+const_assert!(std::mem::size_of::<longhands::${longhand.ident}::SpecifiedValue>() > BOX_THRESHOLD);
+% else:
+const_assert!(std::mem::size_of::<longhands::${longhand.ident}::SpecifiedValue>() <= BOX_THRESHOLD);
+% endif
+% endfor
+
+% if engine in ["servo-2013", "servo-2020"]:
+% for effect_name in ["repaint", "reflow_out_of_flow", "reflow", "rebuild_and_reflow_inline", "rebuild_and_reflow"]:
+    macro_rules! restyle_damage_${effect_name} {
+        ($old: ident, $new: ident, $damage: ident, [ $($effect:expr),* ]) => ({
+            if
+                % for style_struct in data.active_style_structs():
+                    % for longhand in style_struct.longhands:
+                        % if effect_name in longhand.servo_restyle_damage.split() and not longhand.logical:
+                            $old.get_${style_struct.name_lower}().${longhand.ident} !=
+                            $new.get_${style_struct.name_lower}().${longhand.ident} ||
+                        % endif
+                    % endfor
+                % endfor
+
+                false {
+                    $damage.insert($($effect)|*);
+                    true
+            } else {
+                false
+            }
+        })
+    }
+% endfor
+% endif
diff --git a/servo/components/style/properties/shorthands/background.mako.rs b/servo/components/style/properties/shorthands/background.mako.rs
new file mode 100644
index 0000000000..08838233f6
--- /dev/null
+++ b/servo/components/style/properties/shorthands/background.mako.rs
@@ -0,0 +1,289 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+// TODO: other background-* properties
+<%helpers:shorthand name="background"
+                    engines="gecko servo-2013 servo-2020"
+                    sub_properties="background-color background-position-x background-position-y background-repeat
+                                    background-attachment background-image background-size background-origin
+                                    background-clip"
+                    spec="https://drafts.csswg.org/css-backgrounds/#the-background">
+    use crate::properties::longhands::{background_position_x, background_position_y, background_repeat};
+    use crate::properties::longhands::{background_attachment, background_color, background_image, background_size, background_origin};
+    use crate::properties::longhands::background_clip;
+    use crate::properties::longhands::background_clip::single_value::computed_value::T as Clip;
+    use crate::properties::longhands::background_origin::single_value::computed_value::T as Origin;
+    use crate::values::specified::{AllowQuirks, Color, Position, PositionComponent};
+    use crate::parser::Parse;
+
+    // FIXME(emilio): Should be the same type!
+    impl From<background_origin::single_value::SpecifiedValue> for background_clip::single_value::SpecifiedValue {
+        fn from(origin: background_origin::single_value::SpecifiedValue) ->
+            background_clip::single_value::SpecifiedValue {
+            match origin {
+                background_origin::single_value::SpecifiedValue::ContentBox =>
+                    background_clip::single_value::SpecifiedValue::ContentBox,
+                background_origin::single_value::SpecifiedValue::PaddingBox =>
+                    background_clip::single_value::SpecifiedValue::PaddingBox,
+                background_origin::single_value::SpecifiedValue::BorderBox =>
+                    background_clip::single_value::SpecifiedValue::BorderBox,
+            }
+        }
+    }
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let mut background_color = None;
+
+        % for name in "image position_x position_y repeat size attachment origin clip".split():
+        // Vec grows from 0 to 4 by default on first push().  So allocate with
+        // capacity 1, so in the common case of only one item we don't way
+        // overallocate, then shrink.  Note that we always push at least one
+        // item if parsing succeeds.
+        let mut background_${name} = Vec::with_capacity(1);
+        % endfor
+        input.parse_comma_separated(|input| {
+            // background-color can only be in the last element, so if it
+            // is parsed anywhere before, the value is invalid.
+            if background_color.is_some() {
+                return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError));
+            }
+
+            % for name in "image position repeat size attachment origin clip".split():
+                let mut ${name} = None;
+            % endfor
+            loop {
+                if background_color.is_none() {
+                    if let Ok(value) = input.try_parse(|i| Color::parse(context, i)) {
+                        background_color = Some(value);
+                        continue
+                    }
+                }
+                if position.is_none() {
+                    if let Ok(value) = input.try_parse(|input| {
+                        Position::parse_three_value_quirky(context, input, AllowQuirks::No)
+                    }) {
+                        position = Some(value);
+
+                        // Parse background size, if applicable.
+                        size = input.try_parse(|input| {
+                            input.expect_delim('/')?;
+                            background_size::single_value::parse(context, input)
+                        }).ok();
+
+                        continue
+                    }
+                }
+                % for name in "image repeat attachment origin clip".split():
+                    if ${name}.is_none() {
+                        if let Ok(value) = input.try_parse(|input| background_${name}::single_value
+                                                                               ::parse(context, input)) {
+                            ${name} = Some(value);
+                            continue
+                        }
+                    }
+                % endfor
+                break
+            }
+            if clip.is_none() {
+                if let Some(origin) = origin {
+                    clip = Some(background_clip::single_value::SpecifiedValue::from(origin));
+                }
+            }
+            let mut any = false;
+            % for name in "image position repeat size attachment origin clip".split():
+                any = any || ${name}.is_some();
+            % endfor
+            any = any || background_color.is_some();
+            if any {
+                if let Some(position) = position {
+                    background_position_x.push(position.horizontal);
+                    background_position_y.push(position.vertical);
+                } else {
+                    background_position_x.push(PositionComponent::zero());
+                    background_position_y.push(PositionComponent::zero());
+                }
+                % for name in "image repeat size attachment origin clip".split():
+                    if let Some(bg_${name}) = ${name} {
+                        background_${name}.push(bg_${name});
+                    } else {
+                        background_${name}.push(background_${name}::single_value
+                                                                    ::get_initial_specified_value());
+                    }
+                % endfor
+                Ok(())
+            } else {
+                Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+            }
+        })?;
+
+        Ok(expanded! {
+             background_color: background_color.unwrap_or(Color::transparent()),
+             % for name in "image position_x position_y repeat size attachment origin clip".split():
+             background_${name}: background_${name}::SpecifiedValue(background_${name}.into()),
+             % endfor
+         })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            let len = self.background_image.0.len();
+            // There should be at least one declared value
+            if len == 0 {
+                return Ok(());
+            }
+
+            // If a value list length is differs then we don't do a shorthand serialization.
+            // The exceptions to this is color which appears once only and is serialized
+            // with the last item.
+            % for name in "image position_x position_y size repeat origin clip attachment".split():
+                if len != self.background_${name}.0.len() {
+                    return Ok(());
+                }
+            % endfor
+
+            for i in 0..len {
+                % for name in "image position_x position_y repeat size attachment origin clip".split():
+                    let ${name} = &self.background_${name}.0[i];
+                % endfor
+
+                if i != 0 {
+                    dest.write_str(", ")?;
+                }
+
+                let mut wrote_value = false;
+
+                if i == len - 1 {
+                    if *self.background_color != background_color::get_initial_specified_value() {
+                        self.background_color.to_css(dest)?;
+                        wrote_value = true;
+                    }
+                }
+
+                if *image != background_image::single_value::get_initial_specified_value() {
+                    if wrote_value {
+                        dest.write_char(' ')?;
+                    }
+                    image.to_css(dest)?;
+                    wrote_value = true;
+                }
+
+                // Size is only valid after a position so when there is a
+                // non-initial size we must also serialize position
+                if *position_x != PositionComponent::zero() ||
+                    *position_y != PositionComponent::zero() ||
+                    *size != background_size::single_value::get_initial_specified_value()
+                {
+                    if wrote_value {
+                        dest.write_char(' ')?;
+                    }
+
+                    Position {
+                        horizontal: position_x.clone(),
+                        vertical: position_y.clone()
+                    }.to_css(dest)?;
+
+                    wrote_value = true;
+
+                    if *size != background_size::single_value::get_initial_specified_value() {
+                        dest.write_str(" / ")?;
+                        size.to_css(dest)?;
+                    }
+                }
+
+                % for name in "repeat attachment".split():
+                    if *${name} != background_${name}::single_value::get_initial_specified_value() {
+                        if wrote_value {
+                            dest.write_char(' ')?;
+                        }
+                        ${name}.to_css(dest)?;
+                        wrote_value = true;
+                    }
+                % endfor
+
+                if *origin != Origin::PaddingBox || *clip != Clip::BorderBox {
+                    if wrote_value {
+                        dest.write_char(' ')?;
+                    }
+                    origin.to_css(dest)?;
+                    if *clip != From::from(*origin) {
+                        dest.write_char(' ')?;
+                        clip.to_css(dest)?;
+                    }
+
+                    wrote_value = true;
+                }
+
+                if !wrote_value {
+                    image.to_css(dest)?;
+                }
+            }
+
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand name="background-position"
+                    engines="gecko servo-2013 servo-2020"
+                    flags="SHORTHAND_IN_GETCS"
+                    sub_properties="background-position-x background-position-y"
+                    spec="https://drafts.csswg.org/css-backgrounds-4/#the-background-position">
+    use crate::properties::longhands::{background_position_x, background_position_y};
+    use crate::values::specified::AllowQuirks;
+    use crate::values::specified::position::Position;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        // Vec grows from 0 to 4 by default on first push().  So allocate with
+        // capacity 1, so in the common case of only one item we don't way
+        // overallocate, then shrink.  Note that we always push at least one
+        // item if parsing succeeds.
+        let mut position_x = Vec::with_capacity(1);
+        let mut position_y = Vec::with_capacity(1);
+        let mut any = false;
+
+        input.parse_comma_separated(|input| {
+            let value = Position::parse_three_value_quirky(context, input, AllowQuirks::Yes)?;
+            position_x.push(value.horizontal);
+            position_y.push(value.vertical);
+            any = true;
+            Ok(())
+        })?;
+        if !any {
+            return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError));
+        }
+
+        Ok(expanded! {
+            background_position_x: background_position_x::SpecifiedValue(position_x.into()),
+            background_position_y: background_position_y::SpecifiedValue(position_y.into()),
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            let len = self.background_position_x.0.len();
+            if len == 0 || len != self.background_position_y.0.len() {
+                return Ok(());
+            }
+            for i in 0..len {
+                Position {
+                    horizontal: self.background_position_x.0[i].clone(),
+                    vertical: self.background_position_y.0[i].clone()
+                }.to_css(dest)?;
+
+                if i < len - 1 {
+                    dest.write_str(", ")?;
+                }
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
diff --git a/servo/components/style/properties/shorthands/border.mako.rs b/servo/components/style/properties/shorthands/border.mako.rs
new file mode 100644
index 0000000000..2532901251
--- /dev/null
+++ b/servo/components/style/properties/shorthands/border.mako.rs
@@ -0,0 +1,479 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import to_rust_ident, ALL_SIDES, PHYSICAL_SIDES, maybe_moz_logical_alias %>
+
+${helpers.four_sides_shorthand(
+    "border-color",
+    "border-%s-color",
+    "specified::Color::parse",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://drafts.csswg.org/css-backgrounds/#border-color",
+    allow_quirks="Yes",
+)}
+
+${helpers.four_sides_shorthand(
+    "border-style",
+    "border-%s-style",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://drafts.csswg.org/css-backgrounds/#border-style",
+)}
+
+<%helpers:shorthand
+    name="border-width"
+    engines="gecko servo-2013 servo-2020"
+    sub_properties="${
+        ' '.join('border-%s-width' % side
+                 for side in PHYSICAL_SIDES)}"
+    spec="https://drafts.csswg.org/css-backgrounds/#border-width">
+    use crate::values::generics::rect::Rect;
+    use crate::values::specified::{AllowQuirks, BorderSideWidth};
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let rect = Rect::parse_with(context, input, |_, i| {
+            BorderSideWidth::parse_quirky(context, i, AllowQuirks::Yes)
+        })?;
+        Ok(expanded! {
+            border_top_width: rect.0,
+            border_right_width: rect.1,
+            border_bottom_width: rect.2,
+            border_left_width: rect.3,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            % for side in PHYSICAL_SIDES:
+            let ${side} = &self.border_${side}_width;
+            % endfor
+            Rect::new(top, right, bottom, left).to_css(dest)
+        }
+    }
+</%helpers:shorthand>
+
+
+pub fn parse_border<'i, 't>(
+    context: &ParserContext,
+    input: &mut Parser<'i, 't>,
+) -> Result<(specified::Color, specified::BorderStyle, specified::BorderSideWidth), ParseError<'i>> {
+    use crate::values::specified::{Color, BorderStyle, BorderSideWidth};
+    let _unused = context;
+    let mut color = None;
+    let mut style = None;
+    let mut width = None;
+    let mut any = false;
+    loop {
+        if width.is_none() {
+            if let Ok(value) = input.try_parse(|i| BorderSideWidth::parse(context, i)) {
+                width = Some(value);
+                any = true;
+            }
+        }
+        if style.is_none() {
+            if let Ok(value) = input.try_parse(BorderStyle::parse) {
+                style = Some(value);
+                any = true;
+                continue
+            }
+        }
+        if color.is_none() {
+            if let Ok(value) = input.try_parse(|i| Color::parse(context, i)) {
+                color = Some(value);
+                any = true;
+                continue
+            }
+        }
+        break
+    }
+    if any {
+        Ok((color.unwrap_or_else(|| Color::currentcolor()),
+            style.unwrap_or(BorderStyle::None),
+            width.unwrap_or(BorderSideWidth::medium())))
+    } else {
+        Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+    }
+}
+
+% for side, logical in ALL_SIDES:
+    <%
+        spec = "https://drafts.csswg.org/css-backgrounds/#border-%s" % side
+        if logical:
+            spec = "https://drafts.csswg.org/css-logical-props/#propdef-border-%s" % side
+    %>
+    <%helpers:shorthand
+        name="border-${side}"
+        engines="gecko servo-2013 servo-2020"
+        sub_properties="${' '.join(
+            'border-%s-%s' % (side, prop)
+            for prop in ['color', 'style', 'width']
+        )}"
+        aliases="${maybe_moz_logical_alias(engine, (side, logical), '-moz-border-%s')}"
+        spec="${spec}">
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let (color, style, width) = super::parse_border(context, input)?;
+        Ok(expanded! {
+            border_${to_rust_ident(side)}_color: color,
+            border_${to_rust_ident(side)}_style: style,
+            border_${to_rust_ident(side)}_width: width
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            super::serialize_directional_border(
+                dest,
+                self.border_${to_rust_ident(side)}_width,
+                self.border_${to_rust_ident(side)}_style,
+                self.border_${to_rust_ident(side)}_color
+            )
+        }
+    }
+
+    </%helpers:shorthand>
+% endfor
+
+<%helpers:shorthand name="border"
+    engines="gecko servo-2013 servo-2020"
+    sub_properties="${' '.join('border-%s-%s' % (side, prop)
+        for side in PHYSICAL_SIDES
+        for prop in ['color', 'style', 'width'])}
+        ${' '.join('border-image-%s' % name
+        for name in ['outset', 'repeat', 'slice', 'source', 'width'])}"
+    derive_value_info="False"
+    spec="https://drafts.csswg.org/css-backgrounds/#border">
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        use crate::properties::longhands::{border_image_outset, border_image_repeat, border_image_slice};
+        use crate::properties::longhands::{border_image_source, border_image_width};
+
+        let (color, style, width) = super::parse_border(context, input)?;
+        Ok(expanded! {
+            % for side in PHYSICAL_SIDES:
+                border_${side}_color: color.clone(),
+                border_${side}_style: style,
+                border_${side}_width: width.clone(),
+            % endfor
+
+            // The ‘border’ shorthand resets ‘border-image’ to its initial value.
+            // See https://drafts.csswg.org/css-backgrounds-3/#the-border-shorthands
+            % for name in "outset repeat slice source width".split():
+                border_image_${name}: border_image_${name}::get_initial_specified_value(),
+            % endfor
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            use crate::properties::longhands;
+
+            // If any of the border-image longhands differ from their initial specified values we should not
+            // invoke serialize_directional_border(), so there is no point in continuing on to compute all_equal.
+            % for name in "outset repeat slice source width".split():
+                if *self.border_image_${name} != longhands::border_image_${name}::get_initial_specified_value() {
+                    return Ok(());
+                }
+            % endfor
+
+            let all_equal = {
+                % for side in PHYSICAL_SIDES:
+                  let border_${side}_width = self.border_${side}_width;
+                  let border_${side}_style = self.border_${side}_style;
+                  let border_${side}_color = self.border_${side}_color;
+                % endfor
+
+                border_top_width == border_right_width &&
+                border_right_width == border_bottom_width &&
+                border_bottom_width == border_left_width &&
+
+                border_top_style == border_right_style &&
+                border_right_style == border_bottom_style &&
+                border_bottom_style == border_left_style &&
+
+                border_top_color == border_right_color &&
+                border_right_color == border_bottom_color &&
+                border_bottom_color == border_left_color
+            };
+
+            // If all longhands are all present, then all sides should be the same,
+            // so we can just one set of color/style/width
+            if all_equal {
+                super::serialize_directional_border(
+                    dest,
+                    self.border_${side}_width,
+                    self.border_${side}_style,
+                    self.border_${side}_color
+                )
+            } else {
+                Ok(())
+            }
+        }
+    }
+
+    // Just use the same as border-left. The border shorthand can't accept
+    // any value that the sub-shorthand couldn't.
+    <%
+        border_left = "<crate::properties::shorthands::border_left::Longhands as SpecifiedValueInfo>"
+    %>
+    impl SpecifiedValueInfo for Longhands {
+        const SUPPORTED_TYPES: u8 = ${border_left}::SUPPORTED_TYPES;
+        fn collect_completion_keywords(f: KeywordsCollectFn) {
+            ${border_left}::collect_completion_keywords(f);
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    name="border-radius"
+    engines="gecko servo-2013 servo-2020"
+    sub_properties="${' '.join(
+        'border-%s-radius' % (corner)
+         for corner in ['top-left', 'top-right', 'bottom-right', 'bottom-left']
+    )}"
+    extra_prefixes="webkit"
+    spec="https://drafts.csswg.org/css-backgrounds/#border-radius"
+>
+    use crate::values::generics::rect::Rect;
+    use crate::values::generics::border::BorderCornerRadius;
+    use crate::values::specified::border::BorderRadius;
+    use crate::parser::Parse;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let radii = BorderRadius::parse(context, input)?;
+        Ok(expanded! {
+            border_top_left_radius: radii.top_left,
+            border_top_right_radius: radii.top_right,
+            border_bottom_right_radius: radii.bottom_right,
+            border_bottom_left_radius: radii.bottom_left,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            let LonghandsToSerialize {
+                border_top_left_radius: &BorderCornerRadius(ref tl),
+                border_top_right_radius: &BorderCornerRadius(ref tr),
+                border_bottom_right_radius: &BorderCornerRadius(ref br),
+                border_bottom_left_radius: &BorderCornerRadius(ref bl),
+            } = *self;
+
+
+            let widths = Rect::new(tl.width(), tr.width(), br.width(), bl.width());
+            let heights = Rect::new(tl.height(), tr.height(), br.height(), bl.height());
+
+            BorderRadius::serialize_rects(widths, heights, dest)
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    name="border-image"
+    engines="gecko servo-2013"
+    sub_properties="border-image-outset
+        border-image-repeat border-image-slice border-image-source border-image-width"
+    extra_prefixes="moz:layout.css.prefixes.border-image webkit"
+    spec="https://drafts.csswg.org/css-backgrounds-3/#border-image"
+>
+    use crate::properties::longhands::{border_image_outset, border_image_repeat, border_image_slice};
+    use crate::properties::longhands::{border_image_source, border_image_width};
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        % for name in "outset repeat slice source width".split():
+            let mut border_image_${name} = border_image_${name}::get_initial_specified_value();
+        % endfor
+
+        let result: Result<_, ParseError> = input.try_parse(|input| {
+            % for name in "outset repeat slice source width".split():
+                let mut ${name} = None;
+            % endfor
+            loop {
+                if slice.is_none() {
+                    if let Ok(value) = input.try_parse(|input| border_image_slice::parse(context, input)) {
+                        slice = Some(value);
+                        // Parse border image width and outset, if applicable.
+                        let maybe_width_outset: Result<_, ParseError> = input.try_parse(|input| {
+                            input.expect_delim('/')?;
+
+                            // Parse border image width, if applicable.
+                            let w = input.try_parse(|input|
+                                border_image_width::parse(context, input)).ok();
+
+                            // Parse border image outset if applicable.
+                            let o = input.try_parse(|input| {
+                                input.expect_delim('/')?;
+                                border_image_outset::parse(context, input)
+                            }).ok();
+                            if w.is_none() && o.is_none() {
+                               Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+                            }
+                            else {
+                               Ok((w, o))
+                            }
+                        });
+                        if let Ok((w, o)) = maybe_width_outset {
+                            width = w;
+                            outset = o;
+                        }
+
+                        continue
+                    }
+                }
+                % for name in "source repeat".split():
+                    if ${name}.is_none() {
+                        if let Ok(value) = input.try_parse(|input| border_image_${name}::parse(context, input)) {
+                            ${name} = Some(value);
+                            continue
+                        }
+                    }
+                % endfor
+                break
+            }
+            let mut any = false;
+            % for name in "outset repeat slice source width".split():
+                any = any || ${name}.is_some();
+            % endfor
+            if any {
+                % for name in "outset repeat slice source width".split():
+                    if let Some(b_${name}) = ${name} {
+                        border_image_${name} = b_${name};
+                    }
+                % endfor
+                Ok(())
+            } else {
+                Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+            }
+        });
+        result?;
+
+        Ok(expanded! {
+            % for name in "outset repeat slice source width".split():
+                border_image_${name}: border_image_${name},
+            % endfor
+         })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.border_image_source.to_css(dest)?;
+            dest.write_char(' ')?;
+            self.border_image_slice.to_css(dest)?;
+            dest.write_str(" / ")?;
+            self.border_image_width.to_css(dest)?;
+            dest.write_str(" / ")?;
+            self.border_image_outset.to_css(dest)?;
+            dest.write_char(' ')?;
+            self.border_image_repeat.to_css(dest)
+        }
+    }
+</%helpers:shorthand>
+
+% for axis in ["block", "inline"]:
+    % for prop in ["width", "style", "color"]:
+        <%
+            spec = "https://drafts.csswg.org/css-logical/#propdef-border-%s-%s" % (axis, prop)
+        %>
+        <%helpers:shorthand
+            engines="gecko servo-2013 servo-2020"
+            name="border-${axis}-${prop}"
+            sub_properties="${' '.join(
+                'border-%s-%s-%s' % (axis, side, prop)
+                for side in ['start', 'end']
+            )}"
+            spec="${spec}">
+
+            use crate::properties::longhands::border_${axis}_start_${prop};
+            pub fn parse_value<'i, 't>(
+                context: &ParserContext,
+                input: &mut Parser<'i, 't>,
+            ) -> Result<Longhands, ParseError<'i>> {
+                let start_value = border_${axis}_start_${prop}::parse(context, input)?;
+                let end_value =
+                    input.try_parse(|input| border_${axis}_start_${prop}::parse(context, input))
+                        .unwrap_or_else(|_| start_value.clone());
+
+                Ok(expanded! {
+                    border_${axis}_start_${prop}: start_value,
+                    border_${axis}_end_${prop}: end_value,
+                })
+            }
+
+            impl<'a> ToCss for LonghandsToSerialize<'a>  {
+                fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+                    self.border_${axis}_start_${prop}.to_css(dest)?;
+
+                    if self.border_${axis}_end_${prop} != self.border_${axis}_start_${prop} {
+                        dest.write_char(' ')?;
+                        self.border_${axis}_end_${prop}.to_css(dest)?;
+                    }
+
+                    Ok(())
+                }
+            }
+        </%helpers:shorthand>
+    % endfor
+% endfor
+
+% for axis in ["block", "inline"]:
+    <%
+        spec = "https://drafts.csswg.org/css-logical/#propdef-border-%s" % (axis)
+    %>
+    <%helpers:shorthand
+        name="border-${axis}"
+        engines="gecko servo-2013 servo-2020"
+        sub_properties="${' '.join(
+            'border-%s-%s-width' % (axis, side)
+            for side in ['start', 'end']
+        )} ${' '.join(
+            'border-%s-%s-style' % (axis, side)
+            for side in ['start', 'end']
+        )} ${' '.join(
+            'border-%s-%s-color' % (axis, side)
+            for side in ['start', 'end']
+        )}"
+        spec="${spec}">
+
+        use crate::properties::shorthands::border_${axis}_start;
+        pub fn parse_value<'i, 't>(
+            context: &ParserContext,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<Longhands, ParseError<'i>> {
+            let start_value = border_${axis}_start::parse_value(context, input)?;
+            Ok(expanded! {
+                border_${axis}_start_width: start_value.border_${axis}_start_width.clone(),
+                border_${axis}_end_width: start_value.border_${axis}_start_width,
+                border_${axis}_start_style: start_value.border_${axis}_start_style.clone(),
+                border_${axis}_end_style: start_value.border_${axis}_start_style,
+                border_${axis}_start_color: start_value.border_${axis}_start_color.clone(),
+                border_${axis}_end_color: start_value.border_${axis}_start_color,
+            })
+        }
+
+        impl<'a> ToCss for LonghandsToSerialize<'a>  {
+            fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+                super::serialize_directional_border(
+                    dest,
+                    self.border_${axis}_start_width,
+                    self.border_${axis}_start_style,
+                    self.border_${axis}_start_color
+                )
+            }
+        }
+    </%helpers:shorthand>
+% endfor
diff --git a/servo/components/style/properties/shorthands/box.mako.rs b/servo/components/style/properties/shorthands/box.mako.rs
new file mode 100644
index 0000000000..b9b8f7a3a1
--- /dev/null
+++ b/servo/components/style/properties/shorthands/box.mako.rs
@@ -0,0 +1,311 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+${helpers.two_properties_shorthand(
+    "overflow",
+    "overflow-x",
+    "overflow-y",
+    engines="gecko servo-2013 servo-2020",
+    flags="SHORTHAND_IN_GETCS",
+    spec="https://drafts.csswg.org/css-overflow/#propdef-overflow",
+)}
+
+${helpers.two_properties_shorthand(
+    "overflow-clip-box",
+    "overflow-clip-box-block",
+    "overflow-clip-box-inline",
+    engines="gecko",
+    enabled_in="ua",
+    gecko_pref="layout.css.overflow-clip-box.enabled",
+    spec="Internal, may be standardized in the future "
+         "(https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-box)",
+)}
+
+${helpers.two_properties_shorthand(
+    "overscroll-behavior",
+    "overscroll-behavior-x",
+    "overscroll-behavior-y",
+    engines="gecko",
+    gecko_pref="layout.css.overscroll-behavior.enabled",
+    spec="https://wicg.github.io/overscroll-behavior/#overscroll-behavior-properties",
+)}
+
+<%helpers:shorthand
+    engines="gecko"
+    name="container"
+    sub_properties="container-name container-type"
+    gecko_pref="layout.css.container-queries.enabled"
+    enabled_in="ua"
+    spec="https://drafts.csswg.org/css-contain-3/#container-shorthand"
+>
+    use crate::values::specified::box_::{ContainerName, ContainerType};
+    pub fn parse_value<'i>(
+        context: &ParserContext,
+        input: &mut Parser<'i, '_>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        use crate::parser::Parse;
+        // See https://github.com/w3c/csswg-drafts/issues/7180 for why we don't
+        // match the spec.
+        let container_name = ContainerName::parse(context, input)?;
+        let container_type = if input.try_parse(|input| input.expect_delim('/')).is_ok() {
+            ContainerType::parse(input)?
+        } else {
+            ContainerType::Normal
+        };
+        Ok(expanded! {
+            container_name: container_name,
+            container_type: container_type,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.container_name.to_css(dest)?;
+            if !self.container_type.is_normal() {
+                dest.write_str(" / ")?;
+                self.container_type.to_css(dest)?;
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    engines="gecko"
+    name="page-break-before"
+    flags="SHORTHAND_IN_GETCS IS_LEGACY_SHORTHAND"
+    sub_properties="break-before"
+    spec="https://drafts.csswg.org/css-break-3/#page-break-properties"
+>
+    pub fn parse_value<'i>(
+        context: &ParserContext,
+        input: &mut Parser<'i, '_>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        use crate::values::specified::box_::BreakBetween;
+        Ok(expanded! {
+            break_before: BreakBetween::parse_legacy(context, input)?,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.break_before.to_css_legacy(dest)
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    engines="gecko"
+    name="page-break-after"
+    flags="SHORTHAND_IN_GETCS IS_LEGACY_SHORTHAND"
+    sub_properties="break-after"
+    spec="https://drafts.csswg.org/css-break-3/#page-break-properties"
+>
+    pub fn parse_value<'i>(
+        context: &ParserContext,
+        input: &mut Parser<'i, '_>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        use crate::values::specified::box_::BreakBetween;
+        Ok(expanded! {
+            break_after: BreakBetween::parse_legacy(context, input)?,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.break_after.to_css_legacy(dest)
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    engines="gecko"
+    name="page-break-inside"
+    flags="SHORTHAND_IN_GETCS IS_LEGACY_SHORTHAND"
+    sub_properties="break-inside"
+    spec="https://drafts.csswg.org/css-break-3/#page-break-properties"
+>
+    pub fn parse_value<'i>(
+        context: &ParserContext,
+        input: &mut Parser<'i, '_>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        use crate::values::specified::box_::BreakWithin;
+        Ok(expanded! {
+            break_inside: BreakWithin::parse_legacy(context, input)?,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.break_inside.to_css_legacy(dest)
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand name="offset"
+                    engines="gecko"
+                    sub_properties="offset-path offset-distance offset-rotate offset-anchor
+                                    offset-position"
+                    gecko_pref="layout.css.motion-path.enabled",
+                    spec="https://drafts.fxtf.org/motion-1/#offset-shorthand">
+    use crate::parser::Parse;
+    use crate::values::specified::motion::{OffsetPath, OffsetPosition, OffsetRotate};
+    use crate::values::specified::{LengthPercentage, PositionOrAuto};
+    use crate::Zero;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let offset_position =
+            if static_prefs::pref!("layout.css.motion-path-offset-position.enabled") {
+                input.try_parse(|i| OffsetPosition::parse(context, i)).ok()
+            } else {
+                None
+            };
+
+        let offset_path = input.try_parse(|i| OffsetPath::parse(context, i)).ok();
+
+        // Must have one of [offset-position, offset-path].
+        // FIXME: The syntax is out-of-date after the update of the spec.
+        // https://github.com/w3c/fxtf-drafts/issues/515
+        if offset_position.is_none() && offset_path.is_none() {
+            return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError));
+        }
+
+        let mut offset_distance = None;
+        let mut offset_rotate = None;
+        // offset-distance and offset-rotate are grouped with offset-path.
+        if offset_path.is_some() {
+            loop {
+                if offset_distance.is_none() {
+                    if let Ok(value) = input.try_parse(|i| LengthPercentage::parse(context, i)) {
+                        offset_distance = Some(value);
+                    }
+                }
+
+                if offset_rotate.is_none() {
+                    if let Ok(value) = input.try_parse(|i| OffsetRotate::parse(context, i)) {
+                        offset_rotate = Some(value);
+                        continue;
+                    }
+                }
+                break;
+            }
+        }
+
+        let offset_anchor = input.try_parse(|i| {
+            i.expect_delim('/')?;
+            PositionOrAuto::parse(context, i)
+        }).ok();
+
+        Ok(expanded! {
+            offset_position: offset_position.unwrap_or(OffsetPosition::auto()),
+            offset_path: offset_path.unwrap_or(OffsetPath::none()),
+            offset_distance: offset_distance.unwrap_or(LengthPercentage::zero()),
+            offset_rotate: offset_rotate.unwrap_or(OffsetRotate::auto()),
+            offset_anchor: offset_anchor.unwrap_or(PositionOrAuto::auto()),
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            if let Some(offset_position) = self.offset_position {
+                // The basic concept is: we must serialize offset-position or offset-path group.
+                // offset-path group means "offset-path offset-distance offset-rotate".
+                let must_serialize_path = *self.offset_path != OffsetPath::None
+                    || (!self.offset_distance.is_zero() || !self.offset_rotate.is_auto());
+                let position_is_default = matches!(offset_position, OffsetPosition::Auto);
+                if !position_is_default || !must_serialize_path {
+                    offset_position.to_css(dest)?;
+                }
+
+                if must_serialize_path {
+                    if !position_is_default {
+                        dest.write_char(' ')?;
+                    }
+                    self.offset_path.to_css(dest)?;
+                }
+            } else {
+                // If the pref is off, we always show offset-path.
+                self.offset_path.to_css(dest)?;
+            }
+
+            if !self.offset_distance.is_zero() {
+                dest.write_char(' ')?;
+                self.offset_distance.to_css(dest)?;
+            }
+
+            if !self.offset_rotate.is_auto() {
+                dest.write_char(' ')?;
+                self.offset_rotate.to_css(dest)?;
+            }
+
+            if *self.offset_anchor != PositionOrAuto::auto() {
+                dest.write_str(" / ")?;
+                self.offset_anchor.to_css(dest)?;
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand name="zoom" engines="gecko"
+                    sub_properties="transform transform-origin"
+                    gecko_pref="layout.css.zoom-transform-hack.enabled"
+                    flags="SHORTHAND_IN_GETCS IS_LEGACY_SHORTHAND"
+                    spec="Not a standard, only a compat hack">
+    use crate::parser::Parse;
+    use crate::values::specified::{Number, NumberOrPercentage, TransformOrigin};
+    use crate::values::generics::transform::{Transform, TransformOperation};
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let zoom = match input.try_parse(|input| NumberOrPercentage::parse(context, input)) {
+            Ok(number_or_percent) => number_or_percent.to_number(),
+            Err(..) => {
+                input.expect_ident_matching("normal")?;
+                Number::new(1.0)
+            },
+        };
+
+        // Make sure that the initial value matches the values for the
+        // longhands, just for general sanity.  `zoom: 1` and `zoom: 0` are
+        // ignored, see [1][2]. They are just hack for the "has layout" mode on
+        // IE.
+        //
+        // [1]: https://bugs.webkit.org/show_bug.cgi?id=18467
+        // [2]: https://bugzilla.mozilla.org/show_bug.cgi?id=1593009
+        Ok(if zoom.get() == 1.0 || zoom.get() == 0.0 {
+            expanded! {
+                transform: Transform::none(),
+                transform_origin: TransformOrigin::initial_value(),
+            }
+        } else {
+            expanded! {
+                transform: Transform(vec![TransformOperation::Scale(zoom, zoom)].into()),
+                transform_origin: TransformOrigin::zero_zero(),
+            }
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            if self.transform.0.is_empty() && *self.transform_origin == TransformOrigin::initial_value() {
+                return 1.0f32.to_css(dest);
+            }
+            if *self.transform_origin != TransformOrigin::zero_zero() {
+                return Ok(())
+            }
+            match &*self.transform.0 {
+                [TransformOperation::Scale(x, y)] if x == y => x.to_css(dest),
+                _ => Ok(()),
+            }
+        }
+    }
+</%helpers:shorthand>
diff --git a/servo/components/style/properties/shorthands/column.mako.rs b/servo/components/style/properties/shorthands/column.mako.rs
new file mode 100644
index 0000000000..3740775a7e
--- /dev/null
+++ b/servo/components/style/properties/shorthands/column.mako.rs
@@ -0,0 +1,115 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<%helpers:shorthand name="columns"
+                    engines="gecko servo-2013"
+                    sub_properties="column-width column-count"
+                    servo_2013_pref="layout.columns.enabled",
+                    spec="https://drafts.csswg.org/css-multicol/#propdef-columns">
+    use crate::properties::longhands::{column_count, column_width};
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let mut column_count = None;
+        let mut column_width = None;
+        let mut autos = 0;
+
+        loop {
+            if input.try_parse(|input| input.expect_ident_matching("auto")).is_ok() {
+                // Leave the options to None, 'auto' is the initial value.
+                autos += 1;
+                continue
+            }
+
+            if column_count.is_none() {
+                if let Ok(value) = input.try_parse(|input| column_count::parse(context, input)) {
+                    column_count = Some(value);
+                    continue
+                }
+            }
+
+            if column_width.is_none() {
+                if let Ok(value) = input.try_parse(|input| column_width::parse(context, input)) {
+                    column_width = Some(value);
+                    continue
+                }
+            }
+
+            break
+        }
+
+        let values = autos + column_count.iter().len() + column_width.iter().len();
+        if values == 0 || values > 2 {
+            Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+        } else {
+            Ok(expanded! {
+                column_count: unwrap_or_initial!(column_count),
+                column_width: unwrap_or_initial!(column_width),
+            })
+        }
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            if self.column_width.is_auto() {
+                return self.column_count.to_css(dest)
+            }
+            self.column_width.to_css(dest)?;
+            if !self.column_count.is_auto() {
+                dest.write_char(' ')?;
+                self.column_count.to_css(dest)?;
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    name="column-rule"
+    engines="gecko"
+    sub_properties="column-rule-width column-rule-style column-rule-color"
+    derive_serialize="True"
+    spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule"
+>
+    use crate::properties::longhands::{column_rule_width, column_rule_style};
+    use crate::properties::longhands::column_rule_color;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        % for name in "width style color".split():
+        let mut column_rule_${name} = None;
+        % endfor
+        let mut any = false;
+
+        loop {
+            % for name in "width style color".split():
+            if column_rule_${name}.is_none() {
+                if let Ok(value) = input.try_parse(|input|
+                        column_rule_${name}::parse(context, input)) {
+                    column_rule_${name} = Some(value);
+                    any = true;
+                    continue
+                }
+            }
+            % endfor
+
+            break
+        }
+        if any {
+            Ok(expanded! {
+                column_rule_width: unwrap_or_initial!(column_rule_width),
+                column_rule_style: unwrap_or_initial!(column_rule_style),
+                column_rule_color: unwrap_or_initial!(column_rule_color),
+            })
+        } else {
+            Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+        }
+    }
+</%helpers:shorthand>
diff --git a/servo/components/style/properties/shorthands/font.mako.rs b/servo/components/style/properties/shorthands/font.mako.rs
new file mode 100644
index 0000000000..c8046c644a
--- /dev/null
+++ b/servo/components/style/properties/shorthands/font.mako.rs
@@ -0,0 +1,542 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import SYSTEM_FONT_LONGHANDS %>
+
+<%helpers:shorthand
+    name="font"
+    engines="gecko servo-2013 servo-2020"
+    sub_properties="
+        font-style
+        font-variant-caps
+        font-weight
+        font-stretch
+        font-size
+        line-height
+        font-family
+        ${'font-size-adjust' if engine == 'gecko' else ''}
+        ${'font-kerning' if engine == 'gecko' else ''}
+        ${'font-optical-sizing' if engine == 'gecko' else ''}
+        ${'font-variant-alternates' if engine == 'gecko' else ''}
+        ${'font-variant-east-asian' if engine == 'gecko' else ''}
+        ${'font-variant-emoji' if engine == 'gecko' else ''}
+        ${'font-variant-ligatures' if engine == 'gecko' else ''}
+        ${'font-variant-numeric' if engine == 'gecko' else ''}
+        ${'font-variant-position' if engine == 'gecko' else ''}
+        ${'font-language-override' if engine == 'gecko' else ''}
+        ${'font-feature-settings' if engine == 'gecko' else ''}
+        ${'font-variation-settings' if engine == 'gecko' else ''}
+    "
+    derive_value_info="False"
+    spec="https://drafts.csswg.org/css-fonts-3/#propdef-font"
+>
+    use crate::computed_values::font_variant_caps::T::SmallCaps;
+    use crate::parser::Parse;
+    use crate::properties::longhands::{font_family, font_style, font_size, font_weight, font_stretch};
+    use crate::properties::longhands::font_variant_caps;
+    use crate::values::specified::text::LineHeight;
+    use crate::values::specified::{FontSize, FontWeight};
+    use crate::values::specified::font::{FontStretch, FontStretchKeyword};
+    #[cfg(feature = "gecko")]
+    use crate::values::specified::font::SystemFont;
+
+    <%
+        gecko_sub_properties = "kerning language_override size_adjust \
+                                variant_alternates variant_east_asian \
+                                variant_emoji variant_ligatures \
+                                variant_numeric variant_position \
+                                feature_settings variation_settings \
+                                optical_sizing".split()
+    %>
+    % if engine == "gecko":
+        % for prop in gecko_sub_properties:
+            use crate::properties::longhands::font_${prop};
+        % endfor
+    % endif
+    use self::font_family::SpecifiedValue as FontFamily;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let mut nb_normals = 0;
+        let mut style = None;
+        let mut variant_caps = None;
+        let mut weight = None;
+        let mut stretch = None;
+        let size;
+        % if engine == "gecko":
+            if let Ok(sys) = input.try_parse(|i| SystemFont::parse(context, i)) {
+                return Ok(expanded! {
+                     % for name in SYSTEM_FONT_LONGHANDS:
+                        ${name}: ${name}::SpecifiedValue::system_font(sys),
+                     % endfor
+                     line_height: LineHeight::normal(),
+                     % for name in gecko_sub_properties + ["variant_caps"]:
+                         font_${name}: font_${name}::get_initial_specified_value(),
+                     % endfor
+                 })
+            }
+        % endif
+        loop {
+            // Special-case 'normal' because it is valid in each of
+            // font-style, font-weight, font-variant and font-stretch.
+            // Leaves the values to None, 'normal' is the initial value for each of them.
+            if input.try_parse(|input| input.expect_ident_matching("normal")).is_ok() {
+                nb_normals += 1;
+                continue;
+            }
+            if style.is_none() {
+                if let Ok(value) = input.try_parse(|input| font_style::parse(context, input)) {
+                    style = Some(value);
+                    continue
+                }
+            }
+            if weight.is_none() {
+                if let Ok(value) = input.try_parse(|input| font_weight::parse(context, input)) {
+                    weight = Some(value);
+                    continue
+                }
+            }
+            if variant_caps.is_none() {
+                // The only variant-caps value allowed is small-caps (from CSS2); the added values
+                // defined by CSS Fonts 3 and later are not accepted.
+                // https://www.w3.org/TR/css-fonts-4/#font-prop
+                if input.try_parse(|input| input.expect_ident_matching("small-caps")).is_ok() {
+                    variant_caps = Some(SmallCaps);
+                    continue
+                }
+            }
+            if stretch.is_none() {
+                if let Ok(value) = input.try_parse(FontStretchKeyword::parse) {
+                    stretch = Some(FontStretch::Keyword(value));
+                    continue
+                }
+            }
+            size = Some(FontSize::parse(context, input)?);
+            break
+        }
+
+        let size = match size {
+            Some(s) => s,
+            None => {
+                return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+            }
+        };
+
+        let line_height = if input.try_parse(|input| input.expect_delim('/')).is_ok() {
+            Some(LineHeight::parse(context, input)?)
+        } else {
+            None
+        };
+
+        #[inline]
+        fn count<T>(opt: &Option<T>) -> u8 {
+            if opt.is_some() { 1 } else { 0 }
+        }
+
+        if (count(&style) + count(&weight) + count(&variant_caps) + count(&stretch) + nb_normals) > 4 {
+            return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+        }
+
+        let family = FontFamily::parse(context, input)?;
+        Ok(expanded! {
+            % for name in "style weight stretch variant_caps".split():
+                font_${name}: unwrap_or_initial!(font_${name}, ${name}),
+            % endfor
+            font_size: size,
+            line_height: line_height.unwrap_or(LineHeight::normal()),
+            font_family: family,
+            % if engine == "gecko":
+                % for name in gecko_sub_properties:
+                    font_${name}: font_${name}::get_initial_specified_value(),
+                % endfor
+            % endif
+        })
+    }
+
+    % if engine == "gecko":
+        enum CheckSystemResult {
+            AllSystem(SystemFont),
+            SomeSystem,
+            None
+        }
+    % endif
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            % if engine == "gecko":
+                match self.check_system() {
+                    CheckSystemResult::AllSystem(sys) => return sys.to_css(dest),
+                    CheckSystemResult::SomeSystem => return Ok(()),
+                    CheckSystemResult::None => {}
+                }
+            % endif
+
+            % if engine == "gecko":
+            if let Some(v) = self.font_optical_sizing {
+                if v != &font_optical_sizing::get_initial_specified_value() {
+                    return Ok(());
+                }
+            }
+            if let Some(v) = self.font_variation_settings {
+                if v != &font_variation_settings::get_initial_specified_value() {
+                    return Ok(());
+                }
+            }
+            if let Some(v) = self.font_variant_emoji {
+                if v != &font_variant_emoji::get_initial_specified_value() {
+                    return Ok(());
+                }
+            }
+
+            % for name in gecko_sub_properties:
+            % if name != "optical_sizing" and name != "variation_settings" and name != "variant_emoji":
+            if self.font_${name} != &font_${name}::get_initial_specified_value() {
+                return Ok(());
+            }
+            % endif
+            % endfor
+            % endif
+
+            // Only font-stretch keywords are allowed as part as the font
+            // shorthand.
+            let font_stretch = match *self.font_stretch {
+                FontStretch::Keyword(kw) => kw,
+                FontStretch::Stretch(percentage) => {
+                    match FontStretchKeyword::from_percentage(percentage.0.get()) {
+                        Some(kw) => kw,
+                        None => return Ok(()),
+                    }
+                }
+                FontStretch::System(..) => return Ok(()),
+            };
+
+            // The only variant-caps value allowed in the shorthand is small-caps (from CSS2);
+            // the added values defined by CSS Fonts 3 and later are not supported.
+            // https://www.w3.org/TR/css-fonts-4/#font-prop
+            if self.font_variant_caps != &font_variant_caps::get_initial_specified_value() &&
+                *self.font_variant_caps != SmallCaps {
+                return Ok(());
+            }
+
+            % for name in "style variant_caps".split():
+                if self.font_${name} != &font_${name}::get_initial_specified_value() {
+                    self.font_${name}.to_css(dest)?;
+                    dest.write_char(' ')?;
+                }
+            % endfor
+
+            // The initial specified font-weight value of 'normal' computes as a number (400),
+            // not to the keyword, so we need to check for that as well in order to properly
+            // serialize the computed style.
+            if self.font_weight != &FontWeight::normal() &&
+               self.font_weight != &FontWeight::from_gecko_keyword(400)  {
+                self.font_weight.to_css(dest)?;
+                dest.write_char(' ')?;
+            }
+
+            if font_stretch != FontStretchKeyword::Normal {
+                font_stretch.to_css(dest)?;
+                dest.write_char(' ')?;
+            }
+
+            self.font_size.to_css(dest)?;
+
+            if *self.line_height != LineHeight::normal() {
+                dest.write_str(" / ")?;
+                self.line_height.to_css(dest)?;
+            }
+
+            dest.write_char(' ')?;
+            self.font_family.to_css(dest)?;
+
+            Ok(())
+        }
+    }
+
+    impl<'a> LonghandsToSerialize<'a> {
+        % if engine == "gecko":
+        /// Check if some or all members are system fonts
+        fn check_system(&self) -> CheckSystemResult {
+            let mut sys = None;
+            let mut all = true;
+
+            % for prop in SYSTEM_FONT_LONGHANDS:
+            % if prop == "font_optical_sizing" or prop == "font_variation_settings":
+            if let Some(value) = self.${prop} {
+            % else:
+            {
+                let value = self.${prop};
+            % endif
+                match value.get_system() {
+                    Some(s) => {
+                        debug_assert!(sys.is_none() || s == sys.unwrap());
+                        sys = Some(s);
+                    }
+                    None => {
+                        all = false;
+                    }
+                }
+            }
+            % endfor
+            if self.line_height != &LineHeight::normal() {
+                all = false
+            }
+            if all {
+                CheckSystemResult::AllSystem(sys.unwrap())
+            } else if sys.is_some() {
+                CheckSystemResult::SomeSystem
+            } else {
+                CheckSystemResult::None
+            }
+        }
+        % endif
+    }
+
+    <%
+        subprops_for_value_info = ["font_style", "font_weight", "font_stretch",
+                                   "font_variant_caps", "font_size", "font_family"]
+        subprops_for_value_info = [
+            "<longhands::{}::SpecifiedValue as SpecifiedValueInfo>".format(p)
+            for p in subprops_for_value_info
+        ]
+    %>
+    impl SpecifiedValueInfo for Longhands {
+        const SUPPORTED_TYPES: u8 = 0
+            % for p in subprops_for_value_info:
+            | ${p}::SUPPORTED_TYPES
+            % endfor
+            ;
+
+        fn collect_completion_keywords(f: KeywordsCollectFn) {
+            % for p in subprops_for_value_info:
+            ${p}::collect_completion_keywords(f);
+            % endfor
+            <SystemFont as SpecifiedValueInfo>::collect_completion_keywords(f);
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand name="font-variant"
+                    engines="gecko servo-2013"
+                    flags="SHORTHAND_IN_GETCS"
+                    sub_properties="font-variant-caps
+                                    ${'font-variant-alternates' if engine == 'gecko' else ''}
+                                    ${'font-variant-east-asian' if engine == 'gecko' else ''}
+                                    ${'font-variant-emoji' if engine == 'gecko' else ''}
+                                    ${'font-variant-ligatures' if engine == 'gecko' else ''}
+                                    ${'font-variant-numeric' if engine == 'gecko' else ''}
+                                    ${'font-variant-position' if engine == 'gecko' else ''}"
+                    spec="https://drafts.csswg.org/css-fonts-3/#propdef-font-variant">
+% if engine == 'gecko':
+    <% sub_properties = "ligatures caps alternates numeric east_asian position emoji".split() %>
+% else:
+    <% sub_properties = ["caps"] %>
+% endif
+
+% for prop in sub_properties:
+    use crate::properties::longhands::font_variant_${prop};
+% endfor
+    #[allow(unused_imports)]
+    use crate::values::specified::FontVariantLigatures;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+    % for prop in sub_properties:
+        let mut ${prop} = None;
+    % endfor
+
+        if input.try_parse(|input| input.expect_ident_matching("normal")).is_ok() {
+            // Leave the values to None, 'normal' is the initial value for all the sub properties.
+        } else if input.try_parse(|input| input.expect_ident_matching("none")).is_ok() {
+            // The 'none' value sets 'font-variant-ligatures' to 'none' and resets all other sub properties
+            // to their initial value.
+        % if engine == "gecko":
+            ligatures = Some(FontVariantLigatures::NONE);
+        % endif
+        } else {
+            let mut has_custom_value: bool = false;
+            loop {
+                if input.try_parse(|input| input.expect_ident_matching("normal")).is_ok() ||
+                   input.try_parse(|input| input.expect_ident_matching("none")).is_ok() {
+                    return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+                }
+            % for prop in sub_properties:
+                if ${prop}.is_none() {
+                    if let Ok(value) = input.try_parse(|i| font_variant_${prop}::parse(context, i)) {
+                        has_custom_value = true;
+                        ${prop} = Some(value);
+                        continue
+                    }
+                }
+            % endfor
+
+                break
+            }
+
+            if !has_custom_value {
+                return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+            }
+        }
+
+        Ok(expanded! {
+        % for prop in sub_properties:
+            font_variant_${prop}: unwrap_or_initial!(font_variant_${prop}, ${prop}),
+        % endfor
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        #[allow(unused_assignments)]
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+
+            let has_none_ligatures =
+            % if engine == "gecko":
+                self.font_variant_ligatures == &FontVariantLigatures::NONE;
+            % else:
+                false;
+            % endif
+
+            const TOTAL_SUBPROPS: usize = ${len(sub_properties)};
+            let mut nb_normals = 0;
+        % for prop in sub_properties:
+        % if prop == "emoji":
+            if let Some(value) = self.font_variant_${prop} {
+        % else:
+            {
+                let value = self.font_variant_${prop};
+        % endif
+                if value == &font_variant_${prop}::get_initial_specified_value() {
+                   nb_normals += 1;
+                }
+            }
+        % if prop == "emoji":
+            else {
+                // The property was disabled, so we count it as 'normal' for the purpose
+                // of deciding how the shorthand can be serialized.
+                nb_normals += 1;
+            }
+        % endif
+        % endfor
+
+
+            if nb_normals > 0 && nb_normals == TOTAL_SUBPROPS {
+                dest.write_str("normal")?;
+            } else if has_none_ligatures {
+                if nb_normals == TOTAL_SUBPROPS - 1 {
+                    // Serialize to 'none' if 'font-variant-ligatures' is set to 'none' and all other
+                    // font feature properties are reset to their initial value.
+                    dest.write_str("none")?;
+                } else {
+                    return Ok(())
+                }
+            } else {
+                let mut has_any = false;
+            % for prop in sub_properties:
+            % if prop == "emoji":
+                if let Some(value) = self.font_variant_${prop} {
+            % else:
+                {
+                    let value = self.font_variant_${prop};
+            % endif
+                    if value != &font_variant_${prop}::get_initial_specified_value() {
+                        if has_any {
+                            dest.write_char(' ')?;
+                        }
+                        has_any = true;
+                        value.to_css(dest)?;
+                    }
+                }
+            % endfor
+            }
+
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand name="font-synthesis"
+                    engines="gecko"
+                    flags="SHORTHAND_IN_GETCS"
+                    sub_properties="font-synthesis-weight font-synthesis-style font-synthesis-small-caps"
+                    derive_value_info="False"
+                    spec="https://drafts.csswg.org/css-fonts-3/#propdef-font-variant">
+    <% sub_properties = ["weight", "style", "small_caps"] %>
+
+    use crate::values::specified::FontSynthesis;
+
+    pub fn parse_value<'i, 't>(
+        _context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+    % for prop in sub_properties:
+        let mut ${prop} = FontSynthesis::None;
+    % endfor
+
+        if input.try_parse(|input| input.expect_ident_matching("none")).is_ok() {
+            // Leave all the individual values as None
+        } else {
+            let mut has_custom_value = false;
+            while !input.is_exhausted() {
+                try_match_ident_ignore_ascii_case! { input,
+                % for prop in sub_properties:
+                    "${prop.replace('_', '-')}" if ${prop} == FontSynthesis::None => {
+                        has_custom_value = true;
+                        ${prop} = FontSynthesis::Auto;
+                        continue;
+                    },
+                % endfor
+                }
+            }
+            if !has_custom_value {
+                return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError));
+            }
+        }
+
+        Ok(expanded! {
+        % for prop in sub_properties:
+            font_synthesis_${prop}: ${prop},
+        % endfor
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            let mut has_any = false;
+
+        % for prop in sub_properties:
+            if self.font_synthesis_${prop} == &FontSynthesis::Auto {
+                if has_any {
+                    dest.write_char(' ')?;
+                }
+                has_any = true;
+                dest.write_str("${prop.replace('_', '-')}")?;
+            }
+        % endfor
+
+            if !has_any {
+                dest.write_str("none")?;
+            }
+
+            Ok(())
+        }
+    }
+
+    // The shorthand takes the sub-property names of the longhands, and not the
+    // 'auto' keyword like they do, so we can't automatically derive this.
+    impl SpecifiedValueInfo for Longhands {
+        fn collect_completion_keywords(f: KeywordsCollectFn) {
+            f(&[
+                "none",
+            % for prop in sub_properties:
+                "${prop.replace('_', '-')}",
+            % endfor
+            ]);
+        }
+    }
+</%helpers:shorthand>
diff --git a/servo/components/style/properties/shorthands/inherited_svg.mako.rs b/servo/components/style/properties/shorthands/inherited_svg.mako.rs
new file mode 100644
index 0000000000..899fc6a464
--- /dev/null
+++ b/servo/components/style/properties/shorthands/inherited_svg.mako.rs
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<%helpers:shorthand
+    name="marker"
+    engines="gecko"
+    sub_properties="marker-start marker-end marker-mid"
+    spec="https://www.w3.org/TR/SVG2/painting.html#MarkerShorthand"
+>
+    use crate::values::specified::url::UrlOrNone;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        use crate::parser::Parse;
+        let url = UrlOrNone::parse(context, input)?;
+
+        Ok(expanded! {
+            marker_start: url.clone(),
+            marker_mid: url.clone(),
+            marker_end: url,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            if self.marker_start == self.marker_mid && self.marker_mid == self.marker_end {
+                self.marker_start.to_css(dest)
+            } else {
+                Ok(())
+            }
+        }
+    }
+</%helpers:shorthand>
diff --git a/servo/components/style/properties/shorthands/inherited_text.mako.rs b/servo/components/style/properties/shorthands/inherited_text.mako.rs
new file mode 100644
index 0000000000..9eb278da05
--- /dev/null
+++ b/servo/components/style/properties/shorthands/inherited_text.mako.rs
@@ -0,0 +1,91 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<%helpers:shorthand
+    name="text-emphasis"
+    engines="gecko"
+    sub_properties="text-emphasis-style text-emphasis-color"
+    derive_serialize="True"
+    spec="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property"
+>
+    use crate::properties::longhands::{text_emphasis_color, text_emphasis_style};
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let mut color = None;
+        let mut style = None;
+
+        loop {
+            if color.is_none() {
+                if let Ok(value) = input.try_parse(|input| text_emphasis_color::parse(context, input)) {
+                    color = Some(value);
+                    continue
+                }
+            }
+            if style.is_none() {
+                if let Ok(value) = input.try_parse(|input| text_emphasis_style::parse(context, input)) {
+                    style = Some(value);
+                    continue
+                }
+            }
+            break
+        }
+        if color.is_some() || style.is_some() {
+            Ok(expanded! {
+                text_emphasis_color: unwrap_or_initial!(text_emphasis_color, color),
+                text_emphasis_style: unwrap_or_initial!(text_emphasis_style, style),
+            })
+        } else {
+            Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+        }
+    }
+</%helpers:shorthand>
+
+// CSS Compatibility
+// https://compat.spec.whatwg.org/
+<%helpers:shorthand name="-webkit-text-stroke"
+                    engines="gecko"
+                    sub_properties="-webkit-text-stroke-width
+                                    -webkit-text-stroke-color"
+                    derive_serialize="True"
+                    spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke">
+    use crate::properties::longhands::{_webkit_text_stroke_color, _webkit_text_stroke_width};
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let mut color = None;
+        let mut width = None;
+        loop {
+            if color.is_none() {
+                if let Ok(value) = input.try_parse(|input| _webkit_text_stroke_color::parse(context, input)) {
+                    color = Some(value);
+                    continue
+                }
+            }
+
+            if width.is_none() {
+                if let Ok(value) = input.try_parse(|input| _webkit_text_stroke_width::parse(context, input)) {
+                    width = Some(value);
+                    continue
+                }
+            }
+            break
+        }
+
+        if color.is_some() || width.is_some() {
+            Ok(expanded! {
+                _webkit_text_stroke_color: unwrap_or_initial!(_webkit_text_stroke_color, color),
+                _webkit_text_stroke_width: unwrap_or_initial!(_webkit_text_stroke_width, width),
+            })
+        } else {
+            Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+        }
+    }
+</%helpers:shorthand>
diff --git a/servo/components/style/properties/shorthands/list.mako.rs b/servo/components/style/properties/shorthands/list.mako.rs
new file mode 100644
index 0000000000..2e234e3d8f
--- /dev/null
+++ b/servo/components/style/properties/shorthands/list.mako.rs
@@ -0,0 +1,137 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<%helpers:shorthand name="list-style"
+                    engines="gecko servo-2013 servo-2020"
+                    sub_properties="list-style-position list-style-image list-style-type"
+                    spec="https://drafts.csswg.org/css-lists/#propdef-list-style">
+    use crate::properties::longhands::{list_style_image, list_style_position, list_style_type};
+    use crate::values::specified::Image;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        // `none` is ambiguous until we've finished parsing the shorthands, so we count the number
+        // of times we see it.
+        let mut nones = 0u8;
+        let (mut image, mut position, mut list_style_type, mut any) = (None, None, None, false);
+        loop {
+            if input.try_parse(|input| input.expect_ident_matching("none")).is_ok() {
+                nones = nones + 1;
+                if nones > 2 {
+                    return Err(input.new_custom_error(SelectorParseErrorKind::UnexpectedIdent("none".into())))
+                }
+                any = true;
+                continue
+            }
+
+            if image.is_none() {
+                if let Ok(value) = input.try_parse(|input| list_style_image::parse(context, input)) {
+                    image = Some(value);
+                    any = true;
+                    continue
+                }
+            }
+
+            if position.is_none() {
+                if let Ok(value) = input.try_parse(|input| list_style_position::parse(context, input)) {
+                    position = Some(value);
+                    any = true;
+                    continue
+                }
+            }
+
+            // list-style-type must be checked the last, because it accepts
+            // arbitrary identifier for custom counter style, and thus may
+            // affect values of list-style-position.
+            if list_style_type.is_none() {
+                if let Ok(value) = input.try_parse(|input| list_style_type::parse(context, input)) {
+                    list_style_type = Some(value);
+                    any = true;
+                    continue
+                }
+            }
+            break
+        }
+
+        let position = unwrap_or_initial!(list_style_position, position);
+
+        // If there are two `none`s, then we can't have a type or image; if there is one `none`,
+        // then we can't have both a type *and* an image; if there is no `none` then we're fine as
+        // long as we parsed something.
+        use self::list_style_type::SpecifiedValue as ListStyleType;
+        match (any, nones, list_style_type, image) {
+            (true, 2, None, None) => {
+                Ok(expanded! {
+                    list_style_position: position,
+                    list_style_image: Image::None,
+                    list_style_type: ListStyleType::None,
+                })
+            }
+            (true, 1, None, Some(image)) => {
+                Ok(expanded! {
+                    list_style_position: position,
+                    list_style_image: image,
+                    list_style_type: ListStyleType::None,
+                })
+            }
+            (true, 1, Some(list_style_type), None) => {
+                Ok(expanded! {
+                    list_style_position: position,
+                    list_style_image: Image::None,
+                    list_style_type: list_style_type,
+                })
+            }
+            (true, 1, None, None) => {
+                Ok(expanded! {
+                    list_style_position: position,
+                    list_style_image: Image::None,
+                    list_style_type: ListStyleType::None,
+                })
+            }
+            (true, 0, list_style_type, image) => {
+                Ok(expanded! {
+                    list_style_position: position,
+                    list_style_image: unwrap_or_initial!(list_style_image, image),
+                    list_style_type: unwrap_or_initial!(list_style_type),
+                })
+            }
+            _ => 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 {
+            use longhands::list_style_position::SpecifiedValue as ListStylePosition;
+            use longhands::list_style_type::SpecifiedValue as ListStyleType;
+            use longhands::list_style_image::SpecifiedValue as ListStyleImage;
+            let mut have_one_non_initial_value = false;
+            if self.list_style_position != &ListStylePosition::Outside {
+                self.list_style_position.to_css(dest)?;
+                have_one_non_initial_value = true;
+            }
+            if self.list_style_image != &ListStyleImage::None {
+                if have_one_non_initial_value {
+                    dest.write_char(' ')?;
+                }
+                self.list_style_image.to_css(dest)?;
+                have_one_non_initial_value = true;
+            }
+            if self.list_style_type != &ListStyleType::disc() {
+                if have_one_non_initial_value {
+                    dest.write_char(' ')?;
+                }
+                self.list_style_type.to_css(dest)?;
+                have_one_non_initial_value = true;
+            }
+            if !have_one_non_initial_value {
+                self.list_style_position.to_css(dest)?;
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
diff --git a/servo/components/style/properties/shorthands/margin.mako.rs b/servo/components/style/properties/shorthands/margin.mako.rs
new file mode 100644
index 0000000000..6b5bf7e467
--- /dev/null
+++ b/servo/components/style/properties/shorthands/margin.mako.rs
@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+<% from data import DEFAULT_RULES_AND_PAGE %>
+
+${helpers.four_sides_shorthand(
+    "margin",
+    "margin-%s",
+    "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://drafts.csswg.org/css-box/#propdef-margin",
+    rule_types_allowed=DEFAULT_RULES_AND_PAGE,
+    allow_quirks="Yes",
+)}
+
+${helpers.two_properties_shorthand(
+    "margin-block",
+    "margin-block-start",
+    "margin-block-end",
+    "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://drafts.csswg.org/css-logical/#propdef-margin-block"
+)}
+
+${helpers.two_properties_shorthand(
+    "margin-inline",
+    "margin-inline-start",
+    "margin-inline-end",
+    "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://drafts.csswg.org/css-logical/#propdef-margin-inline"
+)}
+
+${helpers.four_sides_shorthand(
+    "scroll-margin",
+    "scroll-margin-%s",
+    "specified::Length::parse",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin",
+)}
+
+${helpers.two_properties_shorthand(
+    "scroll-margin-block",
+    "scroll-margin-block-start",
+    "scroll-margin-block-end",
+    "specified::Length::parse",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-block",
+)}
+
+${helpers.two_properties_shorthand(
+    "scroll-margin-inline",
+    "scroll-margin-inline-start",
+    "scroll-margin-inline-end",
+    "specified::Length::parse",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-inline",
+)}
diff --git a/servo/components/style/properties/shorthands/outline.mako.rs b/servo/components/style/properties/shorthands/outline.mako.rs
new file mode 100644
index 0000000000..6ee8ed22c9
--- /dev/null
+++ b/servo/components/style/properties/shorthands/outline.mako.rs
@@ -0,0 +1,80 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<%helpers:shorthand name="outline"
+                    engines="gecko servo-2013"
+                    sub_properties="outline-color outline-style outline-width"
+                    spec="https://drafts.csswg.org/css-ui/#propdef-outline">
+    use crate::properties::longhands::{outline_color, outline_width, outline_style};
+    use crate::values::specified;
+    use crate::parser::Parse;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let _unused = context;
+        let mut color = None;
+        let mut style = None;
+        let mut width = None;
+        let mut any = false;
+        loop {
+            if color.is_none() {
+                if let Ok(value) = input.try_parse(|i| specified::Color::parse(context, i)) {
+                    color = Some(value);
+                    any = true;
+                    continue
+                }
+            }
+            if style.is_none() {
+                if let Ok(value) = input.try_parse(|input| outline_style::parse(context, input)) {
+                    style = Some(value);
+                    any = true;
+                    continue
+                }
+            }
+            if width.is_none() {
+                if let Ok(value) = input.try_parse(|input| outline_width::parse(context, input)) {
+                    width = Some(value);
+                    any = true;
+                    continue
+                }
+            }
+            break
+        }
+        if any {
+            Ok(expanded! {
+                outline_color: unwrap_or_initial!(outline_color, color),
+                outline_style: unwrap_or_initial!(outline_style, style),
+                outline_width: unwrap_or_initial!(outline_width, width),
+            })
+        } else {
+            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>
diff --git a/servo/components/style/properties/shorthands/padding.mako.rs b/servo/components/style/properties/shorthands/padding.mako.rs
new file mode 100644
index 0000000000..11ddfed3b1
--- /dev/null
+++ b/servo/components/style/properties/shorthands/padding.mako.rs
@@ -0,0 +1,58 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+${helpers.four_sides_shorthand(
+    "padding",
+    "padding-%s",
+    "specified::NonNegativeLengthPercentage::parse",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://drafts.csswg.org/css-box-3/#propdef-padding",
+    allow_quirks="Yes",
+)}
+
+${helpers.two_properties_shorthand(
+    "padding-block",
+    "padding-block-start",
+    "padding-block-end",
+    "specified::NonNegativeLengthPercentage::parse",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://drafts.csswg.org/css-logical/#propdef-padding-block"
+)}
+
+${helpers.two_properties_shorthand(
+    "padding-inline",
+    "padding-inline-start",
+    "padding-inline-end",
+    "specified::NonNegativeLengthPercentage::parse",
+    engines="gecko servo-2013 servo-2020",
+    spec="https://drafts.csswg.org/css-logical/#propdef-padding-inline"
+)}
+
+${helpers.four_sides_shorthand(
+    "scroll-padding",
+    "scroll-padding-%s",
+    "specified::NonNegativeLengthPercentageOrAuto::parse",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"
+)}
+
+${helpers.two_properties_shorthand(
+    "scroll-padding-block",
+    "scroll-padding-block-start",
+    "scroll-padding-block-end",
+    "specified::NonNegativeLengthPercentageOrAuto::parse",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-block"
+)}
+
+${helpers.two_properties_shorthand(
+    "scroll-padding-inline",
+    "scroll-padding-inline-start",
+    "scroll-padding-inline-end",
+    "specified::NonNegativeLengthPercentageOrAuto::parse",
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-inline"
+)}
diff --git a/servo/components/style/properties/shorthands/position.mako.rs b/servo/components/style/properties/shorthands/position.mako.rs
new file mode 100644
index 0000000000..3413a9038b
--- /dev/null
+++ b/servo/components/style/properties/shorthands/position.mako.rs
@@ -0,0 +1,879 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<%helpers:shorthand name="flex-flow"
+                    engines="gecko servo-2013 servo-2020",
+                    servo_2020_pref="layout.flexbox.enabled",
+                    sub_properties="flex-direction flex-wrap"
+                    extra_prefixes="webkit"
+                    derive_serialize="True"
+                    spec="https://drafts.csswg.org/css-flexbox/#flex-flow-property">
+    use crate::properties::longhands::{flex_direction, flex_wrap};
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let mut direction = None;
+        let mut wrap = None;
+        loop {
+            if direction.is_none() {
+                if let Ok(value) = input.try_parse(|input| flex_direction::parse(context, input)) {
+                    direction = Some(value);
+                    continue
+                }
+            }
+            if wrap.is_none() {
+                if let Ok(value) = input.try_parse(|input| flex_wrap::parse(context, input)) {
+                    wrap = Some(value);
+                    continue
+                }
+            }
+            break
+        }
+
+        if direction.is_none() && wrap.is_none() {
+            return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+        }
+        Ok(expanded! {
+            flex_direction: unwrap_or_initial!(flex_direction, direction),
+            flex_wrap: unwrap_or_initial!(flex_wrap, wrap),
+        })
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand name="flex"
+                    engines="gecko servo-2013 servo-2020",
+                    servo_2020_pref="layout.flexbox.enabled",
+                    sub_properties="flex-grow flex-shrink flex-basis"
+                    extra_prefixes="webkit"
+                    derive_serialize="True"
+                    spec="https://drafts.csswg.org/css-flexbox/#flex-property">
+    use crate::parser::Parse;
+    use crate::values::specified::NonNegativeNumber;
+    use crate::properties::longhands::flex_basis::SpecifiedValue as FlexBasis;
+
+    fn parse_flexibility<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<(NonNegativeNumber, Option<NonNegativeNumber>),ParseError<'i>> {
+        let grow = NonNegativeNumber::parse(context, input)?;
+        let shrink = input.try_parse(|i| NonNegativeNumber::parse(context, i)).ok();
+        Ok((grow, shrink))
+    }
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let mut grow = None;
+        let mut shrink = None;
+        let mut basis = None;
+
+        if input.try_parse(|input| input.expect_ident_matching("none")).is_ok() {
+            return Ok(expanded! {
+                flex_grow: NonNegativeNumber::new(0.0),
+                flex_shrink: NonNegativeNumber::new(0.0),
+                flex_basis: FlexBasis::auto(),
+            })
+        }
+        loop {
+            if grow.is_none() {
+                if let Ok((flex_grow, flex_shrink)) = input.try_parse(|i| parse_flexibility(context, i)) {
+                    grow = Some(flex_grow);
+                    shrink = flex_shrink;
+                    continue
+                }
+            }
+            if basis.is_none() {
+                if let Ok(value) = input.try_parse(|input| FlexBasis::parse(context, input)) {
+                    basis = Some(value);
+                    continue
+                }
+            }
+            break
+        }
+
+        if grow.is_none() && basis.is_none() {
+            return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+        }
+        Ok(expanded! {
+            flex_grow: grow.unwrap_or(NonNegativeNumber::new(1.0)),
+            flex_shrink: shrink.unwrap_or(NonNegativeNumber::new(1.0)),
+            // Per spec, this should be SpecifiedValue::zero(), but all
+            // browsers currently agree on using `0%`. This is a spec
+            // change which hasn't been adopted by browsers:
+            // https://github.com/w3c/csswg-drafts/commit/2c446befdf0f686217905bdd7c92409f6bd3921b
+            flex_basis: basis.unwrap_or(FlexBasis::zero_percent()),
+        })
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    name="gap"
+    engines="gecko"
+    aliases="grid-gap"
+    sub_properties="row-gap column-gap"
+    spec="https://drafts.csswg.org/css-align-3/#gap-shorthand"
+>
+  use crate::properties::longhands::{row_gap, column_gap};
+
+  pub fn parse_value<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
+                             -> Result<Longhands, ParseError<'i>> {
+      let r_gap = row_gap::parse(context, input)?;
+      let c_gap = input.try_parse(|input| column_gap::parse(context, input)).unwrap_or(r_gap.clone());
+
+      Ok(expanded! {
+        row_gap: r_gap,
+        column_gap: c_gap,
+      })
+  }
+
+  impl<'a> ToCss for LonghandsToSerialize<'a>  {
+      fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+          if self.row_gap == self.column_gap {
+            self.row_gap.to_css(dest)
+          } else {
+            self.row_gap.to_css(dest)?;
+            dest.write_char(' ')?;
+            self.column_gap.to_css(dest)
+          }
+      }
+  }
+
+</%helpers:shorthand>
+
+% for kind in ["row", "column"]:
+<%helpers:shorthand
+    name="grid-${kind}"
+    sub_properties="grid-${kind}-start grid-${kind}-end"
+    engines="gecko",
+    spec="https://drafts.csswg.org/css-grid/#propdef-grid-${kind}"
+>
+    use crate::values::specified::GridLine;
+    use crate::parser::Parse;
+    use crate::Zero;
+
+    // NOTE: Since both the shorthands have the same code, we should (re-)use code from one to implement
+    // the other. This might not be a big deal for now, but we should consider looking into this in the future
+    // to limit the amount of code generated.
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let start = input.try_parse(|i| GridLine::parse(context, i))?;
+        let end = if input.try_parse(|i| i.expect_delim('/')).is_ok() {
+            GridLine::parse(context, input)?
+        } else {
+            let mut line = GridLine::auto();
+            if start.line_num.is_zero() && !start.is_span {
+                line.ident = start.ident.clone(); // ident from start value should be taken
+            }
+
+            line
+        };
+
+        Ok(expanded! {
+            grid_${kind}_start: start,
+            grid_${kind}_end: end,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        // Return the shortest possible serialization of the `grid-${kind}-[start/end]` values.
+        // This function exploits the opportunities to omit the end value per this spec text:
+        //
+        // https://drafts.csswg.org/css-grid/#propdef-grid-column
+        // "When the second value is omitted, if the first value is a <custom-ident>,
+        // the grid-row-end/grid-column-end longhand is also set to that <custom-ident>;
+        // otherwise, it is set to auto."
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.grid_${kind}_start.to_css(dest)?;
+            if self.grid_${kind}_start.can_omit(self.grid_${kind}_end) {
+                return Ok(());  // the end value is redundant
+            }
+            dest.write_str(" / ")?;
+            self.grid_${kind}_end.to_css(dest)
+        }
+    }
+</%helpers:shorthand>
+% endfor
+
+<%helpers:shorthand
+    name="grid-area"
+    engines="gecko"
+    sub_properties="grid-row-start grid-row-end grid-column-start grid-column-end"
+    spec="https://drafts.csswg.org/css-grid/#propdef-grid-area"
+>
+    use crate::values::specified::GridLine;
+    use crate::parser::Parse;
+    use crate::Zero;
+
+    // The code is the same as `grid-{row,column}` except that this can have four values at most.
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        fn line_with_ident_from(other: &GridLine) -> GridLine {
+            let mut this = GridLine::auto();
+            if other.line_num.is_zero() && !other.is_span {
+                this.ident = other.ident.clone();
+            }
+
+            this
+        }
+
+        let row_start = input.try_parse(|i| GridLine::parse(context, i))?;
+        let (column_start, row_end, column_end) = if input.try_parse(|i| i.expect_delim('/')).is_ok() {
+            let column_start = GridLine::parse(context, input)?;
+            let (row_end, column_end) = if input.try_parse(|i| i.expect_delim('/')).is_ok() {
+                let row_end = GridLine::parse(context, input)?;
+                let column_end = if input.try_parse(|i| i.expect_delim('/')).is_ok() {
+                    GridLine::parse(context, input)?
+                } else {        // grid-column-end has not been given
+                    line_with_ident_from(&column_start)
+                };
+
+                (row_end, column_end)
+            } else {        // grid-row-start and grid-column-start has been given
+                let row_end = line_with_ident_from(&row_start);
+                let column_end = line_with_ident_from(&column_start);
+                (row_end, column_end)
+            };
+
+            (column_start, row_end, column_end)
+        } else {        // only grid-row-start is given
+            let line = line_with_ident_from(&row_start);
+            (line.clone(), line.clone(), line)
+        };
+
+        Ok(expanded! {
+            grid_row_start: row_start,
+            grid_row_end: row_end,
+            grid_column_start: column_start,
+            grid_column_end: column_end,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        // Return the shortest possible serialization of the `grid-[column/row]-[start/end]` values.
+        // This function exploits the opportunities to omit trailing values per this spec text:
+        //
+        // https://drafts.csswg.org/css-grid/#propdef-grid-area
+        // "If four <grid-line> values are specified, grid-row-start is set to the first value,
+        // grid-column-start is set to the second value, grid-row-end is set to the third value,
+        // and grid-column-end is set to the fourth value.
+        //
+        // When grid-column-end is omitted, if grid-column-start is a <custom-ident>,
+        // grid-column-end is set to that <custom-ident>; otherwise, it is set to auto.
+        //
+        // When grid-row-end is omitted, if grid-row-start is a <custom-ident>, grid-row-end is
+        // set to that <custom-ident>; otherwise, it is set to auto.
+        //
+        // When grid-column-start is omitted, if grid-row-start is a <custom-ident>, all four
+        // longhands are set to that value. Otherwise, it is set to auto."
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.grid_row_start.to_css(dest)?;
+            let mut trailing_values = 3;
+            if self.grid_column_start.can_omit(self.grid_column_end) {
+                trailing_values -= 1;
+                if self.grid_row_start.can_omit(self.grid_row_end) {
+                    trailing_values -= 1;
+                    if self.grid_row_start.can_omit(self.grid_column_start) {
+                        trailing_values -= 1;
+                    }
+                }
+            }
+            let values = [&self.grid_column_start, &self.grid_row_end, &self.grid_column_end];
+            for value in values.iter().take(trailing_values) {
+                dest.write_str(" / ")?;
+                value.to_css(dest)?;
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    name="grid-template"
+    engines="gecko"
+    sub_properties="grid-template-rows grid-template-columns grid-template-areas"
+    spec="https://drafts.csswg.org/css-grid/#propdef-grid-template"
+>
+    use crate::parser::Parse;
+    use servo_arc::Arc;
+    use crate::values::generics::grid::{TrackSize, TrackList};
+    use crate::values::generics::grid::{TrackListValue, concat_serialize_idents};
+    use crate::values::specified::{GridTemplateComponent, GenericGridTemplateComponent};
+    use crate::values::specified::grid::parse_line_names;
+    use crate::values::specified::position::{GridTemplateAreas, TemplateAreas, TemplateAreasArc};
+
+    /// Parsing for `<grid-template>` shorthand (also used by `grid` shorthand).
+    pub fn parse_grid_template<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<(GridTemplateComponent, GridTemplateComponent, GridTemplateAreas), ParseError<'i>> {
+        // Other shorthand sub properties also parse the `none` keyword and this shorthand
+        // should know after this keyword there is nothing to parse. Otherwise it gets
+        // confused and rejects the sub properties that contains `none`.
+        <% keywords = {
+            "none": "GenericGridTemplateComponent::None",
+        }
+        %>
+        % for keyword, rust_type in keywords.items():
+            if let Ok(x) = input.try_parse(|i| {
+                if i.try_parse(|i| i.expect_ident_matching("${keyword}")).is_ok() {
+                    if !i.is_exhausted() {
+                        return Err(());
+                    }
+                    return Ok((${rust_type}, ${rust_type}, GridTemplateAreas::None));
+                }
+                Err(())
+            }) {
+                return Ok(x);
+            }
+        % endfor
+
+        let first_line_names = input.try_parse(parse_line_names).unwrap_or_default();
+        if let Ok(string) = input.try_parse(|i| i.expect_string().map(|s| s.as_ref().to_owned().into())) {
+            let mut strings = vec![];
+            let mut values = vec![];
+            let mut line_names = vec![];
+            line_names.push(first_line_names);
+            strings.push(string);
+            loop {
+                let size = input.try_parse(|i| TrackSize::parse(context, i)).unwrap_or_default();
+                values.push(TrackListValue::TrackSize(size));
+                let mut names = input.try_parse(parse_line_names).unwrap_or_default();
+                let more_names = input.try_parse(parse_line_names);
+
+                match input.try_parse(|i| i.expect_string().map(|s| s.as_ref().to_owned().into())) {
+                    Ok(string) => {
+                        strings.push(string);
+                        if let Ok(v) = more_names {
+                            // We got `[names] [more_names] "string"` - merge the two name lists.
+                            let mut names_vec = names.into_vec();
+                            names_vec.extend(v.into_iter());
+                            names = names_vec.into();
+                        }
+                        line_names.push(names);
+                    },
+                    Err(e) => {
+                        if more_names.is_ok() {
+                            // We've parsed `"string" [names] [more_names]` but then failed to parse another `"string"`.
+                            // The grammar doesn't allow two trailing `<line-names>` so this is an invalid value.
+                            return Err(e.into());
+                        }
+                        // only the named area determines whether we should bail out
+                        line_names.push(names);
+                        break
+                    },
+                };
+            }
+
+            if line_names.len() == values.len() {
+                // should be one longer than track sizes
+                line_names.push(Default::default());
+            }
+
+            let template_areas = TemplateAreas::from_vec(strings)
+                .map_err(|()| input.new_custom_error(StyleParseErrorKind::UnspecifiedError))?;
+            let template_rows = TrackList {
+                values: values.into(),
+                line_names: line_names.into(),
+                auto_repeat_index: std::usize::MAX,
+            };
+
+            let template_cols = if input.try_parse(|i| i.expect_delim('/')).is_ok() {
+                let value = GridTemplateComponent::parse_without_none(context, input)?;
+                if let GenericGridTemplateComponent::TrackList(ref list) = value {
+                    if !list.is_explicit() {
+                        return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+                    }
+                }
+
+                value
+            } else {
+                GridTemplateComponent::default()
+            };
+
+            Ok((
+                GenericGridTemplateComponent::TrackList(Box::new(template_rows)),
+                template_cols,
+                GridTemplateAreas::Areas(TemplateAreasArc(Arc::new(template_areas)))
+            ))
+        } else {
+            let mut template_rows = GridTemplateComponent::parse(context, input)?;
+            if let GenericGridTemplateComponent::TrackList(ref mut list) = template_rows {
+                // Fist line names are parsed already and it shouldn't be parsed again.
+                // If line names are not empty, that means given property value is not acceptable
+                if list.line_names[0].is_empty() {
+                    list.line_names[0] = first_line_names;      // won't panic
+                } else {
+                    return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError));
+                }
+            }
+
+            input.expect_delim('/')?;
+            Ok((template_rows, GridTemplateComponent::parse(context, input)?, GridTemplateAreas::None))
+        }
+    }
+
+    #[inline]
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let (rows, columns, areas) = parse_grid_template(context, input)?;
+        Ok(expanded! {
+            grid_template_rows: rows,
+            grid_template_columns: columns,
+            grid_template_areas: areas,
+        })
+    }
+
+    /// Serialization for `<grid-template>` shorthand (also used by `grid` shorthand).
+    pub fn serialize_grid_template<W>(
+        template_rows: &GridTemplateComponent,
+        template_columns: &GridTemplateComponent,
+        template_areas: &GridTemplateAreas,
+        dest: &mut CssWriter<W>,
+    ) -> fmt::Result
+    where
+        W: Write {
+        match *template_areas {
+            GridTemplateAreas::None => {
+                if template_rows.is_initial() && template_columns.is_initial() {
+                    return GridTemplateComponent::default().to_css(dest);
+                }
+                template_rows.to_css(dest)?;
+                dest.write_str(" / ")?;
+                template_columns.to_css(dest)
+            },
+            GridTemplateAreas::Areas(ref areas) => {
+                // The length of template-area and template-rows values should be equal.
+                if areas.0.strings.len() != template_rows.track_list_len() {
+                    return Ok(());
+                }
+
+                let track_list = match *template_rows {
+                    GenericGridTemplateComponent::TrackList(ref list) => {
+                        // We should fail if there is a `repeat` function.
+                        // `grid` and `grid-template` shorthands doesn't accept
+                        // that. Only longhand accepts.
+                        if !list.is_explicit() {
+                            return Ok(());
+                        }
+                        list
+                    },
+                    // Others template components shouldn't exist with normal shorthand values.
+                    // But if we need to serialize a group of longhand sub-properties for
+                    // the shorthand, we should be able to return empty string instead of crashing.
+                    _ => return Ok(()),
+                };
+
+                // We need to check some values that longhand accepts but shorthands don't.
+                match *template_columns {
+                    // We should fail if there is a `repeat` function. `grid` and
+                    // `grid-template` shorthands doesn't accept that. Only longhand accepts that.
+                    GenericGridTemplateComponent::TrackList(ref list) => {
+                        if !list.is_explicit() {
+                            return Ok(());
+                        }
+                    },
+                    // Also the shorthands don't accept subgrids unlike longhand.
+                    // We should fail without an error here.
+                    GenericGridTemplateComponent::Subgrid(_) => {
+                        return Ok(());
+                    },
+                    _ => {},
+                }
+
+                let mut names_iter = track_list.line_names.iter();
+                for (((i, string), names), value) in areas.0.strings.iter().enumerate()
+                                                                  .zip(&mut names_iter)
+                                                                  .zip(track_list.values.iter()) {
+                    if i > 0 {
+                        dest.write_char(' ')?;
+                    }
+
+                    if !names.is_empty() {
+                        concat_serialize_idents("[", "] ", names, " ", dest)?;
+                    }
+
+                    string.to_css(dest)?;
+
+                    // If the track size is the initial value then it's redundant here.
+                    if !value.is_initial() {
+                        dest.write_char(' ')?;
+                        value.to_css(dest)?;
+                    }
+                }
+
+                if let Some(names) = names_iter.next() {
+                    concat_serialize_idents(" [", "]", names, " ", dest)?;
+                }
+
+                if let GenericGridTemplateComponent::TrackList(ref list) = *template_columns {
+                    dest.write_str(" / ")?;
+                    list.to_css(dest)?;
+                }
+
+                Ok(())
+            },
+        }
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        #[inline]
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            serialize_grid_template(
+                self.grid_template_rows,
+                self.grid_template_columns,
+                self.grid_template_areas,
+                dest
+            )
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    name="grid"
+    engines="gecko"
+    sub_properties="grid-template-rows grid-template-columns grid-template-areas
+                    grid-auto-rows grid-auto-columns grid-auto-flow"
+    spec="https://drafts.csswg.org/css-grid/#propdef-grid"
+>
+    use crate::parser::Parse;
+    use crate::properties::longhands::{grid_auto_columns, grid_auto_rows, grid_auto_flow};
+    use crate::values::generics::grid::GridTemplateComponent;
+    use crate::values::specified::{GenericGridTemplateComponent, ImplicitGridTracks};
+    use crate::values::specified::position::{GridAutoFlow, GridTemplateAreas};
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let mut temp_rows = GridTemplateComponent::default();
+        let mut temp_cols = GridTemplateComponent::default();
+        let mut temp_areas = GridTemplateAreas::None;
+        let mut auto_rows = ImplicitGridTracks::default();
+        let mut auto_cols = ImplicitGridTracks::default();
+        let mut flow = grid_auto_flow::get_initial_value();
+
+        fn parse_auto_flow<'i, 't>(
+            input: &mut Parser<'i, 't>,
+            is_row: bool,
+        ) -> Result<GridAutoFlow, ParseError<'i>> {
+            let mut track = None;
+            let mut dense = GridAutoFlow::empty();
+
+            for _ in 0..2 {
+                if input.try_parse(|i| i.expect_ident_matching("auto-flow")).is_ok() {
+                    track = if is_row {
+                        Some(GridAutoFlow::ROW)
+                    } else {
+                        Some(GridAutoFlow::COLUMN)
+                    };
+                } else if input.try_parse(|i| i.expect_ident_matching("dense")).is_ok() {
+                    dense = GridAutoFlow::DENSE
+                } else {
+                    break
+                }
+            }
+
+            if track.is_some() {
+                Ok(track.unwrap() | dense)
+            } else {
+                Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+            }
+        }
+
+        if let Ok((rows, cols, areas)) = input.try_parse(|i| super::grid_template::parse_grid_template(context, i)) {
+            temp_rows = rows;
+            temp_cols = cols;
+            temp_areas = areas;
+        } else if let Ok(rows) = input.try_parse(|i| GridTemplateComponent::parse(context, i)) {
+            temp_rows = rows;
+            input.expect_delim('/')?;
+            flow = parse_auto_flow(input, false)?;
+            auto_cols = input.try_parse(|i| grid_auto_columns::parse(context, i)).unwrap_or_default();
+        } else {
+            flow = parse_auto_flow(input, true)?;
+            auto_rows = input.try_parse(|i| grid_auto_rows::parse(context, i)).unwrap_or_default();
+            input.expect_delim('/')?;
+            temp_cols = GridTemplateComponent::parse(context, input)?;
+        }
+
+        Ok(expanded! {
+            grid_template_rows: temp_rows,
+            grid_template_columns: temp_cols,
+            grid_template_areas: temp_areas,
+            grid_auto_rows: auto_rows,
+            grid_auto_columns: auto_cols,
+            grid_auto_flow: flow,
+        })
+    }
+
+    impl<'a> LonghandsToSerialize<'a> {
+        /// Returns true if other sub properties except template-{rows,columns} are initial.
+        fn is_grid_template(&self) -> bool {
+            self.grid_auto_rows.is_initial() &&
+            self.grid_auto_columns.is_initial() &&
+            *self.grid_auto_flow == grid_auto_flow::get_initial_value()
+        }
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            if self.is_grid_template() {
+                return super::grid_template::serialize_grid_template(
+                    self.grid_template_rows,
+                    self.grid_template_columns,
+                    self.grid_template_areas,
+                    dest
+                );
+            }
+
+            if *self.grid_template_areas != GridTemplateAreas::None {
+                // No other syntax can set the template areas, so fail to
+                // serialize.
+                return Ok(());
+            }
+
+            if self.grid_auto_flow.contains(GridAutoFlow::COLUMN) {
+                // It should fail to serialize if other branch of the if condition's values are set.
+                if !self.grid_auto_rows.is_initial() ||
+                    !self.grid_template_columns.is_initial() {
+                    return Ok(());
+                }
+
+                // It should fail to serialize if template-rows value is not Explicit.
+                if let GenericGridTemplateComponent::TrackList(ref list) = *self.grid_template_rows {
+                    if !list.is_explicit() {
+                        return Ok(());
+                    }
+                }
+
+                self.grid_template_rows.to_css(dest)?;
+                dest.write_str(" / auto-flow")?;
+                if self.grid_auto_flow.contains(GridAutoFlow::DENSE) {
+                    dest.write_str(" dense")?;
+                }
+
+                if !self.grid_auto_columns.is_initial() {
+                    dest.write_char(' ')?;
+                    self.grid_auto_columns.to_css(dest)?;
+                }
+
+                return Ok(());
+            }
+
+            // It should fail to serialize if other branch of the if condition's values are set.
+            if !self.grid_auto_columns.is_initial() ||
+                !self.grid_template_rows.is_initial() {
+                return Ok(());
+            }
+
+            // It should fail to serialize if template-column value is not Explicit.
+            if let GenericGridTemplateComponent::TrackList(ref list) = *self.grid_template_columns {
+                if !list.is_explicit() {
+                    return Ok(());
+                }
+            }
+
+            dest.write_str("auto-flow")?;
+            if self.grid_auto_flow.contains(GridAutoFlow::DENSE) {
+                dest.write_str(" dense")?;
+            }
+
+            if !self.grid_auto_rows.is_initial() {
+                dest.write_char(' ')?;
+                self.grid_auto_rows.to_css(dest)?;
+            }
+
+            dest.write_str(" / ")?;
+            self.grid_template_columns.to_css(dest)?;
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    name="place-content"
+    engines="gecko"
+    sub_properties="align-content justify-content"
+    spec="https://drafts.csswg.org/css-align/#propdef-place-content"
+>
+    use crate::values::specified::align::{AlignContent, JustifyContent, ContentDistribution, AxisDirection};
+
+    pub fn parse_value<'i, 't>(
+        _: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let align_content =
+            ContentDistribution::parse(input, AxisDirection::Block)?;
+
+        let justify_content = input.try_parse(|input| {
+            ContentDistribution::parse(input, AxisDirection::Inline)
+        });
+
+        let justify_content = match justify_content {
+            Ok(v) => v,
+            Err(..) => {
+                // https://drafts.csswg.org/css-align-3/#place-content:
+                //
+                //   The second value is assigned to justify-content; if
+                //   omitted, it is copied from the first value, unless that
+                //   value is a <baseline-position> in which case it is
+                //   defaulted to start.
+                //
+                if !align_content.is_baseline_position() {
+                    align_content
+                } else {
+                    ContentDistribution::start()
+                }
+            }
+        };
+
+        Ok(expanded! {
+            align_content: AlignContent(align_content),
+            justify_content: JustifyContent(justify_content),
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.align_content.to_css(dest)?;
+            if self.align_content.0 != self.justify_content.0 {
+                dest.write_char(' ')?;
+                self.justify_content.to_css(dest)?;
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    name="place-self"
+    engines="gecko"
+    sub_properties="align-self justify-self"
+    spec="https://drafts.csswg.org/css-align/#place-self-property"
+>
+    use crate::values::specified::align::{AlignSelf, JustifySelf, SelfAlignment, AxisDirection};
+
+    pub fn parse_value<'i, 't>(
+        _: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let align = SelfAlignment::parse(input, AxisDirection::Block)?;
+        let justify = input.try_parse(|input| SelfAlignment::parse(input, AxisDirection::Inline));
+
+        let justify = match justify {
+            Ok(v) => v,
+            Err(..) => {
+                debug_assert!(align.is_valid_on_both_axes());
+                align
+            }
+        };
+
+        Ok(expanded! {
+            align_self: AlignSelf(align),
+            justify_self: JustifySelf(justify),
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.align_self.to_css(dest)?;
+            if self.align_self.0 != self.justify_self.0 {
+                dest.write_char(' ')?;
+                self.justify_self.to_css(dest)?;
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    name="place-items"
+    engines="gecko"
+    sub_properties="align-items justify-items"
+    spec="https://drafts.csswg.org/css-align/#place-items-property"
+>
+    use crate::values::specified::align::{AlignItems, JustifyItems};
+    use crate::parser::Parse;
+
+    impl From<AlignItems> for JustifyItems {
+        fn from(align: AlignItems) -> JustifyItems {
+            JustifyItems(align.0)
+        }
+    }
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        let align = AlignItems::parse(context, input)?;
+        let justify =
+            input.try_parse(|input| JustifyItems::parse(context, input))
+                 .unwrap_or_else(|_| JustifyItems::from(align));
+
+        Ok(expanded! {
+            align_items: align,
+            justify_items: justify,
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a> {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            self.align_items.to_css(dest)?;
+            if self.align_items.0 != self.justify_items.0 {
+                dest.write_char(' ')?;
+                self.justify_items.to_css(dest)?;
+            }
+
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+// See https://github.com/w3c/csswg-drafts/issues/3525 for the quirks stuff.
+${helpers.four_sides_shorthand(
+    "inset",
+    "%s",
+    "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013",
+    spec="https://drafts.csswg.org/css-logical/#propdef-inset",
+    allow_quirks="No",
+)}
+
+${helpers.two_properties_shorthand(
+    "inset-block",
+    "inset-block-start",
+    "inset-block-end",
+    "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013",
+    spec="https://drafts.csswg.org/css-logical/#propdef-inset-block"
+)}
+
+${helpers.two_properties_shorthand(
+    "inset-inline",
+    "inset-inline-start",
+    "inset-inline-end",
+    "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013",
+    spec="https://drafts.csswg.org/css-logical/#propdef-inset-inline"
+)}
+
+${helpers.two_properties_shorthand(
+    "contain-intrinsic-size",
+    "contain-intrinsic-width",
+    "contain-intrinsic-height",
+    engines="gecko",
+    gecko_pref="layout.css.contain-intrinsic-size.enabled",
+    spec="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override",
+)}
diff --git a/servo/components/style/properties/shorthands/svg.mako.rs b/servo/components/style/properties/shorthands/svg.mako.rs
new file mode 100644
index 0000000000..97cce9ad04
--- /dev/null
+++ b/servo/components/style/properties/shorthands/svg.mako.rs
@@ -0,0 +1,258 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<%helpers:shorthand name="mask" engines="gecko" extra_prefixes="webkit"
+                    flags="SHORTHAND_IN_GETCS"
+                    sub_properties="mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x
+                                    mask-position-y mask-size mask-image"
+                    spec="https://drafts.fxtf.org/css-masking/#propdef-mask">
+    use crate::properties::longhands::{mask_mode, mask_repeat, mask_clip, mask_origin, mask_composite, mask_position_x,
+                                mask_position_y};
+    use crate::properties::longhands::{mask_size, mask_image};
+    use crate::values::specified::{Position, PositionComponent};
+    use crate::parser::Parse;
+
+    // FIXME(emilio): These two mask types should be the same!
+    impl From<mask_origin::single_value::SpecifiedValue> for mask_clip::single_value::SpecifiedValue {
+        fn from(origin: mask_origin::single_value::SpecifiedValue) -> mask_clip::single_value::SpecifiedValue {
+            match origin {
+                mask_origin::single_value::SpecifiedValue::ContentBox =>
+                    mask_clip::single_value::SpecifiedValue::ContentBox,
+                mask_origin::single_value::SpecifiedValue::PaddingBox =>
+                    mask_clip::single_value::SpecifiedValue::PaddingBox ,
+                mask_origin::single_value::SpecifiedValue::BorderBox =>
+                    mask_clip::single_value::SpecifiedValue::BorderBox,
+                % if engine == "gecko":
+                mask_origin::single_value::SpecifiedValue::FillBox =>
+                    mask_clip::single_value::SpecifiedValue::FillBox ,
+                mask_origin::single_value::SpecifiedValue::StrokeBox =>
+                    mask_clip::single_value::SpecifiedValue::StrokeBox,
+                mask_origin::single_value::SpecifiedValue::ViewBox=>
+                    mask_clip::single_value::SpecifiedValue::ViewBox,
+                % endif
+            }
+        }
+    }
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        % for name in "image mode position_x position_y size repeat origin clip composite".split():
+        // Vec grows from 0 to 4 by default on first push().  So allocate with
+        // capacity 1, so in the common case of only one item we don't way
+        // overallocate, then shrink.  Note that we always push at least one
+        // item if parsing succeeds.
+        let mut mask_${name} = Vec::with_capacity(1);
+        % endfor
+
+        input.parse_comma_separated(|input| {
+            % for name in "image mode position size repeat origin clip composite".split():
+                let mut ${name} = None;
+            % endfor
+            loop {
+                if image.is_none() {
+                    if let Ok(value) = input.try_parse(|input| mask_image::single_value
+                                                                   ::parse(context, input)) {
+                        image = Some(value);
+                        continue
+                    }
+                }
+                if position.is_none() {
+                    if let Ok(value) = input.try_parse(|input| Position::parse(context, input)) {
+                        position = Some(value);
+
+                        // Parse mask size, if applicable.
+                        size = input.try_parse(|input| {
+                            input.expect_delim('/')?;
+                            mask_size::single_value::parse(context, input)
+                        }).ok();
+
+                        continue
+                    }
+                }
+                % for name in "repeat origin clip composite mode".split():
+                    if ${name}.is_none() {
+                        if let Ok(value) = input.try_parse(|input| mask_${name}::single_value
+                                                                               ::parse(context, input)) {
+                            ${name} = Some(value);
+                            continue
+                        }
+                    }
+                % endfor
+                break
+            }
+            if clip.is_none() {
+                if let Some(origin) = origin {
+                    clip = Some(mask_clip::single_value::SpecifiedValue::from(origin));
+                }
+            }
+            let mut any = false;
+            % for name in "image mode position size repeat origin clip composite".split():
+                any = any || ${name}.is_some();
+            % endfor
+            if any {
+                if let Some(position) = position {
+                    mask_position_x.push(position.horizontal);
+                    mask_position_y.push(position.vertical);
+                } else {
+                    mask_position_x.push(PositionComponent::zero());
+                    mask_position_y.push(PositionComponent::zero());
+                }
+                % for name in "image mode size repeat origin clip composite".split():
+                    if let Some(m_${name}) = ${name} {
+                        mask_${name}.push(m_${name});
+                    } else {
+                        mask_${name}.push(mask_${name}::single_value
+                                                        ::get_initial_specified_value());
+                    }
+                % endfor
+                Ok(())
+            } else {
+                Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+            }
+        })?;
+
+        Ok(expanded! {
+            % for name in "image mode position_x position_y size repeat origin clip composite".split():
+                mask_${name}: mask_${name}::SpecifiedValue(mask_${name}.into()),
+            % endfor
+         })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            use crate::properties::longhands::mask_origin::single_value::computed_value::T as Origin;
+            use crate::properties::longhands::mask_clip::single_value::computed_value::T as Clip;
+
+            let len = self.mask_image.0.len();
+            if len == 0 {
+                return Ok(());
+            }
+            % for name in "mode position_x position_y size repeat origin clip composite".split():
+                if self.mask_${name}.0.len() != len {
+                    return Ok(());
+                }
+            % endfor
+
+            for i in 0..len {
+                if i > 0 {
+                    dest.write_str(", ")?;
+                }
+
+                % for name in "image mode position_x position_y size repeat origin clip composite".split():
+                    let ${name} = &self.mask_${name}.0[i];
+                % endfor
+
+                image.to_css(dest)?;
+
+                if *mode != mask_mode::single_value::get_initial_specified_value() {
+                    dest.write_char(' ')?;
+                    mode.to_css(dest)?;
+                }
+
+                if *position_x != PositionComponent::zero() ||
+                    *position_y != PositionComponent::zero() ||
+                    *size != mask_size::single_value::get_initial_specified_value()
+                {
+                    dest.write_char(' ')?;
+                    Position {
+                        horizontal: position_x.clone(),
+                        vertical: position_y.clone()
+                    }.to_css(dest)?;
+
+                    if *size != mask_size::single_value::get_initial_specified_value() {
+                        dest.write_str(" / ")?;
+                        size.to_css(dest)?;
+                    }
+                }
+
+                if *repeat != mask_repeat::single_value::get_initial_specified_value() {
+                    dest.write_char(' ')?;
+                    repeat.to_css(dest)?;
+                }
+
+                if *origin != Origin::BorderBox || *clip != Clip::BorderBox {
+                    dest.write_char(' ')?;
+                    origin.to_css(dest)?;
+                    if *clip != From::from(*origin) {
+                        dest.write_char(' ')?;
+                        clip.to_css(dest)?;
+                    }
+                }
+
+                if *composite != mask_composite::single_value::get_initial_specified_value() {
+                    dest.write_char(' ')?;
+                    composite.to_css(dest)?;
+                }
+            }
+
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand name="mask-position" engines="gecko" extra_prefixes="webkit"
+                    flags="SHORTHAND_IN_GETCS"
+                    sub_properties="mask-position-x mask-position-y"
+                    spec="https://drafts.csswg.org/css-masks-4/#the-mask-position">
+    use crate::properties::longhands::{mask_position_x,mask_position_y};
+    use crate::values::specified::position::Position;
+    use crate::parser::Parse;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        // Vec grows from 0 to 4 by default on first push().  So allocate with
+        // capacity 1, so in the common case of only one item we don't way
+        // overallocate, then shrink.  Note that we always push at least one
+        // item if parsing succeeds.
+        let mut position_x = Vec::with_capacity(1);
+        let mut position_y = Vec::with_capacity(1);
+        let mut any = false;
+
+        input.parse_comma_separated(|input| {
+            let value = Position::parse(context, input)?;
+            position_x.push(value.horizontal);
+            position_y.push(value.vertical);
+            any = true;
+            Ok(())
+        })?;
+
+        if !any {
+            return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError));
+        }
+
+
+        Ok(expanded! {
+            mask_position_x: mask_position_x::SpecifiedValue(position_x.into()),
+            mask_position_y: mask_position_y::SpecifiedValue(position_y.into()),
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            let len = self.mask_position_x.0.len();
+            if len == 0 || self.mask_position_y.0.len() != len {
+                return Ok(());
+            }
+
+            for i in 0..len {
+                Position {
+                    horizontal: self.mask_position_x.0[i].clone(),
+                    vertical: self.mask_position_y.0[i].clone()
+                }.to_css(dest)?;
+
+                if i < len - 1 {
+                    dest.write_str(", ")?;
+                }
+            }
+
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
diff --git a/servo/components/style/properties/shorthands/text.mako.rs b/servo/components/style/properties/shorthands/text.mako.rs
new file mode 100644
index 0000000000..5b071be2c4
--- /dev/null
+++ b/servo/components/style/properties/shorthands/text.mako.rs
@@ -0,0 +1,120 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+<%helpers:shorthand name="text-decoration"
+                    engines="gecko servo-2013 servo-2020"
+                    flags="SHORTHAND_IN_GETCS"
+                    sub_properties="text-decoration-line
+                    ${' text-decoration-style text-decoration-color text-decoration-thickness' if engine == 'gecko' else ''}"
+                    spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration">
+    % if engine == "gecko":
+        use crate::values::specified;
+        use crate::properties::longhands::{text_decoration_style, text_decoration_color, text_decoration_thickness};
+    % endif
+    use crate::properties::longhands::text_decoration_line;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        % if engine == "gecko":
+            let (mut line, mut style, mut color, mut thickness, mut any) = (None, None, None, None, false);
+        % else:
+            let (mut line, mut any) = (None, false);
+        % endif
+
+        loop {
+            macro_rules! parse_component {
+                ($value:ident, $module:ident) => (
+                    if $value.is_none() {
+                        if let Ok(value) = input.try_parse(|input| $module::parse(context, input)) {
+                            $value = Some(value);
+                            any = true;
+                            continue;
+                        }
+                    }
+                )
+            }
+
+            parse_component!(line, text_decoration_line);
+
+            % if engine == "gecko":
+                parse_component!(style, text_decoration_style);
+                parse_component!(color, text_decoration_color);
+                parse_component!(thickness, text_decoration_thickness);
+            % endif
+
+            break;
+        }
+
+        if !any {
+            return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError));
+        }
+
+        Ok(expanded! {
+            text_decoration_line: unwrap_or_initial!(text_decoration_line, line),
+
+            % if engine == "gecko":
+                text_decoration_style: unwrap_or_initial!(text_decoration_style, style),
+                text_decoration_color: unwrap_or_initial!(text_decoration_color, color),
+                text_decoration_thickness: unwrap_or_initial!(text_decoration_thickness, thickness),
+            % endif
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        #[allow(unused)]
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            use crate::values::specified::TextDecorationLine;
+
+            let (is_solid_style, is_current_color, is_auto_thickness) =
+            (
+            % if engine == "gecko":
+                *self.text_decoration_style == text_decoration_style::SpecifiedValue::Solid,
+                *self.text_decoration_color == specified::Color::CurrentColor,
+                self.text_decoration_thickness.is_auto()
+            % else:
+                true, true, true
+            % endif
+            );
+
+            let mut has_value = false;
+            let is_none = *self.text_decoration_line == TextDecorationLine::none();
+            if (is_solid_style && is_current_color && is_auto_thickness) || !is_none {
+                self.text_decoration_line.to_css(dest)?;
+                has_value = true;
+            }
+
+            if !is_auto_thickness {
+                if has_value {
+                    dest.write_char(' ')?;
+                }
+                self.text_decoration_thickness.to_css(dest)?;
+                has_value = true;
+            }
+
+            % if engine == "gecko":
+            if !is_solid_style {
+                if has_value {
+                    dest.write_char(' ')?;
+                }
+                self.text_decoration_style.to_css(dest)?;
+                has_value = true;
+            }
+
+            if !is_current_color {
+                if has_value {
+                    dest.write_char(' ')?;
+                }
+                self.text_decoration_color.to_css(dest)?;
+                has_value = true;
+            }
+            % endif
+
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
diff --git a/servo/components/style/properties/shorthands/ui.mako.rs b/servo/components/style/properties/shorthands/ui.mako.rs
new file mode 100644
index 0000000000..02bed12806
--- /dev/null
+++ b/servo/components/style/properties/shorthands/ui.mako.rs
@@ -0,0 +1,427 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+<%namespace name="helpers" file="/helpers.mako.rs" />
+
+macro_rules! try_parse_one {
+    ($context: expr, $input: expr, $var: ident, $prop_module: ident) => {
+        if $var.is_none() {
+            if let Ok(value) = $input.try_parse(|i| {
+                $prop_module::single_value::parse($context, i)
+            }) {
+                $var = Some(value);
+                continue;
+            }
+        }
+    };
+}
+
+<%helpers:shorthand name="transition"
+                    engines="gecko servo-2013 servo-2020"
+                    extra_prefixes="moz:layout.css.prefixes.transitions webkit"
+                    sub_properties="transition-property transition-duration
+                                    transition-timing-function
+                                    transition-delay"
+                    spec="https://drafts.csswg.org/css-transitions/#propdef-transition">
+    use crate::parser::Parse;
+    % for prop in "delay duration property timing_function".split():
+    use crate::properties::longhands::transition_${prop};
+    % endfor
+    use crate::values::specified::TransitionProperty;
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        struct SingleTransition {
+            % for prop in "duration timing_function delay".split():
+            transition_${prop}: transition_${prop}::SingleSpecifiedValue,
+            % endfor
+            // Unlike other properties, transition-property uses an Option<> to
+            // represent 'none' as `None`.
+            transition_property: Option<TransitionProperty>,
+        }
+
+        fn parse_one_transition<'i, 't>(
+            context: &ParserContext,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<SingleTransition,ParseError<'i>> {
+            % for prop in "property duration timing_function delay".split():
+            let mut ${prop} = None;
+            % endfor
+
+            let mut parsed = 0;
+            loop {
+                parsed += 1;
+
+                try_parse_one!(context, input, duration, transition_duration);
+                try_parse_one!(context, input, timing_function, transition_timing_function);
+                try_parse_one!(context, input, delay, transition_delay);
+                // Must check 'transition-property' after 'transition-timing-function' since
+                // 'transition-property' accepts any keyword.
+                if property.is_none() {
+                    if let Ok(value) = input.try_parse(|i| TransitionProperty::parse(context, i)) {
+                        property = Some(Some(value));
+                        continue;
+                    }
+
+                    if input.try_parse(|i| i.expect_ident_matching("none")).is_ok() {
+                        // 'none' is not a valid value for <single-transition-property>,
+                        // so it's not acceptable in the function above.
+                        property = Some(None);
+                        continue;
+                    }
+                }
+
+                parsed -= 1;
+                break
+            }
+
+            if parsed != 0 {
+                Ok(SingleTransition {
+                    % for prop in "duration timing_function delay".split():
+                    transition_${prop}: ${prop}.unwrap_or_else(transition_${prop}::single_value
+                                                                                 ::get_initial_specified_value),
+                    % endfor
+                    transition_property: property.unwrap_or(
+                        Some(transition_property::single_value::get_initial_specified_value())),
+                })
+            } else {
+                Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+            }
+        }
+
+        % for prop in "property duration timing_function delay".split():
+        let mut ${prop}s = Vec::new();
+        % endfor
+
+        let results = input.parse_comma_separated(|i| parse_one_transition(context, i))?;
+        let multiple_items = results.len() >= 2;
+        for result in results {
+            if let Some(value) = result.transition_property {
+                propertys.push(value);
+            } else if multiple_items {
+                // If there is more than one item, and any of transitions has 'none',
+                // then it's invalid. Othersize, leave propertys to be empty (which
+                // means "transition-property: none");
+                return Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError));
+            }
+
+            % for prop in "duration timing_function delay".split():
+            ${prop}s.push(result.transition_${prop});
+            % endfor
+        }
+
+        Ok(expanded! {
+            % for prop in "property duration timing_function delay".split():
+            transition_${prop}: transition_${prop}::SpecifiedValue(${prop}s.into()),
+            % endfor
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            let property_len = self.transition_property.0.len();
+
+            // There are two cases that we can do shorthand serialization:
+            // * when all value lists have the same length, or
+            // * when transition-property is none, and other value lists have exactly one item.
+            if property_len == 0 {
+                % for name in "duration delay timing_function".split():
+                    if self.transition_${name}.0.len() != 1 {
+                        return Ok(());
+                    }
+                % endfor
+            } else {
+                % for name in "duration delay timing_function".split():
+                    if self.transition_${name}.0.len() != property_len {
+                        return Ok(());
+                    }
+                % endfor
+            }
+
+            // Representative length.
+            let len = self.transition_duration.0.len();
+
+            for i in 0..len {
+                if i != 0 {
+                    dest.write_str(", ")?;
+                }
+                if property_len == 0 {
+                    dest.write_str("none")?;
+                } else {
+                    self.transition_property.0[i].to_css(dest)?;
+                }
+                % for name in "duration timing_function delay".split():
+                    dest.write_char(' ')?;
+                    self.transition_${name}.0[i].to_css(dest)?;
+                % endfor
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand name="animation"
+                    engines="gecko servo-2013 servo-2020"
+                    extra_prefixes="moz:layout.css.prefixes.animations webkit"
+                    sub_properties="animation-name animation-duration
+                                    animation-timing-function animation-delay
+                                    animation-iteration-count animation-direction
+                                    animation-fill-mode animation-play-state animation-timeline"
+                    rule_types_allowed="Style"
+                    spec="https://drafts.csswg.org/css-animations/#propdef-animation">
+    <%
+        props = "name timeline duration timing_function delay iteration_count \
+                 direction fill_mode play_state".split()
+    %>
+    % for prop in props:
+    use crate::properties::longhands::animation_${prop};
+    % endfor
+
+    pub fn parse_value<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        struct SingleAnimation {
+            % for prop in props:
+            animation_${prop}: animation_${prop}::SingleSpecifiedValue,
+            % endfor
+        }
+
+        fn parse_one_animation<'i, 't>(
+            context: &ParserContext,
+            input: &mut Parser<'i, 't>,
+        ) -> Result<SingleAnimation, ParseError<'i>> {
+            % for prop in props:
+            let mut ${prop} = None;
+            % endfor
+
+            let mut parsed = 0;
+            // NB: Name must be the last one here so that keywords valid for other
+            // longhands are not interpreted as names.
+            //
+            // Also, duration must be before delay, see
+            // https://drafts.csswg.org/css-animations/#typedef-single-animation
+            loop {
+                parsed += 1;
+                try_parse_one!(context, input, duration, animation_duration);
+                try_parse_one!(context, input, timing_function, animation_timing_function);
+                try_parse_one!(context, input, delay, animation_delay);
+                try_parse_one!(context, input, iteration_count, animation_iteration_count);
+                try_parse_one!(context, input, direction, animation_direction);
+                try_parse_one!(context, input, fill_mode, animation_fill_mode);
+                try_parse_one!(context, input, play_state, animation_play_state);
+                try_parse_one!(context, input, name, animation_name);
+                if static_prefs::pref!("layout.css.scroll-driven-animations.enabled") {
+                    try_parse_one!(context, input, timeline, animation_timeline);
+                }
+
+                parsed -= 1;
+                break
+            }
+
+            // If nothing is parsed, this is an invalid entry.
+            if parsed == 0 {
+                Err(input.new_custom_error(StyleParseErrorKind::UnspecifiedError))
+            } else {
+                Ok(SingleAnimation {
+                    % for prop in props:
+                    animation_${prop}: ${prop}.unwrap_or_else(animation_${prop}::single_value
+                                                              ::get_initial_specified_value),
+                    % endfor
+                })
+            }
+        }
+
+        % for prop in props:
+        let mut ${prop}s = vec![];
+        % endfor
+
+        let results = input.parse_comma_separated(|i| parse_one_animation(context, i))?;
+        for result in results.into_iter() {
+            % for prop in props:
+            ${prop}s.push(result.animation_${prop});
+            % endfor
+        }
+
+        Ok(expanded! {
+            % for prop in props:
+            animation_${prop}: animation_${prop}::SpecifiedValue(${prop}s.into()),
+            % endfor
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            let len = self.animation_name.0.len();
+            // There should be at least one declared value
+            if len == 0 {
+                return Ok(());
+            }
+
+            // If any value list length is differs then we don't do a shorthand serialization
+            // either.
+            % for name in props[2:]:
+                if len != self.animation_${name}.0.len() {
+                    return Ok(())
+                }
+            % endfor
+
+            // If the preference of animation-timeline is disabled, `self.animation_timeline` is
+            // None.
+            if self.animation_timeline.map_or(false, |v| len != v.0.len()) {
+                return Ok(());
+            }
+
+            for i in 0..len {
+                if i != 0 {
+                    dest.write_str(", ")?;
+                }
+
+                % for name in props[2:]:
+                    self.animation_${name}.0[i].to_css(dest)?;
+                    dest.write_char(' ')?;
+                % endfor
+
+                self.animation_name.0[i].to_css(dest)?;
+
+                // Based on the spec, the default values of other properties must be output in at
+                // least the cases necessary to distinguish an animation-name. The serialization
+                // order of animation-timeline is always later than animation-name, so it's fine
+                // to not serialize it if it is the default value. It's still possible to
+                // distinguish them (because we always serialize animation-name).
+                // https://drafts.csswg.org/css-animations-1/#animation
+                // https://drafts.csswg.org/css-animations-2/#typedef-single-animation
+                //
+                // Note: it's also fine to always serialize this. However, it seems Blink
+                // doesn't serialize default animation-timeline now, so we follow the same rule.
+                if let Some(ref timeline) = self.animation_timeline {
+                    if !timeline.0[i].is_auto() {
+                        dest.write_char(' ')?;
+                        timeline.0[i].to_css(dest)?;
+                    }
+                }
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+<%helpers:shorthand
+    engines="gecko"
+    name="scroll-timeline"
+    sub_properties="scroll-timeline-name scroll-timeline-axis"
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-shorthand"
+>
+    pub fn parse_value<'i>(
+        context: &ParserContext,
+        input: &mut Parser<'i, '_>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        use crate::properties::longhands::{scroll_timeline_axis, scroll_timeline_name};
+
+        let mut names = Vec::with_capacity(1);
+        let mut axes = Vec::with_capacity(1);
+        input.parse_comma_separated(|input| {
+            let name = scroll_timeline_name::single_value::parse(context, input)?;
+            let axis = input.try_parse(|i| scroll_timeline_axis::single_value::parse(context, i));
+
+            names.push(name);
+            axes.push(axis.unwrap_or_default());
+
+            Ok(())
+        })?;
+
+        Ok(expanded! {
+            scroll_timeline_name: scroll_timeline_name::SpecifiedValue(names.into()),
+            scroll_timeline_axis: scroll_timeline_axis::SpecifiedValue(axes.into()),
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            // If any value list length is differs then we don't do a shorthand serialization
+            // either.
+            let len = self.scroll_timeline_name.0.len();
+            if len != self.scroll_timeline_axis.0.len() {
+                return Ok(());
+            }
+
+            for i in 0..len {
+                if i != 0 {
+                    dest.write_str(", ")?;
+                }
+
+                self.scroll_timeline_name.0[i].to_css(dest)?;
+
+                if self.scroll_timeline_axis.0[i] != Default::default() {
+                    dest.write_char(' ')?;
+                    self.scroll_timeline_axis.0[i].to_css(dest)?;
+                }
+
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>
+
+// Note: view-timeline shorthand doesn't take view-timeline-inset into account.
+<%helpers:shorthand
+    engines="gecko"
+    name="view-timeline"
+    sub_properties="view-timeline-name view-timeline-axis"
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/scroll-animations-1/#view-timeline-shorthand"
+>
+    pub fn parse_value<'i>(
+        context: &ParserContext,
+        input: &mut Parser<'i, '_>,
+    ) -> Result<Longhands, ParseError<'i>> {
+        use crate::properties::longhands::{view_timeline_axis, view_timeline_name};
+
+        let mut names = Vec::with_capacity(1);
+        let mut axes = Vec::with_capacity(1);
+        input.parse_comma_separated(|input| {
+            let name = view_timeline_name::single_value::parse(context, input)?;
+            let axis = input.try_parse(|i| view_timeline_axis::single_value::parse(context, i));
+
+            names.push(name);
+            axes.push(axis.unwrap_or_default());
+
+            Ok(())
+        })?;
+
+        Ok(expanded! {
+            view_timeline_name: view_timeline_name::SpecifiedValue(names.into()),
+            view_timeline_axis: view_timeline_axis::SpecifiedValue(axes.into()),
+        })
+    }
+
+    impl<'a> ToCss for LonghandsToSerialize<'a>  {
+        fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
+            // If any value list length is differs then we don't do a shorthand serialization
+            // either.
+            let len = self.view_timeline_name.0.len();
+            if len != self.view_timeline_axis.0.len() {
+                return Ok(());
+            }
+
+            for i in 0..len {
+                if i != 0 {
+                    dest.write_str(", ")?;
+                }
+
+                self.view_timeline_name.0[i].to_css(dest)?;
+
+                if self.view_timeline_axis.0[i] != Default::default() {
+                    dest.write_char(' ')?;
+                    self.view_timeline_axis.0[i].to_css(dest)?;
+                }
+
+            }
+            Ok(())
+        }
+    }
+</%helpers:shorthand>