Auto merge of #14939 - upsuper:add-aliases, r=emilio,Manishearth

Add aliases for geckolib for supported properties

<!-- Please describe your changes on the following line: -->
This fixes ~7.5k failures in style system mochitests.

r? @Manishearth

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [ ] These changes fix #__ (github issue number if applicable).

<!-- Either: -->
- [ ] There are tests for these changes OR
- [x] These changes do not require tests because it is for geckolib only

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/14939)
<!-- Reviewable:end -->

20 files changed, 101 insertions, 41 deletions

diff --git a/components/style/properties/data.py b/components/style/properties/data.py
index db4d2051173..abec5947041 100644
--- a/components/style/properties/data.py
+++ b/components/style/properties/data.py
@@ -14,6 +14,14 @@ ALL_SIDES = [(side, False) for side in PHYSICAL_SIDES] + [(side, True) for side
 ALL_SIZES = [(size, False) for size in PHYSICAL_SIZES] + [(size, True) for size in LOGICAL_SIZES]
 
 
+def maybe_moz_logical_alias(product, side, prop):
+    if product == "gecko" and side[1]:
+        axis, dir = side[0].split("-")
+        if axis == "inline":
+            return prop % dir
+    return None
+
+
 def to_rust_ident(name):
     name = name.replace("-", "_")
     if name in ["static", "super", "box", "move"]:  # Rust keywords
@@ -88,7 +96,7 @@ class Longhand(object):
                  predefined_type=None, custom_cascade=False, experimental=False, internal=False,
                  need_clone=False, need_index=False, gecko_ffi_name=None, depend_on_viewport_size=False,
                  allowed_in_keyframe_block=True, complex_color=False, cast_type='u8',
-                 has_uncacheable_values=False, logical=False, alias=None):
+                 has_uncacheable_values=False, logical=False, alias=None, extra_prefixes=None):
         self.name = name
         if not spec:
             raise TypeError("Spec should be specified for %s" % name)
@@ -110,6 +118,7 @@ class Longhand(object):
         self.cast_type = cast_type
         self.logical = arg_to_bool(logical)
         self.alias = alias.split() if alias else []
+        self.extra_prefixes = extra_prefixes.split() if extra_prefixes else []
 
         # https://drafts.csswg.org/css-animations/#keyframes
         # > The <declaration-list> inside of <keyframe-block> accepts any CSS property
@@ -135,7 +144,7 @@ class Longhand(object):
 
 class Shorthand(object):
     def __init__(self, name, sub_properties, spec=None, experimental=False, internal=False,
-                 allowed_in_keyframe_block=True, alias=None):
+                 allowed_in_keyframe_block=True, alias=None, extra_prefixes=None):
         self.name = name
         if not spec:
             raise TypeError("Spec should be specified for %s" % name)
@@ -147,6 +156,7 @@ class Shorthand(object):
         self.sub_properties = sub_properties
         self.internal = internal
         self.alias = alias.split() if alias else []
+        self.extra_prefixes = extra_prefixes.split() if extra_prefixes else []
 
         # https://drafts.csswg.org/css-animations/#keyframes
         # > The <declaration-list> inside of <keyframe-block> accepts any CSS property
@@ -220,12 +230,20 @@ class PropertiesData(object):
     def active_style_structs(self):
         return [s for s in self.style_structs if s.additional_methods or s.longhands]
 
+    def add_prefixed_aliases(self, property):
+        # FIXME Servo's DOM architecture doesn't support vendor-prefixed properties.
+        #       See servo/servo#14941.
+        if self.product == "gecko":
+            for prefix in property.extra_prefixes:
+                property.alias.append('-%s-%s' % (prefix, property.name))
+
     def declare_longhand(self, name, products="gecko servo", disable_when_testing=False, **kwargs):
         products = products.split()
         if self.product not in products and not (self.testing and not disable_when_testing):
             return
 
         longhand = Longhand(self.current_style_struct, name, **kwargs)
+        self.add_prefixed_aliases(longhand)
         self.current_style_struct.longhands.append(longhand)
         self.longhands.append(longhand)
         self.longhands_by_name[name] = longhand
@@ -243,5 +261,6 @@ class PropertiesData(object):
 
         sub_properties = [self.longhands_by_name[s] for s in sub_properties]
         shorthand = Shorthand(name, sub_properties, *args, **kwargs)
+        self.add_prefixed_aliases(shorthand)
         self.shorthands.append(shorthand)
         return shorthand
diff --git a/components/style/properties/longhand/background.mako.rs b/components/style/properties/longhand/background.mako.rs
index 35420469f56..780a4d174e5 100644
--- a/components/style/properties/longhand/background.mako.rs
+++ b/components/style/properties/longhand/background.mako.rs
@@ -203,17 +203,17 @@ ${helpers.single_keyword("background-attachment",
 
 ${helpers.single_keyword("background-clip",
                          "border-box padding-box content-box",
-                         vector=True,
+                         vector=True, extra_prefixes="webkit",
                          spec="https://drafts.csswg.org/css-backgrounds/#the-background-clip",
                          animatable=False)}
 
 ${helpers.single_keyword("background-origin",
                          "padding-box border-box content-box",
-                         vector=True,
+                         vector=True, extra_prefixes="webkit",
                          spec="https://drafts.csswg.org/css-backgrounds/#the-background-origin",
                          animatable=False)}
 
-<%helpers:vector_longhand name="background-size" animatable="True"
+<%helpers:vector_longhand name="background-size" animatable="True" extra_prefixes="webkit"
                           spec="https://drafts.csswg.org/css-backgrounds/#the-background-size">
     use cssparser::Token;
     use std::ascii::AsciiExt;
diff --git a/components/style/properties/longhand/border.mako.rs b/components/style/properties/longhand/border.mako.rs
index 0da25f2a26b..4cce1e4a77f 100644
--- a/components/style/properties/longhand/border.mako.rs
+++ b/components/style/properties/longhand/border.mako.rs
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
-<% from data import Method, PHYSICAL_SIDES, ALL_SIDES %>
+<% from data import Method, PHYSICAL_SIDES, ALL_SIDES, maybe_moz_logical_alias %>
 
 <% data.new_style_struct("Border", inherited=False,
                    additional_methods=[Method("border_" + side + "_has_nonzero_width",
@@ -18,6 +18,7 @@
 % for side in ALL_SIDES:
     ${helpers.predefined_type("border-%s-color" % side[0], "CSSColor",
                               "::cssparser::Color::CurrentColor",
+                              alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-color"),
                               spec=maybe_logical_spec(side, "color"),
                               animatable=True, logical = side[1])}
 % endfor
@@ -26,12 +27,14 @@
     ${helpers.predefined_type("border-%s-style" % side[0], "BorderStyle",
                               "specified::BorderStyle::none",
                               needs_context=False, need_clone=True,
+                              alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-style"),
                               spec=maybe_logical_spec(side, "style"),
                               animatable=False, logical = side[1])}
 % endfor
 
 % for side in ALL_SIDES:
     <%helpers:longhand name="border-${side[0]}-width" animatable="True" logical="${side[1]}"
+                       alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-width")
                        spec="${maybe_logical_spec(side, 'width')}">
         use app_units::Au;
         use std::fmt;
@@ -61,7 +64,7 @@
 % for corner in ["top-left", "top-right", "bottom-right", "bottom-left"]:
     ${helpers.predefined_type("border-" + corner + "-radius", "BorderRadiusSize",
                               "computed::BorderRadiusSize::zero()",
-                              "parse",
+                              "parse", extra_prefixes="webkit",
                               spec="https://drafts.csswg.org/css-backgrounds/#border-%s-radius" % corner,
                               animatable=True)}
 % endfor
diff --git a/components/style/properties/longhand/box.mako.rs b/components/style/properties/longhand/box.mako.rs
index c0954cd693f..4911529b571 100644
--- a/components/style/properties/longhand/box.mako.rs
+++ b/components/style/properties/longhand/box.mako.rs
@@ -436,6 +436,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto",
 <%helpers:vector_longhand name="transition-duration"
                           need_index="True"
                           animatable="False"
+                          extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-transitions/#propdef-transition-duration">
     use values::specified::Time;
 
@@ -461,6 +462,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto",
 <%helpers:vector_longhand name="transition-timing-function"
                           need_index="True"
                           animatable="False"
+                          extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-transitions/#propdef-transition-timing-function">
     use self::computed_value::StartEnd;
 
@@ -722,6 +724,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto",
                           allow_empty="True"
                           need_index="True"
                           animatable="False"
+                          extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-transitions/#propdef-transition-property">
 
     use values::computed::ComputedValueAsSpecified;
@@ -750,6 +753,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto",
 <%helpers:vector_longhand name="transition-delay"
                           need_index="True"
                           animatable="False"
+                          extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-transitions/#propdef-transition-delay">
     pub use properties::longhands::transition_duration::single_value::SpecifiedValue;
     pub use properties::longhands::transition_duration::single_value::computed_value;
@@ -760,6 +764,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto",
                           allow_empty="True"
                           need_index="True"
                           animatable="False",
+                          extra_prefixes="moz webkit"
                           allowed_in_keyframe_block="False"
                           spec="https://drafts.csswg.org/css-animations/#propdef-animation-name">
     use Atom;
@@ -811,6 +816,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto",
 <%helpers:vector_longhand name="animation-duration"
                           need_index="True"
                           animatable="False",
+                          extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-animations/#propdef-animation-duration",
                           allowed_in_keyframe_block="False">
     pub use properties::longhands::transition_duration::single_value::computed_value;
@@ -821,6 +827,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto",
 <%helpers:vector_longhand name="animation-timing-function"
                           need_index="True"
                           animatable="False",
+                          extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-animations/#propdef-animation-timing-function",
                           allowed_in_keyframe_block="False">
     pub use properties::longhands::transition_timing_function::single_value::computed_value;
@@ -833,6 +840,7 @@ ${helpers.single_keyword("overflow-x", "visible hidden scroll auto",
 <%helpers:vector_longhand name="animation-iteration-count"
                           need_index="True"
                           animatable="False",
+                          extra_prefixes="moz webkit"
                           spec="https://drafts.csswg.org/css-animations/#propdef-animation-iteration-count",
                           allowed_in_keyframe_block="False">
     use std::fmt;
@@ -899,6 +907,7 @@ ${helpers.single_keyword("animation-direction",
                          vector=True,
                          gecko_enum_prefix="PlaybackDirection",
                          custom_consts=animation_direction_custom_consts,
+                         extra_prefixes="moz webkit",
                          spec="https://drafts.csswg.org/css-animations/#propdef-animation-direction",
                          allowed_in_keyframe_block=False)}
 
@@ -910,6 +919,7 @@ ${helpers.single_keyword("animation-play-state",
                          need_index=True,
                          animatable=False,
                          vector=True,
+                         extra_prefixes="moz webkit",
                          spec="https://drafts.csswg.org/css-animations/#propdef-animation-play-state",
                          allowed_in_keyframe_block=True)}
 
@@ -919,12 +929,14 @@ ${helpers.single_keyword("animation-fill-mode",
                          animatable=False,
                          vector=True,
                          gecko_enum_prefix="FillMode",
+                         extra_prefixes="moz webkit",
                          spec="https://drafts.csswg.org/css-animations/#propdef-animation-fill-mode",
                          allowed_in_keyframe_block=False)}
 
 <%helpers:vector_longhand name="animation-delay"
                           need_index="True"
                           animatable="False",
+                          extra_prefixes="moz webkit",
                           spec="https://drafts.csswg.org/css-animations/#propdef-animation-delay",
                           allowed_in_keyframe_block="False">
     pub use properties::longhands::transition_duration::single_value::computed_value;
@@ -1037,7 +1049,8 @@ ${helpers.single_keyword("animation-fill-mode",
 
 
 
-<%helpers:longhand name="transform" products="gecko servo" animatable="${product == 'servo'}"
+<%helpers:longhand name="transform" products="gecko servo" extra_prefixes="webkit"
+                   animatable="${product == 'servo'}"
                    spec="https://drafts.csswg.org/css-transforms/#propdef-transform">
     use app_units::Au;
     use style_traits::ToCss;
@@ -1625,10 +1638,11 @@ ${helpers.predefined_type("perspective",
                           "Either::Second(None_)",
                           gecko_ffi_name="mChildPerspective",
                           spec="https://drafts.csswg.org/css-transforms/#perspective",
+                          extra_prefixes="moz webkit",
                           animatable=True)}
 
 // FIXME: This prop should be animatable
-<%helpers:longhand name="perspective-origin" animatable="False"
+<%helpers:longhand name="perspective-origin" animatable="False" extra_prefixes="moz webkit"
                    spec="https://drafts.csswg.org/css-transforms/#perspective-origin-property">
     use std::fmt;
     use style_traits::ToCss;
@@ -1718,6 +1732,7 @@ ${helpers.predefined_type("perspective",
 ${helpers.single_keyword("backface-visibility",
                          "visible hidden",
                          spec="https://drafts.csswg.org/css-transforms/#backface-visibility-property",
+                         extra_prefixes="moz webkit",
                          animatable=False)}
 
 ${helpers.single_keyword("transform-box",
@@ -1731,9 +1746,10 @@ ${helpers.single_keyword("transform-style",
                          "auto flat preserve-3d" if product == "servo" else
                          "flat preserve-3d",
                          spec="https://drafts.csswg.org/css-transforms/#transform-style-property",
+                         extra_prefixes="moz webkit",
                          animatable=False)}
 
-<%helpers:longhand name="transform-origin" animatable="True"
+<%helpers:longhand name="transform-origin" animatable="True" extra_prefixes="moz webkit"
                    spec="https://drafts.csswg.org/css-transforms/#transform-origin-property">
     use app_units::Au;
     use std::fmt;
diff --git a/components/style/properties/longhand/column.mako.rs b/components/style/properties/longhand/column.mako.rs
index a508a5daf9f..e10a69e45d1 100644
--- a/components/style/properties/longhand/column.mako.rs
+++ b/components/style/properties/longhand/column.mako.rs
@@ -11,13 +11,14 @@ ${helpers.predefined_type("column-width",
                           "length::LengthOrAuto",
                           "Either::Second(Auto)",
                           parse_method="parse_non_negative_length",
+                          extra_prefixes="moz",
                           animatable=False,
                           experimental=True,
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-width")}
 
 
 // FIXME: This prop should be animatable.
-<%helpers:longhand name="column-count" experimental="True" animatable="False"
+<%helpers:longhand name="column-count" experimental="True" animatable="False" extra_prefixes="moz"
                    spec="https://drafts.csswg.org/css-multicol/#propdef-column-count">
     use std::fmt;
     use style_traits::ToCss;
@@ -102,16 +103,17 @@ ${helpers.predefined_type("column-gap",
                           "length::LengthOrNormal",
                           "Either::Second(Normal)",
                           parse_method='parse_non_negative_length',
+                          extra_prefixes="moz",
                           experimental=True,
                           animatable=False,
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-gap")}
 
-${helpers.single_keyword("column-fill", "auto balance",
+${helpers.single_keyword("column-fill", "auto balance", extra_prefixes="moz",
                          products="gecko", animatable=False,
                          spec="https://drafts.csswg.org/css-multicol/#propdef-column-gap")}
 
 // https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width
-<%helpers:longhand name="column-rule-width" products="gecko" animatable="True"
+<%helpers:longhand name="column-rule-width" products="gecko" animatable="True" extra_prefixes="moz"
                    spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width">
     use app_units::Au;
     use std::fmt;
@@ -144,7 +146,7 @@ ${helpers.single_keyword("column-fill", "auto balance",
 // https://drafts.csswg.org/css-multicol-1/#crc
 ${helpers.predefined_type("column-rule-color", "CSSColor",
                           "::cssparser::Color::CurrentColor",
-                          products="gecko", animatable=True,
+                          products="gecko", animatable=True, extra_prefixes="moz",
                           complex_color=True, need_clone=True,
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-color")}
 
@@ -155,7 +157,7 @@ ${helpers.single_keyword("column-span", "none all",
 
 ${helpers.single_keyword("column-rule-style",
                          "none hidden dotted dashed solid double groove ridge inset outset",
-                         products="gecko",
+                         products="gecko", extra_prefixes="moz",
                          gecko_constant_prefix="NS_STYLE_BORDER_STYLE",
                          animatable=False,
                          spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-style")}
diff --git a/components/style/properties/longhand/effects.mako.rs b/components/style/properties/longhand/effects.mako.rs
index 453199af08f..20353a84b34 100644
--- a/components/style/properties/longhand/effects.mako.rs
+++ b/components/style/properties/longhand/effects.mako.rs
@@ -13,7 +13,8 @@ ${helpers.predefined_type("opacity",
                           animatable=True,
                           spec="https://drafts.csswg.org/css-color/#opacity")}
 
-<%helpers:vector_longhand name="box-shadow" allow_empty="True" animatable="True"
+<%helpers:vector_longhand name="box-shadow" allow_empty="True"
+                          animatable="True" extra_prefixes="webkit"
                           spec="https://drafts.csswg.org/css-backgrounds/#box-shadow">
     use cssparser;
     use std::fmt;
@@ -290,7 +291,7 @@ ${helpers.predefined_type("opacity",
 </%helpers:longhand>
 
 // FIXME: This prop should be animatable
-<%helpers:longhand name="filter" animatable="False"
+<%helpers:longhand name="filter" animatable="False" extra_prefixes="webkit"
                    spec="https://drafts.fxtf.org/filters/#propdef-filter">
     //pub use self::computed_value::T as SpecifiedValue;
     use cssparser;
diff --git a/components/style/properties/longhand/font.mako.rs b/components/style/properties/longhand/font.mako.rs
index b3dba9c3e1e..2f5f3566db6 100644
--- a/components/style/properties/longhand/font.mako.rs
+++ b/components/style/properties/longhand/font.mako.rs
@@ -526,7 +526,7 @@ ${helpers.single_keyword("font-variant-position",
                          spec="https://drafts.csswg.org/css-fonts/#propdef-font-variant-position",
                          animatable=False)}
 
-<%helpers:longhand name="font-feature-settings" products="none" animatable="False"
+<%helpers:longhand name="font-feature-settings" products="none" animatable="False" extra_prefixes="moz"
                    spec="https://drafts.csswg.org/css-fonts/#propdef-font-feature-settings">
     use std::fmt;
     use style_traits::ToCss;
@@ -637,7 +637,7 @@ ${helpers.single_keyword("font-variant-position",
 </%helpers:longhand>
 
 // https://www.w3.org/TR/css-fonts-3/#propdef-font-language-override
-<%helpers:longhand name="font-language-override" products="none" animatable="False"
+<%helpers:longhand name="font-language-override" products="none" animatable="False" extra_prefixes="moz"
                    spec="https://drafts.csswg.org/css-fonts-3/#propdef-font-language-override">
     use values::NoViewportPercentage;
     use values::computed::ComputedValueAsSpecified;
diff --git a/components/style/properties/longhand/inherited_text.mako.rs b/components/style/properties/longhand/inherited_text.mako.rs
index 7e5881ee8db..f85e695de42 100644
--- a/components/style/properties/longhand/inherited_text.mako.rs
+++ b/components/style/properties/longhand/inherited_text.mako.rs
@@ -156,7 +156,7 @@ ${helpers.single_keyword("text-transform",
 
 ${helpers.single_keyword("hyphens", "none manual auto",
                          gecko_enum_prefix="StyleHyphens",
-                         products="gecko", animatable=False,
+                         products="gecko", animatable=False, extra_prefixes="moz",
                          spec="https://drafts.csswg.org/css-text/#propdef-hyphens")}
 
 ${helpers.predefined_type("text-indent",
diff --git a/components/style/properties/longhand/margin.mako.rs b/components/style/properties/longhand/margin.mako.rs
index 810386ae023..0875b4673c3 100644
--- a/components/style/properties/longhand/margin.mako.rs
+++ b/components/style/properties/longhand/margin.mako.rs
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
-<% from data import ALL_SIDES %>
+<% from data import ALL_SIDES, maybe_moz_logical_alias %>
 <% data.new_style_struct("Margin", inherited=False) %>
 
 % for side in ALL_SIDES:
@@ -14,5 +14,6 @@
     %>
     ${helpers.predefined_type("margin-%s" % side[0], "LengthOrPercentageOrAuto",
                               "computed::LengthOrPercentageOrAuto::Length(Au(0))",
+                              alias=maybe_moz_logical_alias(product, side, "-moz-margin-%s"),
                               animatable=True, logical = side[1], spec = spec)}
 % endfor
diff --git a/components/style/properties/longhand/padding.mako.rs b/components/style/properties/longhand/padding.mako.rs
index 1f029f53192..64ad713d616 100644
--- a/components/style/properties/longhand/padding.mako.rs
+++ b/components/style/properties/longhand/padding.mako.rs
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
-<% from data import ALL_SIDES %>
+<% from data import ALL_SIDES, maybe_moz_logical_alias %>
 <% data.new_style_struct("Padding", inherited=False) %>
 
 % for side in ALL_SIDES:
@@ -15,6 +15,7 @@
     ${helpers.predefined_type("padding-%s" % side[0], "LengthOrPercentage",
                                "computed::LengthOrPercentage::Length(Au(0))",
                                "parse_non_negative",
+                               alias=maybe_moz_logical_alias(product, side, "-moz-padding-%s"),
                                needs_context=False,
                                animatable=True,
                                logical = side[1],
diff --git a/components/style/properties/longhand/position.mako.rs b/components/style/properties/longhand/position.mako.rs
index bad7e9737a5..adb66cdc3a4 100644
--- a/components/style/properties/longhand/position.mako.rs
+++ b/components/style/properties/longhand/position.mako.rs
@@ -78,17 +78,18 @@
 // Flex container properties
 ${helpers.single_keyword("flex-direction", "row row-reverse column column-reverse",
                          spec="https://drafts.csswg.org/css-flexbox/#flex-direction-property",
-                         animatable=False)}
+                         extra_prefixes="webkit", animatable=False)}
 
 ${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse",
                          spec="https://drafts.csswg.org/css-flexbox/#flex-wrap-property",
-                         animatable=False)}
+                         extra_prefixes="webkit", animatable=False)}
 
 // FIXME(stshine): The type of 'justify-content' and 'align-content' is uint16_t in gecko
 // FIXME(stshine): Its higher bytes are used to store fallback value. Disable them in geckolib for now
 ${helpers.single_keyword("justify-content", "flex-start flex-end center space-between space-around",
                          gecko_constant_prefix="NS_STYLE_JUSTIFY",
                          products="servo",
+                         extra_prefixes="webkit",
                          spec="https://drafts.csswg.org/css-flexbox/#justify-content-property",
                          animatable=False)}
 
@@ -97,6 +98,7 @@ ${helpers.single_keyword("justify-content", "flex-start flex-end center space-be
 ${helpers.single_keyword("align-items", "stretch flex-start flex-end center baseline" if product == "servo"
                          else "normal stretch flex-start flex-end center baseline",
                          need_clone=True,
+                         extra_prefixes="webkit",
                          gecko_constant_prefix="NS_STYLE_ALIGN",
                          spec="https://drafts.csswg.org/css-flexbox/#align-items-property",
                          animatable=False)}
@@ -104,6 +106,7 @@ ${helpers.single_keyword("align-items", "stretch flex-start flex-end center base
 ${helpers.single_keyword("align-content", "stretch flex-start flex-end center space-between space-around",
                          gecko_constant_prefix="NS_STYLE_ALIGN",
                          products="servo",
+                         extra_prefixes="webkit",
                          spec="https://drafts.csswg.org/css-flexbox/#align-content-property",
                          animatable=False)}
 
@@ -111,12 +114,14 @@ ${helpers.single_keyword("align-content", "stretch flex-start flex-end center sp
 ${helpers.predefined_type("flex-grow", "Number",
                           "0.0", "parse_non_negative",
                           spec="https://drafts.csswg.org/css-flexbox/#flex-grow-property",
+                          extra_prefixes="webkit",
                           needs_context=False,
                           animatable=True)}
 
 ${helpers.predefined_type("flex-shrink", "Number",
                           "1.0", "parse_non_negative",
                           spec="https://drafts.csswg.org/css-flexbox/#flex-shrink-property",
+                          extra_prefixes="webkit",
                           needs_context=False,
                           animatable=True)}
 
@@ -124,13 +129,14 @@ ${helpers.predefined_type("flex-shrink", "Number",
 // FIXME: We don't support the Gecko value 'normal' yet.
 ${helpers.single_keyword("align-self", "auto stretch flex-start flex-end center baseline",
                          need_clone=True,
+                         extra_prefixes="webkit",
                          extra_gecko_values="normal",
                          gecko_constant_prefix="NS_STYLE_ALIGN",
                          spec="https://drafts.csswg.org/css-flexbox/#propdef-align-self",
                          animatable=False)}
 
 // https://drafts.csswg.org/css-flexbox/#propdef-order
-<%helpers:longhand name="order" animatable="True"
+<%helpers:longhand name="order" animatable="True" extra_prefixes="webkit"
                    spec="https://drafts.csswg.org/css-flexbox/#order-property">
     use values::computed::ComputedValueAsSpecified;
 
@@ -157,6 +163,7 @@ ${helpers.predefined_type("flex-basis",
                           "LengthOrPercentageOrAutoOrContent",
                           "computed::LengthOrPercentageOrAutoOrContent::Auto",
                           spec="https://drafts.csswg.org/css-flexbox/#flex-basis-property",
+                          extra_prefixes="webkit",
                           animatable=False)}
 
 % for (size, logical) in ALL_SIZES:
@@ -195,6 +202,7 @@ ${helpers.predefined_type("flex-basis",
 
 ${helpers.single_keyword("box-sizing",
                          "content-box border-box",
+                         extra_prefixes="moz webkit",
                          spec="https://drafts.csswg.org/css-ui/#propdef-box-sizing",
                          animatable=False)}
 
diff --git a/components/style/properties/longhand/svg.mako.rs b/components/style/properties/longhand/svg.mako.rs
index 959ccb2db41..d6a9e288273 100644
--- a/components/style/properties/longhand/svg.mako.rs
+++ b/components/style/properties/longhand/svg.mako.rs
@@ -99,10 +99,11 @@ ${helpers.single_keyword("mask-repeat",
                          "repeat repeat-x repeat-y space round no-repeat",
                          vector=True,
                          products="gecko",
+                         extra_prefixes="webkit",
                          animatable=False,
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-repeat")}
 
-<%helpers:vector_longhand name="mask-position" products="gecko" animatable="True"
+<%helpers:vector_longhand name="mask-position" products="gecko" animatable="True" extra_prefixes="webkit"
                           spec="https://drafts.fxtf.org/css-masking/#propdef-mask-position">
     use std::fmt;
     use style_traits::ToCss;
@@ -163,6 +164,7 @@ ${helpers.single_keyword("mask-clip",
                          "content-box padding-box border-box",
                          vector=True,
                          products="gecko",
+                         extra_prefixes="webkit",
                          animatable=False,
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-clip")}
 
@@ -172,10 +174,11 @@ ${helpers.single_keyword("mask-origin",
                          "content-box padding-box border-box",
                          vector=True,
                          products="gecko",
+                         extra_prefixes="webkit",
                          animatable=False,
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-origin")}
 
-<%helpers:longhand name="mask-size" products="gecko" animatable="True"
+<%helpers:longhand name="mask-size" products="gecko" animatable="True" extra_prefixes="webkit"
                    spec="https://drafts.fxtf.org/css-masking/#propdef-mask-size">
     use properties::longhands::background_size;
     pub use ::properties::longhands::background_size::SpecifiedValue;
@@ -196,10 +199,11 @@ ${helpers.single_keyword("mask-composite",
                          "add subtract intersect exclude",
                          vector=True,
                          products="gecko",
+                         extra_prefixes="webkit",
                          animatable=False,
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-composite")}
 
-<%helpers:vector_longhand name="mask-image" products="gecko" animatable="False"
+<%helpers:vector_longhand name="mask-image" products="gecko" animatable="False" extra_prefixes="webkit"
                           has_uncacheable_values="${product == 'gecko'}",
                           spec="https://drafts.fxtf.org/css-masking/#propdef-mask-image">
     use std::fmt;
diff --git a/components/style/properties/longhand/ui.mako.rs b/components/style/properties/longhand/ui.mako.rs
index 045627e004c..62948316e70 100644
--- a/components/style/properties/longhand/ui.mako.rs
+++ b/components/style/properties/longhand/ui.mako.rs
@@ -17,6 +17,7 @@ ${helpers.single_keyword("ime-mode", "normal auto active disabled inactive",
                          spec="https://drafts.csswg.org/css-ui/#input-method-editor")}
 
 ${helpers.single_keyword("-moz-user-select", "auto text none all", products="gecko",
+                         alias="-webkit-user-select",
                          gecko_ffi_name="mUserSelect",
                          gecko_enum_prefix="StyleUserSelect",
                          gecko_inexhaustive=True,
diff --git a/components/style/properties/longhand/xul.mako.rs b/components/style/properties/longhand/xul.mako.rs
index 124e141f6ce..7862b1d9177 100644
--- a/components/style/properties/longhand/xul.mako.rs
+++ b/components/style/properties/longhand/xul.mako.rs
@@ -13,10 +13,12 @@ ${helpers.single_keyword("-moz-box-align", "stretch start center baseline end",
                          gecko_enum_prefix="StyleBoxAlign",
                          gecko_inexhaustive=True,
                          animatable=False,
+                         alias="-webkit-box-align",
                          spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-align)")}
 
 ${helpers.predefined_type("-moz-box-flex", "Number", "0.0", "parse_non_negative",
                           products="gecko", gecko_ffi_name="mBoxFlex",
                           needs_context=False,
                           animatable=False,
+                          alias="-webkit-box-flex",
                           spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex)")}
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index 138558ae496..66cd5d3ae56 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -759,7 +759,9 @@ impl PropertyId {
         use gecko_bindings::structs::*;
         <%
             def alias_to_nscsspropertyid(alias):
-                return "nsCSSPropertyID_eCSSPropertyAlias_%s" % to_camel_case(alias)
+                if alias == "word-wrap":
+                    return "nsCSSPropertyID_eCSSPropertyAlias_WordWrap"
+                return "nsCSSPropertyID::eCSSPropertyAlias_%s" % to_camel_case(alias)
             def to_nscsspropertyid(ident):
                 if ident == "float":
                     ident = "float_"
@@ -782,7 +784,7 @@ impl PropertyId {
                 }
                 % for alias in property.alias:
                     ${alias_to_nscsspropertyid(alias)} => {
-                        Ok(PropertyId::Longhand(LonghandId::${property.camel_case}))
+                        Ok(PropertyId::Shorthand(ShorthandId::${property.camel_case}))
                     }
                 % endfor
             % endfor
diff --git a/components/style/properties/shorthand/border.mako.rs b/components/style/properties/shorthand/border.mako.rs
index 19f33710b82..233eb2d0df1 100644
--- a/components/style/properties/shorthand/border.mako.rs
+++ b/components/style/properties/shorthand/border.mako.rs
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
-<% from data import to_rust_ident, ALL_SIDES %>
+<% from data import to_rust_ident, ALL_SIDES, maybe_moz_logical_alias %>
 
 ${helpers.four_sides_shorthand("border-color", "border-%s-color", "specified::CSSColor::parse",
                                spec="https://drafts.csswg.org/css-backgrounds/#border-color")}
@@ -99,7 +99,7 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
     <%helpers:shorthand name="border-${side}" sub_properties="${' '.join(
         'border-%s-%s' % (side, prop)
         for prop in ['color', 'style', 'width']
-    )}" spec="${spec}">
+    )}" alias=maybe_moz_logical_alias(product, side, "-moz-border-%s") spec="${spec}">
 
     pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
         let (color, style, width) = try!(super::parse_border(context, input));
@@ -159,7 +159,7 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
 <%helpers:shorthand name="border-radius" sub_properties="${' '.join(
     'border-%s-radius' % (corner)
      for corner in ['top-left', 'top-right', 'bottom-right', 'bottom-left']
-)}" spec="https://drafts.csswg.org/css-backgrounds/#border-radius">
+)}" extra_prefixes="webkit" spec="https://drafts.csswg.org/css-backgrounds/#border-radius">
     use values::specified::basic_shape::BorderRadius;
     use parser::Parse;
 
@@ -194,7 +194,7 @@ pub fn parse_border(context: &ParserContext, input: &mut Parser)
 
 <%helpers:shorthand name="border-image" products="gecko" sub_properties="border-image-outset
     border-image-repeat border-image-slice border-image-source border-image-width"
-    spec="https://drafts.csswg.org/css-backgrounds-3/#border-image">
+    extra_prefixes="moz webkit" spec="https://drafts.csswg.org/css-backgrounds-3/#border-image">
     use properties::longhands::{border_image_outset, border_image_repeat, border_image_slice};
     use properties::longhands::{border_image_source, border_image_width};
 
diff --git a/components/style/properties/shorthand/box.mako.rs b/components/style/properties/shorthand/box.mako.rs
index 63f424f8ace..1bcfd5caaf6 100644
--- a/components/style/properties/shorthand/box.mako.rs
+++ b/components/style/properties/shorthand/box.mako.rs
@@ -94,7 +94,7 @@ macro_rules! try_parse_one {
     };
 }
 
-<%helpers:shorthand name="transition"
+<%helpers:shorthand name="transition" extra_prefixes="moz webkit"
                     sub_properties="transition-property transition-duration
                                     transition-timing-function
                                     transition-delay"
@@ -183,7 +183,7 @@ macro_rules! try_parse_one {
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="animation"
+<%helpers:shorthand name="animation" extra_prefixes="moz webkit"
                     sub_properties="animation-name animation-duration
                                     animation-timing-function animation-delay
                                     animation-iteration-count animation-direction
diff --git a/components/style/properties/shorthand/column.mako.rs b/components/style/properties/shorthand/column.mako.rs
index 69aa6baeeb6..60e1bfc2b78 100644
--- a/components/style/properties/shorthand/column.mako.rs
+++ b/components/style/properties/shorthand/column.mako.rs
@@ -5,7 +5,7 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="columns" sub_properties="column-count column-width" experimental="True"
-                    spec="https://drafts.csswg.org/css-multicol/#propdef-columns">
+                    extra_prefixes="moz" spec="https://drafts.csswg.org/css-multicol/#propdef-columns">
     use properties::longhands::{column_count, column_width};
 
     pub fn parse_value(context: &ParserContext, input: &mut Parser) -> Result<Longhands, ()> {
@@ -59,7 +59,7 @@
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="column-rule" products="gecko"
+<%helpers:shorthand name="column-rule" products="gecko" extra_prefixes="moz"
     sub_properties="column-rule-width column-rule-style column-rule-color"
     spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule">
     use properties::longhands::{column_rule_width, column_rule_style};
diff --git a/components/style/properties/shorthand/mask.mako.rs b/components/style/properties/shorthand/mask.mako.rs
index f4d3ae6d5bc..de43370089e 100644
--- a/components/style/properties/shorthand/mask.mako.rs
+++ b/components/style/properties/shorthand/mask.mako.rs
@@ -4,7 +4,7 @@
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
-<%helpers:shorthand name="mask" products="gecko"
+<%helpers:shorthand name="mask" products="gecko" extra_prefixes="webkit"
                     sub_properties="mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position
                                     mask-size mask-image"
                     spec="https://drafts.fxtf.org/css-masking/#propdef-mask">
diff --git a/components/style/properties/shorthand/position.mako.rs b/components/style/properties/shorthand/position.mako.rs
index 13e11a8ef3f..807bcadb5df 100644
--- a/components/style/properties/shorthand/position.mako.rs
+++ b/components/style/properties/shorthand/position.mako.rs
@@ -4,7 +4,7 @@
 
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
-<%helpers:shorthand name="flex-flow" sub_properties="flex-direction flex-wrap"
+<%helpers:shorthand name="flex-flow" sub_properties="flex-direction flex-wrap" extra_prefixes="webkit"
                     spec="https://drafts.csswg.org/css-flexbox/#flex-flow-property">
     use properties::longhands::{flex_direction, flex_wrap};
 
@@ -54,7 +54,7 @@
     }
 </%helpers:shorthand>
 
-<%helpers:shorthand name="flex" sub_properties="flex-grow flex-shrink flex-basis"
+<%helpers:shorthand name="flex" sub_properties="flex-grow flex-shrink flex-basis" extra_prefixes="webkit"
                     spec="https://drafts.csswg.org/css-flexbox/#flex-property">
     use parser::Parse;
     use app_units::Au;