From f1300bb98b0267b552a3f12e64e30f2f414213a3 Mon Sep 17 00:00:00 2001
From: Simon Sapin <simon.sapin@exyr.org>
Date: Fri, 26 Jul 2019 21:54:42 +0200
Subject: [PATCH 1/3] Auto-generate CSSStyleDeclaration.webidl for CSS
 properties based on the style crate

---
 components/script/CMakeLists.txt              |   8 +-
 components/script/build.rs                    |   9 +-
 .../script/dom/bindings/codegen/GlobalGen.py  |  61 ++-
 .../dom/bindings/codegen/parser/WebIDL.py     |   2 +-
 .../dom/webidls/CSSStyleDeclaration.webidl    | 477 +-----------------
 components/style/Cargo.toml                   |   2 +-
 components/style/properties/build.py          |   9 +
 7 files changed, 83 insertions(+), 485 deletions(-)

diff --git a/components/script/CMakeLists.txt b/components/script/CMakeLists.txt
index 5cf4071a144..3bb3f2d5dbb 100644
--- a/components/script/CMakeLists.txt
+++ b/components/script/CMakeLists.txt
@@ -41,13 +41,11 @@ set(globalgen_deps
   ${bindings_src}/Configuration.py
   ${bindings_src}/CodegenRust.py
   ${bindings_src}/parser/WebIDL.py
+  ${PROJECT_BINARY_DIR}/css_properties.json
   )
 set(bindinggen_deps
+  ${globalgen_deps}
   ${bindings_src}/BindingGen.py
-  ${bindings_src}/Bindings.conf
-  ${bindings_src}/Configuration.py
-  ${bindings_src}/CodegenRust.py
-  ${bindings_src}/parser/WebIDL.py
   )
 
 add_custom_command(
@@ -71,6 +69,7 @@ add_custom_command(
                  ${bindings_src}/Bindings.conf
                  .
                  ${PROJECT_SOURCE_DIR}
+                 ${PROJECT_BINARY_DIR}/css_properties.json
   DEPENDS Bindings _cache ${globalgen_deps} ${webidls}
   VERBATIM
   )
@@ -85,6 +84,7 @@ add_custom_command(
                  ${bindings_src}/Bindings.conf
                  .
                  ${PROJECT_SOURCE_DIR}
+                 ${PROJECT_BINARY_DIR}/css_properties.json
   DEPENDS _cache ${globalgen_deps} ${webidls}
   VERBATIM
   )
diff --git a/components/script/build.rs b/components/script/build.rs
index 1b8ed578387..1af9fbf7648 100644
--- a/components/script/build.rs
+++ b/components/script/build.rs
@@ -15,6 +15,13 @@ use std::time::Instant;
 fn main() {
     let start = Instant::now();
 
+    let style_out_dir = PathBuf::from(env::var_os("DEP_SERVO_STYLE_CRATE_OUT_DIR").unwrap());
+    let out_dir = PathBuf::from(env::var_os("OUT_DIR").unwrap());
+    let build_dir = out_dir.join("build");
+    let json = "css_properties.json";
+    let _ = std::fs::create_dir(&build_dir); // Ignore errors: they most likely indicate it already exists
+    std::fs::copy(style_out_dir.join(json), build_dir.join(json)).unwrap();
+
     // This must use the Ninja generator -- it's the only one that
     // parallelizes cmake's output properly.  (Cmake generates
     // separate makefiles, each of which try to build
@@ -35,7 +42,7 @@ fn main() {
         start.elapsed().as_secs()
     );
 
-    let json = PathBuf::from(env::var_os("OUT_DIR").unwrap())
+    let json = out_dir
         .join("build")
         .join("InterfaceObjectMapData.json");
     let json: Value = serde_json::from_reader(File::open(&json).unwrap()).unwrap();
diff --git a/components/script/dom/bindings/codegen/GlobalGen.py b/components/script/dom/bindings/codegen/GlobalGen.py
index 20dea28a9d1..9fe736e71fd 100644
--- a/components/script/dom/bindings/codegen/GlobalGen.py
+++ b/components/script/dom/bindings/codegen/GlobalGen.py
@@ -7,6 +7,7 @@
 
 import sys
 import os
+import json
 sys.path.append(os.path.join(".", "parser"))
 sys.path.append(os.path.join(".", "ply"))
 import WebIDL
@@ -28,7 +29,7 @@ def generate_file(config, name, filename):
 def main():
     # Parse arguments.
     from optparse import OptionParser
-    usageString = "usage: %prog [options] configFile outputdir webidldir [files]"
+    usageString = "usage: %prog [options] configFile outputdir webidldir cssProperties.json [files]"
     o = OptionParser(usage=usageString)
     o.add_option("--cachedir", dest='cachedir', default=None,
                  help="Directory in which to cache lex/parse tables.")
@@ -44,8 +45,9 @@ def main():
     configFile = args[0]
     outputdir = args[1]
     baseDir = args[2]
+    css_properties_json = args[3]
     if options.filelist is not None:
-        fileList = (l.strip() for l in open(options.filelist).xreadlines())
+        fileList = [l.strip() for l in open(options.filelist).xreadlines()]
     else:
         fileList = args[3:]
 
@@ -56,6 +58,9 @@ def main():
         with open(fullPath, 'rb') as f:
             lines = f.readlines()
         parser.parse(''.join(lines), fullPath)
+
+    add_css_properties_attributes(fileList, css_properties_json, parser)
+
     parserResults = parser.finish()
 
     if not options.only_html:
@@ -86,5 +91,57 @@ def main():
     for name, filename in to_generate:
         generate_file(config, name, os.path.join(outputdir, filename))
 
+
+def add_css_properties_attributes(webidl_files, css_properties_json, parser):
+    for filename in webidl_files:
+        if os.path.basename(filename) == "CSSStyleDeclaration.webidl":
+            break
+    else:
+        return
+
+    css_properties = json.load(open(css_properties_json, "rb"))
+    idl = "partial interface CSSStyleDeclaration {\n%s\n};\n" % "\n".join(
+        "  [%sCEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString %s;" % (
+            ('Pref="%s", ' % pref if pref else ""),
+            attribute_name
+        )
+        for (property_name, pref) in css_properties
+        for attribute_name in attribute_names(property_name)
+    )
+    parser.parse(idl.encode("utf-8"), "CSSStyleDeclaration_generated.webidl")
+
+
+def attribute_names(property_name):
+    # https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-dashed-attribute
+    if property_name != "float":
+        yield property_name
+    else:
+        yield "_float"
+
+    # https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-camel-cased-attribute
+    if "-" in property_name:
+        yield "".join(camel_case(property_name))
+
+    # https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-webkit-cased-attribute
+    if property_name.startswith("-webkit-"):
+        yield "".join(camel_case(property_name), True)
+
+
+# https://drafts.csswg.org/cssom/#css-property-to-idl-attribute
+def camel_case(chars, webkit_prefixed=False):
+    if webkit_prefixed:
+        chars = chars[1:]
+    next_is_uppercase = False
+    for c in chars:
+        if c == '-':
+            next_is_uppercase = True
+        elif next_is_uppercase:
+            next_is_uppercase = False
+            # Should be ASCII-uppercase, but all non-custom CSS property names are within ASCII
+            yield c.upper()
+        else:
+            yield c
+
+
 if __name__ == '__main__':
     main()
diff --git a/components/script/dom/bindings/codegen/parser/WebIDL.py b/components/script/dom/bindings/codegen/parser/WebIDL.py
index 7ea8423e860..edfdcf9d745 100644
--- a/components/script/dom/bindings/codegen/parser/WebIDL.py
+++ b/components/script/dom/bindings/codegen/parser/WebIDL.py
@@ -3344,7 +3344,7 @@ class IDLBuiltinType(IDLType):
                                       [self.location, attribute.location])
                 assert not self.nullable()
                 if not attribute.hasValue():
-                    raise WebIDLError("[TreatNullAs] must take an identifier argument"
+                    raise WebIDLError("[TreatNullAs] must take an identifier argument",
                                       [attribute.location])
                 value = attribute.value()
                 if value != 'EmptyString':
diff --git a/components/script/dom/webidls/CSSStyleDeclaration.webidl b/components/script/dom/webidls/CSSStyleDeclaration.webidl
index a49d3ec465a..7865195360f 100644
--- a/components/script/dom/webidls/CSSStyleDeclaration.webidl
+++ b/components/script/dom/webidls/CSSStyleDeclaration.webidl
@@ -26,479 +26,4 @@ interface CSSStyleDeclaration {
            attribute DOMString cssFloat;
 };
 
-partial interface CSSStyleDeclaration {
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString all;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backgroundColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backgroundPosition;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background-position;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backgroundPositionX;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background-position-x;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backgroundPositionY;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background-position-y;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backgroundRepeat;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background-repeat;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backgroundImage;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background-image;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backgroundAttachment;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background-attachment;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backgroundSize;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background-size;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backgroundOrigin;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background-origin;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backgroundClip;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString background-clip;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderRadius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-radius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderSpacing;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-spacing;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBottom;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-bottom;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBottomColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-bottom-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBottomLeftRadius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-bottom-left-radius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBottomRightRadius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-bottom-right-radius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBottomStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-bottom-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBottomWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-bottom-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderLeft;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-left;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderLeftColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-left-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderLeftStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-left-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderLeftWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-left-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderRight;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-right;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderRightColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-right-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderRightStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-right-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderRightWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-right-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderTop;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-top;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderTopColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-top-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderTopLeftRadius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-top-left-radius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderTopRightRadius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-top-right-radius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderTopStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-top-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderTopWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-top-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-image-source;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderImageSource;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-image-slice;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderImageSlice;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-image-repeat;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderImageRepeat;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-image-outset;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderImageOutset;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-image-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderImageWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-image;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderImage;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-start-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockStartColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-start-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockStartWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-start-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockStartStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-end-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockEndColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-end-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockEndWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-end-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockEndStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-end;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockEnd;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block-start;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlockStart;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-block;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderBlock;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-start-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineStartColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-start-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineStartWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-start-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineStartStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-end-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineEndColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-end-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineEndWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-end-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineEndStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-start;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineStart;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline-end;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInlineEnd;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-inline;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderInline;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString content;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString color;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString display;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString opacity;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString visibility;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString cursor;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString boxSizing;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString box-sizing;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString boxShadow;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString box-shadow;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString textShadow;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString text-shadow;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString _float;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString clear;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString clip;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transform;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transformOrigin;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transform-origin;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString perspective;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString perspectiveOrigin;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString perspective-origin;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transformStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transform-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backfaceVisibility;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString backface-visibility;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString rotate;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString scale;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString translate;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString direction;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString unicodeBidi;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString unicode-bidi;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString filter;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString inset;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString lineHeight;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString line-height;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString mixBlendMode;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString mix-blend-mode;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString verticalAlign;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString vertical-align;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString listStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString list-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString listStylePosition;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString list-style-position;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString listStyleType;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString list-style-type;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString listStyleImage;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString list-style-image;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString quotes;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString counterIncrement;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString counter-increment;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString counterReset;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString counter-reset;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflow;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflowBlock;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflow-block;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflowInline;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflow-inline;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflowX;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflow-x;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflowY;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflow-y;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflowWrap;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString overflow-wrap;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString tableLayout;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString table-layout;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderCollapse;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-collapse;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString emptyCells;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString empty-cells;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString captionSide;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString caption-side;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString whiteSpace;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString white-space;
-
-  [Pref="layout.writing-mode.enabled", CEReactions, SetterThrows]
-  attribute [TreatNullAs=EmptyString] DOMString writingMode;
-  [Pref="layout.writing-mode.enabled", CEReactions, SetterThrows]
-  attribute [TreatNullAs=EmptyString] DOMString writing-mode;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString letterSpacing;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString letter-spacing;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString wordBreak;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString word-break;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString wordSpacing;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString word-spacing;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString wordWrap;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString word-wrap;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString textOverflow;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString text-overflow;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString textAlign;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString text-align;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString textDecoration;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString text-decoration;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString textDecorationLine;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString text-decoration-line;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString textIndent;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString text-indent;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString textJustify;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString text-justify;
-  // [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString textOrientation;
-  // [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString text-orientation;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString textRendering;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString text-rendering;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString textTransform;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString text-transform;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString font;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString fontFamily;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString font-family;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString fontSize;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString font-size;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString fontStretch;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString font-stretch;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString fontStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString font-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString fontVariant;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString font-variant;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString fontVariantCaps;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString font-variant-caps;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString fontWeight;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString font-weight;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString marginBottom;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin-bottom;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString marginLeft;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin-left;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString marginRight;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin-right;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString marginTop;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin-top;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin-block-start;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString marginBlockStart;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin-block-end;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString marginBlockEnd;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin-block;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString marginBlock;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin-inline-start;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString marginInlineStart;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin-inline-end;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString marginInlineEnd;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString margin-inline;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString marginInline;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString paddingBottom;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding-bottom;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString paddingLeft;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding-left;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString paddingRight;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding-right;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString paddingTop;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding-top;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding-block-start;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString paddingBlockStart;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding-block-end;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString paddingBlockEnd;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding-block;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString paddingBlock;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding-inline-start;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString paddingInlineStart;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding-inline-end;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString paddingInlineEnd;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString padding-inline;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString paddingInline;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString outline;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString outlineColor;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString outline-color;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString outlineStyle;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString outline-style;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString outlineWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString outline-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString outlineOffset;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString outline-offset;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString position;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString pointerEvents;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString pointer-events;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString top;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString right;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString left;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString bottom;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString offset-block-start;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString offsetBlockStart;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString offset-block-end;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString offsetBlockEnd;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString offset-inline-start;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString offsetInlineStart;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString offset-inline-end;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString offsetInlineEnd;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString inset-block-start;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString insetBlockStart;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString inset-block-end;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString insetBlockEnd;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString inset-block;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString insetBlock;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString inset-inline-start;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString insetInlineStart;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString inset-inline-end;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString insetInlineEnd;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString inset-inline;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString insetInline;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString height;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString minHeight;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString min-height;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString maxHeight;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString max-height;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString minWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString min-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString maxWidth;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString max-width;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString block-size;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString blockSize;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString inline-size;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString inlineSize;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString max-block-size;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString maxBlockSize;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString max-inline-size;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString maxInlineSize;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString min-block-size;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString minBlockSize;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString min-inline-size;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString minInlineSize;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString zIndex;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString z-index;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString imageRendering;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString image-rendering;
-
-  [Pref="layout.columns.enabled", CEReactions, SetterThrows]
-  attribute [TreatNullAs=EmptyString] DOMString columnCount;
-  [Pref="layout.columns.enabled", CEReactions, SetterThrows]
-  attribute [TreatNullAs=EmptyString] DOMString column-count;
-  [Pref="layout.columns.enabled", CEReactions, SetterThrows]
-  attribute [TreatNullAs=EmptyString] DOMString columnWidth;
-  [Pref="layout.columns.enabled", CEReactions, SetterThrows]
-  attribute [TreatNullAs=EmptyString] DOMString column-width;
-  [Pref="layout.columns.enabled", CEReactions, SetterThrows]
-  attribute [TreatNullAs=EmptyString] DOMString columns;
-  [Pref="layout.columns.enabled", CEReactions, SetterThrows]
-  attribute [TreatNullAs=EmptyString] DOMString columnGap;
-  [Pref="layout.columns.enabled", CEReactions, SetterThrows]
-  attribute [TreatNullAs=EmptyString] DOMString column-gap;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transition;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transitionDuration;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transition-duration;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transitionTimingFunction;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transition-timing-function;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transitionProperty;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transition-property;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transitionDelay;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString transition-delay;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flex;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flexFlow;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flex-flow;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flexDirection;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flex-direction;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flexWrap;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flex-wrap;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString justifyContent;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString justify-content;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString alignItems;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString align-items;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString alignContent;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString align-content;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString order;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flexBasis;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flex-basis;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flexGrow;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flex-grow;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flexShrink;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString flex-shrink;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString alignSelf;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString align-self;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animation;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animation-name;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animationName;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animation-duration;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animationDuration;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animation-timing-function;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animationTimingFunction;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animation-iteration-count;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animationIterationCount;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animation-direction;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animationDirection;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animation-play-state;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animationPlayState;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animation-fill-mode;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animationFillMode;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animation-delay;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString animationDelay;
-
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-end-end-radius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderEndEndRadius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-start-end-radius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderStartEndRadius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-start-start-radius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderStartStartRadius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString border-end-start-radius;
-  [CEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString borderEndStartRadius;
-
-};
+// Auto-generated in GlobalGen.py: accessors for each CSS property
diff --git a/components/style/Cargo.toml b/components/style/Cargo.toml
index d276c5fbc6c..acce17d243b 100644
--- a/components/style/Cargo.toml
+++ b/components/style/Cargo.toml
@@ -8,7 +8,7 @@ publish = false
 build = "build.rs"
 
 # https://github.com/rust-lang/cargo/issues/3544
-links = "for some reason the links key is required to pass data around between build scripts"
+links = "servo_style_crate"
 
 [lib]
 name = "style"
diff --git a/components/style/properties/build.py b/components/style/properties/build.py
index 1967ed3238a..6ee5220857c 100644
--- a/components/style/properties/build.py
+++ b/components/style/properties/build.py
@@ -94,6 +94,15 @@ def main():
             template = os.path.join(BASE, "gecko.mako.rs")
             rust = render(template, data=properties)
             write(OUT_DIR, "gecko_properties.rs", rust)
+
+        if product == "servo":
+            names_and_prefs = [
+                (prop.name, prop.servo_pref)
+                for p in properties.longhands + properties.shorthands
+                if p.enabled_in_content()
+                for prop in [p] + p.alias
+            ]
+            write(OUT_DIR, "css_properties.json", json.dumps(names_and_prefs, indent=4))
     elif output == "geckolib":
         if len(sys.argv) < 4:
             abort(usage)

From ddb4e369ddb8d9bb20142d34e320370cd3be196f Mon Sep 17 00:00:00 2001
From: Simon Sapin <simon.sapin@exyr.org>
Date: Thu, 25 Jul 2019 19:39:32 +0200
Subject: [PATCH 2/3] Stylo: replace product={gecko,servo} with
 engine={gecko,servo-2013,servo-2020}

Renaming the variable helped make sure I looked at every use.
---
 components/layout/Cargo.toml                  |   2 +-
 components/script/build.rs                    |   4 +-
 components/style/Cargo.toml                   |   3 +-
 components/style/build.rs                     |  20 ++-
 components/style/properties/build.py          |  29 ++--
 components/style/properties/cascade.rs        |   9 +-
 components/style/properties/data.py           | 155 +++++++++++-------
 components/style/properties/helpers.mako.rs   |  71 ++++----
 .../helpers/animated_properties.mako.rs       |   6 +-
 .../properties/longhands/background.mako.rs   |  15 +-
 .../style/properties/longhands/border.mako.rs |  23 ++-
 .../style/properties/longhands/box.mako.rs    | 112 +++++++++----
 .../style/properties/longhands/column.mako.rs |  18 +-
 .../properties/longhands/counters.mako.rs     |   6 +-
 .../properties/longhands/effects.mako.rs      |  12 +-
 .../style/properties/longhands/font.mako.rs   |  59 ++++---
 .../longhands/inherited_box.mako.rs           |  22 ++-
 .../longhands/inherited_svg.mako.rs           |  44 ++---
 .../longhands/inherited_table.mako.rs         |   5 +
 .../longhands/inherited_text.mako.rs          |  61 ++++---
 .../properties/longhands/inherited_ui.mako.rs |  13 +-
 .../style/properties/longhands/list.mako.rs   |  26 ++-
 .../style/properties/longhands/margin.mako.rs |   6 +-
 .../properties/longhands/outline.mako.rs      |   9 +-
 .../properties/longhands/padding.mako.rs      |   6 +-
 .../properties/longhands/position.mako.rs     |  69 ++++++--
 .../style/properties/longhands/svg.mako.rs    |  46 +++---
 .../style/properties/longhands/table.mako.rs  |   3 +-
 .../style/properties/longhands/text.mako.rs   |  12 +-
 .../style/properties/longhands/ui.mako.rs     |  18 +-
 .../style/properties/longhands/xul.mako.rs    |  17 +-
 .../style/properties/properties.mako.rs       |  46 ++++--
 .../properties/shorthands/background.mako.rs  |   2 +
 .../properties/shorthands/border.mako.rs      |  48 ++++--
 .../style/properties/shorthands/box.mako.rs   |  12 +-
 .../properties/shorthands/column.mako.rs      |  11 +-
 .../style/properties/shorthands/font.mako.rs  |  74 +++++----
 .../shorthands/inherited_svg.mako.rs          |   7 +-
 .../shorthands/inherited_text.mako.rs         |   9 +-
 .../style/properties/shorthands/list.mako.rs  |   9 +-
 .../properties/shorthands/margin.mako.rs      |   9 +-
 .../properties/shorthands/outline.mako.rs     |  14 +-
 .../properties/shorthands/padding.mako.rs     |   9 +-
 .../properties/shorthands/position.mako.rs    |  83 ++++++----
 .../style/properties/shorthands/svg.mako.rs   |   6 +-
 .../style/properties/shorthands/text.mako.rs  |  18 +-
 components/style/style_adjuster.rs            |   2 +-
 components/style/values/computed/text.rs      |  11 +-
 components/style/values/specified/border.rs   |   7 +
 components/style/values/specified/box.rs      |  48 +++++-
 python/servo/post_build_commands.py           |  11 +-
 tests/unit/style/properties/scaffolding.rs    |   2 +-
 52 files changed, 870 insertions(+), 469 deletions(-)

diff --git a/components/layout/Cargo.toml b/components/layout/Cargo.toml
index 1f6027eab24..9fd616bd679 100644
--- a/components/layout/Cargo.toml
+++ b/components/layout/Cargo.toml
@@ -49,7 +49,7 @@ serde_json = "1.0"
 servo_config = {path = "../config"}
 servo_url = {path = "../url"}
 smallvec = { version = "0.6", features = ["std", "union"] }
-style = {path = "../style", features = ["servo"]}
+style = {path = "../style", features = ["servo", "servo-layout-2013"]}
 style_traits = {path = "../style_traits"}
 unicode-bidi = {version = "0.3", features = ["with_serde"]}
 unicode-script = {version = "0.3", features = ["harfbuzz"]}
diff --git a/components/script/build.rs b/components/script/build.rs
index 1af9fbf7648..d044b6e4fb4 100644
--- a/components/script/build.rs
+++ b/components/script/build.rs
@@ -42,9 +42,7 @@ fn main() {
         start.elapsed().as_secs()
     );
 
-    let json = out_dir
-        .join("build")
-        .join("InterfaceObjectMapData.json");
+    let json = out_dir.join("build").join("InterfaceObjectMapData.json");
     let json: Value = serde_json::from_reader(File::open(&json).unwrap()).unwrap();
     let mut map = phf_codegen::Map::new();
     for (key, value) in json.as_object().unwrap() {
diff --git a/components/style/Cargo.toml b/components/style/Cargo.toml
index acce17d243b..9c39a957796 100644
--- a/components/style/Cargo.toml
+++ b/components/style/Cargo.toml
@@ -20,7 +20,8 @@ gecko = ["style_traits/gecko", "fallible/known_system_malloc", "bindgen", "regex
 servo = ["serde", "style_traits/servo", "servo_atoms", "servo_config", "html5ever",
          "cssparser/serde", "encoding_rs", "malloc_size_of/servo", "arrayvec/use_union",
          "servo_url", "string_cache", "crossbeam-channel", "to_shmem/servo", "servo_arc/servo"]
-"servo-layout-2020" = []
+servo-layout-2013 = []
+servo-layout-2020 = []
 gecko_debug = []
 gecko_refcount_logging = []
 gecko_profiler = []
diff --git a/components/style/build.rs b/components/style/build.rs
index 0ff8434fa1d..20b3bf5c79f 100644
--- a/components/style/build.rs
+++ b/components/style/build.rs
@@ -89,14 +89,19 @@ fn generate_properties() {
     let script = Path::new(&env::var_os("CARGO_MANIFEST_DIR").unwrap())
         .join("properties")
         .join("build.py");
-    let product = if cfg!(feature = "gecko") {
-        "gecko"
-    } else {
-        "servo"
-    };
+
+    #[cfg(feature = "gecko")]
+    let engine = "gecko";
+
+    #[cfg(feature = "servo-layout-2013")]
+    let engine = "servo-2013";
+
+    #[cfg(feature = "servo-layout-2020")]
+    let engine = "servo-2020";
+
     let status = Command::new(&*PYTHON)
         .arg(&script)
-        .arg(product)
+        .arg(engine)
         .arg("style-crate")
         .status()
         .unwrap();
@@ -117,6 +122,9 @@ fn main() {
              feature flags at the same time."
         );
     }
+    if gecko && (cfg!(feature = "servo-layout-2013") || cfg!(feature = "servo-layout-2020")) {
+        panic!("The 'servo-layout-*' features can only be enabled together with 'servo'.");
+    }
     println!("cargo:rerun-if-changed=build.rs");
     println!("cargo:out_dir={}", env::var("OUT_DIR").unwrap());
     generate_properties();
diff --git a/components/style/properties/build.py b/components/style/properties/build.py
index 6ee5220857c..186018e99a4 100644
--- a/components/style/properties/build.py
+++ b/components/style/properties/build.py
@@ -30,35 +30,36 @@ STYLE_STRUCT_LIST = [
     "effects",
     "font",
     "inherited_box",
+    "inherited_svg",
     "inherited_table",
     "inherited_text",
     "inherited_ui",
-    "inherited_svg",
     "list",
     "margin",
     "outline",
     "padding",
     "position",
+    "svg",
     "table",
     "text",
     "ui",
-    "svg",
     "xul",
 ]
 
 
 def main():
-    usage = ("Usage: %s [ servo | gecko ] [ style-crate | geckolib <template> | html ]" %
+    usage = ("Usage: %s [ servo-2013 | servo-2020 | gecko ] [ style-crate | geckolib <template> | html ]" %
              sys.argv[0])
     if len(sys.argv) < 3:
         abort(usage)
-    product = sys.argv[1]
+    engine = sys.argv[1]
     output = sys.argv[2]
 
-    if product not in ["servo", "gecko"] or output not in ["style-crate", "geckolib", "html"]:
+    if engine not in ["servo-2013", "servo-2020", "gecko"] \
+            or output not in ["style-crate", "geckolib", "html"]:
         abort(usage)
 
-    properties = data.PropertiesData(product=product)
+    properties = data.PropertiesData(engine=engine)
     files = {}
     for kind in ["longhands", "shorthands"]:
         files[kind] = {}
@@ -69,13 +70,13 @@ def main():
                 continue
             files[kind][struct] = render(
                 file_name,
-                product=product,
+                engine=engine,
                 data=properties,
             )
     properties_template = os.path.join(BASE, "properties.mako.rs")
     files["properties"] = render(
         properties_template,
-        product=product,
+        engine=engine,
         data=properties,
         __file__=properties_template,
         OUT_DIR=OUT_DIR,
@@ -90,14 +91,18 @@ def main():
                     files[kind][struct],
                 )
 
-        if product == "gecko":
+        if engine == "gecko":
             template = os.path.join(BASE, "gecko.mako.rs")
             rust = render(template, data=properties)
             write(OUT_DIR, "gecko_properties.rs", rust)
 
-        if product == "servo":
+        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"
             names_and_prefs = [
-                (prop.name, prop.servo_pref)
+                (prop.name, getattr(prop, pref_attr))
                 for p in properties.longhands + properties.shorthands
                 if p.enabled_in_content()
                 for prop in [p] + p.alias
@@ -151,7 +156,7 @@ def write(directory, filename, content):
 def write_html(properties):
     properties = dict(
         (p.name, {
-            "flag": p.servo_pref,
+            "flag": p.servo_2013_pref,
             "shorthand": hasattr(p, "sub_properties")
         })
         for p in properties.longhands + properties.shorthands
diff --git a/components/style/properties/cascade.rs b/components/style/properties/cascade.rs
index 3d64dde7e2c..c3ce242eadd 100644
--- a/components/style/properties/cascade.rs
+++ b/components/style/properties/cascade.rs
@@ -639,13 +639,8 @@ impl<'a, 'b: 'a> Cascade<'a, 'b> {
 
         #[cfg(feature = "servo")]
         {
-            // TODO(emilio): Use get_font_if_mutated instead.
-            if self.seen.contains(LonghandId::FontStyle) ||
-                self.seen.contains(LonghandId::FontWeight) ||
-                self.seen.contains(LonghandId::FontStretch) ||
-                self.seen.contains(LonghandId::FontFamily)
-            {
-                builder.mutate_font().compute_font_hash();
+            if let Some(font) = builder.get_font_if_mutated() {
+                font.compute_font_hash();
             }
         }
     }
diff --git a/components/style/properties/data.py b/components/style/properties/data.py
index dd501fb8fc2..46cb724e11d 100644
--- a/components/style/properties/data.py
+++ b/components/style/properties/data.py
@@ -29,8 +29,8 @@ SYSTEM_FONT_LONGHANDS = """font_family font_size font_style
                            font_optical_sizing""".split()
 
 
-def maybe_moz_logical_alias(product, side, prop):
-    if product == "gecko" and side[1]:
+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
@@ -73,9 +73,12 @@ def parse_aliases(value):
 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_values=None,
-                 aliases=None,
-                 extra_gecko_aliases=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
@@ -87,40 +90,35 @@ class Keyword(object):
             "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_values = (extra_servo_values or "").split()
-        self.aliases = parse_aliases(aliases or "")
-        self.extra_gecko_aliases = parse_aliases(extra_gecko_aliases or "")
+        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 gecko_values(self):
-        return self.values + self.extra_gecko_values
-
-    def servo_values(self):
-        return self.values + self.extra_servo_values
-
-    def gecko_aliases(self):
-        aliases = self.aliases.copy()
-        aliases.update(self.extra_gecko_aliases)
-        return aliases
-
-    def values_for(self, product):
-        if product == "gecko":
-            return self.gecko_values()
-        elif product == "servo":
-            return self.servo_values()
+    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 product: " + product)
+            raise Exception("Bad engine: " + engine)
 
-    def aliases_for(self, product):
-        if product == "gecko":
-            return self.gecko_aliases()
-        elif product == "servo":
-            return self.aliases
+    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 product: " + product)
+            raise Exception("Bad engine: " + engine)
 
     def gecko_constant(self, value):
         moz_stripped = (value.replace("-moz-", '')
@@ -172,7 +170,10 @@ def to_phys(name, logical, physical):
 
 class Longhand(object):
     def __init__(self, style_struct, name, spec=None, animation_value_type=None, keyword=None,
-                 predefined_type=None, servo_pref=None, gecko_pref=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,
@@ -191,7 +192,8 @@ class Longhand(object):
         self.ident = to_rust_ident(name)
         self.camel_case = to_camel_case(self.ident)
         self.style_struct = style_struct
-        self.servo_pref = servo_pref
+        self.servo_2013_pref = servo_2013_pref
+        self.servo_2020_pref = servo_2020_pref
         self.gecko_pref = gecko_pref
         self.has_effect_on_gecko_scrollbars = has_effect_on_gecko_scrollbars
         assert (
@@ -270,10 +272,15 @@ class Longhand(object):
         return [to_phys(self.name, logical_side, physical_side)
                 for physical_side in physical]
 
-    def experimental(self, product):
-        if product == "gecko":
+    def experimental(self, engine):
+        if engine == "gecko":
             return bool(self.gecko_pref)
-        return bool(self.servo_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)
 
     # FIXME(emilio): Shorthand and Longhand should really share a base class.
     def explicitly_enabled_in_ua_sheets(self):
@@ -285,10 +292,15 @@ class Longhand(object):
     def enabled_in_content(self):
         return self.enabled_in == "content"
 
-    def may_be_disabled_in(self, shorthand, product):
-        if product == "gecko":
+    def may_be_disabled_in(self, shorthand, engine):
+        if engine == "gecko":
             return self.gecko_pref and self.gecko_pref != shorthand.gecko_pref
-        return self.servo_pref and self.servo_pref != shorthand.servo_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:
@@ -394,7 +406,10 @@ class Longhand(object):
 
 
 class Shorthand(object):
-    def __init__(self, name, sub_properties, spec=None, servo_pref=None, gecko_pref=None,
+    def __init__(self, name, sub_properties, spec=None,
+                 servo_2013_pref=None,
+                 servo_2020_pref=None,
+                 gecko_pref=None,
                  enabled_in="content",
                  allowed_in_keyframe_block=True, alias=None, extra_prefixes=None,
                  allowed_in_page_rule=False, flags=None):
@@ -404,7 +419,8 @@ class Shorthand(object):
         self.spec = spec
         self.ident = to_rust_ident(name)
         self.camel_case = to_camel_case(self.ident)
-        self.servo_pref = servo_pref
+        self.servo_2013_pref = servo_2013_pref
+        self.servo_2020_pref = servo_2020_pref
         self.gecko_pref = gecko_pref
         self.sub_properties = sub_properties
         assert enabled_in in ["", "ua", "chrome", "content"]
@@ -442,10 +458,15 @@ class Shorthand(object):
     def type():
         return "shorthand"
 
-    def experimental(self, product):
-        if product == "gecko":
+    def experimental(self, engine):
+        if engine == "gecko":
             return bool(self.gecko_pref)
-        return bool(self.servo_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)
 
     # FIXME(emilio): Shorthand and Longhand should really share a base class.
     def explicitly_enabled_in_ua_sheets(self):
@@ -468,10 +489,11 @@ class Alias(object):
         self.camel_case = to_camel_case(self.ident)
         self.original = original
         self.enabled_in = original.enabled_in
-        self.servo_pref = original.servo_pref
         self.animatable = original.animatable
-        self.transitionable = original.transitionable
+        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.allowed_in_page_rule = original.allowed_in_page_rule
         self.allowed_in_keyframe_block = original.allowed_in_keyframe_block
 
@@ -479,10 +501,15 @@ class Alias(object):
     def type():
         return "alias"
 
-    def experimental(self, product):
-        if product == "gecko":
+    def experimental(self, engine):
+        if engine == "gecko":
             return bool(self.gecko_pref)
-        return bool(self.servo_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"]
@@ -536,8 +563,8 @@ class StyleStruct(object):
 
 
 class PropertiesData(object):
-    def __init__(self, product):
-        self.product = product
+    def __init__(self, engine):
+        self.engine = engine
         self.style_structs = []
         self.current_style_struct = None
         self.longhands = []
@@ -559,13 +586,13 @@ class PropertiesData(object):
     def add_prefixed_aliases(self, property):
         # FIXME Servo's DOM architecture doesn't support vendor-prefixed properties.
         #       See servo/servo#14941.
-        if self.product == "gecko":
+        if self.engine == "gecko":
             for (prefix, pref) in property.extra_prefixes:
                 property.alias.append(('-%s-%s' % (prefix, property.name), pref))
 
-    def declare_longhand(self, name, products="gecko servo", **kwargs):
-        products = products.split()
-        if self.product not in products:
+    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)
@@ -580,9 +607,9 @@ class PropertiesData(object):
 
         return longhand
 
-    def declare_shorthand(self, name, sub_properties, products="gecko servo", *args, **kwargs):
-        products = products.split()
-        if self.product not in products:
+    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]
@@ -605,7 +632,7 @@ def _add_logical_props(data, props):
     groups = set()
     for prop in props:
         if prop not in data.longhands_by_name:
-            assert data.product == "servo"
+            assert data.engine in ["servo-2013", "servo-2020"]
             continue
         prop = data.longhands_by_name[prop]
         if prop.logical_group:
@@ -616,8 +643,8 @@ def _add_logical_props(data, props):
 
 
 # These are probably Gecko bugs and should be supported per spec.
-def _remove_common_first_line_and_first_letter_properties(props, product):
-    if product == "gecko":
+def _remove_common_first_line_and_first_letter_properties(props, engine):
+    if engine == "gecko":
         props.remove("-moz-tab-size")
         props.remove("hyphens")
         props.remove("line-break")
@@ -644,6 +671,8 @@ class PropertyRestrictions:
 
     @staticmethod
     def shorthand(data, shorthand):
+        if shorthand not in data.shorthands_by_name:
+            return []
         return map(lambda p: p.name, data.shorthands_by_name[shorthand].sub_properties)
 
     @staticmethod
@@ -680,7 +709,7 @@ class PropertyRestrictions:
 
         _add_logical_props(data, props)
 
-        _remove_common_first_line_and_first_letter_properties(props, data.product)
+        _remove_common_first_line_and_first_letter_properties(props, data.engine)
         return props
 
     # https://drafts.csswg.org/css-pseudo/#first-line-styling
@@ -714,7 +743,7 @@ class PropertyRestrictions:
             props.remove(prop)
         props.remove("box-shadow")
 
-        _remove_common_first_line_and_first_letter_properties(props, data.product)
+        _remove_common_first_line_and_first_letter_properties(props, data.engine)
         return props
 
     # https://drafts.csswg.org/css-pseudo/#placeholder
diff --git a/components/style/properties/helpers.mako.rs b/components/style/properties/helpers.mako.rs
index b29c323cf92..5d9e6f54e8f 100644
--- a/components/style/properties/helpers.mako.rs
+++ b/components/style/properties/helpers.mako.rs
@@ -367,7 +367,7 @@
 
         pub use self::single_value::SpecifiedValue as SingleSpecifiedValue;
 
-        % if not simple_vector_bindings and product == "gecko":
+        % if not simple_vector_bindings and engine == "gecko":
         impl SpecifiedValue {
             fn compute_iter<'a, 'cx, 'cx_a>(
                 &'a self,
@@ -486,7 +486,7 @@
                 _ => panic!("entered the wrong cascade_property() implementation"),
             };
 
-            % if property.ident in SYSTEM_FONT_LONGHANDS and product == "gecko":
+            % 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);
                 }
@@ -497,7 +497,7 @@
                     .set_writing_mode_dependency(context.builder.writing_mode);
             % endif
 
-            % if property.is_vector and not property.simple_vector_bindings and product == "gecko":
+            % 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.
                 //
@@ -543,9 +543,13 @@
 <%def name="single_keyword_system(name, values, **kwargs)">
     <%
         keyword_kwargs = {a: kwargs.pop(a, None) for a in [
-            'gecko_constant_prefix', 'gecko_enum_prefix',
-            'extra_gecko_values', 'extra_servo_values',
-            'custom_consts', 'gecko_inexhaustive',
+            'gecko_constant_prefix',
+            'gecko_enum_prefix',
+            'extra_gecko_values',
+            'extra_servo_2013_values',
+            'extra_servo_2020_values',
+            'custom_consts',
+            'gecko_inexhaustive',
         ]}
         keyword = keyword=Keyword(name, values, **keyword_kwargs)
     %>
@@ -569,12 +573,12 @@
                 ToShmem,
             )]
             pub enum T {
-            % for value in keyword.values_for(product):
+            % for value in keyword.values_for(engine):
                 ${to_camel_case(value)},
             % endfor
             }
 
-            ${gecko_keyword_conversion(keyword, keyword.values_for(product), type="T", cast_to="i32")}
+            ${gecko_keyword_conversion(keyword, keyword.values_for(engine), type="T", cast_to="i32")}
         }
 
         #[cfg_attr(feature = "gecko", derive(MallocSizeOf))]
@@ -594,13 +598,15 @@
             fn to_computed_value(&self, _cx: &Context) -> Self::ComputedValue {
                 match *self {
                     SpecifiedValue::Keyword(v) => v,
-                    SpecifiedValue::System(_) => {
-                        % if product == "gecko":
+                    % if engine == "gecko":
+                        SpecifiedValue::System(_) => {
                             _cx.cached_system_font.as_ref().unwrap().${to_rust_ident(name)}
-                        % else:
-                            unreachable!()
-                        % endif
-                    }
+                        }
+                    % else:
+                        SpecifiedValue::System(system_font) => {
+                            match system_font {}
+                        }
+                    % endif
                 }
             }
             fn from_computed_value(other: &computed_value::T) -> Self {
@@ -635,7 +641,7 @@
 <%def name="gecko_keyword_conversion(keyword, values=None, type='SpecifiedValue', cast_to=None)">
     <%
         if not values:
-            values = keyword.values_for(product)
+            values = keyword.values_for(engine)
         maybe_cast = "as %s" % cast_to if cast_to else ""
         const_type = cast_to if cast_to else "u32"
     %>
@@ -703,10 +709,17 @@
             extra_specified=None, 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_values',
-            'aliases', 'extra_gecko_aliases', 'custom_consts',
-            'gecko_inexhaustive', 'gecko_strip_moz_prefix',
+            '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',
         ]}
     %>
 
@@ -716,7 +729,7 @@
             % if include_aliases:
             <%
                 aliases = []
-                for alias, v in keyword.aliases_for(product).iteritems():
+                for alias, v in keyword.aliases_for(engine).iteritems():
                     if variant == v:
                         aliases.append(alias)
             %>
@@ -742,7 +755,7 @@
                 ToShmem,
             )]
             pub enum SpecifiedValue {
-                ${variants(keyword.values_for(product) + extra_specified.split(), bool(extra_specified))}
+                ${variants(keyword.values_for(engine) + extra_specified.split(), bool(extra_specified))}
             }
         % else:
             pub use self::computed_value::T as SpecifiedValue;
@@ -754,7 +767,7 @@
             #[derive(Parse, SpecifiedValueInfo, ToComputedValue, ToShmem)]
             % endif
             pub enum T {
-                ${variants(data.longhands_by_name[name].keyword.values_for(product), not extra_specified)}
+                ${variants(data.longhands_by_name[name].keyword.values_for(engine), not extra_specified)}
             }
         }
         #[inline]
@@ -773,10 +786,10 @@
 
         % if needs_conversion:
             <%
-                conversion_values = keyword.values_for(product)
+                conversion_values = keyword.values_for(engine)
                 if extra_specified:
                     conversion_values += extra_specified.split()
-                conversion_values += keyword.aliases_for(product).keys()
+                conversion_values += keyword.aliases_for(engine).keys()
             %>
             ${gecko_keyword_conversion(keyword, values=conversion_values)}
         % endif
@@ -848,11 +861,11 @@
         pub struct LonghandsToSerialize<'a> {
             % for sub_property in shorthand.sub_properties:
                 pub ${sub_property.ident}:
-                % if sub_property.may_be_disabled_in(shorthand, product):
+                % 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, product):
+                % if sub_property.may_be_disabled_in(shorthand, engine):
                     >,
                 % endif
             % endfor
@@ -891,7 +904,7 @@
 
                     (
                     % for sub_property in shorthand.sub_properties:
-                        % if sub_property.may_be_disabled_in(shorthand, product):
+                        % if sub_property.may_be_disabled_in(shorthand, engine):
                         ${sub_property.ident},
                         % else:
                         Some(${sub_property.ident}),
@@ -919,13 +932,13 @@
             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, product):
+                % if sub_property.may_be_disabled_in(shorthand, engine):
                 if NonCustomPropertyId::from(LonghandId::${sub_property.camel_case}).allowed_in(context) {
                 % endif
                     declarations.push(PropertyDeclaration::${sub_property.camel_case}(
                         longhands.${sub_property.ident}
                     ));
-                % if sub_property.may_be_disabled_in(shorthand, product):
+                % if sub_property.may_be_disabled_in(shorthand, engine):
                 }
                 % endif
                 % endfor
diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index 2dcaf5d3fb2..8bccd5a0bfb 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -391,7 +391,7 @@ impl AnimationValue {
                 x.boxed,
                 not x.is_animatable_with_computed_value,
                 x.style_struct.inherited,
-                x.ident in SYSTEM_FONT_LONGHANDS and product == "gecko",
+                x.ident in SYSTEM_FONT_LONGHANDS and engine == "gecko",
             )
         %>
 
@@ -851,7 +851,7 @@ impl Animate for AnimatedFilter {
                 Ok(Filter::${func}(animate_multiplicative_factor(this, other, procedure)?))
             },
             % endfor
-            % if product == "gecko":
+            % if engine == "gecko":
             (&Filter::DropShadow(ref this), &Filter::DropShadow(ref other)) => {
                 Ok(Filter::DropShadow(this.animate(other, procedure)?))
             },
@@ -871,7 +871,7 @@ impl ToAnimatedZero for AnimatedFilter {
             % for func in ['Brightness', 'Contrast', 'Opacity', 'Saturate']:
             Filter::${func}(_) => Ok(Filter::${func}(1.)),
             % endfor
-            % if product == "gecko":
+            % if engine == "gecko":
             Filter::DropShadow(ref this) => Ok(Filter::DropShadow(this.to_animated_zero()?)),
             % endif
             _ => Err(()),
diff --git a/components/style/properties/longhands/background.mako.rs b/components/style/properties/longhands/background.mako.rs
index 7422c4b474a..5cd0084b366 100644
--- a/components/style/properties/longhands/background.mako.rs
+++ b/components/style/properties/longhands/background.mako.rs
@@ -10,6 +10,7 @@ ${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",
@@ -21,6 +22,8 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "background-image",
     "ImageLayer",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_value="computed::ImageLayer::none()",
     initial_specified_value="specified::ImageLayer::none()",
     spec="https://drafts.csswg.org/css-backgrounds/#the-background-image",
@@ -33,6 +36,7 @@ ${helpers.predefined_type(
     ${helpers.predefined_type(
         "background-position-" + axis,
         "position::" + direction + "Position",
+        engines="gecko servo-2013",
         initial_value="computed::LengthPercentage::zero()",
         initial_specified_value="SpecifiedValue::initial_specified_value()",
         spec="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-" + axis,
@@ -46,6 +50,7 @@ ${helpers.predefined_type(
     "background-repeat",
     "BackgroundRepeat",
     "computed::BackgroundRepeat::repeat()",
+    engines="gecko servo-2013",
     initial_specified_value="specified::BackgroundRepeat::repeat()",
     animation_value_type="discrete",
     vector=True,
@@ -54,7 +59,8 @@ ${helpers.predefined_type(
 
 ${helpers.single_keyword(
     "background-attachment",
-    "scroll fixed" + (" local" if product == "gecko" else ""),
+    "scroll fixed" + (" local" if engine == "gecko" else ""),
+    engines="gecko servo-2013",
     vector=True,
     gecko_enum_prefix="StyleImageLayerAttachment",
     spec="https://drafts.csswg.org/css-backgrounds/#the-background-attachment",
@@ -64,6 +70,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "background-clip",
     "border-box padding-box content-box",
+    engines="gecko servo-2013",
     extra_gecko_values="text",
     vector=True, extra_prefixes="webkit",
     gecko_enum_prefix="StyleGeometryBox",
@@ -75,6 +82,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "background-origin",
     "padding-box border-box content-box",
+    engines="gecko servo-2013",
     vector=True, extra_prefixes="webkit",
     gecko_enum_prefix="StyleGeometryBox",
     gecko_inexhaustive=True,
@@ -85,6 +93,7 @@ ${helpers.single_keyword(
 ${helpers.predefined_type(
     "background-size",
     "BackgroundSize",
+    engines="gecko servo-2013",
     initial_value="computed::BackgroundSize::auto()",
     initial_specified_value="specified::BackgroundSize::auto()",
     spec="https://drafts.csswg.org/css-backgrounds/#the-background-size",
@@ -100,6 +109,8 @@ ${helpers.single_keyword(
     color-burn hard-light soft-light difference exclusion hue
     saturation color luminosity""",
     gecko_constant_prefix="NS_STYLE_BLEND",
-    vector=True, products="gecko", animation_value_type="discrete",
+    vector=True,
+    engines="gecko",
+    animation_value_type="discrete",
     spec="https://drafts.fxtf.org/compositing/#background-blend-mode",
 )}
diff --git a/components/style/properties/longhands/border.mako.rs b/components/style/properties/longhands/border.mako.rs
index 87de168d534..6ac01034bed 100644
--- a/components/style/properties/longhands/border.mako.rs
+++ b/components/style/properties/longhands/border.mako.rs
@@ -23,7 +23,9 @@
     ${helpers.predefined_type(
         "border-%s-color" % side_name, "Color",
         "computed_value::T::currentcolor()",
-        alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-color"),
+        engines="gecko servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
+        alias=maybe_moz_logical_alias(engine, side, "-moz-border-%s-color"),
         spec=maybe_logical_spec(side, "color"),
         animation_value_type="AnimatedColor",
         logical=is_logical,
@@ -35,7 +37,8 @@
     ${helpers.predefined_type(
         "border-%s-style" % side_name, "BorderStyle",
         "specified::BorderStyle::None",
-        alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-style"),
+        engines="gecko servo-2013 servo-2020",
+        alias=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,
@@ -47,8 +50,10 @@
         "border-%s-width" % side_name,
         "BorderSideWidth",
         "crate::values::computed::NonNegativeLength::new(3.)",
+        engines="gecko servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
         computed_type="crate::values::computed::NonNegativeLength",
-        alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-width"),
+        alias=maybe_moz_logical_alias(engine, side, "-moz-border-%s-width"),
         spec=maybe_logical_spec(side, "width"),
         animation_value_type="NonNegativeLength",
         logical=is_logical,
@@ -73,6 +78,7 @@
         "BorderCornerRadius",
         "computed::BorderCornerRadius::zero()",
         "parse",
+        engines="gecko servo-2013",
         extra_prefixes=prefixes,
         spec=maybe_logical_spec(corner, "radius"),
         boxed=True,
@@ -85,18 +91,18 @@
 ${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",
-    products="gecko",
     animation_value_type="discrete",
 )}
 
 ${helpers.single_keyword(
     "-moz-float-edge",
     "content-box margin-box",
+    engines="gecko",
     gecko_ffi_name="mFloatEdge",
     gecko_enum_prefix="StyleFloatEdge",
-    products="gecko",
     spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-float-edge)",
     animation_value_type="discrete",
 )}
@@ -104,18 +110,20 @@ ${helpers.single_keyword(
 ${helpers.predefined_type(
     "border-image-source",
     "ImageLayer",
+    engines="gecko servo-2013",
     initial_value="computed::ImageLayer::none()",
     initial_specified_value="specified::ImageLayer::none()",
     spec="https://drafts.csswg.org/css-backgrounds/#the-background-image",
     vector=False,
     animation_value_type="discrete",
-    boxed=product == "servo",
+    boxed=engine == "servo-2013",
     ignored_when_colors_disabled=True
 )}
 
 ${helpers.predefined_type(
     "border-image-outset",
     "NonNegativeLengthOrNumberRect",
+    engines="gecko servo-2013",
     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",
@@ -127,6 +135,7 @@ ${helpers.predefined_type(
     "border-image-repeat",
     "BorderImageRepeat",
     "computed::BorderImageRepeat::stretch()",
+    engines="gecko servo-2013",
     initial_specified_value="specified::BorderImageRepeat::stretch()",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-backgrounds/#the-border-image-repeat",
@@ -135,6 +144,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "border-image-width",
     "BorderImageWidth",
+    engines="gecko servo-2013",
     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",
@@ -145,6 +155,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "border-image-slice",
     "BorderImageSlice",
+    engines="gecko servo-2013",
     initial_value="computed::BorderImageSlice::hundred_percent()",
     initial_specified_value="specified::BorderImageSlice::hundred_percent()",
     spec="https://drafts.csswg.org/css-backgrounds/#border-image-slice",
diff --git a/components/style/properties/longhands/box.mako.rs b/components/style/properties/longhands/box.mako.rs
index 133960d0379..3244b181709 100644
--- a/components/style/properties/longhands/box.mako.rs
+++ b/components/style/properties/longhands/box.mako.rs
@@ -13,19 +13,19 @@ ${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",
-    needs_context=product == "gecko"
 )}
 
 ${helpers.single_keyword(
     "-moz-top-layer",
     "none top",
+    engines="gecko",
     gecko_constant_prefix="NS_STYLE_TOP_LAYER",
     gecko_ffi_name="mTopLayer",
-    products="gecko",
     animation_value_type="none",
     enabled_in="ua",
     spec="Internal (not web-exposed)",
@@ -36,7 +36,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "-servo-top-layer",
     "none top",
-    products="servo",
+    engines="servo-2013 servo-2020",
     animation_value_type="none",
     enabled_in="ua",
     spec="Internal (not web-exposed)",
@@ -44,7 +44,8 @@ ${helpers.single_keyword(
 
 ${helpers.single_keyword(
     "position",
-    "static absolute relative fixed sticky",
+    "static absolute relative fixed" + (" sticky" if engine in ["gecko", "servo-2013"] else ""),
+    engines="gecko servo-2013 servo-2020",
     animation_value_type="discrete",
     flags="CREATES_STACKING_CONTEXT ABSPOS_CB",
     spec="https://drafts.csswg.org/css-position/#position-property",
@@ -55,6 +56,8 @@ ${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",
@@ -67,6 +70,7 @@ ${helpers.predefined_type(
     "clear",
     "Clear",
     "computed::Clear::None",
+    engines="gecko servo-2013",
     animation_value_type="discrete",
     needs_context=False,
     gecko_ffi_name="mBreakType",
@@ -78,6 +82,7 @@ ${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",
@@ -85,17 +90,22 @@ ${helpers.predefined_type(
 
 // CSS 2.1, Section 11 - Visual effects
 
-${helpers.single_keyword("-servo-overflow-clip-box", "padding-box content-box",
-    products="servo", animation_value_type="none", enabled_in="ua",
+${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)")}
+          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",
-        products="gecko",
+        engines="gecko",
         enabled_in="ua",
         needs_context=False,
         gecko_pref="layout.css.overflow-clip-box.enabled",
@@ -111,6 +121,8 @@ ${helpers.single_keyword("-servo-overflow-clip-box", "padding-box content-box",
         full_name,
         "Overflow",
         "computed::Overflow::Visible",
+        engines="gecko servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
         logical_group="overflow",
         logical=logical,
         animation_value_type="discrete",
@@ -125,8 +137,8 @@ ${helpers.predefined_type(
     "overflow-anchor",
     "OverflowAnchor",
     "computed::OverflowAnchor::Auto",
+    engines="gecko",
     initial_specified_value="specified::OverflowAnchor::Auto",
-    products="gecko",
     needs_context=False,
     gecko_pref="layout.css.scroll-anchoring.enabled",
     spec="https://drafts.csswg.org/css-scroll-anchoring/#exclusion-api",
@@ -139,6 +151,8 @@ ${helpers.predefined_type(
     "transition-duration",
     "Time",
     "computed::Time::zero()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::Time::zero()",
     parse_method="parse_non_negative",
     vector=True,
@@ -152,6 +166,8 @@ ${helpers.predefined_type(
     "transition-timing-function",
     "TimingFunction",
     "computed::TimingFunction::ease()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::TimingFunction::ease()",
     vector=True,
     need_index=True,
@@ -164,6 +180,8 @@ ${helpers.predefined_type(
     "transition-property",
     "TransitionProperty",
     "computed::TransitionProperty::all()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::TransitionProperty::all()",
     vector=True,
     allow_empty="NotInitial",
@@ -177,6 +195,8 @@ ${helpers.predefined_type(
     "transition-delay",
     "Time",
     "computed::Time::zero()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::Time::zero()",
     vector=True,
     need_index=True,
@@ -191,6 +211,8 @@ ${helpers.predefined_type(
     "animation-name",
     "AnimationName",
     "computed::AnimationName::none()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::AnimationName::none()",
     vector=True,
     need_index=True,
@@ -204,6 +226,8 @@ ${helpers.predefined_type(
     "animation-duration",
     "Time",
     "computed::Time::zero()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::Time::zero()",
     parse_method="parse_non_negative",
     vector=True,
@@ -219,6 +243,8 @@ ${helpers.predefined_type(
     "animation-timing-function",
     "TimingFunction",
     "computed::TimingFunction::ease()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::TimingFunction::ease()",
     vector=True,
     need_index=True,
@@ -232,6 +258,8 @@ ${helpers.predefined_type(
     "animation-iteration-count",
     "AnimationIterationCount",
     "computed::AnimationIterationCount::one()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::AnimationIterationCount::one()",
     vector=True,
     need_index=True,
@@ -245,6 +273,8 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "animation-direction",
     "normal reverse alternate alternate-reverse",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     need_index=True,
     animation_value_type="none",
     vector=True,
@@ -259,6 +289,8 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "animation-play-state",
     "running paused",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     need_index=True,
     animation_value_type="none",
     vector=True,
@@ -271,6 +303,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "animation-fill-mode",
     "none forwards backwards both",
+    engines="gecko servo-2013",
     need_index=True,
     animation_value_type="none",
     vector=True,
@@ -285,6 +318,8 @@ ${helpers.predefined_type(
     "animation-delay",
     "Time",
     "computed::Time::zero()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::Time::zero()",
     vector=True,
     need_index=True,
@@ -300,6 +335,8 @@ ${helpers.predefined_type(
     "transform",
     "Transform",
     "generics::transform::Transform::none()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     extra_prefixes=transform_extra_prefixes,
     animation_value_type="ComputedValue",
     flags="CREATES_STACKING_CONTEXT FIXPOS_CB \
@@ -312,6 +349,7 @@ ${helpers.predefined_type(
     "rotate",
     "Rotate",
     "generics::transform::Rotate::None",
+    engines="gecko servo-2013",
     animation_value_type="ComputedValue",
     boxed=True,
     flags="CREATES_STACKING_CONTEXT FIXPOS_CB CAN_ANIMATE_ON_COMPOSITOR",
@@ -324,6 +362,7 @@ ${helpers.predefined_type(
     "scale",
     "Scale",
     "generics::transform::Scale::None",
+    engines="gecko servo-2013",
     animation_value_type="ComputedValue",
     boxed=True,
     flags="CREATES_STACKING_CONTEXT FIXPOS_CB CAN_ANIMATE_ON_COMPOSITOR",
@@ -336,6 +375,7 @@ ${helpers.predefined_type(
     "translate",
     "Translate",
     "generics::transform::Translate::None",
+    engines="gecko servo-2013",
     animation_value_type="ComputedValue",
     boxed=True,
     flags="CREATES_STACKING_CONTEXT FIXPOS_CB CAN_ANIMATE_ON_COMPOSITOR",
@@ -349,7 +389,7 @@ ${helpers.predefined_type(
     "offset-path",
     "OffsetPath",
     "computed::OffsetPath::none()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     gecko_pref="layout.css.motion-path.enabled",
     flags="CREATES_STACKING_CONTEXT FIXPOS_CB",
@@ -362,7 +402,7 @@ ${helpers.predefined_type(
     "offset-distance",
     "LengthPercentage",
     "computed::LengthPercentage::zero()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     gecko_pref="layout.css.motion-path.enabled",
     spec="https://drafts.fxtf.org/motion-1/#offset-distance-property",
@@ -374,7 +414,7 @@ ${helpers.predefined_type(
     "offset-rotate",
     "OffsetRotate",
     "computed::OffsetRotate::auto()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     gecko_pref="layout.css.motion-path.enabled",
     spec="https://drafts.fxtf.org/motion-1/#offset-rotate-property",
@@ -386,7 +426,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "scroll-behavior",
     "auto smooth",
-    products="gecko",
+    engines="gecko",
     spec="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior",
     animation_value_type="discrete",
 )}
@@ -395,7 +435,7 @@ ${helpers.predefined_type(
     "scroll-snap-align",
     "ScrollSnapAlign",
     "computed::ScrollSnapAlign::none()",
-    products="gecko",
+    engines="gecko",
     gecko_pref="layout.css.scroll-snap-v1.enabled",
     spec="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align",
     animation_value_type="discrete",
@@ -405,7 +445,7 @@ ${helpers.predefined_type(
     "scroll-snap-type",
     "ScrollSnapType",
     "computed::ScrollSnapType::none()",
-    products="gecko",
+    engines="gecko",
     spec="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type",
     animation_value_type="discrete",
 )}
@@ -415,7 +455,7 @@ ${helpers.predefined_type(
         "overscroll-behavior-" + axis,
         "OverscrollBehavior",
         "computed::OverscrollBehavior::Auto",
-        products="gecko",
+        engines="gecko",
         needs_context=False,
         gecko_pref="layout.css.overscroll-behavior.enabled",
         spec="https://wicg.github.io/overscroll-behavior/#overscroll-behavior-properties",
@@ -428,7 +468,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "isolation",
     "auto isolate",
-    products="gecko",
+    engines="gecko",
     spec="https://drafts.fxtf.org/compositing/#isolation",
     flags="CREATES_STACKING_CONTEXT",
     animation_value_type="discrete",
@@ -438,8 +478,8 @@ ${helpers.predefined_type(
     "break-after",
     "BreakBetween",
     "computed::BreakBetween::Auto",
+    engines="gecko",
     needs_context=False,
-    products="gecko",
     spec="https://drafts.csswg.org/css-break/#propdef-break-after",
     animation_value_type="discrete",
 )}
@@ -448,8 +488,8 @@ ${helpers.predefined_type(
     "break-before",
     "BreakBetween",
     "computed::BreakBetween::Auto",
+    engines="gecko",
     needs_context=False,
-    products="gecko",
     spec="https://drafts.csswg.org/css-break/#propdef-break-before",
     animation_value_type="discrete",
 )}
@@ -458,8 +498,8 @@ ${helpers.predefined_type(
     "break-inside",
     "BreakWithin",
     "computed::BreakWithin::Auto",
+    engines="gecko",
     needs_context=False,
-    products="gecko",
     alias="page-break-inside",
     spec="https://drafts.csswg.org/css-break/#propdef-break-inside",
     animation_value_type="discrete",
@@ -471,7 +511,7 @@ ${helpers.predefined_type(
     "resize",
     "Resize",
     "computed::Resize::None",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     needs_context=False,
     gecko_ffi_name="mResize",
@@ -482,6 +522,7 @@ ${helpers.predefined_type(
     "perspective",
     "Perspective",
     "computed::Perspective::none()",
+    engines="gecko servo-2013",
     gecko_ffi_name="mChildPerspective",
     spec="https://drafts.csswg.org/css-transforms/#perspective",
     extra_prefixes=transform_extra_prefixes,
@@ -494,6 +535,7 @@ ${helpers.predefined_type(
     "perspective-origin",
     "Position",
     "computed::position::Position::center()",
+    engines="gecko servo-2013",
     boxed=True,
     extra_prefixes=transform_extra_prefixes,
     spec="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property",
@@ -505,6 +547,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "backface-visibility",
     "visible hidden",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-transforms/#backface-visibility-property",
     extra_prefixes=transform_extra_prefixes,
     animation_value_type="discrete",
@@ -513,8 +556,8 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "transform-box",
     "border-box fill-box view-box",
+    engines="gecko",
     gecko_enum_prefix="StyleGeometryBox",
-    products="gecko",
     gecko_pref="svg.transform-box.enabled",
     spec="https://drafts.csswg.org/css-transforms/#transform-box",
     gecko_inexhaustive="True",
@@ -524,7 +567,9 @@ ${helpers.single_keyword(
 ${helpers.predefined_type(
     "transform-style",
     "TransformStyle",
-    "computed::TransformStyle::" + ("Auto" if product == "servo" else "Flat"),
+    "computed::TransformStyle::" + ("Flat" if engine == "gecko" else "Auto"),
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     spec="https://drafts.csswg.org/css-transforms-2/#transform-style-property",
     needs_context=False,
     extra_prefixes=transform_extra_prefixes,
@@ -537,6 +582,7 @@ ${helpers.predefined_type(
     "transform-origin",
     "TransformOrigin",
     "computed::TransformOrigin::initial_value()",
+    engines="gecko servo-2013",
     animation_value_type="ComputedValue",
     extra_prefixes=transform_extra_prefixes,
     gecko_ffi_name="mTransformOrigin",
@@ -550,8 +596,8 @@ ${helpers.predefined_type(
     "contain",
     "Contain",
     "specified::Contain::empty()",
+    engines="gecko",
     animation_value_type="none",
-    products="gecko",
     flags="CREATES_STACKING_CONTEXT FIXPOS_CB",
     gecko_pref="layout.css.contain.enabled",
     spec="https://drafts.csswg.org/css-contain/#contain-property",
@@ -563,7 +609,7 @@ ${helpers.predefined_type(
     "-moz-appearance",
     "Appearance",
     "computed::Appearance::None",
-    products="gecko",
+    engines="gecko",
     alias="-webkit-appearance:layout.css.webkit-appearance.enabled",
     spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance)",
     animation_value_type="discrete",
@@ -574,7 +620,7 @@ ${helpers.predefined_type(
     "-moz-binding",
     "url::UrlOrNone",
     "computed::url::UrlOrNone::none()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="none",
     gecko_ffi_name="mBinding",
     gecko_pref="layout.css.moz-binding.content.enabled",
@@ -585,7 +631,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "-moz-orient",
     "inline block horizontal vertical",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mOrient",
     gecko_enum_prefix="StyleOrient",
     spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-orient)",
@@ -596,7 +642,7 @@ ${helpers.predefined_type(
     "will-change",
     "WillChange",
     "computed::WillChange::auto()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="none",
     spec="https://drafts.csswg.org/css-will-change/#will-change",
 )}
@@ -604,8 +650,8 @@ ${helpers.predefined_type(
 // 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",
     parse_method="parse_number",
-    products="gecko",
     animation_value_type="ComputedValue",
     spec="https://drafts.csswg.org/css-shapes/#shape-image-threshold-property",
 )}
@@ -614,7 +660,7 @@ ${helpers.predefined_type(
     "shape-margin",
     "NonNegativeLengthPercentage",
     "computed::NonNegativeLengthPercentage::zero()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="NonNegativeLengthPercentage",
     spec="https://drafts.csswg.org/css-shapes/#shape-margin-property",
 )}
@@ -623,7 +669,7 @@ ${helpers.predefined_type(
     "shape-outside",
     "basic_shape::FloatAreaShape",
     "generics::basic_shape::ShapeSource::None",
-    products="gecko",
+    engines="gecko",
     animation_value_type="basic_shape::FloatAreaShape",
     spec="https://drafts.csswg.org/css-shapes/#shape-outside-property",
 )}
@@ -632,7 +678,7 @@ ${helpers.predefined_type(
     "touch-action",
     "TouchAction",
     "computed::TouchAction::auto()",
-    products="gecko",
+    engines="gecko",
     gecko_pref="layout.css.touch_action.enabled",
     animation_value_type="discrete",
     spec="https://compat.spec.whatwg.org/#touch-action",
@@ -645,8 +691,8 @@ ${helpers.predefined_type(
     "-webkit-line-clamp",
     "PositiveIntegerOrNone",
     "Either::Second(None_)",
+    engines="gecko",
     gecko_pref="layout.css.webkit-line-clamp.enabled",
     animation_value_type="Integer",
-    products="gecko",
     spec="https://drafts.csswg.org/css-overflow-3/#line-clamp",
 )}
diff --git a/components/style/properties/longhands/column.mako.rs b/components/style/properties/longhands/column.mako.rs
index f61b78acf46..8b49679abf7 100644
--- a/components/style/properties/longhands/column.mako.rs
+++ b/components/style/properties/longhands/column.mako.rs
@@ -10,10 +10,12 @@ ${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()",
     extra_prefixes="moz",
     animation_value_type="NonNegativeLengthOrAuto",
-    servo_pref="layout.columns.enabled",
+    servo_2013_pref="layout.columns.enabled",
     spec="https://drafts.csswg.org/css-multicol/#propdef-column-width",
     servo_restyle_damage="rebuild_and_reflow",
 )}
@@ -22,8 +24,10 @@ ${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_pref="layout.columns.enabled",
+    servo_2013_pref="layout.columns.enabled",
     animation_value_type="AnimatedColumnCount",
     extra_prefixes="moz",
     spec="https://drafts.csswg.org/css-multicol/#propdef-column-count",
@@ -33,8 +37,8 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "column-fill",
     "balance auto",
+    engines="gecko",
     extra_prefixes="moz",
-    products="gecko",
     animation_value_type="discrete",
     gecko_enum_prefix="StyleColumnFill",
     spec="https://drafts.csswg.org/css-multicol/#propdef-column-fill",
@@ -44,9 +48,9 @@ ${helpers.predefined_type(
     "column-rule-width",
     "BorderSideWidth",
     "crate::values::computed::NonNegativeLength::new(3.)",
+    engines="gecko",
     initial_specified_value="specified::BorderSideWidth::Medium",
     computed_type="crate::values::computed::NonNegativeLength",
-    products="gecko",
     spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width",
     animation_value_type="NonNegativeLength",
     extra_prefixes="moz",
@@ -57,8 +61,8 @@ ${helpers.predefined_type(
     "column-rule-color",
     "Color",
     "computed_value::T::currentcolor()",
+    engines="gecko",
     initial_specified_value="specified::Color::currentcolor()",
-    products="gecko",
     animation_value_type="AnimatedColor",
     extra_prefixes="moz",
     ignored_when_colors_disabled=True,
@@ -69,7 +73,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "column-span",
     "none all",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     gecko_enum_prefix="StyleColumnSpan",
     gecko_pref="layout.css.column-span.enabled",
@@ -82,9 +86,9 @@ ${helpers.predefined_type(
     "column-rule-style",
     "BorderStyle",
     "computed::BorderStyle::None",
+    engines="gecko",
     needs_context=False,
     initial_specified_value="specified::BorderStyle::None",
-    products="gecko",
     extra_prefixes="moz",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style",
diff --git a/components/style/properties/longhands/counters.mako.rs b/components/style/properties/longhands/counters.mako.rs
index f8971315603..8e91c98ce83 100644
--- a/components/style/properties/longhands/counters.mako.rs
+++ b/components/style/properties/longhands/counters.mako.rs
@@ -10,6 +10,8 @@ ${helpers.predefined_type(
     "content",
     "Content",
     "computed::Content::normal()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::Content::normal()",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-content/#propdef-content",
@@ -19,6 +21,7 @@ ${helpers.predefined_type(
 ${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",
@@ -28,6 +31,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "counter-reset",
     "CounterSetOrReset",
+    engines="gecko servo-2013",
     initial_value="Default::default()",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-lists-3/#propdef-counter-reset",
@@ -37,9 +41,9 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "counter-set",
     "CounterSetOrReset",
+    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",
-    products="gecko",
 )}
diff --git a/components/style/properties/longhands/effects.mako.rs b/components/style/properties/longhands/effects.mako.rs
index 01b5abfd41f..b702ba800e7 100644
--- a/components/style/properties/longhands/effects.mako.rs
+++ b/components/style/properties/longhands/effects.mako.rs
@@ -11,6 +11,8 @@ ${helpers.predefined_type(
     "opacity",
     "Opacity",
     "1.0",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     animation_value_type="ComputedValue",
     flags="CREATES_STACKING_CONTEXT CAN_ANIMATE_ON_COMPOSITOR",
     spec="https://drafts.csswg.org/css-color/#transparency",
@@ -21,6 +23,8 @@ ${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",
@@ -34,6 +38,8 @@ ${helpers.predefined_type(
     "clip",
     "ClipRectOrAuto",
     "computed::ClipRectOrAuto::auto()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     animation_value_type="ComputedValue",
     boxed=True,
     allow_quirks="Yes",
@@ -44,6 +50,8 @@ ${helpers.predefined_type(
     "filter",
     "Filter",
     None,
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     vector=True,
     simple_vector_bindings=True,
     gecko_ffi_name="mFilters",
@@ -59,6 +67,7 @@ ${helpers.predefined_type(
     "backdrop-filter",
     "Filter",
     None,
+    engines="gecko",
     vector=True,
     simple_vector_bindings=True,
     gecko_ffi_name="mBackdropFilters",
@@ -68,7 +77,6 @@ ${helpers.predefined_type(
     flags="CREATES_STACKING_CONTEXT FIXPOS_CB",
     gecko_pref="layout.css.backdrop-filter.enabled",
     spec="https://drafts.fxtf.org/filter-effects-2/#propdef-backdrop-filter",
-    products="gecko",
 )}
 
 ${helpers.single_keyword(
@@ -76,6 +84,8 @@ ${helpers.single_keyword(
     """normal multiply screen overlay darken lighten color-dodge
     color-burn hard-light soft-light difference exclusion hue
     saturation color luminosity""",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     gecko_constant_prefix="NS_STYLE_BLEND",
     animation_value_type="discrete",
     flags="CREATES_STACKING_CONTEXT",
diff --git a/components/style/properties/longhands/font.mako.rs b/components/style/properties/longhands/font.mako.rs
index 18b3328a536..b8ce027be4e 100644
--- a/components/style/properties/longhands/font.mako.rs
+++ b/components/style/properties/longhands/font.mako.rs
@@ -10,6 +10,8 @@
 ${helpers.predefined_type(
     "font-family",
     "FontFamily",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_value="computed::FontFamily::serif()",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-fonts/#propdef-font-family",
@@ -19,6 +21,8 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "font-style",
     "FontStyle",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_value="computed::FontStyle::normal()",
     initial_specified_value="specified::FontStyle::normal()",
     animation_value_type="FontStyle",
@@ -35,6 +39,8 @@ ${helpers.predefined_type(
 ${helpers.single_keyword_system(
     "font-variant-caps",
     "normal small-caps",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     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",
@@ -47,6 +53,8 @@ ${helpers.single_keyword_system(
 ${helpers.predefined_type(
     "font-weight",
     "FontWeight",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_value="computed::FontWeight::normal()",
     initial_specified_value="specified::FontWeight::normal()",
     animation_value_type="Number",
@@ -57,6 +65,7 @@ ${helpers.predefined_type(
 ${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",
@@ -68,7 +77,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "font-size-adjust",
     "FontSizeAdjust",
-    products="gecko",
+    engines="gecko",
     initial_value="computed::FontSizeAdjust::none()",
     initial_specified_value="specified::FontSizeAdjust::none()",
     animation_value_type="ComputedValue",
@@ -78,7 +87,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "font-synthesis",
     "FontSynthesis",
-    products="gecko",
+    engines="gecko",
     initial_value="specified::FontSynthesis::get_initial_value()",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-fonts/#propdef-font-synthesis",
@@ -87,6 +96,8 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "font-stretch",
     "FontStretch",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_value="computed::FontStretch::hundred()",
     initial_specified_value="specified::FontStretch::normal()",
     animation_value_type="Percentage",
@@ -97,7 +108,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword_system(
     "font-kerning",
     "auto none normal",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mFont.kerning",
     gecko_constant_prefix="NS_FONT_KERNING",
     spec="https://drafts.csswg.org/css-fonts/#propdef-font-kerning",
@@ -107,7 +118,7 @@ ${helpers.single_keyword_system(
 ${helpers.predefined_type(
     "font-variant-alternates",
     "FontVariantAlternates",
-    products="gecko",
+    engines="gecko",
     initial_value="computed::FontVariantAlternates::get_initial_value()",
     initial_specified_value="specified::FontVariantAlternates::get_initial_specified_value()",
     animation_value_type="discrete",
@@ -117,7 +128,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "font-variant-east-asian",
     "FontVariantEastAsian",
-    products="gecko",
+    engines="gecko",
     initial_value="computed::FontVariantEastAsian::empty()",
     initial_specified_value="specified::FontVariantEastAsian::empty()",
     animation_value_type="discrete",
@@ -127,7 +138,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "font-variant-ligatures",
     "FontVariantLigatures",
-    products="gecko",
+    engines="gecko",
     initial_value="computed::FontVariantLigatures::empty()",
     initial_specified_value="specified::FontVariantLigatures::empty()",
     animation_value_type="discrete",
@@ -137,7 +148,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "font-variant-numeric",
     "FontVariantNumeric",
-    products="gecko",
+    engines="gecko",
     initial_value="computed::FontVariantNumeric::empty()",
     initial_specified_value="specified::FontVariantNumeric::empty()",
     animation_value_type="discrete",
@@ -147,7 +158,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword_system(
     "font-variant-position",
     "normal sub super",
-    products="gecko",
+    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",
@@ -157,7 +168,7 @@ ${helpers.single_keyword_system(
 ${helpers.predefined_type(
     "font-feature-settings",
     "FontFeatureSettings",
-    products="gecko",
+    engines="gecko",
     initial_value="computed::FontFeatureSettings::normal()",
     initial_specified_value="specified::FontFeatureSettings::normal()",
     extra_prefixes="moz:layout.css.prefixes.font-features",
@@ -168,7 +179,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "font-variation-settings",
     "FontVariationSettings",
-    products="gecko",
+    engines="gecko",
     gecko_pref="layout.css.font-variations.enabled",
     has_effect_on_gecko_scrollbars=False,
     initial_value="computed::FontVariationSettings::normal()",
@@ -180,7 +191,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "font-language-override",
     "FontLanguageOverride",
-    products="gecko",
+    engines="gecko",
     initial_value="computed::FontLanguageOverride::zero()",
     initial_specified_value="specified::FontLanguageOverride::normal()",
     animation_value_type="discrete",
@@ -191,7 +202,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword_system(
     "font-optical-sizing",
     "auto none",
-    products="gecko",
+    engines="gecko",
     gecko_pref="layout.css.font-variations.enabled",
     has_effect_on_gecko_scrollbars=False,
     gecko_ffi_name="mFont.opticalSizing",
@@ -203,7 +214,7 @@ ${helpers.single_keyword_system(
 ${helpers.predefined_type(
     "-x-lang",
     "XLang",
-    products="gecko",
+    engines="gecko",
     initial_value="computed::XLang::get_initial_value()",
     animation_value_type="none",
     enabled_in="",
@@ -213,7 +224,7 @@ ${helpers.predefined_type(
 ${helpers.predefined_type(
     "-moz-script-size-multiplier",
     "MozScriptSizeMultiplier",
-    products="gecko",
+    engines="gecko",
     initial_value="computed::MozScriptSizeMultiplier::get_initial_value()",
     animation_value_type="none",
     gecko_ffi_name="mScriptSizeMultiplier",
@@ -225,8 +236,8 @@ ${helpers.predefined_type(
     "-moz-script-level",
     "MozScriptLevel",
     0,
+    engines="gecko",
     animation_value_type="none",
-    products="gecko",
     enabled_in="ua",
     gecko_ffi_name="mScriptLevel",
     spec="Internal (not web-exposed)",
@@ -235,9 +246,9 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "-moz-math-display",
     "inline block",
+    engines="gecko",
     gecko_constant_prefix="NS_MATHML_DISPLAYSTYLE",
     gecko_ffi_name="mMathDisplay",
-    products="gecko",
     enabled_in="ua",
     spec="Internal (not web-exposed)",
     animation_value_type="none",
@@ -249,9 +260,9 @@ ${helpers.single_keyword(
     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_constant_prefix="NS_MATHML_MATHVARIANT",
     gecko_ffi_name="mMathVariant",
-    products="gecko",
     spec="Internal (not web-exposed)",
     animation_value_type="none",
     enabled_in="",
@@ -262,8 +273,8 @@ ${helpers.predefined_type(
     "-moz-script-min-size",
     "MozScriptMinSize",
     "specified::MozScriptMinSize::get_initial_value()",
+    engines="gecko",
     animation_value_type="none",
-    products="gecko",
     enabled_in="",
     gecko_ffi_name="mScriptMinSize",
     spec="Internal (not web-exposed)",
@@ -273,13 +284,13 @@ ${helpers.predefined_type(
     "-x-text-zoom",
     "XTextZoom",
     "computed::XTextZoom(true)",
+    engines="gecko",
     animation_value_type="none",
-    products="gecko",
     enabled_in="",
     spec="Internal (not web-exposed)",
 )}
 
-% if product == "gecko":
+% if engine == "gecko":
     pub mod system_font {
         //! We deal with system fonts here
         //!
@@ -470,7 +481,7 @@ ${helpers.predefined_type(
         use cssparser::Parser;
 
         // We don't parse system fonts, but in the interest of not littering
-        // a lot of code with `if product == gecko` conditionals, we have a
+        // a lot of code with `if engine == "gecko"` conditionals, we have a
         // dummy system font module that does nothing
 
         #[derive(Clone, Copy, Debug, Eq, Hash, MallocSizeOf, PartialEq, SpecifiedValueInfo, ToCss, ToShmem)]
@@ -487,11 +498,11 @@ ${helpers.predefined_type(
 ${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,
-    products="gecko",
     spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth)",
     animation_value_type="discrete",
 )}
@@ -500,8 +511,8 @@ ${helpers.predefined_type(
     "-moz-font-smoothing-background-color",
     "color::MozFontSmoothingBackgroundColor",
     "computed::color::MozFontSmoothingBackgroundColor::transparent()",
+    engines="gecko",
     animation_value_type="none",
-    products="gecko",
     gecko_ffi_name="mFont.fontSmoothingBackgroundColor",
     enabled_in="chrome",
     spec="None (Nonstandard internal property)",
@@ -511,8 +522,8 @@ ${helpers.predefined_type(
     "-moz-min-font-size-ratio",
     "Percentage",
     "computed::Percentage::hundred()",
+    engines="gecko",
     animation_value_type="none",
-    products="gecko",
     enabled_in="ua",
     spec="Nonstandard (Internal-only)",
 )}
diff --git a/components/style/properties/longhands/inherited_box.mako.rs b/components/style/properties/longhands/inherited_box.mako.rs
index 0e3799f6c46..77ee11bdd4c 100644
--- a/components/style/properties/longhands/inherited_box.mako.rs
+++ b/components/style/properties/longhands/inherited_box.mako.rs
@@ -10,6 +10,8 @@
 ${helpers.single_keyword(
     "visibility",
     "visible hidden",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     extra_gecko_values="collapse",
     gecko_ffi_name="mVisible",
     animation_value_type="ComputedValue",
@@ -21,11 +23,12 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "writing-mode",
     "horizontal-tb vertical-rl vertical-lr",
+    engines="gecko servo-2013 servo-2020",
     extra_gecko_values="sideways-rl sideways-lr",
-    extra_gecko_aliases="lr=horizontal-tb lr-tb=horizontal-tb \
+    gecko_aliases="lr=horizontal-tb lr-tb=horizontal-tb \
                          rl=horizontal-tb rl-tb=horizontal-tb \
                          tb=vertical-rl   tb-rl=vertical-rl",
-    servo_pref="layout.writing-mode.enabled",
+    servo_2013_pref="layout.writing-mode.enabled",
     animation_value_type="none",
     spec="https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode",
     servo_restyle_damage="rebuild_and_reflow",
@@ -34,6 +37,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "direction",
     "ltr rtl",
+    engines="gecko servo-2013 servo-2020",
     animation_value_type="none",
     spec="https://drafts.csswg.org/css-writing-modes/#propdef-direction",
     needs_conversion=True,
@@ -43,8 +47,8 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "text-orientation",
     "mixed upright sideways",
-    extra_gecko_aliases="sideways-right=sideways",
-    products="gecko",
+    engines="gecko",
+    gecko_aliases="sideways-right=sideways",
     animation_value_type="none",
     spec="https://drafts.csswg.org/css-writing-modes/#propdef-text-orientation",
 )}
@@ -53,7 +57,8 @@ ${helpers.single_keyword(
 // https://drafts.csswg.org/css-color/
 ${helpers.single_keyword(
     "color-adjust",
-    "economy exact", products="gecko",
+    "economy exact",
+    engines="gecko",
     gecko_enum_prefix="StyleColorAdjust",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-color/#propdef-color-adjust",
@@ -64,9 +69,10 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "image-rendering",
     "auto crisp-edges",
+    engines="gecko servo-2013",
     extra_gecko_values="optimizespeed optimizequality",
-    extra_servo_values="pixelated",
-    extra_gecko_aliases="-moz-crisp-edges=crisp-edges",
+    extra_servo_2013_values="pixelated",
+    gecko_aliases="-moz-crisp-edges=crisp-edges",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-images/#propdef-image-rendering",
 )}
@@ -74,7 +80,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "image-orientation",
     "none from-image",
-    products="gecko",
+    engines="gecko",
     gecko_enum_prefix="StyleImageOrientation",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-images/#propdef-image-orientation",
diff --git a/components/style/properties/longhands/inherited_svg.mako.rs b/components/style/properties/longhands/inherited_svg.mako.rs
index 5becde6d258..bbb7eba1c5b 100644
--- a/components/style/properties/longhands/inherited_svg.mako.rs
+++ b/components/style/properties/longhands/inherited_svg.mako.rs
@@ -14,7 +14,7 @@ ${helpers.single_keyword(
     "dominant-baseline",
     """auto ideographic alphabetic hanging mathematical central middle
        text-after-edge text-before-edge""",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/css-inline-3/#propdef-dominant-baseline",
 )}
@@ -22,7 +22,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "text-anchor",
     "start middle end",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG/text.html#TextAnchorProperty",
 )}
@@ -31,7 +31,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "color-interpolation",
     "srgb auto linearrgb",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty",
 )}
@@ -39,7 +39,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "color-interpolation-filters",
     "linearrgb auto srgb",
-    products="gecko",
+    engines="gecko",
     gecko_constant_prefix="NS_STYLE_COLOR_INTERPOLATION",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationFiltersProperty",
@@ -49,7 +49,7 @@ ${helpers.predefined_type(
     "fill",
     "SVGPaint",
     "crate::values::computed::SVGPaint::black()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="IntermediateSVGPaint",
     boxed=True,
     spec="https://www.w3.org/TR/SVG2/painting.html#SpecifyingFillPaint",
@@ -59,7 +59,7 @@ ${helpers.predefined_type(
     "fill-opacity",
     "SVGOpacity",
     "Default::default()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     spec="https://svgwg.org/svg2-draft/painting.html#FillOpacity",
 )}
@@ -68,8 +68,8 @@ ${helpers.predefined_type(
     "fill-rule",
     "FillRule",
     "Default::default()",
+    engines="gecko",
     needs_context=False,
-    products="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG11/painting.html#FillRuleProperty",
 )}
@@ -77,7 +77,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "shape-rendering",
     "auto optimizespeed crispedges geometricprecision",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty",
 )}
@@ -86,7 +86,7 @@ ${helpers.predefined_type(
     "stroke",
     "SVGPaint",
     "Default::default()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="IntermediateSVGPaint",
     boxed=True,
     spec="https://www.w3.org/TR/SVG2/painting.html#SpecifyingStrokePaint",
@@ -96,7 +96,7 @@ ${helpers.predefined_type(
     "stroke-width",
     "SVGWidth",
     "computed::SVGWidth::one()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="crate::values::computed::SVGWidth",
     spec="https://www.w3.org/TR/SVG2/painting.html#StrokeWidth",
 )}
@@ -104,7 +104,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "stroke-linecap",
     "butt round square",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty",
 )}
@@ -112,7 +112,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "stroke-linejoin",
     "miter round bevel",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty",
 )}
@@ -121,7 +121,7 @@ ${helpers.predefined_type(
     "stroke-miterlimit",
     "NonNegativeNumber",
     "From::from(4.0)",
-    products="gecko",
+    engines="gecko",
     animation_value_type="crate::values::computed::NonNegativeNumber",
     spec="https://www.w3.org/TR/SVG2/painting.html#StrokeMiterlimitProperty",
 )}
@@ -130,7 +130,7 @@ ${helpers.predefined_type(
     "stroke-opacity",
     "SVGOpacity",
     "Default::default()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     spec="https://svgwg.org/svg2-draft/painting.html#StrokeOpacity",
 )}
@@ -139,7 +139,7 @@ ${helpers.predefined_type(
     "stroke-dasharray",
     "SVGStrokeDashArray",
     "Default::default()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="crate::values::computed::SVGStrokeDashArray",
     spec="https://www.w3.org/TR/SVG2/painting.html#StrokeDashing",
 )}
@@ -148,7 +148,7 @@ ${helpers.predefined_type(
     "stroke-dashoffset",
     "SVGLength",
     "computed::SVGLength::zero()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     spec="https://www.w3.org/TR/SVG2/painting.html#StrokeDashing",
 )}
@@ -158,8 +158,8 @@ ${helpers.predefined_type(
     "clip-rule",
     "FillRule",
     "Default::default()",
+    engines="gecko",
     needs_context=False,
-    products="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG11/masking.html#ClipRuleProperty",
 )}
@@ -168,7 +168,7 @@ ${helpers.predefined_type(
     "marker-start",
     "url::UrlOrNone",
     "computed::url::UrlOrNone::none()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties",
 )}
@@ -177,7 +177,7 @@ ${helpers.predefined_type(
     "marker-mid",
     "url::UrlOrNone",
     "computed::url::UrlOrNone::none()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties",
 )}
@@ -186,7 +186,7 @@ ${helpers.predefined_type(
     "marker-end",
     "url::UrlOrNone",
     "computed::url::UrlOrNone::none()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties",
 )}
@@ -195,7 +195,7 @@ ${helpers.predefined_type(
     "paint-order",
     "SVGPaintOrder",
     "computed::SVGPaintOrder::normal()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG2/painting.html#PaintOrder",
 )}
@@ -204,7 +204,7 @@ ${helpers.predefined_type(
     "-moz-context-properties",
     "MozContextProperties",
     "computed::MozContextProperties::default()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="none",
     spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-context-properties)",
 )}
diff --git a/components/style/properties/longhands/inherited_table.mako.rs b/components/style/properties/longhands/inherited_table.mako.rs
index 246a073d2a8..06b42e802b6 100644
--- a/components/style/properties/longhands/inherited_table.mako.rs
+++ b/components/style/properties/longhands/inherited_table.mako.rs
@@ -9,6 +9,7 @@
 ${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",
@@ -18,6 +19,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "empty-cells",
     "show hide",
+    engines="gecko servo-2013",
     gecko_constant_prefix="NS_STYLE_TABLE_EMPTY_CELLS",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-tables/#propdef-empty-cells",
@@ -27,6 +29,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "caption-side",
     "top bottom",
+    engines="gecko servo-2013",
     extra_gecko_values="right left top-outside bottom-outside",
     needs_conversion="True",
     animation_value_type="discrete",
@@ -38,6 +41,8 @@ ${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",
diff --git a/components/style/properties/longhands/inherited_text.mako.rs b/components/style/properties/longhands/inherited_text.mako.rs
index 07f2bb3f9c2..9887bf15c3b 100644
--- a/components/style/properties/longhands/inherited_text.mako.rs
+++ b/components/style/properties/longhands/inherited_text.mako.rs
@@ -10,6 +10,7 @@ ${helpers.predefined_type(
     "color",
     "ColorPropertyValue",
     "::cssparser::RGBA::new(0, 0, 0, 255)",
+    engines="gecko servo-2013 servo-2020",
     animation_value_type="AnimatedRGBA",
     ignored_when_colors_disabled="True",
     spec="https://drafts.csswg.org/css-color/#color",
@@ -19,6 +20,8 @@ ${helpers.predefined_type(
     "line-height",
     "LineHeight",
     "computed::LineHeight::normal()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     animation_value_type="LineHeight",
     flags="GETCS_NEEDS_LAYOUT_FLUSH",
     spec="https://drafts.csswg.org/css2/visudet.html#propdef-line-height",
@@ -31,6 +34,7 @@ ${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",
@@ -39,8 +43,8 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "hyphens",
     "manual none auto",
+    engines="gecko",
     gecko_enum_prefix="StyleHyphens",
-    products="gecko",
     animation_value_type="discrete",
     extra_prefixes="moz",
     spec="https://drafts.csswg.org/css-text/#propdef-hyphens",
@@ -50,9 +54,10 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "-moz-text-size-adjust",
     "auto none",
+    engines="gecko",
     gecko_constant_prefix="NS_STYLE_TEXT_SIZE_ADJUST",
     gecko_ffi_name="mTextSizeAdjust",
-    products="gecko", animation_value_type="discrete",
+    animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-size-adjust/#adjustment-control",
     alias="-webkit-text-size-adjust",
 )}
@@ -61,6 +66,8 @@ ${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",
@@ -73,6 +80,8 @@ ${helpers.predefined_type(
     "overflow-wrap",
     "OverflowWrap",
     "computed::OverflowWrap::Normal",
+    engines="servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-text/#propdef-overflow-wrap",
     alias="word-wrap",
@@ -84,6 +93,8 @@ ${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",
     needs_context=False,
@@ -94,8 +105,10 @@ ${helpers.predefined_type(
 <%helpers:single_keyword
     name="text-justify"
     values="auto none inter-word"
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     extra_gecko_values="inter-character"
-    extra_specified="${'distribute' if product == 'gecko' else ''}"
+    extra_specified="${'distribute' if engine == 'gecko' else ''}"
     gecko_enum_prefix="StyleTextJustify"
     animation_value_type="discrete"
     gecko_pref="layout.css.text-justify.enabled"
@@ -103,7 +116,7 @@ ${helpers.predefined_type(
     spec="https://drafts.csswg.org/css-text/#propdef-text-justify"
     servo_restyle_damage="rebuild_and_reflow"
 >
-    % if product == 'gecko':
+    % if engine == 'gecko':
     impl ToComputedValue for SpecifiedValue {
         type ComputedValue = computed_value::T;
 
@@ -133,7 +146,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "text-align-last",
     "auto start end left right center justify",
-    products="gecko",
+    engines="gecko",
     gecko_constant_prefix="NS_STYLE_TEXT_ALIGN",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-text/#propdef-text-align-last",
@@ -144,6 +157,8 @@ ${helpers.predefined_type(
     "text-align",
     "TextAlign",
     "computed::TextAlign::Start",
+    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-align",
     servo_restyle_damage = "reflow",
@@ -153,6 +168,7 @@ ${helpers.predefined_type(
     "letter-spacing",
     "LetterSpacing",
     "computed::LetterSpacing::normal()",
+    engines="gecko servo-2013",
     animation_value_type="ComputedValue",
     spec="https://drafts.csswg.org/css-text/#propdef-letter-spacing",
     servo_restyle_damage="rebuild_and_reflow",
@@ -162,6 +178,7 @@ ${helpers.predefined_type(
     "word-spacing",
     "WordSpacing",
     "computed::WordSpacing::zero()",
+    engines="gecko servo-2013",
     animation_value_type="ComputedValue",
     spec="https://drafts.csswg.org/css-text/#propdef-word-spacing",
     servo_restyle_damage="rebuild_and_reflow",
@@ -170,6 +187,8 @@ ${helpers.predefined_type(
 <%helpers:single_keyword
     name="white-space"
     values="normal pre nowrap pre-wrap pre-line"
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     extra_gecko_values="break-spaces -moz-pre-space"
     gecko_enum_prefix="StyleWhiteSpace"
     needs_conversion="True"
@@ -177,7 +196,7 @@ ${helpers.predefined_type(
     spec="https://drafts.csswg.org/css-text/#propdef-white-space"
     servo_restyle_damage="rebuild_and_reflow"
 >
-    % if product != "gecko":
+    % if engine == "servo-2013":
     impl SpecifiedValue {
         pub fn allow_wrap(&self) -> bool {
             match *self {
@@ -216,6 +235,7 @@ ${helpers.predefined_type(
     "text-shadow",
     "SimpleShadow",
     None,
+    engines="gecko servo-2013",
     vector=True,
     vector_animation_type="with_zero",
     animation_value_type="AnimatedTextShadowList",
@@ -228,8 +248,8 @@ ${helpers.predefined_type(
     "text-emphasis-style",
     "TextEmphasisStyle",
     None,
+    engines="gecko",
     initial_specified_value="SpecifiedValue::None",
-    products="gecko",
     boxed=True,
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-style",
@@ -239,8 +259,8 @@ ${helpers.predefined_type(
     "text-emphasis-position",
     "TextEmphasisPosition",
     "computed::TextEmphasisPosition::over_right()",
+    engines="gecko",
     initial_specified_value="specified::TextEmphasisPosition::over_right()",
-    products="gecko",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-position",
 )}
@@ -249,8 +269,8 @@ ${helpers.predefined_type(
     "text-emphasis-color",
     "Color",
     "computed_value::T::currentcolor()",
+    engines="gecko",
     initial_specified_value="specified::Color::currentcolor()",
-    products="gecko",
     animation_value_type="AnimatedColor",
     ignored_when_colors_disabled=True,
     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-emphasis-color",
@@ -260,7 +280,7 @@ ${helpers.predefined_type(
     "-moz-tab-size",
     "NonNegativeLengthOrNumber",
     "generics::length::LengthOrNumber::Number(From::from(8.0))",
-    products="gecko",
+    engines="gecko",
     animation_value_type="LengthOrNumber",
     spec="https://drafts.csswg.org/css-text-3/#tab-size-property",
 )}
@@ -269,7 +289,7 @@ ${helpers.predefined_type(
     "line-break",
     "LineBreak",
     "computed::LineBreak::Auto",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-text-3/#line-break-property",
     needs_context=False,
@@ -281,7 +301,7 @@ ${helpers.predefined_type(
     "-webkit-text-fill-color",
     "Color",
     "computed_value::T::currentcolor()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="AnimatedColor",
     ignored_when_colors_disabled=True,
     spec="https://compat.spec.whatwg.org/#the-webkit-text-fill-color",
@@ -292,7 +312,7 @@ ${helpers.predefined_type(
     "Color",
     "computed_value::T::currentcolor()",
     initial_specified_value="specified::Color::currentcolor()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="AnimatedColor",
     ignored_when_colors_disabled=True,
     spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke-color",
@@ -302,9 +322,9 @@ ${helpers.predefined_type(
     "-webkit-text-stroke-width",
     "BorderSideWidth",
     "crate::values::computed::NonNegativeLength::new(0.)",
+    engines="gecko",
     initial_specified_value="specified::BorderSideWidth::zero()",
     computed_type="crate::values::computed::NonNegativeLength",
-    products="gecko",
     spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke-width",
     animation_value_type="discrete",
 )}
@@ -314,7 +334,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "ruby-align",
     "space-around start center space-between",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-ruby/#ruby-align-property",
 )}
@@ -322,7 +342,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "ruby-position",
     "over under",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-ruby/#ruby-position-property",
 )}
@@ -333,7 +353,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "text-combine-upright",
     "none all",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-writing-modes-3/#text-combine-upright",
 )}
@@ -342,6 +362,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "text-rendering",
     "auto optimizespeed optimizelegibility geometricprecision",
+    engines="gecko servo-2013",
     gecko_enum_prefix="StyleTextRendering",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty",
@@ -353,10 +374,10 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "-moz-control-character-visibility",
     "hidden visible",
+    engines="gecko",
     gecko_constant_prefix="NS_STYLE_CONTROL_CHARACTER_VISIBILITY",
     animation_value_type="none",
     gecko_ffi_name="mControlCharacterVisibility",
-    products="gecko",
     spec="Nonstandard",
 )}
 
@@ -365,7 +386,7 @@ ${helpers.predefined_type(
     "text-underline-offset",
     "LengthOrAuto",
     "computed::LengthOrAuto::auto()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     gecko_pref="layout.css.text-underline-offset.enabled",
     has_effect_on_gecko_scrollbars=False,
@@ -377,7 +398,7 @@ ${helpers.predefined_type(
     "text-decoration-skip-ink",
     "TextDecorationSkipInk",
     "computed::TextDecorationSkipInk::Auto",
-    products="gecko",
+    engines="gecko",
     needs_context=False,
     animation_value_type="discrete",
     gecko_pref="layout.css.text-decoration-skip-ink.enabled",
diff --git a/components/style/properties/longhands/inherited_ui.mako.rs b/components/style/properties/longhands/inherited_ui.mako.rs
index 477bda6839d..d854d4a499c 100644
--- a/components/style/properties/longhands/inherited_ui.mako.rs
+++ b/components/style/properties/longhands/inherited_ui.mako.rs
@@ -10,6 +10,7 @@ ${helpers.predefined_type(
     "cursor",
     "Cursor",
     "computed::Cursor::auto()",
+    engines="gecko servo-2013",
     initial_specified_value="specified::Cursor::auto()",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-ui/#cursor",
@@ -21,6 +22,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "pointer-events",
     "auto none",
+    engines="gecko servo-2013",
     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",
@@ -29,7 +31,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "-moz-user-input",
     "auto none",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mUserInput",
     gecko_enum_prefix="StyleUserInput",
     animation_value_type="discrete",
@@ -39,7 +41,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "-moz-user-modify",
     "read-only read-write write-only",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mUserModify",
     gecko_enum_prefix="StyleUserModify",
     needs_conversion=True,
@@ -50,7 +52,8 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "-moz-user-focus",
     "none ignore normal select-after select-before select-menu select-same select-all",
-    products="gecko", gecko_ffi_name="mUserFocus",
+    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)",
@@ -60,17 +63,18 @@ ${helpers.predefined_type(
     "caret-color",
     "ColorOrAuto",
     "generics::color::ColorOrAuto::Auto",
+    engines="gecko",
     spec="https://drafts.csswg.org/css-ui/#caret-color",
     animation_value_type="AnimatedCaretColor",
     boxed=True,
     ignored_when_colors_disabled=True,
-    products="gecko",
 )}
 
 ${helpers.predefined_type(
     "scrollbar-color",
     "ui::ScrollbarColor",
     "Default::default()",
+    engines="gecko",
     spec="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color",
     gecko_pref="layout.css.scrollbar-color.enabled",
     # Surprisingly, yes the computed value of scrollbar-color has no effect on
@@ -81,5 +85,4 @@ ${helpers.predefined_type(
     boxed=True,
     ignored_when_colors_disabled=True,
     enabled_in="chrome",
-    products="gecko",
 )}
diff --git a/components/style/properties/longhands/list.mako.rs b/components/style/properties/longhands/list.mako.rs
index 6d79d3ad9ee..0de69c952de 100644
--- a/components/style/properties/longhands/list.mako.rs
+++ b/components/style/properties/longhands/list.mako.rs
@@ -6,9 +6,15 @@
 
 <% data.new_style_struct("List", inherited=True) %>
 
-${helpers.single_keyword("list-style-position", "outside inside", animation_value_type="discrete",
-                         spec="https://drafts.csswg.org/css-lists/#propdef-list-style-position",
-                         servo_restyle_damage="rebuild_and_reflow")}
+${helpers.single_keyword(
+    "list-style-position",
+    "outside inside",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
+    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:
 //
@@ -16,22 +22,26 @@ ${helpers.single_keyword("list-style-position", "outside inside", animation_valu
 //     upper-roman
 //
 // [1]: http://dev.w3.org/csswg/css-counter-styles/
-% if product == "servo":
+% if engine in ["servo-2013", "servo-2020"]:
     ${helpers.single_keyword(
         "list-style-type",
         """disc none circle square decimal disclosure-open disclosure-closed 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",
+        servo_2020_pref="layout.2020.unimplemented",
         animation_value_type="discrete",
         spec="https://drafts.csswg.org/css-lists/#propdef-list-style-type",
         servo_restyle_damage="rebuild_and_reflow",
     )}
-% else:
+% 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,
@@ -43,6 +53,7 @@ ${helpers.single_keyword("list-style-position", "outside inside", animation_valu
 ${helpers.predefined_type(
     "list-style-image",
     "url::ImageUrlOrNone",
+    engines="gecko servo-2013",
     initial_value="computed::url::ImageUrlOrNone::none()",
     initial_specified_value="specified::url::ImageUrlOrNone::none()",
     animation_value_type="discrete",
@@ -54,6 +65,7 @@ ${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",
@@ -63,8 +75,8 @@ ${helpers.predefined_type(
     "-moz-image-region",
     "ClipRectOrAuto",
     "computed::ClipRectOrAuto::auto()",
+    engines="gecko",
     animation_value_type="ComputedValue",
-    products="gecko",
     boxed=True,
     spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-region)",
 )}
@@ -73,8 +85,8 @@ ${helpers.predefined_type(
     "-moz-list-reversed",
     "MozListReversed",
     "computed::MozListReversed::False",
+    engines="gecko",
     animation_value_type="discrete",
-    products="gecko",
     enabled_in="ua",
     needs_context=False,
     spec="Internal implementation detail for <ol reversed>",
diff --git a/components/style/properties/longhands/margin.mako.rs b/components/style/properties/longhands/margin.mako.rs
index db98f8778f4..820634be995 100644
--- a/components/style/properties/longhands/margin.mako.rs
+++ b/components/style/properties/longhands/margin.mako.rs
@@ -16,7 +16,9 @@
         "margin-%s" % side[0],
         "LengthPercentageOrAuto",
         "computed::LengthPercentageOrAuto::zero()",
-        alias=maybe_moz_logical_alias(product, side, "-moz-margin-%s"),
+        engines="gecko servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
+        alias=maybe_moz_logical_alias(engine, side, "-moz-margin-%s"),
         allow_quirks="No" if side[1] else "Yes",
         animation_value_type="ComputedValue",
         logical=side[1],
@@ -33,7 +35,7 @@
         "scroll-margin-%s" % side[0],
         "Length",
         "computed::Length::zero()",
-        products="gecko",
+        engines="gecko",
         gecko_pref="layout.css.scroll-snap-v1.enabled",
         logical=side[1],
         logical_group="scroll-margin",
diff --git a/components/style/properties/longhands/outline.mako.rs b/components/style/properties/longhands/outline.mako.rs
index 8d0d326180b..9789797f4a4 100644
--- a/components/style/properties/longhands/outline.mako.rs
+++ b/components/style/properties/longhands/outline.mako.rs
@@ -14,6 +14,7 @@ ${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,
@@ -24,6 +25,8 @@ ${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",
@@ -33,6 +36,8 @@ ${helpers.predefined_type(
     "outline-width",
     "BorderSideWidth",
     "crate::values::computed::NonNegativeLength::new(3.)",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::BorderSideWidth::Medium",
     computed_type="crate::values::computed::NonNegativeLength",
     animation_value_type="NonNegativeLength",
@@ -45,7 +50,7 @@ ${helpers.predefined_type(
         "-moz-outline-radius-" + corner,
         "BorderCornerRadius",
         "computed::BorderCornerRadius::zero()",
-        products="gecko",
+        engines="gecko",
         boxed=True,
         animation_value_type="BorderCornerRadius",
         spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius)",
@@ -56,7 +61,7 @@ ${helpers.predefined_type(
     "outline-offset",
     "Length",
     "crate::values::computed::Length::new(0.)",
-    products="servo gecko",
+    engines="gecko servo-2013",
     animation_value_type="ComputedValue",
     spec="https://drafts.csswg.org/css-ui/#propdef-outline-offset",
 )}
diff --git a/components/style/properties/longhands/padding.mako.rs b/components/style/properties/longhands/padding.mako.rs
index 5f00b0b2546..faa3fb2867c 100644
--- a/components/style/properties/longhands/padding.mako.rs
+++ b/components/style/properties/longhands/padding.mako.rs
@@ -16,7 +16,9 @@
         "padding-%s" % side[0],
         "NonNegativeLengthPercentage",
         "computed::NonNegativeLengthPercentage::zero()",
-        alias=maybe_moz_logical_alias(product, side, "-moz-padding-%s"),
+        engines="gecko servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
+        alias=maybe_moz_logical_alias(engine, side, "-moz-padding-%s"),
         animation_value_type="NonNegativeLengthPercentage",
         logical=side[1],
         logical_group="padding",
@@ -32,7 +34,7 @@
         "scroll-padding-%s" % side[0],
         "NonNegativeLengthPercentageOrAuto",
         "computed::NonNegativeLengthPercentageOrAuto::auto()",
-        products="gecko",
+        engines="gecko",
         gecko_pref="layout.css.scroll-snap-v1.enabled",
         logical=side[1],
         logical_group="scroll-padding",
diff --git a/components/style/properties/longhands/position.mako.rs b/components/style/properties/longhands/position.mako.rs
index 14fc443a352..9e67dfb2d80 100644
--- a/components/style/properties/longhands/position.mako.rs
+++ b/components/style/properties/longhands/position.mako.rs
@@ -14,6 +14,8 @@
         side,
         "LengthPercentageOrAuto",
         "computed::LengthPercentageOrAuto::auto()",
+        engines="gecko servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
         spec="https://www.w3.org/TR/CSS2/visuren.html#propdef-%s" % side,
         flags="GETCS_NEEDS_LAYOUT_FLUSH",
         animation_value_type="ComputedValue",
@@ -28,6 +30,8 @@
         "inset-%s" % side,
         "LengthPercentageOrAuto",
         "computed::LengthPercentageOrAuto::auto()",
+        engines="gecko servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
         spec="https://drafts.csswg.org/css-logical-props/#propdef-inset-%s" % side,
         flags="GETCS_NEEDS_LAYOUT_FLUSH",
         alias="offset-%s:layout.css.offset-logical-properties.enabled" % side,
@@ -59,6 +63,8 @@ ${helpers.predefined_type(
     "z-index",
     "ZIndex",
     "computed::ZIndex::auto()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     spec="https://www.w3.org/TR/CSS2/visuren.html#z-index",
     flags="CREATES_STACKING_CONTEXT",
     animation_value_type="ComputedValue",
@@ -71,6 +77,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "flex-direction",
     "row row-reverse column column-reverse",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-flexbox/#flex-direction-property",
     extra_prefixes="webkit",
     animation_value_type="discrete",
@@ -81,27 +88,31 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "flex-wrap",
     "nowrap wrap wrap-reverse",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-flexbox/#flex-wrap-property",
     extra_prefixes="webkit",
     animation_value_type="discrete",
     servo_restyle_damage = "reflow",
 )}
 
-% if product == "servo":
+% 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",
     )}
-% else:
+% 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",
@@ -109,11 +120,12 @@ ${helpers.single_keyword(
     )}
 % endif
 
-% if product == "servo":
+% 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",
@@ -123,16 +135,20 @@ ${helpers.single_keyword(
     ${helpers.single_keyword(
         "align-items",
         "stretch flex-start flex-end center baseline",
+        engines="servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
         extra_prefixes="webkit",
         spec="https://drafts.csswg.org/css-flexbox/#align-items-property",
         animation_value_type="discrete",
         servo_restyle_damage="reflow",
     )}
-% else:
+% 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",
@@ -143,6 +159,7 @@ ${helpers.single_keyword(
         "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",
@@ -156,6 +173,7 @@ ${helpers.single_keyword(
         "justify-items",
         "JustifyItems",
         "computed::JustifyItems::legacy()",
+        engines="gecko",
         spec="https://drafts.csswg.org/css-align/#propdef-justify-items",
         animation_value_type="discrete",
     )}
@@ -169,6 +187,7 @@ ${helpers.predefined_type(
     "flex-grow",
     "NonNegativeNumber",
     "From::from(0.0)",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-flexbox/#flex-grow-property",
     extra_prefixes="webkit",
     animation_value_type="NonNegativeNumber",
@@ -179,6 +198,7 @@ ${helpers.predefined_type(
     "flex-shrink",
     "NonNegativeNumber",
     "From::from(1.0)",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-flexbox/#flex-shrink-property",
     extra_prefixes="webkit",
     animation_value_type="NonNegativeNumber",
@@ -186,21 +206,25 @@ ${helpers.predefined_type(
 )}
 
 // https://drafts.csswg.org/css-align/#align-self-property
-% if product == "servo":
+% 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.2020.unimplemented",
         extra_prefixes="webkit",
         spec="https://drafts.csswg.org/css-flexbox/#propdef-align-self",
         animation_value_type="discrete",
         servo_restyle_damage = "reflow",
     )}
-% else:
+% 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",
@@ -210,6 +234,7 @@ ${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",
     )}
@@ -223,6 +248,7 @@ ${helpers.predefined_type(
     "order",
     "Integer",
     "0",
+    engines="gecko servo-2013",
     extra_prefixes="webkit",
     animation_value_type="ComputedValue",
     spec="https://drafts.csswg.org/css-flexbox/#order-property",
@@ -233,6 +259,7 @@ ${helpers.predefined_type(
     "flex-basis",
     "FlexBasis",
     "computed::FlexBasis::auto()",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-flexbox/#flex-basis-property",
     extra_prefixes="webkit",
     animation_value_type="FlexBasis",
@@ -251,6 +278,8 @@ ${helpers.predefined_type(
         size,
         "Size",
         "computed::Size::auto()",
+        engines="gecko servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
         logical=logical,
         logical_group="size",
         allow_quirks="No" if logical else "Yes",
@@ -264,6 +293,8 @@ ${helpers.predefined_type(
         "min-%s" % size,
         "Size",
         "computed::Size::auto()",
+        engines="gecko servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
         logical=logical,
         logical_group="min-size",
         allow_quirks="No" if logical else "Yes",
@@ -275,6 +306,8 @@ ${helpers.predefined_type(
         "max-%s" % size,
         "MaxSize",
         "computed::MaxSize::none()",
+        engines="gecko servo-2013 servo-2020",
+        servo_2020_pref="layout.2020.unimplemented",
         logical=logical,
         logical_group="max-size",
         allow_quirks="No" if logical else "Yes",
@@ -287,6 +320,8 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "box-sizing",
     "content-box border-box",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     extra_prefixes="moz:layout.css.prefixes.box-sizing webkit",
     spec="https://drafts.csswg.org/css-ui/#propdef-box-sizing",
     gecko_enum_prefix="StyleBoxSizing",
@@ -298,7 +333,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "object-fit",
     "fill contain cover none scale-down",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-images/#propdef-object-fit",
 )}
@@ -307,7 +342,7 @@ ${helpers.predefined_type(
     "object-position",
     "Position",
     "computed::Position::zero()",
-    products="gecko",
+    engines="gecko",
     boxed=True,
     spec="https://drafts.csswg.org/css-images-3/#the-object-position",
     animation_value_type="ComputedValue",
@@ -319,9 +354,9 @@ ${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),
-            products="gecko",
         )}
     % endfor
 
@@ -331,9 +366,9 @@ ${helpers.predefined_type(
         "grid-auto-%ss" % kind,
         "TrackSize",
         "Default::default()",
+        engines="gecko",
         animation_value_type="discrete",
         spec="https://drafts.csswg.org/css-grid/#propdef-grid-auto-%ss" % kind,
-        products="gecko",
         boxed=True,
     )}
 
@@ -341,7 +376,7 @@ ${helpers.predefined_type(
         "grid-template-%ss" % kind,
         "GridTemplateComponent",
         "specified::GenericGridTemplateComponent::None",
-        products="gecko",
+        engines="gecko",
         spec="https://drafts.csswg.org/css-grid/#propdef-grid-template-%ss" % kind,
         boxed=True,
         flags="GETCS_NEEDS_LAYOUT_FLUSH",
@@ -354,7 +389,7 @@ ${helpers.predefined_type(
     "grid-auto-flow",
     "GridAutoFlow",
     "computed::GridAutoFlow::row()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow",
 )}
@@ -363,7 +398,7 @@ ${helpers.predefined_type(
     "grid-template-areas",
     "GridTemplateAreas",
     "computed::GridTemplateAreas::none()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-grid/#propdef-grid-template-areas",
 )}
@@ -372,9 +407,10 @@ ${helpers.predefined_type(
     "column-gap",
     "length::NonNegativeLengthPercentageOrNormal",
     "computed::length::NonNegativeLengthPercentageOrNormal::normal()",
-    alias="grid-column-gap" if product == "gecko" else "",
+    engines="gecko servo-2013",
+    alias="grid-column-gap" if engine == "gecko" else "",
     extra_prefixes="moz",
-    servo_pref="layout.columns.enabled",
+    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",
@@ -385,8 +421,8 @@ ${helpers.predefined_type(
     "row-gap",
     "length::NonNegativeLengthPercentageOrNormal",
     "computed::length::NonNegativeLengthPercentageOrNormal::normal()",
+    engines="gecko",
     alias="grid-row-gap",
-    products="gecko",
     spec="https://drafts.csswg.org/css-align-3/#propdef-row-gap",
     animation_value_type="NonNegativeLengthPercentageOrNormal",
     servo_restyle_damage="reflow",
@@ -400,6 +436,7 @@ ${helpers.predefined_type(
     "aspect-ratio",
     "Number",
     "computed::Number::zero()",
+    engines="gecko servo-2013",
     animation_value_type="ComputedValue",
     spec="Internal, for now",
     enabled_in="",
diff --git a/components/style/properties/longhands/svg.mako.rs b/components/style/properties/longhands/svg.mako.rs
index 5480a6d5fdc..f25cbb8e019 100644
--- a/components/style/properties/longhands/svg.mako.rs
+++ b/components/style/properties/longhands/svg.mako.rs
@@ -9,7 +9,7 @@
 ${helpers.single_keyword(
     "vector-effect",
     "none non-scaling-stroke",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://www.w3.org/TR/SVGTiny12/painting.html#VectorEffectProperty",
 )}
@@ -20,7 +20,7 @@ ${helpers.predefined_type(
     "stop-color",
     "Color",
     "RGBA::new(0, 0, 0, 255).into()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="AnimatedRGBA",
     spec="https://www.w3.org/TR/SVGTiny12/painting.html#StopColorProperty",
 )}
@@ -29,7 +29,7 @@ ${helpers.predefined_type(
     "stop-opacity",
     "Opacity",
     "1.0",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     spec="https://svgwg.org/svg2-draft/pservers.html#StopOpacityProperty",
 )}
@@ -40,7 +40,7 @@ ${helpers.predefined_type(
     "flood-color",
     "Color",
     "RGBA::new(0, 0, 0, 255).into()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="AnimatedColor",
     spec="https://www.w3.org/TR/SVG/filters.html#FloodColorProperty",
 )}
@@ -49,7 +49,7 @@ ${helpers.predefined_type(
     "flood-opacity",
     "Opacity",
     "1.0",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     spec="https://drafts.fxtf.org/filter-effects/#FloodOpacityProperty",
 )}
@@ -58,7 +58,7 @@ ${helpers.predefined_type(
     "lighting-color",
     "Color",
     "RGBA::new(255, 255, 255, 255).into()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="AnimatedColor",
     spec="https://www.w3.org/TR/SVG/filters.html#LightingColorProperty",
 )}
@@ -68,7 +68,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "mask-type",
     "luminance alpha",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://drafts.fxtf.org/css-masking/#propdef-mask-type",
 )}
@@ -77,7 +77,7 @@ ${helpers.predefined_type(
     "clip-path",
     "basic_shape::ClippingShape",
     "generics::basic_shape::ShapeSource::None",
-    products="gecko",
+    engines="gecko",
     animation_value_type="basic_shape::ClippingShape",
     flags="CREATES_STACKING_CONTEXT",
     spec="https://drafts.fxtf.org/css-masking/#propdef-clip-path",
@@ -86,9 +86,9 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "mask-mode",
     "match-source alpha luminance",
+    engines="gecko",
     gecko_enum_prefix="StyleMaskMode",
     vector=True,
-    products="gecko",
     animation_value_type="discrete",
     spec="https://drafts.fxtf.org/css-masking/#propdef-mask-mode",
 )}
@@ -97,8 +97,8 @@ ${helpers.predefined_type(
     "mask-repeat",
     "BackgroundRepeat",
     "computed::BackgroundRepeat::repeat()",
+    engines="gecko",
     initial_specified_value="specified::BackgroundRepeat::repeat()",
-    products="gecko",
     extra_prefixes="webkit",
     animation_value_type="discrete",
     spec="https://drafts.fxtf.org/css-masking/#propdef-mask-repeat",
@@ -110,7 +110,7 @@ ${helpers.predefined_type(
         "mask-position-" + axis,
         "position::" + direction + "Position",
         "computed::LengthPercentage::zero()",
-        products="gecko",
+        engines="gecko",
         extra_prefixes="webkit",
         initial_specified_value="specified::PositionComponent::Center",
         spec="https://drafts.fxtf.org/css-masking/#propdef-mask-position",
@@ -123,9 +123,9 @@ ${helpers.predefined_type(
 ${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,
-    products="gecko",
     extra_prefixes="webkit",
     gecko_enum_prefix="StyleGeometryBox",
     gecko_inexhaustive=True,
@@ -136,9 +136,9 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "mask-origin",
     "border-box content-box padding-box",
+    engines="gecko",
     extra_gecko_values="fill-box stroke-box view-box",
     vector=True,
-    products="gecko",
     extra_prefixes="webkit",
     gecko_enum_prefix="StyleGeometryBox",
     gecko_inexhaustive=True,
@@ -150,8 +150,8 @@ ${helpers.predefined_type(
     "mask-size",
     "background::BackgroundSize",
     "computed::BackgroundSize::auto()",
+    engines="gecko",
     initial_specified_value="specified::BackgroundSize::auto()",
-    products="gecko",
     extra_prefixes="webkit",
     spec="https://drafts.fxtf.org/css-masking/#propdef-mask-size",
     animation_value_type="MaskSizeList",
@@ -162,8 +162,8 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "mask-composite",
     "add subtract intersect exclude",
+    engines="gecko",
     vector=True,
-    products="gecko",
     extra_prefixes="webkit",
     animation_value_type="discrete",
     spec="https://drafts.fxtf.org/css-masking/#propdef-mask-composite",
@@ -172,12 +172,12 @@ ${helpers.single_keyword(
 ${helpers.predefined_type(
     "mask-image",
     "ImageLayer",
+    engines="gecko",
     initial_value="computed::ImageLayer::none()",
     initial_specified_value="specified::ImageLayer::none()",
     parse_method="parse_with_cors_anonymous",
     spec="https://drafts.fxtf.org/css-masking/#propdef-mask-image",
     vector=True,
-    products="gecko",
     extra_prefixes="webkit",
     animation_value_type="discrete",
     flags="CREATES_STACKING_CONTEXT",
@@ -187,7 +187,7 @@ ${helpers.predefined_type(
     "x",
     "LengthPercentage",
     "computed::LengthPercentage::zero()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     spec="https://svgwg.org/svg2-draft/geometry.html#X",
 )}
@@ -196,7 +196,7 @@ ${helpers.predefined_type(
     "y",
     "LengthPercentage",
     "computed::LengthPercentage::zero()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     spec="https://svgwg.org/svg2-draft/geometry.html#Y",
 )}
@@ -205,7 +205,7 @@ ${helpers.predefined_type(
     "cx",
     "LengthPercentage",
     "computed::LengthPercentage::zero()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     spec="https://svgwg.org/svg2-draft/geometry.html#CX",
 )}
@@ -214,7 +214,7 @@ ${helpers.predefined_type(
     "cy",
     "LengthPercentage",
     "computed::LengthPercentage::zero()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="ComputedValue",
     spec="https://svgwg.org/svg2-draft/geometry.html#CY",
 )}
@@ -223,7 +223,7 @@ ${helpers.predefined_type(
     "rx",
     "NonNegativeLengthPercentageOrAuto",
     "computed::NonNegativeLengthPercentageOrAuto::auto()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="LengthPercentageOrAuto",
     spec="https://svgwg.org/svg2-draft/geometry.html#RX",
 )}
@@ -232,7 +232,7 @@ ${helpers.predefined_type(
     "ry",
     "NonNegativeLengthPercentageOrAuto",
     "computed::NonNegativeLengthPercentageOrAuto::auto()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="LengthPercentageOrAuto",
     spec="https://svgwg.org/svg2-draft/geometry.html#RY",
 )}
@@ -241,7 +241,7 @@ ${helpers.predefined_type(
     "r",
     "NonNegativeLengthPercentage",
     "computed::NonNegativeLengthPercentage::zero()",
-    products="gecko",
+    engines="gecko",
     animation_value_type="LengthPercentage",
     spec="https://svgwg.org/svg2-draft/geometry.html#R",
 )}
diff --git a/components/style/properties/longhands/table.mako.rs b/components/style/properties/longhands/table.mako.rs
index 846261e3fa9..4475faaee37 100644
--- a/components/style/properties/longhands/table.mako.rs
+++ b/components/style/properties/longhands/table.mako.rs
@@ -9,6 +9,7 @@
 ${helpers.single_keyword(
     "table-layout",
     "auto fixed",
+    engines="gecko servo-2013",
     gecko_ffi_name="mLayoutStrategy",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-tables/#propdef-table-layout",
@@ -19,7 +20,7 @@ ${helpers.predefined_type(
     "-x-span",
     "XSpan",
     "computed::XSpan(1)",
-    products="gecko",
+    engines="gecko",
     spec="Internal-only (for `<col span>` pres attr)",
     animation_value_type="none",
     enabled_in="",
diff --git a/components/style/properties/longhands/text.mako.rs b/components/style/properties/longhands/text.mako.rs
index 06db3307238..a592e2f1290 100644
--- a/components/style/properties/longhands/text.mako.rs
+++ b/components/style/properties/longhands/text.mako.rs
@@ -11,6 +11,7 @@ ${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",
@@ -20,6 +21,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "unicode-bidi",
     "normal embed isolate bidi-override isolate-override plaintext",
+    engines="gecko servo-2013",
     animation_value_type="none",
     spec="https://drafts.csswg.org/css-writing-modes/#propdef-unicode-bidi",
     servo_restyle_damage="rebuild_and_reflow",
@@ -29,6 +31,8 @@ ${helpers.predefined_type(
     "text-decoration-line",
     "TextDecorationLine",
     "specified::TextDecorationLine::none()",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.2020.unimplemented",
     initial_specified_value="specified::TextDecorationLine::none()",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-line",
@@ -38,7 +42,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "text-decoration-style",
     "solid double dotted dashed wavy -moz-none",
-    products="gecko",
+    engines="gecko",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-style",
 )}
@@ -47,8 +51,8 @@ ${helpers.predefined_type(
     "text-decoration-color",
     "Color",
     "computed_value::T::currentcolor()",
+    engines="gecko",
     initial_specified_value="specified::Color::currentcolor()",
-    products="gecko",
     animation_value_type="AnimatedColor",
     ignored_when_colors_disabled=True,
     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration-color",
@@ -58,9 +62,9 @@ ${helpers.predefined_type(
     "initial-letter",
     "InitialLetter",
     "computed::InitialLetter::normal()",
+    engines="gecko",
     initial_specified_value="specified::InitialLetter::normal()",
     animation_value_type="discrete",
-    products="gecko",
     gecko_pref="layout.css.initial-letter.enabled",
     spec="https://drafts.csswg.org/css-inline/#sizing-drop-initials",
 )}
@@ -69,7 +73,7 @@ ${helpers.predefined_type(
    "text-decoration-thickness",
    "LengthOrAuto",
    "computed::LengthOrAuto::auto()",
-   products="gecko",
+   engines="gecko",
    animation_value_type="ComputedValue",
    gecko_pref="layout.css.text-decoration-thickness.enabled",
    spec="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property"
diff --git a/components/style/properties/longhands/ui.mako.rs b/components/style/properties/longhands/ui.mako.rs
index 5c51569089c..d59be17a27a 100644
--- a/components/style/properties/longhands/ui.mako.rs
+++ b/components/style/properties/longhands/ui.mako.rs
@@ -14,7 +14,7 @@
 ${helpers.single_keyword(
     "ime-mode",
     "auto normal active disabled inactive",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mIMEMode",
     animation_value_type="discrete",
     spec="https://drafts.csswg.org/css-ui/#input-method-editor",
@@ -23,7 +23,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "scrollbar-width",
     "auto thin none",
-    products="gecko",
+    engines="gecko",
     gecko_enum_prefix="StyleScrollbarWidth",
     animation_value_type="discrete",
     gecko_pref="layout.css.scrollbar-width.enabled",
@@ -35,7 +35,7 @@ ${helpers.predefined_type(
     "user-select",
     "UserSelect",
     "computed::UserSelect::Auto",
-    products="gecko",
+    engines="gecko",
     extra_prefixes="moz webkit",
     animation_value_type="discrete",
     needs_context=False,
@@ -46,7 +46,7 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "-moz-window-dragging",
     "default drag no-drag",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mWindowDragging",
     gecko_enum_prefix="StyleWindowDragging",
     animation_value_type="discrete",
@@ -56,7 +56,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "-moz-window-shadow",
     "none default menu tooltip sheet",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mWindowShadow",
     gecko_constant_prefix="NS_STYLE_WINDOW_SHADOW",
     animation_value_type="discrete",
@@ -68,7 +68,7 @@ ${helpers.predefined_type(
     "-moz-window-opacity",
     "Opacity",
     "1.0",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mWindowOpacity",
     animation_value_type="ComputedValue",
     spec="None (Nonstandard internal property)",
@@ -79,7 +79,7 @@ ${helpers.predefined_type(
     "-moz-window-transform",
     "Transform",
     "generics::transform::Transform::none()",
-    products="gecko",
+    engines="gecko",
     flags="GETCS_NEEDS_LAYOUT_FLUSH",
     animation_value_type="ComputedValue",
     spec="None (Nonstandard internal property)",
@@ -90,9 +90,9 @@ ${helpers.predefined_type(
     "-moz-window-transform-origin",
     "TransformOrigin",
     "computed::TransformOrigin::initial_value()",
+    engines="gecko",
     animation_value_type="ComputedValue",
     gecko_ffi_name="mWindowTransformOrigin",
-    products="gecko",
     boxed=True,
     flags="GETCS_NEEDS_LAYOUT_FLUSH",
     spec="None (Nonstandard internal property)",
@@ -104,7 +104,7 @@ ${helpers.predefined_type(
     "-moz-force-broken-image-icon",
     "MozForceBrokenImageIcon",
     "computed::MozForceBrokenImageIcon::false_value()",
+    engines="gecko",
     animation_value_type="discrete",
-    products="gecko",
     spec="None (Nonstandard Firefox-only property)",
 )}
diff --git a/components/style/properties/longhands/xul.mako.rs b/components/style/properties/longhands/xul.mako.rs
index 258fffdf9f8..0862ce533d4 100644
--- a/components/style/properties/longhands/xul.mako.rs
+++ b/components/style/properties/longhands/xul.mako.rs
@@ -11,7 +11,7 @@
 ${helpers.single_keyword(
     "-moz-box-align",
     "stretch start center baseline end",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mBoxAlign",
     gecko_enum_prefix="StyleBoxAlign",
     animation_value_type="discrete",
@@ -22,7 +22,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "-moz-box-direction",
     "normal reverse",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mBoxDirection",
     gecko_enum_prefix="StyleBoxDirection",
     animation_value_type="discrete",
@@ -34,7 +34,7 @@ ${helpers.predefined_type(
     "-moz-box-flex",
     "NonNegativeNumber",
     "From::from(0.)",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mBoxFlex",
     animation_value_type="NonNegativeNumber",
     alias="-webkit-box-flex",
@@ -44,9 +44,9 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "-moz-box-orient",
     "horizontal vertical",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mBoxOrient",
-    extra_gecko_aliases="inline-axis=horizontal block-axis=vertical",
+    gecko_aliases="inline-axis=horizontal block-axis=vertical",
     gecko_enum_prefix="StyleBoxOrient",
     animation_value_type="discrete",
     alias="-webkit-box-orient",
@@ -56,7 +56,8 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "-moz-box-pack",
     "start center end justify",
-    products="gecko", gecko_ffi_name="mBoxPack",
+    engines="gecko",
+    gecko_ffi_name="mBoxPack",
     gecko_enum_prefix="StyleBoxPack",
     animation_value_type="discrete",
     alias="-webkit-box-pack",
@@ -66,7 +67,7 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "-moz-stack-sizing",
     "stretch-to-fit ignore ignore-horizontal ignore-vertical",
-    products="gecko",
+    engines="gecko",
     gecko_ffi_name="mStackSizing",
     gecko_enum_prefix="StyleStackSizing",
     animation_value_type="discrete",
@@ -77,8 +78,8 @@ ${helpers.predefined_type(
     "-moz-box-ordinal-group",
     "Integer",
     "0",
+    engines="gecko",
     parse_method="parse_non_negative",
-    products="gecko",
     alias="-webkit-box-ordinal-group",
     gecko_ffi_name="mBoxOrdinal",
     animation_value_type="discrete",
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index e00e3c7cb79..6915e19dde8 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -167,7 +167,7 @@ pub mod shorthands {
         for p in data.longhands:
             if p.name in ['direction', 'unicode-bidi']:
                 continue;
-            if not p.enabled_in_content() and not p.experimental(product):
+            if not p.enabled_in_content() and not p.experimental(engine):
                 continue;
             if p.logical:
                 logical_longhands.append(p.name)
@@ -177,6 +177,7 @@ pub mod shorthands {
         data.declare_shorthand(
             "all",
             logical_longhands + other_longhands,
+            engines="gecko servo-2013 servo-2020",
             spec="https://drafts.csswg.org/css-cascade-3/#all-shorthand"
         )
     %>
@@ -426,7 +427,7 @@ pub struct NonCustomPropertyId(usize);
 pub const NON_CUSTOM_PROPERTY_ID_COUNT: usize =
     ${len(data.longhands) + len(data.shorthands) + len(data.all_aliases())};
 
-% if product == "gecko":
+% if engine == "gecko":
 #[allow(dead_code)]
 unsafe fn static_assert_nscsspropertyid() {
     % for i, property in enumerate(data.longhands + data.shorthands + data.all_aliases()):
@@ -492,20 +493,26 @@ impl NonCustomPropertyId {
     fn enabled_for_all_content(self) -> bool {
         ${static_non_custom_property_id_set(
             "EXPERIMENTAL",
-            lambda p: p.experimental(product)
+            lambda p: p.experimental(engine)
         )}
 
         ${static_non_custom_property_id_set(
             "ALWAYS_ENABLED",
-            lambda p: (not p.experimental(product)) and p.enabled_in_content()
+            lambda p: (not p.experimental(engine)) and p.enabled_in_content()
         )}
 
         let passes_pref_check = || {
-            % if product == "servo":
+            % if engine == "gecko":
+                unsafe { structs::nsCSSProps_gPropertyEnabled[self.0] }
+            % else:
                 static PREF_NAME: [Option< &str>; ${len(data.longhands) + len(data.shorthands)}] = [
                     % for property in data.longhands + data.shorthands:
-                        % if property.servo_pref:
-                            Some("${property.servo_pref}"),
+                        <%
+                            attrs = {"servo-2013": "servo_2013_pref", "servo-2020": "servo_2020_pref"}
+                            pref = getattr(property, attrs[engine])
+                        %>
+                        % if pref:
+                            Some("${pref}"),
                         % else:
                             None,
                         % endif
@@ -517,8 +524,6 @@ impl NonCustomPropertyId {
                 };
 
                 prefs::pref_map().get(pref).as_bool().unwrap_or(false)
-            % else:
-                unsafe { structs::nsCSSProps_gPropertyEnabled[self.0] }
             % endif
         };
 
@@ -1242,7 +1247,7 @@ impl LonghandId {
     /// processing these properties.
     fn is_visited_dependent(&self) -> bool {
         matches!(*self,
-            % if product == "gecko":
+            % if engine == "gecko":
             LonghandId::ColumnRuleColor |
             LonghandId::TextEmphasisColor |
             LonghandId::WebkitTextFillColor |
@@ -1252,13 +1257,15 @@ impl LonghandId {
             LonghandId::Stroke |
             LonghandId::CaretColor |
             % endif
-            LonghandId::Color |
+            % if engine in ["gecko", "servo-2013"]:
             LonghandId::BackgroundColor |
             LonghandId::BorderTopColor |
             LonghandId::BorderRightColor |
             LonghandId::BorderBottomColor |
             LonghandId::BorderLeftColor |
-            LonghandId::OutlineColor
+            LonghandId::OutlineColor |
+            % endif
+            LonghandId::Color
         )
     }
 
@@ -1279,7 +1286,7 @@ impl LonghandId {
     /// correct.
     fn is_early_property(&self) -> bool {
         matches!(*self,
-            % if product == 'gecko':
+            % if engine == "gecko":
 
             // Needed to properly compute the writing mode, to resolve logical
             // properties, and similar stuff. In this block instead of along
@@ -1305,12 +1312,14 @@ impl LonghandId {
             LonghandId::MozScriptLevel |
             % endif
 
+            % if engine in ["gecko", "servo-2013"]:
             // Needed to compute the first available font, in order to
             // compute font-relative units correctly.
             LonghandId::FontSize |
             LonghandId::FontWeight |
             LonghandId::FontStretch |
             LonghandId::FontStyle |
+            % endif
             LonghandId::FontFamily |
 
             // Needed to properly compute the writing mode, to resolve logical
@@ -2151,7 +2160,7 @@ impl PropertyDeclaration {
     /// Returns whether or not the property is set by a system font
     pub fn get_system(&self) -> Option<SystemFont> {
         match *self {
-            % if product == "gecko":
+            % if engine == "gecko":
             % for prop in SYSTEM_FONT_LONGHANDS:
                 PropertyDeclaration::${to_camel_case(prop)}(ref prop) => {
                     prop.get_system()
@@ -2355,7 +2364,8 @@ impl PropertyDeclaration {
 }
 
 type SubpropertiesArray<T> =
-    [T; ${max(len(s.sub_properties) for s in data.shorthands_except_all())}];
+    [T; ${max(len(s.sub_properties) for s in data.shorthands_except_all()) \
+          if data.shorthands_except_all() else 0}];
 
 type SubpropertiesVec<T> = ArrayVec<SubpropertiesArray<T>>;
 
@@ -3181,7 +3191,7 @@ impl ComputedValuesInner {
     }
 }
 
-% if product == "gecko":
+% if engine == "gecko":
     pub use crate::servo_arc::RawOffsetArc as BuilderArc;
     /// Clone an arc, returning a regular arc
     fn clone_arc<T: 'static>(x: &BuilderArc<T>) -> Arc<T> {
@@ -3494,7 +3504,7 @@ impl<'a> StyleBuilder<'a> {
     }
     % endif
 
-    % if not property.is_vector or property.simple_vector_bindings or product != "gecko":
+    % 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}(
@@ -3882,7 +3892,7 @@ macro_rules! longhand_properties_idents {
     }
 }
 
-% if product == "servo":
+% 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),* ]) => ({
diff --git a/components/style/properties/shorthands/background.mako.rs b/components/style/properties/shorthands/background.mako.rs
index 7986201e423..011ff5cb3d8 100644
--- a/components/style/properties/shorthands/background.mako.rs
+++ b/components/style/properties/shorthands/background.mako.rs
@@ -6,6 +6,7 @@
 
 // TODO: other background-* properties
 <%helpers:shorthand name="background"
+                    engines="gecko servo-2013"
                     sub_properties="background-color background-position-x background-position-y background-repeat
                                     background-attachment background-image background-size background-origin
                                     background-clip"
@@ -193,6 +194,7 @@
 </%helpers:shorthand>
 
 <%helpers:shorthand name="background-position"
+                    engines="gecko servo-2013"
                     flags="SHORTHAND_IN_GETCS"
                     sub_properties="background-position-x background-position-y"
                     spec="https://drafts.csswg.org/css-backgrounds-4/#the-background-position">
diff --git a/components/style/properties/shorthands/border.mako.rs b/components/style/properties/shorthands/border.mako.rs
index 1f8df0df6a1..564244a9acc 100644
--- a/components/style/properties/shorthands/border.mako.rs
+++ b/components/style/properties/shorthands/border.mako.rs
@@ -5,19 +5,28 @@
 <%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",
-                               spec="https://drafts.csswg.org/css-backgrounds/#border-color",
-                               allow_quirks="Yes")}
+${helpers.four_sides_shorthand(
+    "border-color",
+    "border-%s-color",
+    "specified::Color::parse",
+    engines="gecko servo-2013",
+    spec="https://drafts.csswg.org/css-backgrounds/#border-color",
+    allow_quirks="Yes",
+)}
 
 ${helpers.four_sides_shorthand(
     "border-style",
     "border-%s-style",
     "specified::BorderStyle::parse",
+    engines="gecko servo-2013",
     needs_context=False,
     spec="https://drafts.csswg.org/css-backgrounds/#border-style",
 )}
 
-<%helpers:shorthand name="border-width" sub_properties="${
+<%helpers:shorthand
+    name="border-width"
+    engines="gecko servo-2013"
+    sub_properties="${
         ' '.join('border-%s-width' % side
                  for side in PHYSICAL_SIDES)}"
     spec="https://drafts.csswg.org/css-backgrounds/#border-width">
@@ -101,11 +110,13 @@ pub fn parse_border<'i, 't>(
     %>
     <%helpers:shorthand
         name="border-${side}"
+        engines="gecko servo-2013 servo-2020"
+        servo_2020_pref="layout.2020.unimplemented"
         sub_properties="${' '.join(
             'border-%s-%s' % (side, prop)
             for prop in ['color', 'style', 'width']
         )}"
-        alias="${maybe_moz_logical_alias(product, (side, logical), '-moz-border-%s')}"
+        alias="${maybe_moz_logical_alias(engine, (side, logical), '-moz-border-%s')}"
         spec="${spec}">
 
     pub fn parse_value<'i, 't>(
@@ -135,6 +146,7 @@ pub fn parse_border<'i, 't>(
 % endfor
 
 <%helpers:shorthand name="border"
+    engines="gecko servo-2013"
     sub_properties="${' '.join('border-%s-%s' % (side, prop)
         for side in PHYSICAL_SIDES
         for prop in ['color', 'style', 'width'])}
@@ -216,10 +228,16 @@ pub fn parse_border<'i, 't>(
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="border-radius" 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">
+<%helpers:shorthand
+    name="border-radius"
+    engines="gecko servo-2013"
+    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;
@@ -256,10 +274,14 @@ pub fn parse_border<'i, 't>(
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="border-image" sub_properties="border-image-outset
-    border-image-repeat border-image-slice border-image-source border-image-width"
+<%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">
+    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};
 
@@ -362,6 +384,7 @@ pub fn parse_border<'i, 't>(
             spec = "https://drafts.csswg.org/css-logical/#propdef-border-%s-%s" % (axis, prop)
         %>
         <%helpers:shorthand
+            engines="gecko servo-2013"
             name="border-${axis}-${prop}"
             sub_properties="${' '.join(
                 'border-%s-%s-%s' % (axis, side, prop)
@@ -407,6 +430,7 @@ pub fn parse_border<'i, 't>(
     %>
     <%helpers:shorthand
         name="border-${axis}"
+        engines="gecko servo-2013"
         sub_properties="${' '.join(
             'border-%s-%s-width' % (axis, side)
             for side in ['start', 'end']
diff --git a/components/style/properties/shorthands/box.mako.rs b/components/style/properties/shorthands/box.mako.rs
index e69593f1cc1..b0893e110b9 100644
--- a/components/style/properties/shorthands/box.mako.rs
+++ b/components/style/properties/shorthands/box.mako.rs
@@ -9,6 +9,7 @@ ${helpers.two_properties_shorthand(
     "overflow-x",
     "overflow-y",
     "specified::Overflow::parse",
+    engines="gecko servo-2013",
     flags="SHORTHAND_IN_GETCS",
     needs_context=False,
     spec="https://drafts.csswg.org/css-overflow/#propdef-overflow",
@@ -19,14 +20,15 @@ ${helpers.two_properties_shorthand(
     "overflow-clip-box-block",
     "overflow-clip-box-inline",
     "specified::OverflowClipBox::parse",
+    engines="gecko",
     enabled_in="ua",
     needs_context=False,
     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)",
-    products="gecko",
 )}
 
+#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
 macro_rules! try_parse_one {
     ($context: expr, $input: expr, $var: ident, $prop_module: ident) => {
         if $var.is_none() {
@@ -41,6 +43,7 @@ macro_rules! try_parse_one {
 }
 
 <%helpers:shorthand name="transition"
+                    engines="gecko servo-2013"
                     extra_prefixes="moz:layout.css.prefixes.transitions webkit"
                     sub_properties="transition-property transition-duration
                                     transition-timing-function
@@ -186,6 +189,7 @@ macro_rules! try_parse_one {
 </%helpers:shorthand>
 
 <%helpers:shorthand name="animation"
+                    engines="gecko servo-2013"
                     extra_prefixes="moz:layout.css.prefixes.animations webkit"
                     sub_properties="animation-name animation-duration
                                     animation-timing-function animation-delay
@@ -308,15 +312,15 @@ ${helpers.two_properties_shorthand(
     "overscroll-behavior-x",
     "overscroll-behavior-y",
     "specified::OverscrollBehavior::parse",
+    engines="gecko",
     needs_context=False,
-    products="gecko",
     gecko_pref="layout.css.overscroll-behavior.enabled",
     spec="https://wicg.github.io/overscroll-behavior/#overscroll-behavior-properties",
 )}
 
 <%helpers:shorthand
+    engines="gecko"
     name="page-break-before"
-    products="gecko"
     flags="SHORTHAND_IN_GETCS IS_LEGACY_SHORTHAND"
     sub_properties="break-before"
     spec="https://drafts.csswg.org/css2/page.html#propdef-page-break-before"
@@ -339,8 +343,8 @@ ${helpers.two_properties_shorthand(
 </%helpers:shorthand>
 
 <%helpers:shorthand
+    engines="gecko"
     name="page-break-after"
-    products="gecko"
     flags="SHORTHAND_IN_GETCS IS_LEGACY_SHORTHAND"
     sub_properties="break-after"
     spec="https://drafts.csswg.org/css2/page.html#propdef-page-break-after"
diff --git a/components/style/properties/shorthands/column.mako.rs b/components/style/properties/shorthands/column.mako.rs
index 9985942a5b9..f9612fd6c0c 100644
--- a/components/style/properties/shorthands/column.mako.rs
+++ b/components/style/properties/shorthands/column.mako.rs
@@ -5,8 +5,9 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="columns"
+                    engines="gecko servo-2013"
                     sub_properties="column-width column-count"
-                    servo_pref="layout.columns.enabled",
+                    servo_2013_pref="layout.columns.enabled",
                     derive_serialize="True"
                     extra_prefixes="moz" spec="https://drafts.csswg.org/css-multicol/#propdef-columns">
     use crate::properties::longhands::{column_count, column_width};
@@ -55,10 +56,14 @@
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="column-rule" products="gecko" extra_prefixes="moz"
+<%helpers:shorthand
+    name="column-rule"
+    engines="gecko"
+    extra_prefixes="moz"
     sub_properties="column-rule-width column-rule-style column-rule-color"
     derive_serialize="True"
-    spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
+    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;
 
diff --git a/components/style/properties/shorthands/font.mako.rs b/components/style/properties/shorthands/font.mako.rs
index 96916b4953b..b6426822666 100644
--- a/components/style/properties/shorthands/font.mako.rs
+++ b/components/style/properties/shorthands/font.mako.rs
@@ -5,22 +5,33 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 <% from data import SYSTEM_FONT_LONGHANDS %>
 
-<%helpers:shorthand name="font"
-                    sub_properties="font-style font-variant-caps font-weight font-stretch
-                                    font-size line-height font-family
-                                    ${'font-size-adjust' if product == 'gecko' else ''}
-                                    ${'font-kerning' if product == 'gecko' else ''}
-                                    ${'font-optical-sizing' if product == 'gecko' else ''}
-                                    ${'font-variant-alternates' if product == 'gecko' else ''}
-                                    ${'font-variant-east-asian' if product == 'gecko' else ''}
-                                    ${'font-variant-ligatures' if product == 'gecko' else ''}
-                                    ${'font-variant-numeric' if product == 'gecko' else ''}
-                                    ${'font-variant-position' if product == 'gecko' else ''}
-                                    ${'font-language-override' if product == 'gecko' else ''}
-                                    ${'font-feature-settings' if product == 'gecko' else ''}
-                                    ${'font-variation-settings' if product == 'gecko' else ''}"
-                    derive_value_info="False"
-                    spec="https://drafts.csswg.org/css-fonts-3/#propdef-font">
+<%helpers:shorthand
+    name="font"
+    engines="gecko servo-2013 servo-2020"
+    servo_2020_pref="layout.2020.unimplemented"
+    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-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::parser::Parse;
     use crate::properties::longhands::{font_family, font_style, font_weight, font_stretch};
     use crate::properties::longhands::font_variant_caps;
@@ -37,7 +48,7 @@
                                 variant_position feature_settings \
                                 variation_settings optical_sizing".split()
     %>
-    % if product == "gecko":
+    % if engine == "gecko":
         % for prop in gecko_sub_properties:
             use crate::properties::longhands::font_${prop};
         % endfor
@@ -54,7 +65,7 @@
         let mut weight = None;
         let mut stretch = None;
         let size;
-        % if product == "gecko":
+        % if engine == "gecko":
             if let Ok(sys) = input.try(SystemFont::parse) {
                 return Ok(expanded! {
                      % for name in SYSTEM_FONT_LONGHANDS:
@@ -135,7 +146,7 @@
             font_size: size,
             line_height: line_height.unwrap_or(LineHeight::normal()),
             font_family: family,
-            % if product == "gecko":
+            % if engine == "gecko":
                 % for name in gecko_sub_properties:
                     font_${name}: font_${name}::get_initial_specified_value(),
                 % endfor
@@ -143,7 +154,7 @@
         })
     }
 
-    % if product == "gecko":
+    % if engine == "gecko":
         enum CheckSystemResult {
             AllSystem(SystemFont),
             SomeSystem,
@@ -153,7 +164,7 @@
 
     impl<'a> ToCss for LonghandsToSerialize<'a> {
         fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
-            % if product == "gecko":
+            % if engine == "gecko":
                 match self.check_system() {
                     CheckSystemResult::AllSystem(sys) => return sys.to_css(dest),
                     CheckSystemResult::SomeSystem => return Ok(()),
@@ -161,7 +172,7 @@
                 }
             % endif
 
-            % if product == "gecko":
+            % if engine == "gecko":
             if let Some(v) = self.font_optical_sizing {
                 if v != &font_optical_sizing::get_initial_specified_value() {
                     return Ok(());
@@ -222,7 +233,7 @@
     }
 
     impl<'a> LonghandsToSerialize<'a> {
-        % if product == "gecko":
+        % if engine == "gecko":
         /// Check if some or all members are system fonts
         fn check_system(&self) -> CheckSystemResult {
             let mut sys = None;
@@ -285,18 +296,19 @@
 </%helpers:shorthand>
 
 <%helpers:shorthand name="font-variant"
+                    engines="gecko servo-2013"
                     flags="SHORTHAND_IN_GETCS"
                     sub_properties="font-variant-caps
-                                    ${'font-variant-alternates' if product == 'gecko' else ''}
-                                    ${'font-variant-east-asian' if product == 'gecko' else ''}
-                                    ${'font-variant-ligatures' if product == 'gecko' else ''}
-                                    ${'font-variant-numeric' if product == 'gecko' else ''}
-                                    ${'font-variant-position' if product == 'gecko' else ''}"
+                                    ${'font-variant-alternates' if engine == 'gecko' else ''}
+                                    ${'font-variant-east-asian' 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">
     <% gecko_sub_properties = "alternates east_asian ligatures numeric position".split() %>
     <%
         sub_properties = ["caps"]
-        if product == "gecko":
+        if engine == "gecko":
             sub_properties += gecko_sub_properties
     %>
 
@@ -319,7 +331,7 @@
         } else if input.try(|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 product == "gecko":
+        % if engine == "gecko":
             ligatures = Some(FontVariantLigatures::none());
         % endif
         } else {
@@ -359,7 +371,7 @@
         fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
 
             let has_none_ligatures =
-            % if product == "gecko":
+            % if engine == "gecko":
                 self.font_variant_ligatures == &FontVariantLigatures::none();
             % else:
                 false;
diff --git a/components/style/properties/shorthands/inherited_svg.mako.rs b/components/style/properties/shorthands/inherited_svg.mako.rs
index 98425f95c51..899fc6a4643 100644
--- a/components/style/properties/shorthands/inherited_svg.mako.rs
+++ b/components/style/properties/shorthands/inherited_svg.mako.rs
@@ -4,9 +4,12 @@
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
-<%helpers:shorthand name="marker" products="gecko"
+<%helpers:shorthand
+    name="marker"
+    engines="gecko"
     sub_properties="marker-start marker-end marker-mid"
-    spec="https://www.w3.org/TR/SVG2/painting.html#MarkerShorthand">
+    spec="https://www.w3.org/TR/SVG2/painting.html#MarkerShorthand"
+>
     use crate::values::specified::url::UrlOrNone;
 
     pub fn parse_value<'i, 't>(
diff --git a/components/style/properties/shorthands/inherited_text.mako.rs b/components/style/properties/shorthands/inherited_text.mako.rs
index 6c50ea0fb28..b9a0c008bac 100644
--- a/components/style/properties/shorthands/inherited_text.mako.rs
+++ b/components/style/properties/shorthands/inherited_text.mako.rs
@@ -4,10 +4,13 @@
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
-<%helpers:shorthand name="text-emphasis" products="gecko"
+<%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">
+    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>(
@@ -46,9 +49,9 @@
 // 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"
-                    products="gecko"
                     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};
diff --git a/components/style/properties/shorthands/list.mako.rs b/components/style/properties/shorthands/list.mako.rs
index 4d25326abc8..f2e8e28b19d 100644
--- a/components/style/properties/shorthands/list.mako.rs
+++ b/components/style/properties/shorthands/list.mako.rs
@@ -5,6 +5,7 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="list-style"
+                    engines="gecko servo-2013"
                     sub_properties="list-style-position list-style-image list-style-type"
                     derive_serialize="True"
                     spec="https://drafts.csswg.org/css-lists/#propdef-list-style">
@@ -61,11 +62,11 @@
         let position = unwrap_or_initial!(list_style_position, position);
 
         fn list_style_type_none() -> list_style_type::SpecifiedValue {
-            % if product == "servo":
-            list_style_type::SpecifiedValue::None
+            % if engine == "gecko":
+                use crate::values::generics::CounterStyleOrNone;
+                list_style_type::SpecifiedValue::CounterStyle(CounterStyleOrNone::None)
             % else:
-            use crate::values::generics::CounterStyleOrNone;
-            list_style_type::SpecifiedValue::CounterStyle(CounterStyleOrNone::None)
+                list_style_type::SpecifiedValue::None
             % endif
         }
 
diff --git a/components/style/properties/shorthands/margin.mako.rs b/components/style/properties/shorthands/margin.mako.rs
index 9b996abbe86..a767ad604fb 100644
--- a/components/style/properties/shorthands/margin.mako.rs
+++ b/components/style/properties/shorthands/margin.mako.rs
@@ -8,6 +8,7 @@ ${helpers.four_sides_shorthand(
     "margin",
     "margin-%s",
     "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-box/#propdef-margin",
     allowed_in_page_rule=True,
     allow_quirks="Yes",
@@ -18,6 +19,7 @@ ${helpers.two_properties_shorthand(
     "margin-block-start",
     "margin-block-end",
     "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-logical/#propdef-margin-block"
 )}
 
@@ -26,6 +28,7 @@ ${helpers.two_properties_shorthand(
     "margin-inline-start",
     "margin-inline-end",
     "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-logical/#propdef-margin-inline"
 )}
 
@@ -33,8 +36,8 @@ ${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",
-    products="gecko",
     gecko_pref="layout.css.scroll-snap-v1.enabled",
 )}
 
@@ -43,8 +46,8 @@ ${helpers.two_properties_shorthand(
     "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",
-    products="gecko",
     gecko_pref="layout.css.scroll-snap-v1.enabled",
 )}
 
@@ -53,7 +56,7 @@ ${helpers.two_properties_shorthand(
     "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",
-    products="gecko",
     gecko_pref="layout.css.scroll-snap-v1.enabled",
 )}
diff --git a/components/style/properties/shorthands/outline.mako.rs b/components/style/properties/shorthands/outline.mako.rs
index c47ba32d473..d667aa9ffb1 100644
--- a/components/style/properties/shorthands/outline.mako.rs
+++ b/components/style/properties/shorthands/outline.mako.rs
@@ -5,6 +5,7 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="outline"
+                    engines="gecko servo-2013"
                     sub_properties="outline-color outline-style outline-width"
                     derive_serialize="True"
                     spec="https://drafts.csswg.org/css-ui/#propdef-outline">
@@ -58,10 +59,15 @@
 </%helpers:shorthand>
 
 // The -moz-outline-radius shorthand is non-standard and not on a standards track.
-<%helpers:shorthand name="-moz-outline-radius" sub_properties="${' '.join(
-    '-moz-outline-radius-%s' % corner
-    for corner in ['topleft', 'topright', 'bottomright', 'bottomleft']
-)}" products="gecko" spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius)">
+<%helpers:shorthand
+    name="-moz-outline-radius"
+    engines="gecko"
+    sub_properties="${' '.join(
+        '-moz-outline-radius-%s' % corner
+        for corner in ['topleft', 'topright', 'bottomright', 'bottomleft']
+    )}"
+    spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius)"
+>
     use crate::values::generics::rect::Rect;
     use crate::values::specified::border::BorderRadius;
     use crate::parser::Parse;
diff --git a/components/style/properties/shorthands/padding.mako.rs b/components/style/properties/shorthands/padding.mako.rs
index 8d50c3b9e38..6499d494d15 100644
--- a/components/style/properties/shorthands/padding.mako.rs
+++ b/components/style/properties/shorthands/padding.mako.rs
@@ -8,6 +8,7 @@ ${helpers.four_sides_shorthand(
     "padding",
     "padding-%s",
     "specified::NonNegativeLengthPercentage::parse",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-box-3/#propdef-padding",
     allow_quirks="Yes",
 )}
@@ -17,6 +18,7 @@ ${helpers.two_properties_shorthand(
     "padding-block-start",
     "padding-block-end",
     "specified::NonNegativeLengthPercentage::parse",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-logical/#propdef-padding-block"
 )}
 
@@ -25,6 +27,7 @@ ${helpers.two_properties_shorthand(
     "padding-inline-start",
     "padding-inline-end",
     "specified::NonNegativeLengthPercentage::parse",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-logical/#propdef-padding-inline"
 )}
 
@@ -32,7 +35,7 @@ ${helpers.four_sides_shorthand(
     "scroll-padding",
     "scroll-padding-%s",
     "specified::NonNegativeLengthPercentageOrAuto::parse",
-    products="gecko",
+    engines="gecko",
     gecko_pref="layout.css.scroll-snap-v1.enabled",
     spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"
 )}
@@ -42,7 +45,7 @@ ${helpers.two_properties_shorthand(
     "scroll-padding-block-start",
     "scroll-padding-block-end",
     "specified::NonNegativeLengthPercentageOrAuto::parse",
-    products="gecko",
+    engines="gecko",
     gecko_pref="layout.css.scroll-snap-v1.enabled",
     spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-block"
 )}
@@ -52,7 +55,7 @@ ${helpers.two_properties_shorthand(
     "scroll-padding-inline-start",
     "scroll-padding-inline-end",
     "specified::NonNegativeLengthPercentageOrAuto::parse",
-    products="gecko",
+    engines="gecko",
     gecko_pref="layout.css.scroll-snap-v1.enabled",
     spec="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding-inline"
 )}
diff --git a/components/style/properties/shorthands/position.mako.rs b/components/style/properties/shorthands/position.mako.rs
index ded5eb951b7..8e61f0f6ecd 100644
--- a/components/style/properties/shorthands/position.mako.rs
+++ b/components/style/properties/shorthands/position.mako.rs
@@ -5,6 +5,7 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="flex-flow"
+                    engines="gecko servo-2013"
                     sub_properties="flex-direction flex-wrap"
                     extra_prefixes="webkit"
                     derive_serialize="True"
@@ -44,6 +45,7 @@
 </%helpers:shorthand>
 
 <%helpers:shorthand name="flex"
+                    engines="gecko servo-2013"
                     sub_properties="flex-grow flex-shrink flex-basis"
                     extra_prefixes="webkit"
                     derive_serialize="True"
@@ -108,9 +110,13 @@
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="gap" alias="grid-gap" sub_properties="row-gap column-gap"
-                    spec="https://drafts.csswg.org/css-align-3/#gap-shorthand"
-                    products="gecko">
+<%helpers:shorthand
+    name="gap"
+    engines="gecko"
+    alias="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>)
@@ -139,9 +145,12 @@
 </%helpers:shorthand>
 
 % for kind in ["row", "column"]:
-<%helpers:shorthand name="grid-${kind}" sub_properties="grid-${kind}-start grid-${kind}-end"
-                    spec="https://drafts.csswg.org/css-grid/#propdef-grid-${kind}"
-                    products="gecko">
+<%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;
@@ -181,10 +190,12 @@
 </%helpers:shorthand>
 % endfor
 
-<%helpers:shorthand name="grid-area"
-                    sub_properties="grid-row-start grid-row-end grid-column-start grid-column-end"
-                    spec="https://drafts.csswg.org/css-grid/#propdef-grid-area"
-                    products="gecko">
+<%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;
@@ -249,10 +260,12 @@
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="grid-template"
-                    sub_properties="grid-template-rows grid-template-columns grid-template-areas"
-                    spec="https://drafts.csswg.org/css-grid/#propdef-grid-template"
-                    products="gecko">
+<%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, TrackListType};
@@ -476,11 +489,13 @@
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="grid"
-                    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"
-                    products="gecko">
+<%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, TrackListType};
@@ -629,9 +644,12 @@
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="place-content" sub_properties="align-content justify-content"
-                    spec="https://drafts.csswg.org/css-align/#propdef-place-content"
-                    products="gecko">
+<%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>(
@@ -681,9 +699,12 @@
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="place-self" sub_properties="align-self justify-self"
-                    spec="https://drafts.csswg.org/css-align/#place-self-property"
-                    products="gecko">
+<%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>(
@@ -719,9 +740,12 @@
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="place-items" sub_properties="align-items justify-items"
-                    spec="https://drafts.csswg.org/css-align/#place-items-property"
-                    products="gecko">
+<%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;
 
@@ -764,6 +788,7 @@ ${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",
 )}
@@ -773,6 +798,7 @@ ${helpers.two_properties_shorthand(
     "inset-block-start",
     "inset-block-end",
     "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-logical/#propdef-inset-block"
 )}
 
@@ -781,5 +807,6 @@ ${helpers.two_properties_shorthand(
     "inset-inline-start",
     "inset-inline-end",
     "specified::LengthPercentageOrAuto::parse",
+    engines="gecko servo-2013",
     spec="https://drafts.csswg.org/css-logical/#propdef-inset-inline"
 )}
diff --git a/components/style/properties/shorthands/svg.mako.rs b/components/style/properties/shorthands/svg.mako.rs
index 0acaff426cf..6610968f24d 100644
--- a/components/style/properties/shorthands/svg.mako.rs
+++ b/components/style/properties/shorthands/svg.mako.rs
@@ -4,7 +4,7 @@
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
-<%helpers:shorthand name="mask" products="gecko" extra_prefixes="webkit"
+<%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"
@@ -25,7 +25,7 @@
                     mask_clip::single_value::SpecifiedValue::PaddingBox ,
                 mask_origin::single_value::SpecifiedValue::BorderBox =>
                     mask_clip::single_value::SpecifiedValue::BorderBox,
-                % if product == "gecko":
+                % if engine == "gecko":
                 mask_origin::single_value::SpecifiedValue::FillBox =>
                     mask_clip::single_value::SpecifiedValue::FillBox ,
                 mask_origin::single_value::SpecifiedValue::StrokeBox =>
@@ -195,7 +195,7 @@
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="mask-position" products="gecko" extra_prefixes="webkit"
+<%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">
diff --git a/components/style/properties/shorthands/text.mako.rs b/components/style/properties/shorthands/text.mako.rs
index 884463cf394..905512b08df 100644
--- a/components/style/properties/shorthands/text.mako.rs
+++ b/components/style/properties/shorthands/text.mako.rs
@@ -5,23 +5,23 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="text-decoration"
+                    engines="gecko servo-2013"
                     flags="SHORTHAND_IN_GETCS"
                     sub_properties="text-decoration-line
-                    ${' text-decoration-style text-decoration-color' if product == 'gecko' else ''}"
+                    ${' text-decoration-style text-decoration-color' if engine == 'gecko' else ''}"
                     spec="https://drafts.csswg.org/css-text-decor/#propdef-text-decoration">
 
-    % if product == "gecko":
+    % if engine == "gecko":
         use crate::values::specified;
-        use crate::properties::longhands::{text_decoration_line, text_decoration_style, text_decoration_color};
-    % else:
-        use crate::properties::longhands::text_decoration_line;
+        use crate::properties::longhands::{text_decoration_style, text_decoration_color};
     % 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 product == "gecko":
+        % if engine == "gecko":
             let (mut line, mut style, mut color, mut any) = (None, None, None, false);
         % else:
             let (mut line, mut any) = (None, false);
@@ -42,7 +42,7 @@
 
             parse_component!(line, text_decoration_line);
 
-            % if product == "gecko":
+            % if engine == "gecko":
                 parse_component!(style, text_decoration_style);
                 parse_component!(color, text_decoration_color);
             % endif
@@ -57,7 +57,7 @@
         Ok(expanded! {
             text_decoration_line: unwrap_or_initial!(text_decoration_line, line),
 
-            % if product == "gecko":
+            % if engine == "gecko":
                 text_decoration_style: unwrap_or_initial!(text_decoration_style, style),
                 text_decoration_color: unwrap_or_initial!(text_decoration_color, color),
             % endif
@@ -68,7 +68,7 @@
         fn to_css<W>(&self, dest: &mut CssWriter<W>) -> fmt::Result where W: fmt::Write {
             self.text_decoration_line.to_css(dest)?;
 
-            % if product == "gecko":
+            % if engine == "gecko":
                 if *self.text_decoration_style != text_decoration_style::SpecifiedValue::Solid {
                     dest.write_str(" ")?;
                     self.text_decoration_style.to_css(dest)?;
diff --git a/components/style/style_adjuster.rs b/components/style/style_adjuster.rs
index 21b6fbd60ca..38b908a16c6 100644
--- a/components/style/style_adjuster.rs
+++ b/components/style/style_adjuster.rs
@@ -243,7 +243,7 @@ impl<'a, 'b: 'a> StyleAdjuster<'a, 'b> {
                 .add_flags(ComputedValueFlags::IS_IN_PSEUDO_ELEMENT_SUBTREE);
         }
 
-        #[cfg(feature = "servo")]
+        #[cfg(feature = "servo-layout-2013")]
         {
             if self.style.get_parent_column().is_multicol() {
                 self.style.add_flags(ComputedValueFlags::CAN_BE_FRAGMENTED);
diff --git a/components/style/values/computed/text.rs b/components/style/values/computed/text.rs
index 500595253ff..7201c1aff61 100644
--- a/components/style/values/computed/text.rs
+++ b/components/style/values/computed/text.rs
@@ -172,17 +172,16 @@ impl TextDecorationsInEffect {
     /// Computes the text-decorations in effect for a given style.
     #[cfg(feature = "servo")]
     pub fn from_style(style: &StyleBuilder) -> Self {
-        use crate::values::computed::Display;
-
         // Start with no declarations if this is an atomic inline-level box;
         // otherwise, start with the declarations in effect and add in the text
         // decorations that this block specifies.
-        let mut result = match style.get_box().clone_display() {
-            Display::InlineBlock | Display::InlineTable => Self::default(),
-            _ => style
+        let mut result = if style.get_box().clone_display().is_atomic_inline_level() {
+            Self::default()
+        } else {
+            style
                 .get_parent_inherited_text()
                 .text_decorations_in_effect
-                .clone(),
+                .clone()
         };
 
         let line = style.get_text().clone_text_decoration_line();
diff --git a/components/style/values/specified/border.rs b/components/style/values/specified/border.rs
index 6ac569f3390..8c42b585d91 100644
--- a/components/style/values/specified/border.rs
+++ b/components/style/values/specified/border.rs
@@ -47,13 +47,20 @@ use style_traits::{CssWriter, ParseError, ToCss};
 pub enum BorderStyle {
     Hidden,
     None,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     Inset,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     Groove,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     Outset,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     Ridge,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     Dotted,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     Dashed,
     Solid,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     Double,
 }
 
diff --git a/components/style/values/specified/box.rs b/components/style/values/specified/box.rs
index 3b8f1df005b..0811a48be1a 100644
--- a/components/style/values/specified/box.rs
+++ b/components/style/values/specified/box.rs
@@ -37,6 +37,19 @@ fn moz_box_display_values_enabled(context: &ParserContext) -> bool {
         }
 }
 
+#[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
+fn parse_unimplemented_in_servo_2020(_context: &ParserContext) -> bool {
+    true
+}
+
+#[cfg(feature = "servo-layout-2020")]
+fn parse_unimplemented_in_servo_2020(_context: &ParserContext) -> bool {
+    servo_config::prefs::pref_map()
+        .get("layout.2020.unimplemented")
+        .as_bool()
+        .unwrap_or(false)
+}
+
 /// Defines an element’s display type, which consists of
 /// the two basic qualities of how an element generates boxes
 /// <https://drafts.csswg.org/css-display/#propdef-display>
@@ -72,20 +85,34 @@ pub enum Display {
     #[cfg(feature = "gecko")]
     FlowRoot,
     Inline,
+    #[parse(condition = "parse_unimplemented_in_servo_2020")]
     InlineBlock,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     ListItem,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     Table,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     InlineTable,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     TableRowGroup,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     TableColumn,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     TableColumnGroup,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     TableHeaderGroup,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     TableFooterGroup,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     TableRow,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     TableCell,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     TableCaption,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     #[parse(aliases = "-webkit-flex")]
     Flex,
+    #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
     #[parse(aliases = "-webkit-inline-flex")]
     InlineFlex,
     #[cfg(feature = "gecko")]
@@ -150,12 +177,25 @@ impl Display {
         Display::Inline
     }
 
+    /// <https://drafts.csswg.org/css2/visuren.html#x13>
+    #[cfg(feature = "servo")]
+    #[inline]
+    pub fn is_atomic_inline_level(&self) -> bool {
+        match *self {
+            Display::InlineBlock => true,
+            #[cfg(feature = "servo-layout-2013")]
+            Display::InlineFlex | Display::InlineTable => true,
+            _ => false,
+        }
+    }
+
     /// Returns whether this "display" value is the display of a flex or
     /// grid container.
     ///
     /// This is used to implement various style fixups.
     pub fn is_item_container(&self) -> bool {
         match *self {
+            #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
             Display::Flex | Display::InlineFlex => true,
             #[cfg(feature = "gecko")]
             Display::Grid | Display::InlineGrid => true,
@@ -204,7 +244,9 @@ impl Display {
     pub fn equivalent_block_display(&self, _is_root_element: bool) -> Self {
         match *self {
             // Values that have a corresponding block-outside version.
+            #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
             Display::InlineTable => Display::Table,
+            #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
             Display::InlineFlex => Display::Flex,
 
             #[cfg(feature = "gecko")]
@@ -218,9 +260,9 @@ impl Display {
             Display::Contents | Display::ListItem if _is_root_element => Display::Block,
 
             // These are not changed by blockification.
-            Display::None | Display::Block | Display::Flex | Display::ListItem | Display::Table => {
-                *self
-            },
+            Display::None | Display::Block => *self,
+            #[cfg(any(feature = "gecko", feature = "servo-layout-2013"))]
+            Display::Flex | Display::ListItem | Display::Table => *self,
 
             #[cfg(feature = "gecko")]
             Display::Contents | Display::FlowRoot | Display::Grid | Display::WebkitBox => *self,
diff --git a/python/servo/post_build_commands.py b/python/servo/post_build_commands.py
index b9dc9b080ef..2e3a2aff8e2 100644
--- a/python/servo/post_build_commands.py
+++ b/python/servo/post_build_commands.py
@@ -237,7 +237,7 @@ class PostBuildCommands(CommandBase):
         'params', nargs='...',
         help="Command-line arguments to be passed through to cargo doc")
     @CommandBase.build_like_command_arguments
-    def doc(self, params, **kwargs):
+    def doc(self, params, features, **kwargs):
         env = os.environ.copy()
         env["RUSTUP_TOOLCHAIN"] = self.toolchain()
         rustc_path = check_output(["rustup" + BIN_SUFFIX, "which", "rustc"], env=env)
@@ -265,7 +265,8 @@ class PostBuildCommands(CommandBase):
                     else:
                         copy2(full_name, destination)
 
-        returncode = self.run_cargo_build_like_command("doc", params, **kwargs)
+        features = features or []
+        returncode = self.run_cargo_build_like_command("doc", params, features=features, **kwargs)
         if returncode:
             return returncode
 
@@ -274,7 +275,11 @@ class PostBuildCommands(CommandBase):
             copy2(path.join(static, name), path.join(docs, name))
 
         build = path.join(self.context.topdir, "components", "style", "properties", "build.py")
-        subprocess.check_call([sys.executable, build, "servo", "html"])
+        if "layout-2020" in features:
+            engine = "servo-2020"
+        if "layout-2013" in features:
+            engine = "servo-2013"
+        subprocess.check_call([sys.executable, build, engine, "html"])
 
         script = path.join(self.context.topdir, "components", "script")
         subprocess.check_call(["cmake", "."], cwd=script)
diff --git a/tests/unit/style/properties/scaffolding.rs b/tests/unit/style/properties/scaffolding.rs
index 68e1b96ddfc..bc521e2576f 100644
--- a/tests/unit/style/properties/scaffolding.rs
+++ b/tests/unit/style/properties/scaffolding.rs
@@ -30,7 +30,7 @@ fn properties_list_json() {
         .join("build.py");
     let status = Command::new(python)
         .arg(&script)
-        .arg("servo")
+        .arg("servo-2013")
         .arg("html")
         .arg("regular")
         .status()

From 0215d09ccbfed85c91605dedbb175dc9a96ba0ab Mon Sep 17 00:00:00 2001
From: Simon Sapin <simon.sapin@exyr.org>
Date: Mon, 29 Jul 2019 18:57:20 +0200
Subject: [PATCH 3/3] =?UTF-8?q?Generate=20apis.html=20and=20css-properties?=
 =?UTF-8?q?.json=20for=20docs=20as=20part=20of=20crates=E2=80=99=20build?=
 =?UTF-8?q?=20scripts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

… rather than as an extra step after `cargo doc`.
This helps always using the correct set of CSS properties
(for layout 2013 v.s. 2020).
---
 components/script/CMakeLists.txt              | 23 +------
 components/script/build.rs                    |  6 +-
 .../dom/bindings/codegen/CodegenRust.py       |  2 +-
 .../script/dom/bindings/codegen/GlobalGen.py  | 42 ++++++------
 components/style/properties/build.py          | 43 ++++++------
 .../style/properties/properties.html.mako     | 43 +++++-------
 python/servo/post_build_commands.py           | 13 ----
 tests/unit/style/properties/scaffolding.rs    | 68 ++-----------------
 8 files changed, 67 insertions(+), 173 deletions(-)

diff --git a/components/script/CMakeLists.txt b/components/script/CMakeLists.txt
index 3bb3f2d5dbb..4ad45327d29 100644
--- a/components/script/CMakeLists.txt
+++ b/components/script/CMakeLists.txt
@@ -41,7 +41,6 @@ set(globalgen_deps
   ${bindings_src}/Configuration.py
   ${bindings_src}/CodegenRust.py
   ${bindings_src}/parser/WebIDL.py
-  ${PROJECT_BINARY_DIR}/css_properties.json
   )
 set(bindinggen_deps
   ${globalgen_deps}
@@ -69,28 +68,12 @@ add_custom_command(
                  ${bindings_src}/Bindings.conf
                  .
                  ${PROJECT_SOURCE_DIR}
-                 ${PROJECT_BINARY_DIR}/css_properties.json
-  DEPENDS Bindings _cache ${globalgen_deps} ${webidls}
+                 ${PROJECT_BINARY_DIR}/../css-properties.json
+                 ${PROJECT_SOURCE_DIR}/../../target/doc/servo
+  DEPENDS Bindings _cache ${globalgen_deps} ${webidls} ${PROJECT_BINARY_DIR}/../css-properties.json
   VERBATIM
   )
 
-add_custom_command(
-  OUTPUT apis.html
-  COMMAND ${PYTHON_EXECUTABLE} -B ${bindings_src}/pythonpath.py -I ${bindings_src}/parser -I ${bindings_src}/ply
-                 ${bindings_src}/GlobalGen.py
-                 --cachedir=_cache
-                 --filelist=webidls.list
-                 --only-html
-                 ${bindings_src}/Bindings.conf
-                 .
-                 ${PROJECT_SOURCE_DIR}
-                 ${PROJECT_BINARY_DIR}/css_properties.json
-  DEPENDS _cache ${globalgen_deps} ${webidls}
-  VERBATIM
-  )
-
-add_custom_target(supported-apis DEPENDS apis.html)
-
 # We need an intermediate custom target for this, due to this misfeature:
 # > If any dependency is an OUTPUT of another custom command in the same
 # > directory CMake automatically brings the other custom command into the
diff --git a/components/script/build.rs b/components/script/build.rs
index d044b6e4fb4..bf496fb48f3 100644
--- a/components/script/build.rs
+++ b/components/script/build.rs
@@ -17,10 +17,8 @@ fn main() {
 
     let style_out_dir = PathBuf::from(env::var_os("DEP_SERVO_STYLE_CRATE_OUT_DIR").unwrap());
     let out_dir = PathBuf::from(env::var_os("OUT_DIR").unwrap());
-    let build_dir = out_dir.join("build");
-    let json = "css_properties.json";
-    let _ = std::fs::create_dir(&build_dir); // Ignore errors: they most likely indicate it already exists
-    std::fs::copy(style_out_dir.join(json), build_dir.join(json)).unwrap();
+    let json = "css-properties.json";
+    std::fs::copy(style_out_dir.join(json), out_dir.join(json)).unwrap();
 
     // This must use the Ninja generator -- it's the only one that
     // parallelizes cmake's output properly.  (Cmake generates
diff --git a/components/script/dom/bindings/codegen/CodegenRust.py b/components/script/dom/bindings/codegen/CodegenRust.py
index c7b2c1fe5ef..72f13335ac0 100644
--- a/components/script/dom/bindings/codegen/CodegenRust.py
+++ b/components/script/dom/bindings/codegen/CodegenRust.py
@@ -7550,7 +7550,7 @@ impl %(base)s {
     def SupportedDomApis(config):
         descriptors = config.getDescriptors(isExposedConditionally=False)
 
-        base_path = os.path.join('dom', 'bindings', 'codegen')
+        base_path = os.path.dirname(__file__)
         with open(os.path.join(base_path, 'apis.html.template')) as f:
             base_template = f.read()
         with open(os.path.join(base_path, 'api.html.template')) as f:
diff --git a/components/script/dom/bindings/codegen/GlobalGen.py b/components/script/dom/bindings/codegen/GlobalGen.py
index 9fe736e71fd..1850a41d5f3 100644
--- a/components/script/dom/bindings/codegen/GlobalGen.py
+++ b/components/script/dom/bindings/codegen/GlobalGen.py
@@ -29,12 +29,10 @@ def generate_file(config, name, filename):
 def main():
     # Parse arguments.
     from optparse import OptionParser
-    usageString = "usage: %prog [options] configFile outputdir webidldir cssProperties.json [files]"
+    usageString = "usage: %prog [options] configFile outputdir webidldir cssProperties.json docServoDir [files]"
     o = OptionParser(usage=usageString)
     o.add_option("--cachedir", dest='cachedir', default=None,
                  help="Directory in which to cache lex/parse tables.")
-    o.add_option("--only-html", dest='only_html', action="store_true",
-                 help="Only generate HTML from WebIDL inputs")
     o.add_option("--filelist", dest='filelist', default=None,
                  help="A file containing the list (one per line) of webidl files to process.")
     (options, args) = o.parse_args()
@@ -46,6 +44,7 @@ def main():
     outputdir = args[1]
     baseDir = args[2]
     css_properties_json = args[3]
+    doc_servo = args[4]
     if options.filelist is not None:
         fileList = [l.strip() for l in open(options.filelist).xreadlines()]
     else:
@@ -63,34 +62,30 @@ def main():
 
     parserResults = parser.finish()
 
-    if not options.only_html:
-        # Write the parser results out to a pickle.
-        resultsPath = os.path.join(outputdir, 'ParserResults.pkl')
-        with open(resultsPath, 'wb') as resultsFile:
-            cPickle.dump(parserResults, resultsFile, -1)
+    # Write the parser results out to a pickle.
+    resultsPath = os.path.join(outputdir, 'ParserResults.pkl')
+    with open(resultsPath, 'wb') as resultsFile:
+        cPickle.dump(parserResults, resultsFile, -1)
 
     # Load the configuration.
     config = Configuration(configFile, parserResults)
 
     to_generate = [
-        ('SupportedDomApis', 'apis.html'),
+        ('PrototypeList', 'PrototypeList.rs'),
+        ('RegisterBindings', 'RegisterBindings.rs'),
+        ('InterfaceObjectMap', 'InterfaceObjectMap.rs'),
+        ('InterfaceObjectMapData', 'InterfaceObjectMapData.json'),
+        ('InterfaceTypes', 'InterfaceTypes.rs'),
+        ('InheritTypes', 'InheritTypes.rs'),
+        ('Bindings', os.path.join('Bindings', 'mod.rs')),
+        ('UnionTypes', 'UnionTypes.rs'),
     ]
 
-    if not options.only_html:
-        to_generate = [
-            ('PrototypeList', 'PrototypeList.rs'),
-            ('RegisterBindings', 'RegisterBindings.rs'),
-            ('InterfaceObjectMap', 'InterfaceObjectMap.rs'),
-            ('InterfaceObjectMapData', 'InterfaceObjectMapData.json'),
-            ('InterfaceTypes', 'InterfaceTypes.rs'),
-            ('InheritTypes', 'InheritTypes.rs'),
-            ('Bindings', os.path.join('Bindings', 'mod.rs')),
-            ('UnionTypes', 'UnionTypes.rs'),
-        ]
-
     for name, filename in to_generate:
         generate_file(config, name, os.path.join(outputdir, filename))
 
+    generate_file(config, 'SupportedDomApis', os.path.join(doc_servo, 'apis.html'))
+
 
 def add_css_properties_attributes(webidl_files, css_properties_json, parser):
     for filename in webidl_files:
@@ -102,10 +97,11 @@ def add_css_properties_attributes(webidl_files, css_properties_json, parser):
     css_properties = json.load(open(css_properties_json, "rb"))
     idl = "partial interface CSSStyleDeclaration {\n%s\n};\n" % "\n".join(
         "  [%sCEReactions, SetterThrows] attribute [TreatNullAs=EmptyString] DOMString %s;" % (
-            ('Pref="%s", ' % pref if pref else ""),
+            ('Pref="%s", ' % data["pref"] if data["pref"] else ""),
             attribute_name
         )
-        for (property_name, pref) in css_properties
+        for (kind, properties_list) in sorted(css_properties.items())
+        for (property_name, data) in sorted(properties_list.items())
         for attribute_name in attribute_names(property_name)
     )
     parser.parse(idl.encode("utf-8"), "CSSStyleDeclaration_generated.webidl")
diff --git a/components/style/properties/build.py b/components/style/properties/build.py
index 186018e99a4..45d8fa676ab 100644
--- a/components/style/properties/build.py
+++ b/components/style/properties/build.py
@@ -101,21 +101,32 @@ def main():
                 pref_attr = "servo_2013_pref"
             if engine == "servo-2020":
                 pref_attr = "servo_2020_pref"
-            names_and_prefs = [
-                (prop.name, getattr(prop, pref_attr))
-                for p in properties.longhands + properties.shorthands
-                if p.enabled_in_content()
-                for prop in [p] + p.alias
-            ]
-            write(OUT_DIR, "css_properties.json", json.dumps(names_and_prefs, indent=4))
+            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)
-    elif output == "html":
-        write_html(properties)
 
 
 def abort(message):
@@ -153,19 +164,5 @@ def write(directory, filename, content):
         abort("Found \"{}\" in {} ({})".format(python_addr.group(0), filename, full_path))
 
 
-def write_html(properties):
-    properties = dict(
-        (p.name, {
-            "flag": p.servo_2013_pref,
-            "shorthand": hasattr(p, "sub_properties")
-        })
-        for p in properties.longhands + properties.shorthands
-    )
-    doc_servo = os.path.join(BASE, "..", "..", "..", "target", "doc", "servo")
-    html = render(os.path.join(BASE, "properties.html.mako"), properties=properties)
-    write(doc_servo, "css-properties.html", html)
-    write(doc_servo, "css-properties.json", json.dumps(properties, indent=4))
-
-
 if __name__ == "__main__":
     main()
diff --git a/components/style/properties/properties.html.mako b/components/style/properties/properties.html.mako
index d06524d3e13..5c515935175 100644
--- a/components/style/properties/properties.html.mako
+++ b/components/style/properties/properties.html.mako
@@ -3,38 +3,29 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="generator" content="rustdoc">
-    <meta name="description" content="API documentation for the Rust `servo` crate.">
-    <meta name="keywords" content="rust, rustlang, rust-lang, servo">
-    <title>Supported CSS properties - servo - Rust</title>
+    <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="../main.css">
+    <link rel="stylesheet" type="text/css" href="../light.css">
 </head>
 <body class="rustdoc">
-    <!--[if lte IE 8]>
-    <div class="warning">
-        This old browser is unsupported and will most likely display funky
-        things.
-    </div>
-    <![endif]-->
     <section id='main' class="content mod">
-      <h1 class='fqn'><span class='in-band'>CSS properties currently supported in <a class='mod' href=''>Servo</a></span></h1>
-      <div id='properties' class='docblock'>
-        <table>
+      <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>
-            <th>Property</th>
-            <th>Flag</th>
-            <th>Shorthand</th>
+            <td><code>${name}</code></td>
+            <td><code>${data['pref'] or ''}</code></td>
           </tr>
-          % for prop in properties:
-            <tr>
-              <td>${prop}</td>
-              <td>${properties[prop]['flag']}</td>
-              <td>${properties[prop]['shorthand']}</td>
-            </tr>
-          % endfor
-        </table>
-      </div>
+        % endfor
+      </table>
+      % endfor
     </section>
 </body>
 </html>
diff --git a/python/servo/post_build_commands.py b/python/servo/post_build_commands.py
index 2e3a2aff8e2..1855fefff25 100644
--- a/python/servo/post_build_commands.py
+++ b/python/servo/post_build_commands.py
@@ -13,7 +13,6 @@ import json
 import os
 import os.path as path
 import subprocess
-import sys
 from shutil import copytree, rmtree, copy2
 
 from mach.decorators import (
@@ -274,18 +273,6 @@ class PostBuildCommands(CommandBase):
         for name in os.listdir(static):
             copy2(path.join(static, name), path.join(docs, name))
 
-        build = path.join(self.context.topdir, "components", "style", "properties", "build.py")
-        if "layout-2020" in features:
-            engine = "servo-2020"
-        if "layout-2013" in features:
-            engine = "servo-2013"
-        subprocess.check_call([sys.executable, build, engine, "html"])
-
-        script = path.join(self.context.topdir, "components", "script")
-        subprocess.check_call(["cmake", "."], cwd=script)
-        subprocess.check_call(["cmake", "--build", ".", "--target", "supported-apis"], cwd=script)
-        copy2(path.join(script, "apis.html"), path.join(docs, "servo", "apis.html"))
-
     @Command('browse-doc',
              description='Generate documentation and open it in a web browser',
              category='post-build')
diff --git a/tests/unit/style/properties/scaffolding.rs b/tests/unit/style/properties/scaffolding.rs
index bc521e2576f..d123f283c16 100644
--- a/tests/unit/style/properties/scaffolding.rs
+++ b/tests/unit/style/properties/scaffolding.rs
@@ -4,9 +4,8 @@
 
 use serde_json::{self, Value};
 use std::env;
-use std::fs::{remove_file, File};
+use std::fs::File;
 use std::path::Path;
-use std::process::Command;
 
 #[test]
 fn properties_list_json() {
@@ -19,67 +18,10 @@ fn properties_list_json() {
         .join("doc")
         .join("servo")
         .join("css-properties.json");
-    if json.exists() {
-        remove_file(&json).unwrap()
-    }
-    let python = env::var("PYTHON").ok().unwrap_or_else(find_python);
-    let script = top
-        .join("components")
-        .join("style")
-        .join("properties")
-        .join("build.py");
-    let status = Command::new(python)
-        .arg(&script)
-        .arg("servo-2013")
-        .arg("html")
-        .arg("regular")
-        .status()
-        .unwrap();
-    assert!(status.success(), "{:?}", status);
 
     let properties: Value = serde_json::from_reader(File::open(json).unwrap()).unwrap();
-    assert!(properties.as_object().unwrap().len() > 100);
-    assert!(properties.as_object().unwrap().contains_key("margin"));
-    assert!(properties.as_object().unwrap().contains_key("margin-top"));
-}
-
-#[cfg(windows)]
-fn find_python() -> String {
-    if Command::new("python2.7.exe")
-        .arg("--version")
-        .output()
-        .is_ok()
-    {
-        return "python2.7.exe".to_owned();
-    }
-
-    if Command::new("python27.exe")
-        .arg("--version")
-        .output()
-        .is_ok()
-    {
-        return "python27.exe".to_owned();
-    }
-
-    if Command::new("python.exe").arg("--version").output().is_ok() {
-        return "python.exe".to_owned();
-    }
-
-    panic!("Can't find python (tried python27.exe and python.exe)! Try fixing PATH or setting the PYTHON env var");
-}
-
-#[cfg(not(windows))]
-fn find_python() -> String {
-    if Command::new("python2.7")
-        .arg("--version")
-        .output()
-        .unwrap()
-        .status
-        .success()
-    {
-        "python2.7"
-    } else {
-        "python"
-    }
-    .to_owned()
+    let longhands = properties["longhands"].as_object().unwrap();
+    assert!(longhands.len() > 100);
+    assert!(longhands.get("margin-top").is_some());
+    assert!(properties["shorthands"].get("margin").is_some());
 }