diff --git a/layout/base/nsCSSRendering.cpp b/layout/base/nsCSSRendering.cpp
--- a/layout/base/nsCSSRendering.cpp
+++ b/layout/base/nsCSSRendering.cpp
@@ -105,32 +105,51 @@ public:
   ~ImageRenderer();
   /**
    * Populates member variables to get ready for rendering.
    * @return PR_TRUE iff the image is ready, and there is at least a pixel to
    * draw.
    */
   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
    */
   void Draw(nsPresContext*       aPresContext,
             nsIRenderingContext& aRenderingContext,
             const nsRect&        aDest,
             const nsRect&        aFill,
             const nsPoint&       aAnchor,
             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;
   nsCOMPtr<imgIContainer>   mImageContainer;
   nsRefPtr<nsStyleGradient> mGradientData;
 #ifdef MOZ_SVG
   nsIFrame*                 mPaintServerFrame;
   nsLayoutUtils::SurfaceFromElementResult mImageElementSurface;
@@ -2356,37 +2375,16 @@ nsCSSRendering::PaintBackgroundWithSC(ns
                                     state.mDestArea, state.mFillArea,
                                     state.mAnchor + aBorderArea.TopLeft(), dirtyRect);
         }
       }
     }
   }
 }
 
-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 BackgroundLayerState
 PrepareBackgroundLayer(nsPresContext* aPresContext,
                        nsIFrame* aForFrame,
                        PRUint32 aFlags,
                        const nsRect& aBorderArea,
                        const nsRect& aBGClipRect,
                        const nsStyleBackground& aBackground,
                        const nsStyleBackground::Layer& aLayer)
@@ -2558,62 +2556,22 @@ PrepareBackgroundLayer(nsPresContext* aP
       // without affecting output since drawing is always clipped to the viewport
       // when we draw to the screen. (But it's not a pure optimization since it
       // can affect the values of pixels at the edge of the viewport ---
       // whether they're sampled from a putative "next tile" or not.)
       bgClipRect.IntersectRect(bgClipRect, bgPositioningArea + aBorderArea.TopLeft());
     }
   }
 
-  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.
   ComputeBackgroundAnchorPoint(aLayer, bgPositioningArea.Size(), imageSize,
                                &imageTopLeft, &state.mAnchor);
   imageTopLeft += bgPositioningArea.TopLeft();
   state.mAnchor += bgPositioningArea.TopLeft();
 
@@ -3779,49 +3737,86 @@ ImageRenderer::PrepareImage()
     case eStyleImageType_Null:
     default:
       break;
   }
 
   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");
 
   switch (mType) {
     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.
           PRInt32 appUnitsPerDevPixel =
             mForFrame->PresContext()->AppUnitsPerDevPixel();
           nsRect rect =
             nsSVGIntegrationUtils::GetNonSVGUserSpace(mPaintServerFrame);
           nsRect size = rect - rect.TopLeft();
@@ -3829,26 +3824,259 @@ ImageRenderer::ComputeSize(const nsSize&
           mSize = rounded.ToAppUnits(appUnitsPerDevPixel).Size();
         }
       } else {
         NS_ASSERTION(mImageElementSurface.mSurface, "Surface should be ready.");
         gfxIntSize size = mImageElementSurface.mSize;
         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) {
+        // Handle the cases with no ratio.  The missing dimension is determined
+        // by the background positioning area (max-containing or min-covering).
+        if (haveWidth) {
+          size.width = fitType == CONTAIN
+                     ? NS_MIN(size.width, aBgPositioningArea.width)
+                     : NS_MAX(size.width, aBgPositioningArea.width);
+          size.height = aBgPositioningArea.height;
+        } else {
+          size.width = aBgPositioningArea.width;
+          size.height = fitType == CONTAIN
+                      ? NS_MIN(size.height, aBgPositioningArea.height)
+                      : NS_MAX(size.height, aBgPositioningArea.height);
+        }
+        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
 ImageRenderer::Draw(nsPresContext*       aPresContext,
                          nsIRenderingContext& aRenderingContext,
                          const nsRect&        aDest,
                          const nsRect&        aFill,
                          const nsPoint&       aAnchor,
@@ -3867,17 +4095,19 @@ ImageRenderer::Draw(nsPresContext*      
     nsLayoutUtils::GetGraphicsFilterForFrame(mForFrame);
 
   switch (mType) {
     case eStyleImageType_Image:
     {
       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;
     }
     case eStyleImageType_Gradient:
       nsCSSRendering::PaintGradient(aPresContext, aRenderingContext,
           mGradientData, aDirty, aDest, aFill);
       break;
diff --git a/layout/base/nsLayoutUtils.cpp b/layout/base/nsLayoutUtils.cpp
--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -3219,71 +3219,72 @@ nsLayoutUtils::DrawSingleImage(nsIRender
   fill.IntersectRect(aDest, dest);
   return DrawImageInternal(aRenderingContext, aImage, aGraphicsFilter, dest, fill,
                            fill.TopLeft(), aDirty, imageSize, aImageFlags);
 }
 
 /* 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");
 
   nsIFrame* rootFrame = aImage->GetRootLayoutFrame();
   NS_ASSERTION(rootFrame,
                "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(nsIRenderingContext* 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(nsIRenderingContext* aRenderingContext,
                          imgIContainer*       aImage,
                          GraphicsFilter       aGraphicsFilter,
                          const nsRect&        aDest,
                          const nsRect&        aFill,
                          const nsPoint&       aAnchor,
                          const nsRect&        aDirty,
                          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);
   }
   if (!gotHeight) {
     imageSize.height = nsPresContext::AppUnitsToIntCSSPixels(aFill.height);
   }
 
   return DrawImageInternal(aRenderingContext, aImage, aGraphicsFilter,
diff --git a/layout/base/nsLayoutUtils.h b/layout/base/nsLayoutUtils.h
--- a/layout/base/nsLayoutUtils.h
+++ b/layout/base/nsLayoutUtils.h
@@ -944,16 +944,44 @@ public:
    */
   static GraphicsFilter GetGraphicsFilterForFrame(nsIFrame* aFrame);
 
   /* N.B. The only difference between variants of the Draw*Image
    * functions below is the type of the aImage argument.
    */
 
   /**
+   * 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(nsIRenderingContext* 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
    *                            appropriate scale and transform for drawing in
    *                            app units.
    *   @param aImage            The image.
    *   @param aDest             Where one copy of the image should mapped to.
    *   @param aFill             The area to be filled with copies of the
@@ -1047,28 +1075,30 @@ public:
                                   const nsRect&        aDirty,
                                   PRUint32             aImageFlags,
                                   const nsRect*        aSourceArea = nsnull);
 
   /**
    * 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
    * dimension.
    *
    * NOTE: This method is similar to ComputeSizeWithIntrinsicDimensions.  The
    * difference is that this one is simpler and is suited to places where we
    * have less information about the frame tree.
    */
   static void ComputeSizeForDrawing(imgIContainer* aImage,
                                     nsIntSize&     aImageSize,
+                                    nsSize&        aIntrinsicRatio,
                                     PRBool&        aGotWidth,
                                     PRBool&        aGotHeight);
 
   /**
    * Given a source area of an image (in appunits) and a destination area
    * that we want to map that source area too, computes the area that
    * would be covered by the whole image. This is useful for passing to
    * the aDest parameter of DrawImage, when we want to draw a subimage
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-vector-image-with-dimensions-ref.html
rename from layout/reftests/backgrounds/background-size-no-intrinsic-width-image-ref.html
rename to layout/reftests/backgrounds/background-size-vector-image-with-dimensions-ref.html
diff --git a/layout/reftests/backgrounds/background-size-no-intrinsic-width-image.html b/layout/reftests/backgrounds/background-size-vector-image-with-dimensions.html
rename from layout/reftests/backgrounds/background-size-no-intrinsic-width-image.html
rename to layout/reftests/backgrounds/background-size-vector-image-with-dimensions.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,8 +1,10 @@
+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
 == layers-layer-count-cascade-2.xhtml layers-layer-count-2-ref.xhtml
 == layers-layer-count-inheritance-2.xhtml layers-layer-count-2-ref.xhtml
 == viewport-translucent-color-1.html viewport-translucent-color-ref.html
 == viewport-translucent-color-2.html viewport-translucent-color-ref.html
 == viewport-translucent-color-3.html viewport-translucent-color-ref.html
@@ -94,15 +96,8 @@
 == background-size-monster-rem.html background-size-monster-ref.html
 
 # There seems to be a pixel-snapping problem here, where the repeated background
 # image isn't being snapped at its boundaries.  Note that the boundaries within
 # the image aren't the issue, because they're being obscured to avoid sampling
 # algorithm dependencies (at least assuming the sampling algorithm in use
 # doesn't sample too far astray from the boundaries).
 fails == 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
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,11 @@
+<!--
+     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 32"
+     preserveAspectRatio="none">
+  <title>Image with non-percent width, non-percent height, viewbox</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</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,9 @@
+<!--
+     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 width="100%" height="100%" fill="lime"/>
+</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,11 @@
+<!--
+     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 32"
+     preserveAspectRatio="none">
+  <title>Image with non-percent width, omitted height, viewbox</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</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,9 @@
+<!--
+     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 width="100%" height="100%" fill="lime"/>
+</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,11 @@
+<!--
+     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 32"
+     preserveAspectRatio="none">
+  <title>Image with non-percent width, percent height, viewbox</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</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,9 @@
+<!--
+     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 width="100%" height="100%" fill="lime"/>
+</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,11 @@
+<!--
+     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 32"
+     preserveAspectRatio="none">
+  <title>Image with omitted width, non-percent height, viewbox</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</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,9 @@
+<!--
+     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 width="100%" height="100%" fill="lime"/>
+</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,10 @@
+<!--
+     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 32"
+     preserveAspectRatio="none">
+  <title>Image with omitted width, omitted height, viewbox</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</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,8 @@
+<!--
+     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 width="100%" height="100%" fill="lime"/>
+</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,11 @@
+<!--
+     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 32"
+     preserveAspectRatio="none">
+  <title>Image with omitted width, percent height, viewbox</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</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,9 @@
+<!--
+     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 width="100%" height="100%" fill="lime"/>
+</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,11 @@
+<!--
+     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 32"
+     preserveAspectRatio="none">
+  <title>Image with percent width, non-percent height, viewbox</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</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,9 @@
+<!--
+     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 width="100%" height="100%" fill="lime"/>
+</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,11 @@
+<!--
+     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 32"
+     preserveAspectRatio="none">
+  <title>Image with percent width, omitted height, viewbox</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</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,9 @@
+<!--
+     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 width="100%" height="100%" fill="lime"/>
+</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,11 @@
+<!--
+     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 32"
+     preserveAspectRatio="none">
+  <title>Image with percent width, percent height, viewbox</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</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,9 @@
+<!--
+     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 width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-0.5x8.html b/layout/reftests/backgrounds/vector/ref-tall-0.5x8.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-0.5x8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 0.5x8 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 0.5px; height: 8px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-16x128.html b/layout/reftests/backgrounds/vector/ref-tall-16x128.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-16x128.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 16x128 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 16px; height: 128px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-16x16.html b/layout/reftests/backgrounds/vector/ref-tall-16x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-16x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 16x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 16px; height: 16px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-16x32.html b/layout/reftests/backgrounds/vector/ref-tall-16x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-16x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 16x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 16px; height: 32px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-16x64.html b/layout/reftests/backgrounds/vector/ref-tall-16x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-16x64.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 16x64 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 16px; height: 64px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-16x8.html b/layout/reftests/backgrounds/vector/ref-tall-16x8.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-16x8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 16x8 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 16px; height: 8px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-1x16.html b/layout/reftests/backgrounds/vector/ref-tall-1x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-1x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 1x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 1px; height: 16px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-2x16.html b/layout/reftests/backgrounds/vector/ref-tall-2x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-2x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 2x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 2px; height: 16px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-2x32.html b/layout/reftests/backgrounds/vector/ref-tall-2x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-2x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 2x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 2px; height: 32px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-2x8.html b/layout/reftests/backgrounds/vector/ref-tall-2x8.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-2x8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 2x8 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 2px; height: 8px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-32x128.html b/layout/reftests/backgrounds/vector/ref-tall-32x128.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-32x128.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 32x128 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#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/vector/ref-tall-32x16.html b/layout/reftests/backgrounds/vector/ref-tall-32x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-32x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 32x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 32px; height: 16px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-32x32.html b/layout/reftests/backgrounds/vector/ref-tall-32x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-32x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 32x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 32px; height: 32px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-4x16.html b/layout/reftests/backgrounds/vector/ref-tall-4x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-4x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 4x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 4px; height: 16px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-4x32.html b/layout/reftests/backgrounds/vector/ref-tall-4x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-4x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 4x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 4px; height: 32px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-4x64.html b/layout/reftests/backgrounds/vector/ref-tall-4x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-4x64.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 4x64 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 4px; height: 64px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-64x128.html b/layout/reftests/backgrounds/vector/ref-tall-64x128.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-64x128.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 64x128 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 64px; height: 128px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-64x16.html b/layout/reftests/backgrounds/vector/ref-tall-64x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-64x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 64x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 64px; height: 16px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-64x32.html b/layout/reftests/backgrounds/vector/ref-tall-64x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-64x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 64x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#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/vector/ref-tall-64x64.html b/layout/reftests/backgrounds/vector/ref-tall-64x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-64x64.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 64x64 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 64px; height: 64px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-64x8.html b/layout/reftests/backgrounds/vector/ref-tall-64x8.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-64x8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 64x8 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 64px; height: 8px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-8x128.html b/layout/reftests/backgrounds/vector/ref-tall-8x128.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-8x128.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 8x128 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 128px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-8x16.html b/layout/reftests/backgrounds/vector/ref-tall-8x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-8x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 8x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 16px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-8x32.html b/layout/reftests/backgrounds/vector/ref-tall-8x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-8x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 8x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 32px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-8x64.html b/layout/reftests/backgrounds/vector/ref-tall-8x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-8x64.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 8x64 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 64px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/ref-tall-8x8.html b/layout/reftests/backgrounds/vector/ref-tall-8x8.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-tall-8x8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Tall 8x8 reference</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 8px;
+  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-0.5x8.html b/layout/reftests/backgrounds/vector/ref-wide-0.5x8.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-0.5x8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 0.5x8 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 0.5px; height: 8px;
+  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-128x16.html b/layout/reftests/backgrounds/vector/ref-wide-128x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-128x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 128x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 128px; height: 16px;
+  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-128x32.html b/layout/reftests/backgrounds/vector/ref-wide-128x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-128x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 128x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 128px; height: 32px;
+  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-128x64.html b/layout/reftests/backgrounds/vector/ref-wide-128x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-128x64.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 128x64 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 128px; height: 64px;
+  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-128x8.html b/layout/reftests/backgrounds/vector/ref-wide-128x8.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-128x8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 128x8 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 128px; height: 8px;
+  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-16x16.html b/layout/reftests/backgrounds/vector/ref-wide-16x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-16x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 16x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 16px; height: 16px;
+  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-16x32.html b/layout/reftests/backgrounds/vector/ref-wide-16x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-16x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 16x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 16px; height: 32px;
+  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-16x64.html b/layout/reftests/backgrounds/vector/ref-wide-16x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-16x64.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 16x64 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 16px; height: 64px;
+  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-1x16.html b/layout/reftests/backgrounds/vector/ref-wide-1x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-1x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 64x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 1px; height: 16px;
+  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-2x16.html b/layout/reftests/backgrounds/vector/ref-wide-2x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-2x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 2x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 2px; height: 16px;
+  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-2x32.html b/layout/reftests/backgrounds/vector/ref-wide-2x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-2x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 2x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 2px; height: 32px;
+  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-2x8.html b/layout/reftests/backgrounds/vector/ref-wide-2x8.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-2x8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 2x8 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 2px; height: 8px;
+  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-32x32.html b/layout/reftests/backgrounds/vector/ref-wide-32x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-32x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 32x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 32px; height: 32px;
+  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-32x64.html b/layout/reftests/backgrounds/vector/ref-wide-32x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-32x64.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 32x64 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 32px; height: 64px;
+  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-32x8.html b/layout/reftests/backgrounds/vector/ref-wide-32x8.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-32x8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 32x8 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 32px; height: 8px;
+  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-4x16.html b/layout/reftests/backgrounds/vector/ref-wide-4x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-4x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 4x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 4px; height: 16px;
+  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-4x32.html b/layout/reftests/backgrounds/vector/ref-wide-4x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-4x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 4x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 4px; height: 32px;
+  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-4x64.html b/layout/reftests/backgrounds/vector/ref-wide-4x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-4x64.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 4x64 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 4px; height: 64px;
+  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-64x16.html b/layout/reftests/backgrounds/vector/ref-wide-64x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-64x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 64x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 64px; height: 16px;
+  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-64x32.html b/layout/reftests/backgrounds/vector/ref-wide-64x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-64x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 64x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#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/vector/ref-wide-64x64.html b/layout/reftests/backgrounds/vector/ref-wide-64x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-64x64.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 64x64 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 64px; height: 64px;
+  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-8x16.html b/layout/reftests/backgrounds/vector/ref-wide-8x16.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-8x16.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 8x16 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 16px;
+  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-8x32.html b/layout/reftests/backgrounds/vector/ref-wide-8x32.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-8x32.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 8x32 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 32px;
+  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-8x64.html b/layout/reftests/backgrounds/vector/ref-wide-8x64.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-8x64.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 8x64 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 64px;
+  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-8x8.html b/layout/reftests/backgrounds/vector/ref-wide-8x8.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/ref-wide-8x8.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wide 8x8 reference</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  width: 8px; height: 8px;
+  background-color: lime;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></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,207 @@
+##########################################################################
+# HIDEOUS COMMAND ORIGINALLY USED TO GENERATE THESE FILES, FOR REFERENCE #
+##########################################################################
+#
+# for ORIENTATION in tall wide; do for SIZE in 16px-auto auto-16px 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: 64px; height: 128px'; else echo 'width: 128px; height: 64px'; fi)/g" > $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html; echo "== $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//')-ref.html" >> reftest.list; done; done; done
+#
+##########################################################################
+
+
+== tall--16px-auto--nonpercent-width-nonpercent-height.html ref-tall-16x64.html
+== tall--16px-auto--nonpercent-width-nonpercent-height-viewbox.html ref-tall-16x64.html
+== tall--16px-auto--nonpercent-width-omitted-height.html ref-tall-16x128.html
+== tall--16px-auto--nonpercent-width-omitted-height-viewbox.html ref-tall-16x128.html
+== tall--16px-auto--nonpercent-width-percent-height.html ref-tall-16x64.html
+== tall--16px-auto--nonpercent-width-percent-height-viewbox.html ref-tall-16x64.html
+== tall--16px-auto--omitted-width-nonpercent-height.html ref-tall-16x32.html
+== tall--16px-auto--omitted-width-nonpercent-height-viewbox.html ref-tall-16x128.html
+== tall--16px-auto--omitted-width-omitted-height.html ref-tall-16x128.html
+== tall--16px-auto--omitted-width-omitted-height-viewbox.html ref-tall-16x128.html
+== tall--16px-auto--omitted-width-percent-height.html ref-tall-16x64.html
+== tall--16px-auto--omitted-width-percent-height-viewbox.html ref-tall-16x64.html
+== tall--16px-auto--percent-width-nonpercent-height.html ref-tall-8x32.html
+== tall--16px-auto--percent-width-nonpercent-height-viewbox.html ref-tall-8x128.html
+== tall--16px-auto--percent-width-omitted-height.html ref-tall-8x128.html
+== tall--16px-auto--percent-width-omitted-height-viewbox.html ref-tall-8x128.html
+== tall--16px-auto--percent-width-percent-height.html ref-tall-4x64.html
+== tall--16px-auto--percent-width-percent-height-viewbox.html ref-tall-4x64.html
+
+
+== tall--auto-16px--nonpercent-width-nonpercent-height.html ref-tall-4x16.html
+== tall--auto-16px--nonpercent-width-nonpercent-height-viewbox.html ref-tall-4x16.html
+== tall--auto-16px--nonpercent-width-omitted-height.html ref-tall-8x16.html
+== tall--auto-16px--nonpercent-width-omitted-height-viewbox.html ref-tall-2x16.html
+== tall--auto-16px--nonpercent-width-percent-height.html ref-tall-8x8.html
+== tall--auto-16px--nonpercent-width-percent-height-viewbox.html ref-tall-2x8.html
+== tall--auto-16px--omitted-width-nonpercent-height.html ref-tall-64x16.html
+== tall--auto-16px--omitted-width-nonpercent-height-viewbox.html ref-tall-2x16.html
+== tall--auto-16px--omitted-width-omitted-height.html ref-tall-64x16.html
+== tall--auto-16px--omitted-width-omitted-height-viewbox.html ref-tall-2x16.html
+== tall--auto-16px--omitted-width-percent-height.html ref-tall-64x8.html
+== tall--auto-16px--omitted-width-percent-height-viewbox.html ref-tall-2x8.html
+== tall--auto-16px--percent-width-nonpercent-height.html ref-tall-32x16.html
+== tall--auto-16px--percent-width-nonpercent-height-viewbox.html ref-tall-1x16.html
+== tall--auto-16px--percent-width-omitted-height.html ref-tall-32x16.html
+== tall--auto-16px--percent-width-omitted-height-viewbox.html ref-tall-1x16.html
+== tall--auto-16px--percent-width-percent-height.html ref-tall-16x8.html
+== tall--auto-16px--percent-width-percent-height-viewbox.html ref-tall-0.5x8.html
+
+
+== tall--auto--nonpercent-width-nonpercent-height.html ref-tall-8x32.html
+== tall--auto--nonpercent-width-nonpercent-height-viewbox.html ref-tall-8x32.html
+== tall--auto--nonpercent-width-omitted-height.html ref-tall-8x128.html
+== tall--auto--nonpercent-width-omitted-height-viewbox.html ref-tall-8x64.html
+== tall--auto--nonpercent-width-percent-height.html ref-tall-8x64.html
+== tall--auto--nonpercent-width-percent-height-viewbox.html ref-tall-8x32.html
+== tall--auto--omitted-width-nonpercent-height.html ref-tall-64x32.html
+== tall--auto--omitted-width-nonpercent-height-viewbox.html ref-tall-4x32.html
+== tall--auto--omitted-width-omitted-height.html ref-tall-64x128.html
+== tall--auto--omitted-width-omitted-height-viewbox.html ref-tall-16x128.html
+== tall--auto--omitted-width-percent-height.html ref-tall-64x64.html
+== tall--auto--omitted-width-percent-height-viewbox.html ref-tall-16x64.html
+== tall--auto--percent-width-nonpercent-height.html ref-tall-32x32.html
+== tall--auto--percent-width-nonpercent-height-viewbox.html ref-tall-2x32.html
+== tall--auto--percent-width-omitted-height.html ref-tall-32x128.html
+== tall--auto--percent-width-omitted-height-viewbox.html ref-tall-8x128.html
+== tall--auto--percent-width-percent-height.html ref-tall-16x64.html
+== tall--auto--percent-width-percent-height-viewbox.html ref-tall-4x64.html
+
+
+== tall--contain--nonpercent-width-nonpercent-height.html ref-tall-32x128.html
+== tall--contain--nonpercent-width-nonpercent-height-viewbox.html ref-tall-32x128.html
+== tall--contain--nonpercent-width-omitted-height.html ref-tall-8x128.html
+== tall--contain--nonpercent-width-omitted-height-viewbox.html ref-tall-16x128.html
+== tall--contain--nonpercent-width-percent-height.html ref-tall-8x64.html
+== tall--contain--nonpercent-width-percent-height-viewbox.html ref-tall-16x64.html
+== tall--contain--omitted-width-nonpercent-height.html ref-tall-64x32.html
+== tall--contain--omitted-width-nonpercent-height-viewbox.html ref-tall-16x128.html
+== tall--contain--omitted-width-omitted-height.html ref-tall-64x128.html
+== tall--contain--omitted-width-omitted-height-viewbox.html ref-tall-16x128.html
+== tall--contain--omitted-width-percent-height.html ref-tall-64x64.html
+== tall--contain--omitted-width-percent-height-viewbox.html ref-tall-16x64.html
+== tall--contain--percent-width-nonpercent-height.html ref-tall-32x32.html
+== tall--contain--percent-width-nonpercent-height-viewbox.html ref-tall-8x128.html
+== tall--contain--percent-width-omitted-height.html ref-tall-32x128.html
+== tall--contain--percent-width-omitted-height-viewbox.html ref-tall-8x128.html
+== tall--contain--percent-width-percent-height.html ref-tall-16x64.html
+== tall--contain--percent-width-percent-height-viewbox.html ref-tall-4x64.html
+
+
+== tall--cover--nonpercent-width-nonpercent-height.html ref-tall-64x128.html
+== tall--cover--nonpercent-width-nonpercent-height-viewbox.html ref-tall-64x128.html
+== tall--cover--nonpercent-width-omitted-height.html ref-tall-64x128.html
+== tall--cover--nonpercent-width-omitted-height-viewbox.html ref-tall-64x128.html
+== tall--cover--nonpercent-width-percent-height.html ref-tall-64x64.html
+== tall--cover--nonpercent-width-percent-height-viewbox.html ref-tall-64x128.html
+== tall--cover--omitted-width-nonpercent-height.html ref-tall-64x128.html
+== tall--cover--omitted-width-nonpercent-height-viewbox.html ref-tall-64x128.html
+== tall--cover--omitted-width-omitted-height.html ref-tall-64x128.html
+== tall--cover--omitted-width-omitted-height-viewbox.html ref-tall-64x128.html
+== tall--cover--omitted-width-percent-height.html ref-tall-64x64.html
+== tall--cover--omitted-width-percent-height-viewbox.html ref-tall-64x128.html
+== tall--cover--percent-width-nonpercent-height.html ref-tall-32x128.html
+== tall--cover--percent-width-nonpercent-height-viewbox.html ref-tall-32x128.html
+== tall--cover--percent-width-omitted-height.html ref-tall-32x128.html
+== tall--cover--percent-width-omitted-height-viewbox.html ref-tall-32x128.html
+== tall--cover--percent-width-percent-height.html ref-tall-16x64.html
+== tall--cover--percent-width-percent-height-viewbox.html ref-tall-16x128.html
+
+
+== wide--16px-auto--nonpercent-width-nonpercent-height.html ref-wide-16x64.html
+== wide--16px-auto--nonpercent-width-nonpercent-height-viewbox.html ref-wide-16x64.html
+== wide--16px-auto--nonpercent-width-omitted-height.html ref-wide-16x64.html
+== wide--16px-auto--nonpercent-width-omitted-height-viewbox.html ref-wide-16x64.html
+== wide--16px-auto--nonpercent-width-percent-height.html ref-wide-16x32.html
+== wide--16px-auto--nonpercent-width-percent-height-viewbox.html ref-wide-16x64.html
+== wide--16px-auto--omitted-width-nonpercent-height.html ref-wide-16x32.html
+== wide--16px-auto--omitted-width-nonpercent-height-viewbox.html ref-wide-16x64.html
+== wide--16px-auto--omitted-width-omitted-height.html ref-wide-16x64.html
+== wide--16px-auto--omitted-width-omitted-height-viewbox.html ref-wide-16x64.html
+== wide--16px-auto--omitted-width-percent-height.html ref-wide-16x32.html
+== wide--16px-auto--omitted-width-percent-height-viewbox.html ref-wide-16x64.html
+== wide--16px-auto--percent-width-nonpercent-height.html ref-wide-8x32.html
+== wide--16px-auto--percent-width-nonpercent-height-viewbox.html ref-wide-8x64.html
+== wide--16px-auto--percent-width-omitted-height.html ref-wide-8x64.html
+== wide--16px-auto--percent-width-omitted-height-viewbox.html ref-wide-8x64.html
+== wide--16px-auto--percent-width-percent-height.html ref-wide-4x32.html
+== wide--16px-auto--percent-width-percent-height-viewbox.html ref-wide-4x64.html
+
+
+== wide--auto-16px--nonpercent-width-nonpercent-height.html ref-wide-4x16.html
+== wide--auto-16px--nonpercent-width-nonpercent-height-viewbox.html ref-wide-4x16.html
+== wide--auto-16px--nonpercent-width-omitted-height.html ref-wide-8x16.html
+== wide--auto-16px--nonpercent-width-omitted-height-viewbox.html ref-wide-2x16.html
+== wide--auto-16px--nonpercent-width-percent-height.html ref-wide-8x8.html
+== wide--auto-16px--nonpercent-width-percent-height-viewbox.html ref-wide-2x8.html
+== wide--auto-16px--omitted-width-nonpercent-height.html ref-wide-128x16.html
+== wide--auto-16px--omitted-width-nonpercent-height-viewbox.html ref-wide-2x16.html
+== wide--auto-16px--omitted-width-omitted-height.html ref-wide-128x16.html
+== wide--auto-16px--omitted-width-omitted-height-viewbox.html ref-wide-2x16.html
+== wide--auto-16px--omitted-width-percent-height.html ref-wide-128x8.html
+== wide--auto-16px--omitted-width-percent-height-viewbox.html ref-wide-2x8.html
+== wide--auto-16px--percent-width-nonpercent-height.html ref-wide-64x16.html
+== wide--auto-16px--percent-width-nonpercent-height-viewbox.html ref-wide-1x16.html
+== wide--auto-16px--percent-width-omitted-height.html ref-wide-64x16.html
+== wide--auto-16px--percent-width-omitted-height-viewbox.html ref-wide-1x16.html
+== wide--auto-16px--percent-width-percent-height.html ref-wide-32x8.html
+== wide--auto-16px--percent-width-percent-height-viewbox.html ref-wide-0.5x8.html
+
+
+== wide--auto--nonpercent-width-nonpercent-height.html ref-wide-8x32.html
+== wide--auto--nonpercent-width-nonpercent-height-viewbox.html ref-wide-8x32.html
+== wide--auto--nonpercent-width-omitted-height.html ref-wide-8x64.html
+== wide--auto--nonpercent-width-omitted-height-viewbox.html ref-wide-8x64.html
+== wide--auto--nonpercent-width-percent-height.html ref-wide-8x32.html
+== wide--auto--nonpercent-width-percent-height-viewbox.html ref-wide-8x32.html
+== wide--auto--omitted-width-nonpercent-height.html ref-wide-128x32.html
+== wide--auto--omitted-width-nonpercent-height-viewbox.html ref-wide-4x32.html
+== wide--auto--omitted-width-omitted-height.html ref-wide-128x64.html
+== wide--auto--omitted-width-omitted-height-viewbox.html ref-wide-8x64.html
+== wide--auto--omitted-width-percent-height.html ref-wide-128x32.html
+== wide--auto--omitted-width-percent-height-viewbox.html ref-wide-8x32.html
+== wide--auto--percent-width-nonpercent-height.html ref-wide-64x32.html
+== wide--auto--percent-width-nonpercent-height-viewbox.html ref-wide-2x32.html
+== wide--auto--percent-width-omitted-height.html ref-wide-64x64.html
+== wide--auto--percent-width-omitted-height-viewbox.html ref-wide-4x64.html
+== wide--auto--percent-width-percent-height.html ref-wide-32x32.html
+== wide--auto--percent-width-percent-height-viewbox.html ref-wide-2x32.html
+
+
+== wide--contain--nonpercent-width-nonpercent-height.html ref-wide-16x64.html
+== wide--contain--nonpercent-width-nonpercent-height-viewbox.html ref-wide-16x64.html
+== wide--contain--nonpercent-width-omitted-height.html ref-wide-8x64.html
+== wide--contain--nonpercent-width-omitted-height-viewbox.html ref-wide-8x64.html
+== wide--contain--nonpercent-width-percent-height.html ref-wide-8x32.html
+== wide--contain--nonpercent-width-percent-height-viewbox.html ref-wide-8x32.html
+== wide--contain--omitted-width-nonpercent-height.html ref-wide-128x32.html
+== wide--contain--omitted-width-nonpercent-height-viewbox.html ref-wide-8x64.html
+== wide--contain--omitted-width-omitted-height.html ref-wide-128x64.html
+== wide--contain--omitted-width-omitted-height-viewbox.html ref-wide-8x64.html
+== wide--contain--omitted-width-percent-height.html ref-wide-128x32.html
+== wide--contain--omitted-width-percent-height-viewbox.html ref-wide-8x32.html
+== wide--contain--percent-width-nonpercent-height.html ref-wide-64x32.html
+== wide--contain--percent-width-nonpercent-height-viewbox.html ref-wide-4x64.html
+== wide--contain--percent-width-omitted-height.html ref-wide-64x64.html
+== wide--contain--percent-width-omitted-height-viewbox.html ref-wide-4x64.html
+== wide--contain--percent-width-percent-height.html ref-wide-32x32.html
+== wide--contain--percent-width-percent-height-viewbox.html ref-wide-2x32.html
+
+
+== wide--cover--nonpercent-width-nonpercent-height.html ref-wide-128x64.html
+== wide--cover--nonpercent-width-nonpercent-height-viewbox.html ref-wide-128x64.html
+== wide--cover--nonpercent-width-omitted-height.html ref-wide-128x64.html
+== wide--cover--nonpercent-width-omitted-height-viewbox.html ref-wide-128x64.html
+== wide--cover--nonpercent-width-percent-height.html ref-wide-128x32.html
+== wide--cover--nonpercent-width-percent-height-viewbox.html ref-wide-128x64.html
+== wide--cover--omitted-width-nonpercent-height.html ref-wide-128x64.html
+== wide--cover--omitted-width-nonpercent-height-viewbox.html ref-wide-128x64.html
+== wide--cover--omitted-width-omitted-height.html ref-wide-128x64.html
+== wide--cover--omitted-width-omitted-height-viewbox.html ref-wide-128x64.html
+== wide--cover--omitted-width-percent-height.html ref-wide-128x32.html
+== wide--cover--omitted-width-percent-height-viewbox.html ref-wide-128x64.html
+== wide--cover--percent-width-nonpercent-height.html ref-wide-64x64.html
+== wide--cover--percent-width-nonpercent-height-viewbox.html ref-wide-128x64.html
+== wide--cover--percent-width-omitted-height.html ref-wide-64x64.html
+== wide--cover--percent-width-omitted-height-viewbox.html ref-wide-128x64.html
+== wide--cover--percent-width-percent-height.html ref-wide-32x32.html
+== wide--cover--percent-width-percent-height-viewbox.html ref-wide-128x64.html
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--16px-auto--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: 16px auto; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px 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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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-16px--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/tall--auto-16px--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: auto 16px; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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-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,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#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/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,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>tall background-size: cover; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 64px; height: 128px;
+}
+#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/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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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: 64px; height: 128px;
+}
+#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--16px-auto--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: 16px auto;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--16px-auto--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: 16px auto; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: 16px 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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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-16px--nonpercent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for nonpercent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for nonpercent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for nonpercent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for nonpercent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for nonpercent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--nonpercent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for nonpercent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(nonpercent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for omitted-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for omitted-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for omitted-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for omitted-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for omitted-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--omitted-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for omitted-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(omitted-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-nonpercent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-nonpercent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-nonpercent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for percent-width-nonpercent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-nonpercent-height.html b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-nonpercent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-nonpercent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for percent-width-nonpercent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-nonpercent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-omitted-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-omitted-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-omitted-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for percent-width-omitted-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-omitted-height.html b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-omitted-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-omitted-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for percent-width-omitted-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-omitted-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-percent-height-viewbox.html b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-percent-height-viewbox.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-percent-height-viewbox.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for percent-width-percent-height-viewbox.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height-viewbox.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-percent-height.html b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-percent-height.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/backgrounds/vector/wide--auto-16px--percent-width-percent-height.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>wide background-size: auto 16px; for percent-width-percent-height.svg</title>
+  <style type="text/css">
+div
+{
+  width: 128px; height: 64px;
+}
+#outer
+{
+  border: 1px solid black;
+}
+#inner
+{
+  background-image: url(percent-width-percent-height.svg);
+  background-repeat: no-repeat;
+  background-size: auto 16px;
+}
+  </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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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: 128px; height: 64px;
+}
+#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
@@ -393,19 +393,38 @@ struct nsStyleBackground {
       // and percent (thanks to calc(), which can combine them).
       nscoord mLength;
       float   mPercent;
 
       bool operator==(const Dimension& aOther) const
         { 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
     // frame size; see DependsOnFrameSize below.
     enum DimensionType {
       // If one of mWidth and mHeight is eContain or eCover, then both are.
       // Also, these two values must equal the corresponding values in
       // kBackgroundSizeKTable.