diff --git a/gfx/2d/ScaleFactors2D.h b/gfx/2d/ScaleFactors2D.h
new file mode 100644
index 00000000000..16dfbce3532
--- /dev/null
+++ b/gfx/2d/ScaleFactors2D.h
@@ -0,0 +1,136 @@
+/* -*- Mode: C++; tab-width: 20; indent-tabs-mode: nil; c-basic-offset: 2 -*-
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#ifndef MOZILLA_GFX_SCALEFACTORS2D_H_
+#define MOZILLA_GFX_SCALEFACTORS2D_H_
+
+#include <ostream>
+#include <iomanip>
+
+#include "mozilla/Attributes.h"
+#include "mozilla/FloatingPoint.h"
+#include "mozilla/gfx/ScaleFactor.h"
+
+#include "gfxPoint.h"
+
+namespace mozilla {
+namespace gfx {
+
+/*
+ * This class is like ScaleFactor, but allows different scales on the x and
+ * y axes.
+ */
+template<class src, class dst>
+struct ScaleFactors2D {
+  float xScale;
+  float yScale;
+
+  MOZ_CONSTEXPR ScaleFactors2D() : xScale(1.0), yScale(1.0) {}
+  MOZ_CONSTEXPR ScaleFactors2D(const ScaleFactors2D<src, dst>& aCopy)
+    : xScale(aCopy.xScale), yScale(aCopy.yScale) {}
+  MOZ_CONSTEXPR ScaleFactors2D(float aXScale, float aYScale)
+    : xScale(aXScale), yScale(aYScale) {}
+  // Layout code often uses gfxSize to represent a pair of x/y scales.
+  explicit MOZ_CONSTEXPR ScaleFactors2D(const gfxSize& aSize)
+    : xScale(aSize.width), yScale(aSize.height) {}
+
+  // "Upgrade" from a ScaleFactor.
+  // This is deliberately 'explicit' so that the treatment of a single scale
+  // number as both the x- and y-scale in a context where they are allowed to
+  // be different, is more visible.
+  explicit MOZ_CONSTEXPR ScaleFactors2D(const ScaleFactor<src, dst>& aScale)
+    : xScale(aScale.scale), yScale(aScale.scale) {}
+
+  bool AreScalesSame() const {
+    return FuzzyEqualsMultiplicative(xScale, yScale);
+  }
+
+  // Convert to a ScaleFactor. Asserts that the scales are, in fact, equal.
+  ScaleFactor<src, dst> ToScaleFactor() const {
+    MOZ_ASSERT(AreScalesSame());
+    return ScaleFactor<src, dst>(xScale);
+  }
+
+  bool operator==(const ScaleFactors2D<src, dst>& aOther) const {
+    return xScale == aOther.xScale && yScale == aOther.yScale;
+  }
+
+  bool operator!=(const ScaleFactors2D<src, dst>& aOther) const {
+    return !(*this == aOther);
+  }
+
+  friend std::ostream& operator<<(std::ostream& aStream,
+                                  const ScaleFactors2D<src, dst>& aScale) {
+    if (aScale.AreScalesSame()) {
+      return aStream << aScale.xScale;
+    } else {
+      return aStream << '(' << aScale.xScale << ',' << aScale.yScale << ')';
+    }
+  }
+
+  template<class other>
+  ScaleFactors2D<other, dst> operator/(const ScaleFactors2D<src, other>& aOther) const {
+    return ScaleFactors2D<other, dst>(xScale / aOther.xScale, yScale / aOther.yScale);
+  }
+
+  template<class other>
+  ScaleFactors2D<src, other> operator/(const ScaleFactors2D<other, dst>& aOther) const {
+    return ScaleFactors2D<src, other>(xScale / aOther.xScale, yScale / aOther.yScale);
+  }
+
+  template<class other>
+  ScaleFactors2D<src, other> operator*(const ScaleFactors2D<dst, other>& aOther) const {
+    return ScaleFactors2D<src, other>(xScale * aOther.xScale, yScale * aOther.yScale);
+  }
+
+  template<class other>
+  ScaleFactors2D<other, dst> operator*(const ScaleFactors2D<other, src>& aOther) const {
+    return ScaleFactors2D<other, dst>(xScale * aOther.xScale, yScale * aOther.yScale);
+  }
+
+  template<class other>
+  ScaleFactors2D<src, other> operator*(const ScaleFactor<dst, other>& aOther) const {
+    return *this * ScaleFactors2D<dst, other>(aOther);
+  }
+
+  template<class other>
+  ScaleFactors2D<other, dst> operator*(const ScaleFactor<other, src>& aOther) const {
+    return *this * ScaleFactors2D<other, src>(aOther);
+  }
+
+  template<class other>
+  ScaleFactors2D<src, other> operator/(const ScaleFactor<other, dst>& aOther) const {
+    return *this / ScaleFactors2D<other, dst>(aOther);
+  }
+
+  template<class other>
+  ScaleFactors2D<other, dst> operator/(const ScaleFactor<src, other>& aOther) const {
+    return *this / ScaleFactors2D<src, other>(aOther);
+  }
+
+  template<class other>
+  friend ScaleFactors2D<other, dst> operator*(const ScaleFactor<other, src>& aA,
+                                              const ScaleFactors2D<src, dst>& aB) {
+    return ScaleFactors2D<other, src>(aA) * aB;
+  }
+
+  template<class other>
+  friend ScaleFactors2D<other, src> operator/(const ScaleFactor<other, dst>& aA,
+                                              const ScaleFactors2D<src, dst>& aB) {
+    return ScaleFactors2D<other, src>(aA) / aB;
+  }
+
+  // Divide two scales of the same units, yielding a scale with no units,
+  // represented as a gfxSize. This can mean e.g. the cahnge in a particular
+  // scale from one frame to the next.
+  gfxSize operator/(const ScaleFactors2D& aOther) const {
+    return gfxSize(xScale / aOther.xScale, yScale / aOther.yScale);
+  }
+};
+
+}
+}
+
+#endif /* MOZILLA_GFX_SCALEFACTORS2D_H_ */
diff --git a/gfx/2d/moz.build b/gfx/2d/moz.build
index 3df42d79d20..169c6281b58 100644
--- a/gfx/2d/moz.build
+++ b/gfx/2d/moz.build
@@ -32,6 +32,7 @@ EXPORTS.mozilla.gfx += [
     'Rect.h',
     'Scale.h',
     'ScaleFactor.h',
+    'ScaleFactors2D.h',
     'SourceSurfaceCairo.h',
     'Tools.h',
     'Types.h',
diff --git a/gfx/ipc/GfxMessageUtils.h b/gfx/ipc/GfxMessageUtils.h
index e93468742ad..76c0f65c1a9 100644
--- a/gfx/ipc/GfxMessageUtils.h
+++ b/gfx/ipc/GfxMessageUtils.h
@@ -513,6 +513,24 @@ struct ParamTraits< mozilla::gfx::ScaleFactor<T, U> >
   }
 };
 
+template<class T, class U>
+struct ParamTraits< mozilla::gfx::ScaleFactors2D<T, U> >
+{
+  typedef mozilla::gfx::ScaleFactors2D<T, U> paramType;
+
+  static void Write(Message* msg, const paramType& param)
+  {
+    WriteParam(msg, param.xScale);
+    WriteParam(msg, param.yScale);
+  }
+
+  static bool Read(const Message* msg, void** iter, paramType* result)
+  {
+    return (ReadParam(msg, iter, &result->xScale) &&
+            ReadParam(msg, iter, &result->yScale));
+  }
+};
+
 template<class T>
 struct ParamTraits< mozilla::gfx::PointTyped<T> >
 {
diff --git a/layout/base/Units.h b/layout/base/Units.h
index eeefa583c8e..24f65444b75 100644
--- a/layout/base/Units.h
+++ b/layout/base/Units.h
@@ -11,6 +11,7 @@
 #include "mozilla/gfx/Point.h"
 #include "mozilla/gfx/Rect.h"
 #include "mozilla/gfx/ScaleFactor.h"
+#include "mozilla/gfx/ScaleFactors2D.h"
 #include "nsRect.h"
 #include "nsMargin.h"
 #include "mozilla/AppUnits.h"
@@ -122,6 +123,28 @@ typedef gfx::ScaleFactor<ParentLayerPixel, LayerPixel> ParentLayerToLayerScale;
 typedef gfx::ScaleFactor<ParentLayerPixel, ScreenPixel> ParentLayerToScreenScale;
 typedef gfx::ScaleFactor<ParentLayerPixel, ParentLayerPixel> ParentLayerToParentLayerScale;
 
+typedef gfx::ScaleFactors2D<CSSPixel, LayoutDevicePixel> CSSToLayoutDeviceScale2D;
+typedef gfx::ScaleFactors2D<CSSPixel, LayerPixel> CSSToLayerScale2D;
+typedef gfx::ScaleFactors2D<CSSPixel, ScreenPixel> CSSToScreenScale2D;
+typedef gfx::ScaleFactors2D<CSSPixel, ParentLayerPixel> CSSToParentLayerScale2D;
+typedef gfx::ScaleFactors2D<LayoutDevicePixel, CSSPixel> LayoutDeviceToCSSScale2D;
+typedef gfx::ScaleFactors2D<LayoutDevicePixel, LayerPixel> LayoutDeviceToLayerScale2D;
+typedef gfx::ScaleFactors2D<LayoutDevicePixel, ScreenPixel> LayoutDeviceToScreenScale2D;
+typedef gfx::ScaleFactors2D<LayoutDevicePixel, ParentLayerPixel> LayoutDeviceToParentLayerScale2D;
+typedef gfx::ScaleFactors2D<LayerPixel, CSSPixel> LayerToCSSScale2D;
+typedef gfx::ScaleFactors2D<LayerPixel, LayoutDevicePixel> LayerToLayoutDeviceScale2D;
+typedef gfx::ScaleFactors2D<LayerPixel, RenderTargetPixel> LayerToRenderTargetScale2D;
+typedef gfx::ScaleFactors2D<LayerPixel, ScreenPixel> LayerToScreenScale2D;
+typedef gfx::ScaleFactors2D<LayerPixel, ParentLayerPixel> LayerToParentLayerScale2D;
+typedef gfx::ScaleFactors2D<RenderTargetPixel, ScreenPixel> RenderTargetToScreenScale2D;
+typedef gfx::ScaleFactors2D<ScreenPixel, CSSPixel> ScreenToCSSScale2D;
+typedef gfx::ScaleFactors2D<ScreenPixel, LayoutDevicePixel> ScreenToLayoutDeviceScale2D;
+typedef gfx::ScaleFactors2D<ScreenPixel, LayerPixel> ScreenToLayerScale2D;
+typedef gfx::ScaleFactors2D<ScreenPixel, ParentLayerPixel> ScreenToParentLayerScale2D;
+typedef gfx::ScaleFactors2D<ParentLayerPixel, LayerPixel> ParentLayerToLayerScale2D;
+typedef gfx::ScaleFactors2D<ParentLayerPixel, ScreenPixel> ParentLayerToScreenScale2D;
+typedef gfx::ScaleFactors2D<ParentLayerPixel, ParentLayerPixel> ParentLayerToParentLayerScale2D;
+
 /*
  * The pixels that content authors use to specify sizes in.
  */
@@ -376,6 +399,18 @@ gfx::PointTyped<dst> operator/(const gfx::PointTyped<src>& aPoint, const gfx::Sc
                               aPoint.y / aScale.scale);
 }
 
+template<class src, class dst>
+gfx::PointTyped<dst> operator*(const gfx::PointTyped<src>& aPoint, const gfx::ScaleFactors2D<src, dst>& aScale) {
+  return gfx::PointTyped<dst>(aPoint.x * aScale.xScale,
+                              aPoint.y * aScale.yScale);
+}
+
+template<class src, class dst>
+gfx::PointTyped<dst> operator/(const gfx::PointTyped<src>& aPoint, const gfx::ScaleFactors2D<dst, src>& aScale) {
+  return gfx::PointTyped<dst>(aPoint.x / aScale.xScale,
+                              aPoint.y / aScale.yScale);
+}
+
 template<class src, class dst>
 gfx::RectTyped<dst> operator*(const gfx::RectTyped<src>& aRect, const gfx::ScaleFactor<src, dst>& aScale) {
   return gfx::RectTyped<dst>(aRect.x * aScale.scale,
@@ -392,6 +427,22 @@ gfx::RectTyped<dst> operator/(const gfx::RectTyped<src>& aRect, const gfx::Scale
                              aRect.height / aScale.scale);
 }
 
+template<class src, class dst>
+gfx::RectTyped<dst> operator*(const gfx::RectTyped<src>& aRect, const gfx::ScaleFactors2D<src, dst>& aScale) {
+  return gfx::RectTyped<dst>(aRect.x * aScale.xScale,
+                             aRect.y * aScale.yScale,
+                             aRect.width * aScale.xScale,
+                             aRect.height * aScale.yScale);
+}
+
+template<class src, class dst>
+gfx::RectTyped<dst> operator/(const gfx::RectTyped<src>& aRect, const gfx::ScaleFactors2D<dst, src>& aScale) {
+  return gfx::RectTyped<dst>(aRect.x / aScale.xScale,
+                             aRect.y / aScale.yScale,
+                             aRect.width / aScale.xScale,
+                             aRect.height / aScale.yScale);
+}
+
 template<class src, class dst>
 gfx::RectTyped<dst> operator*(const gfx::IntRectTyped<src>& aRect, const gfx::ScaleFactor<src, dst>& aScale) {
   return gfx::RectTyped<dst>(float(aRect.x) * aScale.scale,
@@ -408,6 +459,22 @@ gfx::RectTyped<dst> operator/(const gfx::IntRectTyped<src>& aRect, const gfx::Sc
                              float(aRect.height) / aScale.scale);
 }
 
+template<class src, class dst>
+gfx::RectTyped<dst> operator*(const gfx::IntRectTyped<src>& aRect, const gfx::ScaleFactors2D<src, dst>& aScale) {
+  return gfx::RectTyped<dst>(float(aRect.x) * aScale.xScale,
+                             float(aRect.y) * aScale.yScale,
+                             float(aRect.width) * aScale.xScale,
+                             float(aRect.height) * aScale.yScale);
+}
+
+template<class src, class dst>
+gfx::RectTyped<dst> operator/(const gfx::IntRectTyped<src>& aRect, const gfx::ScaleFactors2D<dst, src>& aScale) {
+  return gfx::RectTyped<dst>(float(aRect.x) / aScale.xScale,
+                             float(aRect.y) / aScale.yScale,
+                             float(aRect.width) / aScale.xScale,
+                             float(aRect.height) / aScale.yScale);
+}
+
 template<class src, class dst>
 gfx::SizeTyped<dst> operator*(const gfx::SizeTyped<src>& aSize, const gfx::ScaleFactor<src, dst>& aScale) {
   return gfx::SizeTyped<dst>(aSize.width * aScale.scale,
@@ -420,6 +487,18 @@ gfx::SizeTyped<dst> operator/(const gfx::SizeTyped<src>& aSize, const gfx::Scale
                               aSize.height / aScale.scale);
 }
 
+template<class src, class dst>
+gfx::SizeTyped<dst> operator*(const gfx::SizeTyped<src>& aSize, const gfx::ScaleFactors2D<src, dst>& aScale) {
+  return gfx::SizeTyped<dst>(aSize.width * aScale.xScale,
+                             aSize.height * aScale.yScale);
+}
+
+template<class src, class dst>
+gfx::SizeTyped<dst> operator/(const gfx::SizeTyped<src>& aSize, const gfx::ScaleFactors2D<dst, src>& aScale) {
+  return gfx::SizeTyped<dst>(aSize.width / aScale.xScale,
+                             aSize.height / aScale.yScale);
+}
+
 template<class src, class dst>
 gfx::SizeTyped<dst> operator*(const gfx::IntSizeTyped<src>& aSize, const gfx::ScaleFactor<src, dst>& aScale) {
   return gfx::SizeTyped<dst>(float(aSize.width) * aScale.scale,
@@ -432,6 +511,18 @@ gfx::SizeTyped<dst> operator/(const gfx::IntSizeTyped<src>& aSize, const gfx::Sc
                              float(aSize.height) / aScale.scale);
 }
 
+template<class src, class dst>
+gfx::SizeTyped<dst> operator*(const gfx::IntSizeTyped<src>& aSize, const gfx::ScaleFactors2D<src, dst>& aScale) {
+  return gfx::SizeTyped<dst>(float(aSize.width) * aScale.xScale,
+                             float(aSize.height) * aScale.yScale);
+}
+
+template<class src, class dst>
+gfx::SizeTyped<dst> operator/(const gfx::IntSizeTyped<src>& aSize, const gfx::ScaleFactors2D<dst, src>& aScale) {
+  return gfx::SizeTyped<dst>(float(aSize.width) / aScale.xScale,
+                             float(aSize.height) / aScale.yScale);
+}
+
 template<class src, class dst>
 gfx::MarginTyped<dst> operator*(const gfx::MarginTyped<src>& aMargin, const gfx::ScaleFactor<src, dst>& aScale) {
   return gfx::MarginTyped<dst>(aMargin.top * aScale.scale,
@@ -448,6 +539,22 @@ gfx::MarginTyped<dst> operator/(const gfx::MarginTyped<src>& aMargin, const gfx:
                                aMargin.left / aScale.scale);
 }
 
+template<class src, class dst>
+gfx::MarginTyped<dst> operator*(const gfx::MarginTyped<src>& aMargin, const gfx::ScaleFactors2D<src, dst>& aScale) {
+  return gfx::MarginTyped<dst>(aMargin.top * aScale.yScale,
+                               aMargin.right * aScale.xScale,
+                               aMargin.bottom * aScale.yScale,
+                               aMargin.left * aScale.xScale);
+}
+
+template<class src, class dst>
+gfx::MarginTyped<dst> operator/(const gfx::MarginTyped<src>& aMargin, const gfx::ScaleFactors2D<dst, src>& aScale) {
+  return gfx::MarginTyped<dst>(aMargin.top / aScale.yScale,
+                               aMargin.right / aScale.xScale,
+                               aMargin.bottom / aScale.yScale,
+                               aMargin.left / aScale.xScale);
+}
+
 }
 
 #endif