diff --git a/components/gfx/paint_context.rs b/components/gfx/paint_context.rs
index 51a1bf2795f0..8379b1f8df37 100644
--- a/components/gfx/paint_context.rs
+++ b/components/gfx/paint_context.rs
@@ -223,7 +223,7 @@ impl<'a> PaintContext<'a> {
         // Something like Scale2x would be ideal.
         let draw_surface_filter = match image_rendering {
             image_rendering::T::auto => Filter::Linear,
-            image_rendering::T::crispedges | image_rendering::T::pixelated => Filter::Point,
+            image_rendering::T::crisp_edges | image_rendering::T::pixelated => Filter::Point,
         };
 
         let draw_surface_options = DrawSurfaceOptions::new(draw_surface_filter, true);
diff --git a/components/layout/webrender_helpers.rs b/components/layout/webrender_helpers.rs
index 399b261c9ef1..a6613259153e 100644
--- a/components/layout/webrender_helpers.rs
+++ b/components/layout/webrender_helpers.rs
@@ -213,7 +213,7 @@ trait ToImageRendering {
 impl ToImageRendering for image_rendering::T {
     fn to_image_rendering(&self) -> webrender_traits::ImageRendering {
         match *self {
-            image_rendering::T::crispedges => webrender_traits::ImageRendering::CrispEdges,
+            image_rendering::T::crisp_edges => webrender_traits::ImageRendering::CrispEdges,
             image_rendering::T::auto => webrender_traits::ImageRendering::Auto,
             image_rendering::T::pixelated => webrender_traits::ImageRendering::Pixelated,
         }
diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index 289a545925f5..7774c599e933 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -1625,17 +1625,6 @@ fn static_assert() {
 </%self:impl_trait>
 
 
-<%self:impl_trait style_struct_name="InheritedBox"
-                  skip_longhands="image-rendering">
-
-    <% render_keyword = Keyword("image-rendering",
-                                "auto optimizequality optimizespeed crispedges") %>
-
-    ${impl_keyword('image_rendering', 'mImageRendering', render_keyword, need_clone=False)}
-
-</%self:impl_trait>
-
-
 <%self:impl_trait style_struct_name="InheritedText"
                   skip_longhands="text-align text-emphasis-style text-shadow line-height letter-spacing word-spacing">
 
diff --git a/components/style/properties/longhand/inherited_box.mako.rs b/components/style/properties/longhand/inherited_box.mako.rs
index 4a5368ddbc61..d03b38cf6f0a 100644
--- a/components/style/properties/longhand/inherited_box.mako.rs
+++ b/components/style/properties/longhand/inherited_box.mako.rs
@@ -40,73 +40,15 @@ ${helpers.single_keyword("color-adjust",
                          "economy exact", products="gecko",
                          animatable=False)}
 
-<%helpers:longhand name="image-rendering" animatable="False">
-    pub mod computed_value {
-        use cssparser::ToCss;
-        use std::fmt;
-
-        #[allow(non_camel_case_types)]
-        #[derive(Copy, Clone, Debug, PartialEq)]
-        #[cfg_attr(feature = "servo", derive(HeapSizeOf, Deserialize, Serialize))]
-        pub enum T {
-            auto,
-            crispedges,
-            % if product == "gecko":
-                optimizequality,
-                optimizespeed,
-            % else:
-                pixelated,  // firefox doesn't support it (https://bugzilla.mozilla.org/show_bug.cgi?id=856337)
-            % endif
-        }
-
-        impl ToCss for T {
-            fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-                match *self {
-                    T::auto => dest.write_str("auto"),
-                    T::crispedges => dest.write_str("crisp-edges"),
-                    % if product == "gecko":
-                        T::optimizequality => dest.write_str("optimizeQuality"),
-                        T::optimizespeed => dest.write_str("optimizeSpeed"),
-                    % else:
-                        T::pixelated => dest.write_str("pixelated"),
-                    % endif
-                }
-            }
-        }
-    }
-
-    use values::NoViewportPercentage;
-    impl NoViewportPercentage for SpecifiedValue {}
-
-    pub type SpecifiedValue = computed_value::T;
-
-    #[inline]
-    pub fn get_initial_value() -> computed_value::T {
-        computed_value::T::auto
-    }
-
-    pub fn parse(_: &ParserContext, input: &mut Parser) -> Result<SpecifiedValue,()> {
-        // According to to CSS-IMAGES-3, `optimizespeed` and `optimizequality` are synonyms for
-        // `auto`.
-        match_ignore_ascii_case! {
-            try!(input.expect_ident()),
-            "auto" => Ok(computed_value::T::auto),
-            "crisp-edges" => Ok(computed_value::T::crispedges),
-            % if product == "gecko":
-                "optimizequality" => Ok(computed_value::T::optimizequality),
-                "optimizespeed" => Ok(computed_value::T::optimizespeed),
-            % else:
-                "optimizequality" => Ok(computed_value::T::auto),
-                "optimizespeed" => Ok(computed_value::T::auto),
-                "pixelated" => Ok(computed_value::T::pixelated),
-            % endif
-            _ => Err(())
-        }
-    }
-
-    use values::computed::ComputedValueAsSpecified;
-    impl ComputedValueAsSpecified for SpecifiedValue { }
-</%helpers:longhand>
+<% image_rendering_custom_consts = { "crisp-edges": "CRISPEDGES" } %>
+// According to to CSS-IMAGES-3, `optimizespeed` and `optimizequality` are synonyms for `auto`
+// And, firefox doesn't support `pixelated` yet (https://bugzilla.mozilla.org/show_bug.cgi?id=856337)
+${helpers.single_keyword("image-rendering",
+                         "auto crisp-edges",
+                         extra_gecko_values="optimizespeed optimizequality",
+                         extra_servo_values="pixelated",
+                         custom_consts=image_rendering_custom_consts,
+                         animatable=False)}
 
 // Used in the bottom-up flow construction traversal to avoid constructing flows for
 // descendants of nodes with `display: none`.