# HG changeset patch
# User Jeff Walden <jwalden@mit.edu>
# Date 1294915212 21600
# Node ID b31f0591185094742879559cabe2e0052b341431
# Parent 062dccbd56740b4906d627277a00cef8e42b30d4
Bug 609714 - Properly compute background image size for vector background images lacking intrinsic sizes or an intrinsic aspect ratio.  NOT REVIEWED YET

diff --git a/layout/base/nsCSSRendering.cpp b/layout/base/nsCSSRendering.cpp
--- a/layout/base/nsCSSRendering.cpp
+++ b/layout/base/nsCSSRendering.cpp
@@ -109,10 +109,13 @@ public:
    */
   PRBool PrepareImage();
   /**
-   * @return the image size in appunits. CSS gradient images don't have an
-   * intrinsic size so we have to pass in a default that they will use.
+   * @return the image size in appunits. CSS gradient images and SVG images
+   * can have dimensions without an intrinsic size, so we have to pass in the
+   * background positioning area dimensions in order to calculate the correct
+   * size.
    */
-  nsSize ComputeSize(const nsSize& aDefault);
+  nsSize ComputeSize(const nsStyleBackground::Size& aLayerSize,
+                     const nsSize& aBgPositioningArea);
   /**
    * Draws the image to the target rendering context.
    * @see nsLayoutUtils::DrawImage() for other parameters
@@ -125,6 +128,22 @@ public:
             const nsRect&        aDirty);
 
 private:
+  /**
+   * Compute the initial size of the image, before any resizing due to
+   * a background-size not equal to  occurs.
+   */
+  void
+  ComputeInitialSize(const nsStyleBackground::Size& aLayerSize,
+                     const nsSize& aBgPositioningArea,
+                     PRBool& haveWidth, PRBool& haveHeight,
+                     nsSize& aRatio);
+
+  nsSize
+  ComputeDrawnSize(const nsStyleBackground::Size& aLayerSize,
+                   const nsSize& aBgPositioningArea,
+                   PRBool haveWidth, PRBool haveHeight,
+                   const nsSize& aRatio);
+
   nsIFrame*                 mForFrame;
   const nsStyleImage*       mImage;
   nsStyleImageType          mType;
@@ -2430,27 +2449,6 @@ nsCSSRendering::PaintBackgroundWithSC(ns
   }
 }
 
-static inline float
-ScaleDimension(const nsStyleBackground::Size::Dimension& aDimension,
-               PRUint8 aType,
-               nscoord aLength, nscoord aAvailLength)
-{
-  switch (aType) {
-    case nsStyleBackground::Size::eLengthPercentage:
-      // negative values could result from calc()
-      return NS_MAX(double(aDimension.mPercent) * double(aAvailLength) +
-                      double(aDimension.mLength),
-                    0.0) /
-             double(aLength);
-    default:
-      NS_ABORT_IF_FALSE(PR_FALSE, "bad aDimension.mType");
-      return 1.0f;
-    case nsStyleBackground::Size::eAuto:
-      NS_ABORT_IF_FALSE(PR_FALSE, "aDimension.mType == eAuto isn't handled");
-      return 1.0f;
-  }
-}
-
 static inline PRBool
 IsTransformed(nsIFrame* aForFrame, nsIFrame* aTopFrame)
 {
@@ -2644,52 +2642,12 @@ PrepareBackgroundLayer(nsPresContext* aP
     }
   }
 
-  nsSize imageSize = state.mImageRenderer.ComputeSize(bgPositioningArea.Size());
-  if (imageSize.width <= 0 || imageSize.height <= 0)
-    return state;
-
   // Scale the image as specified for background-size and as required for
   // proper background positioning when background-position is defined with
   // percentages.
-  float scaleX, scaleY;
-  switch (aLayer.mSize.mWidthType) {
-    case nsStyleBackground::Size::eContain:
-    case nsStyleBackground::Size::eCover: {
-      float scaleFitX = double(bgPositioningArea.width) / imageSize.width;
-      float scaleFitY = double(bgPositioningArea.height) / imageSize.height;
-      if (aLayer.mSize.mWidthType == nsStyleBackground::Size::eCover) {
-        scaleX = scaleY = NS_MAX(scaleFitX, scaleFitY);
-      } else {
-        scaleX = scaleY = NS_MIN(scaleFitX, scaleFitY);
-      }
-      break;
-    }
-    default: {
-      if (aLayer.mSize.mWidthType == nsStyleBackground::Size::eAuto) {
-        if (aLayer.mSize.mHeightType == nsStyleBackground::Size::eAuto) {
-          scaleX = scaleY = 1.0f;
-        } else {
-          scaleX = scaleY =
-            ScaleDimension(aLayer.mSize.mHeight, aLayer.mSize.mHeightType,
-                           imageSize.height, bgPositioningArea.height);
-        }
-      } else {
-        if (aLayer.mSize.mHeightType == nsStyleBackground::Size::eAuto) {
-          scaleX = scaleY =
-            ScaleDimension(aLayer.mSize.mWidth, aLayer.mSize.mWidthType,
-                           imageSize.width, bgPositioningArea.width);
-        } else {
-          scaleX = ScaleDimension(aLayer.mSize.mWidth, aLayer.mSize.mWidthType,
-                                  imageSize.width, bgPositioningArea.width);
-          scaleY = ScaleDimension(aLayer.mSize.mHeight, aLayer.mSize.mHeightType,
-                                  imageSize.height, bgPositioningArea.height);
-        }
-      }
-      break;
-    }
-  }
-  imageSize.width = NSCoordSaturatingNonnegativeMultiply(imageSize.width, scaleX);
-  imageSize.height = NSCoordSaturatingNonnegativeMultiply(imageSize.height, scaleY);
+  nsSize imageSize = state.mImageRenderer.ComputeSize(aLayer.mSize, bgPositioningArea.Size());
+  if (imageSize.width <= 0 || imageSize.height <= 0)
+    return state;
 
   // Compute the position of the background now that the background's size is
   // determined.
@@ -3860,8 +3818,43 @@ ImageRenderer::PrepareImage()
   return mIsReady;
 }
 
-nsSize
-ImageRenderer::ComputeSize(const nsSize& aDefault)
+enum FitType { CONTAIN, COVER };
+
+static nsSize
+ComputeContainCoverSizeFromRatio(const nsSize& aBgPositioningArea,
+                                 const nsSize& aRatio, FitType fitType)
+{
+  float scaleX = double(aBgPositioningArea.width) / aRatio.width;
+  float scaleY = double(aBgPositioningArea.height) / aRatio.height;
+  nsSize size;
+  switch (fitType) {
+    case COVER:
+      if (scaleX < scaleY) {
+        size.width = NSCoordSaturatingNonnegativeMultiply(aRatio.width, scaleY);
+        size.height = aBgPositioningArea.height;
+      } else {
+        size.width = aBgPositioningArea.width;
+        size.height = NSCoordSaturatingNonnegativeMultiply(aRatio.height, scaleX);
+      }
+      break;
+    case CONTAIN:
+      if (scaleX < scaleY) {
+        size.width = aBgPositioningArea.width;
+        size.height = NSCoordSaturatingNonnegativeMultiply(aRatio.height, scaleX);
+      } else {
+        size.width = NSCoordSaturatingNonnegativeMultiply(aRatio.width, scaleY);
+        size.height = aBgPositioningArea.height;
+      }
+      break;
+  }
+  return size;
+}
+
+void
+ImageRenderer::ComputeInitialSize(const nsStyleBackground::Size& aLayerSize,
+                                  const nsSize& aBgPositioningArea,
+                                  PRBool& aHaveWidth, PRBool& aHaveHeight,
+                                  nsSize& aRatio)
 {
   NS_ASSERTION(mIsReady, "Ensure PrepareImage() has returned true "
                          "before calling me");
@@ -3870,29 +3863,31 @@ ImageRenderer::ComputeSize(const nsSize&
     case eStyleImageType_Image:
     {
       nsIntSize imageIntSize;
-      PRBool gotHeight, gotWidth;
       nsLayoutUtils::ComputeSizeForDrawing(mImageContainer, imageIntSize,
-                                           gotWidth, gotHeight);
-
-      mSize.width = gotWidth ?
-        nsPresContext::CSSPixelsToAppUnits(imageIntSize.width) :
-        aDefault.width;
-
-      mSize.height = gotHeight ?
-        nsPresContext::CSSPixelsToAppUnits(imageIntSize.height) :
-        aDefault.height;
-
-      break;
+                                           aRatio, aHaveWidth, aHaveHeight);
+
+      if (aHaveWidth) {
+        mSize.width = nsPresContext::CSSPixelsToAppUnits(imageIntSize.width);
+      }
+      if (aHaveHeight) {
+        mSize.height = nsPresContext::CSSPixelsToAppUnits(imageIntSize.height);
+      }
+      return;
     }
+
     case eStyleImageType_Gradient:
-      mSize = aDefault;
-      break;
+      aHaveWidth = aHaveHeight = PR_FALSE;
+      aRatio = nsSize(0, 0);
+      mSize = aBgPositioningArea;
+      return;
+
 #ifdef MOZ_SVG
     case eStyleImageType_Element:
     {
+      aHaveWidth = aHaveHeight = PR_TRUE; // XXX
       if (mPaintServerFrame) {
         if (mPaintServerFrame->IsFrameOfType(nsIFrame::eSVG)) {
-          mSize = aDefault;
+          mSize = aBgPositioningArea; // XXX
         } else {
           // The intrinsic image size for a generic nsIFrame paint server is
           // the frame's bbox size rounded to device pixels.
@@ -3910,16 +3905,240 @@ ImageRenderer::ComputeSize(const nsSize&
         mSize.width = nsPresContext::CSSPixelsToAppUnits(size.width);
         mSize.height = nsPresContext::CSSPixelsToAppUnits(size.height);
       }
-      break;
+      aRatio = mSize;
+      return;
     }
 #endif
+
     case eStyleImageType_Null:
     default:
+      aHaveWidth = aHaveHeight = PR_TRUE;
       mSize.SizeTo(0, 0);
-      break;
+      aRatio = mSize;
+      return;
   }
-
-  return mSize;
+}
+
+nsSize
+ImageRenderer::ComputeDrawnSize(const nsStyleBackground::Size& aLayerSize,
+                                const nsSize& aBgPositioningArea,
+                                PRBool haveWidth, PRBool haveHeight,
+                                const nsSize& ratio)
+{
+  nsSize size = mSize;
+
+  // Bail early if the image is empty.
+  if ((haveWidth && size.width <= 0) || (haveHeight && size.height <= 0))
+    return size;
+
+  NS_ABORT_IF_FALSE(ratio.height != 0 || ratio.width == 0,
+                    "division by zero");
+  NS_ABORT_IF_FALSE(ratio.width >= 0 && ratio.height >= 0,
+                    "image with nonsense ratio");
+
+  // Easiest case: background-size completely specifies the size.
+  if (aLayerSize.mWidthType == nsStyleBackground::Size::eLengthPercentage &&
+      aLayerSize.mHeightType == nsStyleBackground::Size::eLengthPercentage) {
+    size.width = aLayerSize.ResolveWidthLengthPercentage(aBgPositioningArea);
+    size.height = aLayerSize.ResolveHeightLengthPercentage(aBgPositioningArea);
+    return size;
+  }
+
+  PRBool haveRatio = ratio != nsSize(0, 0);
+
+  // The harder cases: contain/cover.
+  if (aLayerSize.mWidthType == nsStyleBackground::Size::eContain ||
+      aLayerSize.mWidthType == nsStyleBackground::Size::eCover) {
+    FitType fitType = aLayerSize.mWidthType == nsStyleBackground::Size::eCover
+                    ? COVER
+                    : CONTAIN;
+    if (!haveWidth && !haveHeight) {
+      if (!haveRatio) {
+        // Dimensions must be the maximum size contained in the area, or the
+        // minimum size covering the area: that is, the area itself.
+        size = aBgPositioningArea;
+        return size;
+      }
+
+      // For contain and cover's purposes, an intrinsic ratio effectively
+      // specifies dimensions.
+      haveWidth = haveHeight = PR_TRUE;
+      size = ratio;
+    } else if (haveWidth != haveHeight) {
+      if (!haveRatio) {
+        // If there's no ratio, then scaling to either largest-fitting or
+        // smallest-covering size means scaling to the background positioning
+        // area's size.
+        size = aBgPositioningArea;
+        return size;
+      }
+
+      // Impute a missing dimension from the available one.
+      if (haveWidth) {
+        size.height =
+          NSCoordSaturatingMultiply(size.width,
+                                    double(ratio.height) / ratio.width);
+        haveHeight = PR_TRUE;
+      } else {
+        size.width =
+          NSCoordSaturatingMultiply(size.height,
+                                    double(ratio.width) / ratio.height);
+        haveWidth = PR_TRUE;
+      }
+    }
+
+    NS_ABORT_IF_FALSE(haveWidth && haveHeight, "error in logic");
+    NS_ABORT_IF_FALSE(size.width >= 0 && size.height >= 0, "error in logic");
+
+    // Easy case, or a harder case transformed: we have intrinsic dimensions.
+    size = ComputeContainCoverSizeFromRatio(aBgPositioningArea,
+                                            size, fitType);
+    return size;
+  }
+
+  // Harder case: all-auto.
+  if (aLayerSize.mWidthType == nsStyleBackground::Size::eAuto &&
+      aLayerSize.mHeightType == nsStyleBackground::Size::eAuto) {
+    // If the image has all its dimensions, we're done.
+    if (haveWidth && haveHeight)
+      return size;
+
+    // If the image has no dimensions, treat it as if for contain.
+    if (!haveWidth && !haveHeight) {
+      if (!haveRatio) {
+        // As above, max-contain without a ratio means the whole area.
+        size = aBgPositioningArea;
+        return size;
+      }
+
+      // As above, use the ratio as dimensions.
+      size = ComputeContainCoverSizeFromRatio(aBgPositioningArea,
+                                              ratio, CONTAIN);
+      return size;
+    }
+
+    NS_ABORT_IF_FALSE(haveWidth != haveHeight, "logic error");
+    if (haveRatio) {
+      // Resolve missing dimensions using the intrinsic ratio first.
+      if (haveWidth) {
+        size.height = NSCoordSaturatingMultiply(size.width,
+                                                double(ratio.height) / ratio.width);
+      } else {
+        size.width = NSCoordSaturatingMultiply(size.height,
+                                               double(ratio.width) / ratio.height);
+      }
+    } else {
+      // Without a ratio we must fall back to the relevant dimension of the
+      // area to determine the missing dimension.
+      if (haveWidth) {
+        size.height = aBgPositioningArea.height;
+      } else {
+        size.width = aBgPositioningArea.width;
+      }
+    }
+
+    return size;
+  }
+
+  // Hardest case: only one auto.  Prepare to negotiate amongst intrinsic
+  // dimensions, intrinsic ratio, *and* a specific background-size!
+  NS_ABORT_IF_FALSE((aLayerSize.mWidthType == nsStyleBackground::Size::eAuto) !=
+                    (aLayerSize.mHeightType == nsStyleBackground::Size::eAuto),
+                    "logic error");
+
+  PRBool autoWidth = aLayerSize.mWidthType == nsStyleBackground::Size::eAuto;
+
+  if (haveWidth && haveHeight) {
+    // Use the provided dimension and compute the other from the ratio.
+    NS_ABORT_IF_FALSE(haveRatio, "handled much earlier");
+    if (autoWidth) {
+      size.height = aLayerSize.ResolveHeightLengthPercentage(aBgPositioningArea);
+      size.width =
+        NSCoordSaturatingMultiply(size.height,
+                                  double(ratio.width) / ratio.height);
+    } else {
+      size.width = aLayerSize.ResolveWidthLengthPercentage(aBgPositioningArea);
+      size.height =
+        NSCoordSaturatingMultiply(size.width,
+                                  double(ratio.height) / ratio.width);
+    }
+
+    return size;
+  }
+
+  if (!haveWidth && !haveHeight) {
+    // Preserve an intrinsic ratio with respect to the CSS-specified dimension.
+    if (haveRatio) {
+      if (autoWidth) {
+        size.height = aLayerSize.ResolveHeightLengthPercentage(aBgPositioningArea);
+        size.width =
+          NSCoordSaturatingMultiply(size.height,
+                                    double(ratio.width) / ratio.height);
+      } else {
+        size.width = aLayerSize.ResolveWidthLengthPercentage(aBgPositioningArea);
+        size.height =
+          NSCoordSaturatingMultiply(size.width,
+                                    double(ratio.height) / ratio.width);
+      }
+      return size;
+    }
+
+    // ...otherwise expand that dimension to 100%.
+    if (autoWidth) {
+      size.width = aBgPositioningArea.width;
+      size.height = aLayerSize.ResolveHeightLengthPercentage(aBgPositioningArea);
+    } else {
+      size.width = aLayerSize.ResolveWidthLengthPercentage(aBgPositioningArea);
+      size.height = aBgPositioningArea.height;
+    }
+
+    return size;
+  }
+
+  if (haveRatio) {
+    if (autoWidth) {
+      size.height = aLayerSize.ResolveHeightLengthPercentage(aBgPositioningArea);
+      size.width = NSCoordSaturatingMultiply(size.height,
+                                             double(ratio.width) / ratio.height);
+    } else {
+      size.width = aLayerSize.ResolveWidthLengthPercentage(aBgPositioningArea);
+      size.height = NSCoordSaturatingMultiply(size.width,
+                                              double(ratio.height) / ratio.width);
+    }
+  } else if (autoWidth && haveWidth) {
+    size.height = aLayerSize.ResolveHeightLengthPercentage(aBgPositioningArea);
+  } else if (!autoWidth && haveHeight) {
+    size.width = aLayerSize.ResolveWidthLengthPercentage(aBgPositioningArea);
+  } else {
+    // Whichever component is auto, we don't have an intrinsic size or ratio
+    // for it, so we treat it as 100%.
+    if (autoWidth) {
+      size.width = aBgPositioningArea.width;
+      size.height = aLayerSize.ResolveHeightLengthPercentage(aBgPositioningArea);
+    } else {
+      size.width = aLayerSize.ResolveWidthLengthPercentage(aBgPositioningArea);
+      size.height = aBgPositioningArea.height;
+    }
+  }
+
+  return size;
+}
+
+nsSize
+ImageRenderer::ComputeSize(const nsStyleBackground::Size& aLayerSize,
+                           const nsSize& aBgPositioningArea)
+{
+  PRBool haveWidth, haveHeight;
+  nsSize ratio;
+  ComputeInitialSize(aLayerSize, aBgPositioningArea, haveWidth, haveHeight,
+                     ratio);
+  nsSize drawnSize = ComputeDrawnSize(aLayerSize, aBgPositioningArea,
+                                      haveWidth, haveHeight, ratio);
+  if (!haveWidth)
+    mSize.width = drawnSize.width;
+  if (!haveHeight)
+    mSize.height = drawnSize.height;
+  return drawnSize;
 }
 
 void
@@ -3948,7 +4167,9 @@ ImageRenderer::Draw(nsPresContext*      
       PRUint32 drawFlags = (mFlags & FLAG_SYNC_DECODE_IMAGES)
                              ? (PRUint32) imgIContainer::FLAG_SYNC_DECODE
                              : (PRUint32) imgIContainer::FLAG_NONE;
-      nsLayoutUtils::DrawImage(&aRenderingContext, mImageContainer,
+      nsLayoutUtils::DrawBackgroundImage(&aRenderingContext, mImageContainer,
+          nsIntSize(nsPresContext::AppUnitsToIntCSSPixels(mSize.width),
+                    nsPresContext::AppUnitsToIntCSSPixels(mSize.height)),
           graphicsFilter,
           aDest, aFill, aAnchor, aDirty, drawFlags);
       break;
diff --git a/layout/base/nsLayoutUtils.cpp b/layout/base/nsLayoutUtils.cpp
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -3411,19 +3411,18 @@ nsLayoutUtils::DrawSingleImage(nsRenderi
 /* static */ void
 nsLayoutUtils::ComputeSizeForDrawing(imgIContainer *aImage,
                                      nsIntSize&     aImageSize, /*outparam*/
+                                     nsSize&        aIntrinsicRatio, /*outparam*/
                                      PRBool&        aGotWidth,  /*outparam*/
                                      PRBool&        aGotHeight  /*outparam*/)
 {
   aGotWidth  = NS_SUCCEEDED(aImage->GetWidth(&aImageSize.width));
   aGotHeight = NS_SUCCEEDED(aImage->GetHeight(&aImageSize.height));
 
-  if ((aGotWidth && aGotHeight) ||    // Trivial success!
-      (!aGotWidth && !aGotHeight)) {  // Trivial failure!
-    return;
+  if (aGotWidth && aGotHeight) {
+    aIntrinsicRatio = nsSize(aImageSize.width, aImageSize.height);
+    return; // Trivial success!
   }
 
-  // If we get here, we succeeded at querying *either* the width *or* the
-  // height, but not both.
   NS_ASSERTION(aImage->GetType() == imgIContainer::TYPE_VECTOR,
                "GetWidth and GetHeight should only fail for vector images");
 
@@ -3432,26 +3431,27 @@ nsLayoutUtils::ComputeSizeForDrawing(img
                "We should have a VectorImage, which should have a rootFrame");
 
   // This falls back on failure, if we somehow end up without a rootFrame.
-  nsSize ratio = rootFrame ? rootFrame->GetIntrinsicRatio() : nsSize(0,0);
-  if (!aGotWidth) { // Have height, missing width
-    if (ratio.height != 0) { // don't divide by zero
-      aImageSize.width = NSToCoordRound(aImageSize.height *
-                                        float(ratio.width) /
-                                        float(ratio.height));
-      aGotWidth = PR_TRUE;
-    }
-  } else { // Have width, missing height
-    if (ratio.width != 0) { // don't divide by zero
-      aImageSize.height = NSToCoordRound(aImageSize.width *
-                                         float(ratio.height) /
-                                         float(ratio.width));
-      aGotHeight = PR_TRUE;
-    }
-  }
+  aIntrinsicRatio = rootFrame ? rootFrame->GetIntrinsicRatio() : nsSize(0, 0);
 }
 
 
 /* static */ nsresult
+nsLayoutUtils::DrawBackgroundImage(nsRenderingContext* aRenderingContext,
+                                   imgIContainer*       aImage,
+                                   const nsIntSize&     aImageSize,
+                                   GraphicsFilter       aGraphicsFilter,
+                                   const nsRect&        aDest,
+                                   const nsRect&        aFill,
+                                   const nsPoint&       aAnchor,
+                                   const nsRect&        aDirty,
+                                   PRUint32             aImageFlags)
+{
+  return DrawImageInternal(aRenderingContext, aImage, aGraphicsFilter,
+                           aDest, aFill, aAnchor, aDirty,
+                           aImageSize, aImageFlags);
+}
+
+/* static */ nsresult
 nsLayoutUtils::DrawImage(nsRenderingContext* aRenderingContext,
                          imgIContainer*       aImage,
                          GraphicsFilter       aGraphicsFilter,
@@ -3462,10 +3462,11 @@ nsLayoutUtils::DrawImage(nsRenderingCont
                          PRUint32             aImageFlags)
 {
   nsIntSize imageSize;
+  nsSize imageRatio;
   PRBool gotHeight, gotWidth;
-  ComputeSizeForDrawing(aImage, imageSize, gotWidth, gotHeight);
-
-  // fallback size based on aFill.
+  ComputeSizeForDrawing(aImage, imageSize, imageRatio, gotWidth, gotHeight);
+
+  // XXX fallback size based on aFill. BAD!
   if (!gotWidth) {
     imageSize.width = nsPresContext::AppUnitsToIntCSSPixels(aFill.width);
   }
diff --git a/layout/base/nsLayoutUtils.h b/layout/base/nsLayoutUtils.h
--- a/layout/base/nsLayoutUtils.h
+++ b/layout/base/nsLayoutUtils.h
@@ -1021,6 +1021,34 @@ public:
    */
 
   /**
+   * Draw a background image.  The image's dimensions are as specified in aDest;
+   * the image itself is not consulted to determine a size.
+   * See https://wiki.mozilla.org/Gecko:Image_Snapping_and_Rendering
+   *   @param aRenderingContext Where to draw the image, set up with an
+   *                            appropriate scale and transform for drawing in
+   *                            app units.
+   *   @param aImage            The image.
+   *   @param aImageSize        The size of the image being drawn
+   *   @param aDest             The position and scaled area where one copy of
+   *                            the image should be drawn.
+   *   @param aFill             The area to be filled with copies of the
+   *                            image.
+   *   @param aAnchor           A point in aFill which we will ensure is
+   *                            pixel-aligned in the output.
+   *   @param aDirty            Pixels outside this area may be skipped.
+   *   @param aImageFlags       Image flags of the imgIContainer::FLAG_* variety
+   */
+  static nsresult DrawBackgroundImage(nsRenderingContext*  aRenderingContext,
+                                      imgIContainer*       aImage,
+                                      const nsIntSize&     aImageSize,
+                                      GraphicsFilter       aGraphicsFilter,
+                                      const nsRect&        aDest,
+                                      const nsRect&        aFill,
+                                      const nsPoint&       aAnchor,
+                                      const nsRect&        aDirty,
+                                      PRUint32             aImageFlags);
+
+  /**
    * Draw an image.
    * See https://wiki.mozilla.org/Gecko:Image_Snapping_and_Rendering
    *   @param aRenderingContext Where to draw the image, set up with an
@@ -1124,7 +1152,8 @@ public:
    * Given an imgIContainer, this method attempts to obtain an intrinsic
    * px-valued height & width for it.  If the imgIContainer has a non-pixel
    * value for either height or width, this method tries to generate a pixel
-   * value for that dimension using the intrinsic ratio (if available).
+   * value for that dimension using the intrinsic ratio (if available).  The
+   * intrinsic ratio is returned if the image has non-pixel width or height.
    *
    * This method will always set aGotWidth and aGotHeight to indicate whether
    * we were able to successfully obtain (or compute) a value for each
@@ -1136,6 +1165,7 @@ public:
    */
   static void ComputeSizeForDrawing(imgIContainer* aImage,
                                     nsIntSize&     aImageSize,
+                                    nsSize&        aIntrinsicRatio,
                                     PRBool&        aGotWidth,
                                     PRBool&        aGotHeight);
 
diff --git a/layout/reftests/backgrounds/background-size-no-intrinsic-height-image-ref.html b/layout/reftests/backgrounds/background-size-no-intrinsic-height-image-ref.html
deleted file mode 100644
--- a/layout/reftests/backgrounds/background-size-no-intrinsic-height-image-ref.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>background-size: 32px auto; for image with no intrinsic height reference</title>
-  <style type="text/css">
-#outer
-{
-  border: 1px solid black;
-  width: 64px;
-  height: 128px;
-}
-#inner
-{
-  width: 32px;
-  height: 128px;
-  background-color: lime;
-}
-  </style>
-</head>
-<body>
-<div id="outer"><div id="inner"></div></div>
-</body>
-</html>
diff --git a/layout/reftests/backgrounds/background-size-no-intrinsic-height-image.html b/layout/reftests/backgrounds/background-size-no-intrinsic-height-image.html
deleted file mode 100644
--- a/layout/reftests/backgrounds/background-size-no-intrinsic-height-image.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>background-size: 32px auto; for image with no intrinsic height</title>
-  <style type="text/css">
-#outer
-{
-  border: 1px solid black;
-  width: 64px;
-  height: 128px;
-}
-#inner
-{
-  width: 64px;
-  height: 128px;
-  background-image: url(no-intrinsic-size.svg);
-  background-repeat: no-repeat;
-  background-size: 32px auto;
-}
-  </style>
-</head>
-<body>
-<div id="outer"><div id="inner"></div></div>
-</body>
-</html>
diff --git a/layout/reftests/backgrounds/background-size-no-intrinsic-width-image-ref.html b/layout/reftests/backgrounds/background-size-no-intrinsic-width-image-ref.html
deleted file mode 100644
--- a/layout/reftests/backgrounds/background-size-no-intrinsic-width-image-ref.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>background-size: 32px auto; for image with no intrinsic size reference</title>
-  <style type="text/css">
-#outer
-{
-  border: 1px solid black;
-  width: 64px;
-  height: 128px;
-}
-#inner
-{
-  width: 64px;
-  height: 32px;
-  background-color: lime;
-}
-  </style>
-</head>
-<body>
-<div id="outer"><div id="inner"></div></div>
-</body>
-</html>
diff --git a/layout/reftests/backgrounds/background-size-no-intrinsic-width-image.html b/layout/reftests/backgrounds/background-size-no-intrinsic-width-image.html
deleted file mode 100644
--- a/layout/reftests/backgrounds/background-size-no-intrinsic-width-image.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>background-size: auto 32px; for image with no intrinsic width</title>
-  <style type="text/css">
-#outer
-{
-  border: 1px solid black;
-  width: 64px;
-  height: 128px;
-}
-#inner
-{
-  width: 64px;
-  height: 128px;
-  background-image: url(no-intrinsic-size.svg);
-  background-repeat: no-repeat;
-  background-size: auto 32px;
-}
-  </style>
-</head>
-<body>
-<div id="outer"><div id="inner"></div></div>
-</body>
-</html>
diff --git a/layout/reftests/backgrounds/reftest.list b/layout/reftests/backgrounds/reftest.list
--- a/layout/reftests/backgrounds/reftest.list
+++ b/layout/reftests/backgrounds/reftest.list
@@ -1,3 +1,5 @@
+include vector/reftest.list
+
 == layers-stacking-order.xhtml layers-stacking-order-ref.xhtml
 == layers-layer-count-cascade-1.xhtml layers-layer-count-1-ref.xhtml
 == layers-layer-count-inheritance-1.xhtml layers-layer-count-1-ref.xhtml
@@ -101,13 +103,6 @@ fails-if(Android) == viewport-translucen
 # doesn't sample too far astray from the boundaries).
 fails-if(!Android) == background-size-zoom-repeat.html background-size-zoom-repeat-ref.html
 
-# background-size affects images without intrinsic dimensions specially; we may
-# not support such image formats right now, but when we do, we want
-# background-size to be changed accordingly, and hopefully these tests should
-# start failing when we do.
-fails == background-size-no-intrinsic-width-image.html background-size-no-intrinsic-width-image-ref.html
-fails == background-size-no-intrinsic-height-image.html background-size-no-intrinsic-height-image-ref.html
-
 # -moz-default-background-color and -moz-default-color (bug 591341)
 == background-moz-default-background-color.html background-moz-default-background-color-ref.html
 
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height-viewbox.svg b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height-viewbox.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="8px" height="32px"
+     viewBox="0 0 4 64"
+     preserveAspectRatio="none">
+  <title>Image with non-percent width, non-percent height, viewbox</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height.svg b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-nonpercent-height.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="8px" height="32px">
+  <title>Image with non-percentage dimensions</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height-viewbox.svg b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height-viewbox.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="8px"
+     viewBox="0 0 4 64"
+     preserveAspectRatio="none">
+  <title>Image with non-percent width, omitted height, viewbox</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height.svg b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-omitted-height.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="8px">
+  <title>Image with non-percent width, omitted height</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-percent-height-viewbox.svg b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height-viewbox.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="8px" height="50%"
+     viewBox="0 0 4 64"
+     preserveAspectRatio="none">
+  <title>Image with non-percent width, percent height, viewbox</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/nonpercent-width-percent-height.svg b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/nonpercent-width-percent-height.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="8px" height="50%">
+  <title>Image with non-percent width, percent height</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height-viewbox.svg b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height-viewbox.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     height="32px"
+     viewBox="0 0 4 64"
+     preserveAspectRatio="none">
+  <title>Image with omitted width, non-percent height, viewbox</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height.svg b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-nonpercent-height.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     height="32px">
+  <title>Image with omitted width, non-percent height</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox.svg b/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-omitted-height-viewbox.svg
@@ -0,0 +1,11 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 4 64"
+     preserveAspectRatio="none">
+  <title>Image with omitted width, omitted height, viewbox</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-omitted-height.svg b/layout/reftests/backgrounds/vector/omitted-width-omitted-height.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-omitted-height.svg
@@ -0,0 +1,9 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Image with omitted width, omitted height</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-percent-height-viewbox.svg b/layout/reftests/backgrounds/vector/omitted-width-percent-height-viewbox.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-percent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     height="50%"
+     viewBox="0 0 4 64"
+     preserveAspectRatio="none">
+  <title>Image with omitted width, percent height, viewbox</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/omitted-width-percent-height.svg b/layout/reftests/backgrounds/vector/omitted-width-percent-height.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/omitted-width-percent-height.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     height="50%">
+  <title>Image with omitted width, percent height</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-nonpercent-height-viewbox.svg b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height-viewbox.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="50%" height="32px"
+     viewBox="0 0 4 64"
+     preserveAspectRatio="none">
+  <title>Image with percent width, non-percent height, viewbox</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-nonpercent-height.svg b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-nonpercent-height.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="50%" height="32px">
+  <title>Image with percent width, non-percent height</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-omitted-height-viewbox.svg b/layout/reftests/backgrounds/vector/percent-width-omitted-height-viewbox.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-omitted-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="50%"
+     viewBox="0 0 4 64"
+     preserveAspectRatio="none">
+  <title>Image with percent width, omitted height, viewbox</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-omitted-height.svg b/layout/reftests/backgrounds/vector/percent-width-omitted-height.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-omitted-height.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="50%">
+  <title>Image with percent width, omitted height</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-percent-height-viewbox.svg b/layout/reftests/backgrounds/vector/percent-width-percent-height-viewbox.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-percent-height-viewbox.svg
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="25%" height="50%"
+     viewBox="0 0 4 64"
+     preserveAspectRatio="none">
+  <title>Image with percent width, percent height, viewbox</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/percent-width-percent-height.svg b/layout/reftests/backgrounds/vector/percent-width-percent-height.svg
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/percent-width-percent-height.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="25%" height="50%">
+  <title>Image with percent width, percent height</title>
+  <rect y="0" width="100%" height="50%" fill="lime"/>
+  <rect y="50%" width="100%" height="50%" fill="aqua"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime192x384-aqua192x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime192x384-aqua192x384.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime192x384-aqua192x384.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 192x384 lime, 192x384 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 192px; height: 768px;
+}
+#inner > div { width: 192px; height: 384px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x16-aqua256x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x16-aqua256x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x16-aqua256x16.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 256x16 lime, 256x16 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 256px; height: 32px;
+}
+#inner > div { width: 256px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x384-aqua256x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x384-aqua256x384.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x384-aqua256x384.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 256x384 lime, 256x384 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 256px; height: 768px;
+}
+#inner > div { width: 256px; height: 384px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x512-aqua256x256.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x512-aqua256x256.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x512-aqua256x256.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 256x512 lime, 256x256 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 256px; height: 768px;
+}
+#inner > div { width: 256px; }
+#top { background-color: lime; height: 512px; }
+#bottom { background-color: aqua; height: 256px; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime256x768.html b/layout/reftests/backgrounds/vector/ref-tall-lime256x768.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime256x768.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 256x512 lime, 256x256 aqua</title>
+  <style type="text/css">
+#outer
+{
+  width: 256px; height: 768px;
+  background-color: lime;
+  border: 1px solid black;
+}
+  </style>
+</head>
+<body>
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime2x16-aqua2x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime2x16-aqua2x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime2x16-aqua2x16.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 2x16 lime, 2x16 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 2px; height: 32px;
+}
+#inner > div { width: 2px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x128-aqua32x128.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x128-aqua32x128.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x128-aqua32x128.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 32x128 lime, 32x128 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 32px; height: 256px;
+}
+#inner > div { width: 32px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x16-aqua32x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x16-aqua32x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x16-aqua32x16.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 32x16 lime, 32x16 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 32px; height: 32px;
+}
+#inner > div { width: 32px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x256-aqua32x256.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x256-aqua32x256.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x256-aqua32x256.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 32x256 lime, 32x256 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 32px; height: 512px;
+}
+#inner > div { width: 32px; height: 256px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x384-aqua32x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x384-aqua32x384.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x384-aqua32x384.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 32x384 lime, 32x384 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 32px; height: 768px;
+}
+#inner > div { width: 32px; height: 384px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime32x64-aqua32x64.html b/layout/reftests/backgrounds/vector/ref-tall-lime32x64-aqua32x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime32x64-aqua32x64.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 32x64 lime, 32x64 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 32px; height: 128px;
+}
+#inner > div { width: 32px; height: 64px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime48x384-aqua48x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime48x384-aqua48x384.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime48x384-aqua48x384.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 48x384 lime, 48x384 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 48px; height: 768px;
+}
+#inner > div { width: 48px; height: 384px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime4x16-aqua4x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime4x16-aqua4x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime4x16-aqua4x16.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 4x16 lime, 4x16 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 4px; height: 32px;
+}
+#inner > div { width: 4px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x16-aqua8x16.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x16-aqua8x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x16-aqua8x16.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 8x16 lime, 8x16 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 32px;
+}
+#inner > div { width: 8px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x32-aqua8x32.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x32-aqua8x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x32-aqua8x32.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 8x32 lime, 8x32 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 64px;
+}
+#inner > div { width: 8px; height: 32px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x384-aqua8x384.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x384-aqua8x384.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x384-aqua8x384.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 8x384 lime, 8x384 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 768px;
+}
+#inner > div { width: 8px; height: 384px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-lime8x64-aqua8x64.html b/layout/reftests/backgrounds/vector/ref-tall-lime8x64-aqua8x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-lime8x64-aqua8x64.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall reference, 8x64 lime, 8x64 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 128px;
+}
+#inner > div { width: 8px; height: 64px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x128-aqua12x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x128-aqua12x128.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x128-aqua12x128.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 12x128 lime, 12x128 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 12px; height: 256px;
+}
+#inner > div { width: 12px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x16-aqua12x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x16-aqua12x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x16-aqua12x16.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 12x16 lime, 12x16 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 12px; height: 32px;
+}
+#inner > div { width: 12px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x24-aqua12x24.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x24-aqua12x24.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x24-aqua12x24.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 12x24 lime, 12x24 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 12px; height: 48px;
+}
+#inner > div { width: 12px; height: 24px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime12x96-aqua12x96.html b/layout/reftests/backgrounds/vector/ref-wide-lime12x96-aqua12x96.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime12x96-aqua12x96.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 12x96 lime, 12x96 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 12px; height: 192px;
+}
+#inner > div { width: 12px; height: 96px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime16x128-aqua16x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime16x128-aqua16x128.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime16x128-aqua16x128.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 16x128 lime, 16x128 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 16px; height: 256px;
+}
+#inner > div { width: 16px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime2x16-aqua2x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime2x16-aqua2x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime2x16-aqua2x16.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 2x16 lime, 2x16 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 2px; height: 32px;
+}
+#inner > div { width: 2px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime64x128-aqua64x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime64x128-aqua64x128.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime64x128-aqua64x128.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 64x128 lime, 64x128 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 64px; height: 256px;
+}
+#inner > div { width: 64px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime768x128-aqua768x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime768x128-aqua768x128.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime768x128-aqua768x128.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 768x128 lime, 768x128 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 768px; height: 256px;
+}
+#inner > div { width: 768px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime768x16-aqua768x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime768x16-aqua768x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime768x16-aqua768x16.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 768x16 lime, 768x16 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 768px; height: 32px;
+}
+#inner > div { width: 768px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime768x256.html b/layout/reftests/backgrounds/vector/ref-wide-lime768x256.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime768x256.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 768x256 lime</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 768px; height: 256px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime8x128-aqua8x128.html b/layout/reftests/backgrounds/vector/ref-wide-lime8x128-aqua8x128.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime8x128-aqua8x128.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 8x128 lime, 8x128 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 256px;
+}
+#inner > div { width: 8px; height: 128px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime8x16-aqua8x16.html b/layout/reftests/backgrounds/vector/ref-wide-lime8x16-aqua8x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime8x16-aqua8x16.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 8x16 lime, 8x16 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 32px;
+}
+#inner > div { width: 8px; height: 16px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-wide-lime8x64-aqua8x64.html b/layout/reftests/backgrounds/vector/ref-wide-lime8x64-aqua8x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-lime8x64-aqua8x64.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide reference, 8x64 lime, 8x64 aqua</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 128px;
+}
+#inner > div { width: 8px; height: 64px; }
+#top { background-color: lime; }
+#bottom { background-color: aqua; }
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/reftest.list b/layout/reftests/backgrounds/vector/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/reftest.list
@@ -0,0 +1,204 @@
+################################################################################
+# For reference (although the wide--32px-auto* tests/names were changed to
+# avoid viewBox-directed scaling to make the scaled height less than the wide-
+# tests height):
+#
+# for ORIENTATION in tall wide; do for SIZE in 32px-auto auto-32px auto contain cover; do for VIMAGE in *.svg; do cat template.html | sed -e "s/SIZE/$(echo $SIZE | sed -e 's/-/ /')/g" | sed -e "s/VIMAGE/$VIMAGE/g" | sed -e "s/TALLWIDE/$ORIENTATION/g" | sed -e "s/ORIENTATION/$(if [ "$ORIENTATION" = "tall" ]; then echo 'width: 256px; height: 768px'; else echo 'width: 768px; height: 256px'; fi)/g" > $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html; echo "== $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html ###" >> reftest.list; done; echo >> reftest.list; done; done
+#
+################################################################################
+
+== tall--32px-auto--nonpercent-width-nonpercent-height.html ref-tall-lime32x64-aqua32x64.html
+== tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime32x64-aqua32x64.html
+== tall--32px-auto--nonpercent-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--nonpercent-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--nonpercent-width-percent-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--nonpercent-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--omitted-width-nonpercent-height.html ref-tall-lime32x16-aqua32x16.html
+== tall--32px-auto--omitted-width-nonpercent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--omitted-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--omitted-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--omitted-width-percent-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--omitted-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--percent-width-nonpercent-height.html ref-tall-lime32x16-aqua32x16.html
+== tall--32px-auto--percent-width-nonpercent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--percent-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--percent-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+== tall--32px-auto--percent-width-percent-height.html ref-tall-lime32x384-aqua32x384.html
+== tall--32px-auto--percent-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
+
+== tall--auto-32px--nonpercent-width-nonpercent-height.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto-32px--nonpercent-width-omitted-height.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto-32px--nonpercent-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--nonpercent-width-percent-height.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto-32px--nonpercent-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--omitted-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--omitted-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--omitted-width-omitted-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--omitted-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--omitted-width-percent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--omitted-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--percent-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--percent-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--percent-width-omitted-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--percent-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto-32px--percent-width-percent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto-32px--percent-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+
+== tall--auto--nonpercent-width-nonpercent-height.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime8x16-aqua8x16.html
+== tall--auto--nonpercent-width-omitted-height.html ref-tall-lime8x384-aqua8x384.html
+== tall--auto--nonpercent-width-omitted-height-viewbox.html ref-tall-lime8x64-aqua8x64.html
+== tall--auto--nonpercent-width-percent-height.html ref-tall-lime8x384-aqua8x384.html
+== tall--auto--nonpercent-width-percent-height-viewbox.html ref-tall-lime8x64-aqua8x64.html
+== tall--auto--omitted-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto--omitted-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--auto--omitted-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--auto--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--auto--omitted-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--auto--percent-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
+== tall--auto--percent-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
+== tall--auto--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--auto--percent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--auto--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--auto--percent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+
+== tall--contain--nonpercent-width-nonpercent-height.html ref-tall-lime192x384-aqua192x384.html
+== tall--contain--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime192x384-aqua192x384.html
+== tall--contain--nonpercent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--nonpercent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--nonpercent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--nonpercent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--omitted-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--omitted-width-nonpercent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--omitted-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--omitted-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--percent-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--percent-width-nonpercent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--percent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+== tall--contain--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--contain--percent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
+
+# We smear the background image when scaling it in these two tests...
+fails == tall--cover--nonpercent-width-nonpercent-height.html ref-tall-lime256x512-aqua256x256.html
+fails == tall--cover--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime256x512-aqua256x256.html
+
+# ...but we don't in identical tests with image-rendering: -moz-crisp-edges.
+== tall--cover--nonpercent-width-nonpercent-height--crisp.html ref-tall-lime256x512-aqua256x256.html
+== tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html ref-tall-lime256x512-aqua256x256.html
+
+== tall--cover--nonpercent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--nonpercent-width-omitted-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--nonpercent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--nonpercent-width-percent-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--omitted-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--omitted-width-nonpercent-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--omitted-width-omitted-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--omitted-width-percent-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--percent-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--percent-width-nonpercent-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--percent-width-omitted-height-viewbox.html ref-tall-lime256x768.html
+== tall--cover--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
+== tall--cover--percent-width-percent-height-viewbox.html ref-tall-lime256x768.html
+
+== wide--12px-auto--nonpercent-width-nonpercent-height.html ref-wide-lime12x24-aqua12x24.html
+== wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime12x24-aqua12x24.html
+== wide--12px-auto--nonpercent-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--nonpercent-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--nonpercent-width-percent-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--nonpercent-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--omitted-width-nonpercent-height.html ref-wide-lime12x16-aqua12x16.html
+== wide--12px-auto--omitted-width-nonpercent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--omitted-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--omitted-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--omitted-width-percent-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--omitted-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--percent-width-nonpercent-height.html ref-wide-lime12x16-aqua12x16.html
+== wide--12px-auto--percent-width-nonpercent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--percent-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--percent-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+== wide--12px-auto--percent-width-percent-height.html ref-wide-lime12x128-aqua12x128.html
+== wide--12px-auto--percent-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
+
+== wide--auto-32px--nonpercent-width-nonpercent-height.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto-32px--nonpercent-width-omitted-height.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto-32px--nonpercent-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--nonpercent-width-percent-height.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto-32px--nonpercent-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--omitted-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--omitted-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--omitted-width-omitted-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--omitted-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--omitted-width-percent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--omitted-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--percent-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--percent-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--percent-width-omitted-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--percent-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto-32px--percent-width-percent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto-32px--percent-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+
+== wide--auto--nonpercent-width-nonpercent-height.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime8x16-aqua8x16.html
+== wide--auto--nonpercent-width-omitted-height.html ref-wide-lime8x128-aqua8x128.html
+== wide--auto--nonpercent-width-omitted-height-viewbox.html ref-wide-lime8x64-aqua8x64.html
+== wide--auto--nonpercent-width-percent-height.html ref-wide-lime8x128-aqua8x128.html
+== wide--auto--nonpercent-width-percent-height-viewbox.html ref-wide-lime8x64-aqua8x64.html
+== wide--auto--omitted-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto--omitted-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--auto--omitted-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--auto--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--auto--omitted-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--auto--percent-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
+== wide--auto--percent-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
+== wide--auto--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--auto--percent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--auto--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--auto--percent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+
+== wide--contain--nonpercent-width-nonpercent-height.html ref-wide-lime64x128-aqua64x128.html
+== wide--contain--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime64x128-aqua64x128.html
+== wide--contain--nonpercent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--nonpercent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--nonpercent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--nonpercent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--omitted-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--omitted-width-nonpercent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--omitted-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--omitted-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--percent-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--percent-width-nonpercent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--percent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+== wide--contain--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--contain--percent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
+
+== wide--cover--nonpercent-width-nonpercent-height.html ref-wide-lime768x256.html
+== wide--cover--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--nonpercent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--nonpercent-width-omitted-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--nonpercent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--nonpercent-width-percent-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--omitted-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--omitted-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--omitted-width-omitted-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--omitted-width-percent-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--percent-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--percent-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--percent-width-omitted-height-viewbox.html ref-wide-lime768x256.html
+== wide--cover--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
+== wide--cover--percent-width-percent-height-viewbox.html ref-wide-lime768x256.html
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--32px-auto--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 32px auto; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 32px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-32px--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 32px; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--contain--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: contain; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height--crisp.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  image-rendering: -moz-crisp-edges;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  image-rendering: -moz-crisp-edges;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  /* XXX image-rendering: -moz-crisp-edges; */
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  /* XXX image-rendering: -moz-crisp-edges; */
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--cover--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 256px; height: 768px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/template.html b/layout/reftests/backgrounds/vector/template.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/template.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>TALLWIDE background-size: SIZE; for VIMAGE</title>
+  <style type="text/css">
+div
+{
+  ORIENTATION;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(VIMAGE);
+  background-repeat: no-repeat;
+  background-size: SIZE;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--12px-auto--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 12px auto; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-32px--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 32px; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 32px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--contain--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: contain; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--cover--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: cover; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 768px; height: 256px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/style/nsStyleStruct.h b/layout/style/nsStyleStruct.h
--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -398,9 +398,28 @@ struct nsStyleBackground {
         { return mLength == aOther.mLength && mPercent == aOther.mPercent; }
       bool operator!=(const Dimension& aOther) const
         { return !(*this == aOther); }
+
+      nscoord ResolveLengthPercentage(nscoord aAvailable) const {
+        double d = double(mPercent) * double(aAvailable) + double(mLength);
+        if (d < 0.0)
+          return 0;
+        return NSToCoordRoundWithClamp(float(d));
+      }
     };
     Dimension mWidth, mHeight;
 
+    nscoord ResolveWidthLengthPercentage(const nsSize& aBgPositioningArea) const {
+      NS_ABORT_IF_FALSE(mWidthType == eLengthPercentage,
+                        "resolving non-length/percent dimension!");
+      return mWidth.ResolveLengthPercentage(aBgPositioningArea.width);
+    }
+
+    nscoord ResolveHeightLengthPercentage(const nsSize& aBgPositioningArea) const {
+      NS_ABORT_IF_FALSE(mHeightType == eLengthPercentage,
+                        "resolving non-length/percent dimension!");
+      return mHeight.ResolveLengthPercentage(aBgPositioningArea.height);
+    }
+
     // Except for eLengthPercentage, Dimension types which might change
     // how a layer is painted when the corresponding frame's dimensions
     // change *must* precede all dimension types which are agnostic to