Add m-esr52 at 52.6.0

122 files changed, 7021 insertions, 0 deletions

diff --git a/layout/reftests/xul/accesskey-ref.xul b/layout/reftests/xul/accesskey-ref.xul
new file mode 100644
index 000000000..b3745ee1e
--- /dev/null
+++ b/layout/reftests/xul/accesskey-ref.xul
@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="data:text/css,u { display: inline; text-decoration: underline; }" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<hbox align="start">
+  <label control="b1"><u>L</u>abel1</label><textbox id="b1" size="2"/>
+  <label control="b2">Labe<u>l</u>2</label><textbox id="b2" size="2"/>
+  <label control="b3">La<u>b</u>el3</label><textbox id="b3" size="2"/>
+  <label control="b4">Label4 (<u>X</u>)</label><textbox id="b4" size="2"/>
+  <label control="b5" maxwidth="50">Quite a <u>l</u>ong label. Hopefully it will wrap</label><textbox id="b5" label="Button5" size="2"/>
+</hbox>
+
+<hbox id="d" align="start">
+  <label control="d1"><u>L</u>abel1</label><textbox id="d1" size="2"/>
+  <label control="d2">Labe<u>l</u>2</label><textbox id="d2" size="2"/>
+  <label control="d3">La<u>b</u>el3</label><textbox id="d3" size="2"/>
+  <label control="d4">Label4 (<u>X</u>)</label><textbox id="d4" size="2"/>
+  <label control="d5" maxwidth="50">Quite a <u>l</u>ong label. Hopefully it will wrap</label><textbox id="d5" size="2"/>
+</hbox>
+
+</window>
diff --git a/layout/reftests/xul/accesskey.xul b/layout/reftests/xul/accesskey.xul
new file mode 100644
index 000000000..88db0d576
--- /dev/null
+++ b/layout/reftests/xul/accesskey.xul
@@ -0,0 +1,43 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<!-- This test checks that access keys are rendered properly, both when set with the
+     accesskey attribute in the markup and updated via script later.
+  -->
+<window class="reftest-wait" onload="changeKeys()"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<script>
+<![CDATA[
+
+var keys = ['L', 'l', 'b', 'x', 'l'];
+
+function changeKeys()
+{
+  var box = document.getElementById('d');
+  for (var b = 0; b < 5; b++)
+    box.childNodes[b * 2].accessKey = keys[b];
+
+  document.documentElement.className='';
+}
+
+]]>
+</script>
+
+<hbox align="start">
+  <label control="b1">Label1</label><textbox id="b1" accesskey="L" size="2"/>
+  <label control="b2">Label2</label><textbox id="b2" accesskey="l" size="2"/>
+  <label control="b3">Label3</label><textbox id="b3" accesskey="b" size="2"/>
+  <label control="b4">Label4</label><textbox id="b4" accesskey="x" size="2"/>
+  <label control="b5" maxwidth="50">Quite a long label. Hopefully it will wrap</label><textbox id="b5" accesskey="l" size="2"/>
+</hbox>
+
+<hbox id="d" align="start">
+  <label control="d1">Label1</label><textbox id="d1" accesskey="z" size="2"/>
+  <label control="d2">Label2</label><textbox id="d2" size="2"/>
+  <label control="d3">Label3</label><textbox id="d3" accesskey="t" size="2"/>
+  <label control="d4">Label4</label><textbox id="d4" accesskey="b" size="2"/>
+  <label control="d5" maxwidth="50">Quite a long label. Hopefully it will wrap</label><textbox id="d5" accesskey="l" size="2"/>
+</hbox>
+
+</window>
diff --git a/layout/reftests/xul/colors-16x8-noSize.svg b/layout/reftests/xul/colors-16x8-noSize.svg
new file mode 100644
index 000000000..db715d875
--- /dev/null
+++ b/layout/reftests/xul/colors-16x8-noSize.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has an aspect-ratio (from its viewBox attribute),
+     but no intrinsic size.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 16 8">
+  <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+  <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+  <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+  <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/colors-16x8-parDefault.svg b/layout/reftests/xul/colors-16x8-parDefault.svg
new file mode 100644
index 000000000..1b0bca073
--- /dev/null
+++ b/layout/reftests/xul/colors-16x8-parDefault.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet).
+
+     If it's rendered via e.g. a square <img> element with 'object-fit: fill',
+     the SVG will receive the <img>'s full content-box to use as its viewport.
+     But, importantly, its viewBox-region should NOT be stretched/squashed to
+     fill this viewport; instead, the viewBox will scale *proportionally* until
+     it *just* fits inside the viewport (the <img>), without overflowing, and
+     it'll be centered inside the viewport in whichever dimension has extra
+     space available. (This is what "xMidYMid meet" requires.)
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="16" height="8" viewBox="0 0 16 8">
+  <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+  <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+  <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+  <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/colors-16x8.png b/layout/reftests/xul/colors-16x8.png
new file mode 100644
index 000000000..bd2384587
--- /dev/null
+++ b/layout/reftests/xul/colors-16x8.png
diff --git a/layout/reftests/xul/colors-16x8.svg b/layout/reftests/xul/colors-16x8.svg
new file mode 100644
index 000000000..08e365940
--- /dev/null
+++ b/layout/reftests/xul/colors-16x8.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file is meant to mimic colors-8x16.png as closely
+     as possible. In particular, this SVG has:
+      (1) an intrinsic size (from the 'width' & 'height' attributes)
+      (2) preserveAspectRatio="none", allowing it to stretch in the
+          same way that a raster image would.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+     width="16" height="8" viewBox="0 0 16 8">
+  <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+  <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+  <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+  <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/colors-8x16-noSize.svg b/layout/reftests/xul/colors-8x16-noSize.svg
new file mode 100644
index 000000000..e741537b9
--- /dev/null
+++ b/layout/reftests/xul/colors-8x16-noSize.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has an aspect-ratio (from its viewBox attribute),
+     but no intrinsic size.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 8 16">
+  <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+  <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+  <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+  <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/colors-8x16-parDefault.svg b/layout/reftests/xul/colors-8x16-parDefault.svg
new file mode 100644
index 000000000..ec8c59dcb
--- /dev/null
+++ b/layout/reftests/xul/colors-8x16-parDefault.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet).
+
+     If it's rendered via e.g. a square <img> element with 'object-fit: fill',
+     the SVG will receive the <img>'s full content-box to use as its viewport.
+     But, importantly, its viewBox-region should NOT be stretched/squashed to
+     fill this viewport; instead, the viewBox will scale *proportionally* until
+     it *just* fits inside the viewport (the <img>), without overflowing, and
+     it'll be centered inside the viewport in whichever dimension has extra
+     space available. (This is what "xMidYMid meet" requires.)
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="8" height="16" viewBox="0 0 8 16">
+  <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+  <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+  <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+  <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/colors-8x16.png b/layout/reftests/xul/colors-8x16.png
new file mode 100644
index 000000000..596fdb389
--- /dev/null
+++ b/layout/reftests/xul/colors-8x16.png
diff --git a/layout/reftests/xul/colors-8x16.svg b/layout/reftests/xul/colors-8x16.svg
new file mode 100644
index 000000000..c336e3af1
--- /dev/null
+++ b/layout/reftests/xul/colors-8x16.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file is meant to mimic colors-8x16.png as closely
+     as possible. In particular, this SVG has:
+      (1) an intrinsic size (from the 'width' & 'height' attributes)
+      (2) preserveAspectRatio="none", allowing it to stretch in the
+          same way that a raster image would.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+     width="8" height="16" viewBox="0 0 8 16">
+  <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+  <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+  <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+  <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/xul/generate-object-fit-xul-tests.sh b/layout/reftests/xul/generate-object-fit-xul-tests.sh
new file mode 100644
index 000000000..f524d3b2c
--- /dev/null
+++ b/layout/reftests/xul/generate-object-fit-xul-tests.sh
@@ -0,0 +1,95 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate XUL <image> reftest files, from corresponding reftest
+# files that use <img>.
+#
+# This script expects to be run from this working directory:
+#  mozilla-central/layout/reftests/w3c-css/submitted/images3
+
+XUL_REFTEST_PATH="../../../xul"
+
+imageFileArr=("colors-16x8.png"            "colors-8x16.png"
+              "colors-16x8.svg"            "colors-8x16.svg"
+              "colors-16x8-noSize.svg"     "colors-8x16-noSize.svg"
+              "colors-16x8-parDefault.svg" "colors-8x16-parDefault.svg")
+numImageFiles=${#imageFileArr[@]}
+
+# Copy image files
+for ((i = 0; i < $numImageFiles; i++)); do
+  imageFileName=${imageFileArr[$i]}
+  imageDest=$XUL_REFTEST_PATH/$imageFileName
+
+  echo "Copying $imageDest."
+  hg cp support/$imageFileName $imageDest
+done
+
+# Add comment & default-preferences line to reftest.list in dest directory:
+reftestListFileName="$XUL_REFTEST_PATH/reftest.list"
+echo "
+# Tests for XUL <image> with 'object-fit' & 'object-position':
+# These tests should be very similar to tests in our w3c-css/submitted/images3
+# reftest directory. They live here because they use XUL, and it
+# wouldn't be fair of us to make a W3C testsuite implicitly depend on XUL.
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)"\
+  >> $reftestListFileName
+
+# Loop across all object-fit tests that use <img> ("i" suffix):
+for origTestName in object-fit*i.html; do
+  newTestName=$(echo $origTestName |
+                sed "s/i.html/.xul/")
+
+  # Find the corresponding reference case:
+  referenceName=$(echo $origTestName |
+                  sed "s/i.html/-ref.html/")
+
+  # Generate reference file (dropping "support" subdir from image paths):
+  echo "Copying $referenceName to $XUL_REFTEST_PATH."
+  newReferenceFullPath=$XUL_REFTEST_PATH/$referenceName
+  hg cp $referenceName $newReferenceFullPath
+  sed -i "s,support/,," $newReferenceFullPath
+
+  # Generate testcase
+  # (converting <video poster="support/foo.png"> to <video src="foo.webm">):
+  echo "Generating $newTestName from $origTestName."
+  newTestFullPath=$XUL_REFTEST_PATH/$newTestName
+  hg cp $origTestName $newTestFullPath
+
+  # Replace doctype with XML decl:
+  sed -i "s/<!DOCTYPE html>/<?xml version=\"1.0\"?>/" $newTestFullPath
+
+  # Replace html tags with window tags:
+  sed -i "s,<html>,<window xmlns=\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\">," $newTestFullPath
+  sed -i "s,</html>,</window>," $newTestFullPath
+
+  # Delete a bunch of HTML (not XUL) / W3C-testsuite boilerplate:
+  sed -i "/head>/d" $newTestFullPath # Delete head open & close tags
+  sed -i "/body>/d" $newTestFullPath # Delete body open & close tags
+  sed -i "/<meta/d" $newTestFullPath # Delete meta charset tag
+  sed -i "/<title/d" $newTestFullPath # Delete title line
+  sed -i "/<link/d" $newTestFullPath # Delete link tags
+
+  # Add 4px to all sizes, since in XUL, sizes are for border-box
+  # instead of content-box.
+  sed -i "s/ 48px/ 52px/" $newTestFullPath
+  sed -i "s/ 32px/ 36px/" $newTestFullPath
+  sed -i "s/ 8px/ 12px/" $newTestFullPath
+
+  # Fix style open/close tags, and add 8px of padding on outer <window> to
+  # match our HTML reference case, and change style rule to target <image>:
+  sed -i "s,  <style type=\"text/css\">,\<style xmlns=\"http://www.w3.org/1999/xhtml\"><![CDATA[\n      window { padding: 8px; }," $newTestFullPath
+  sed -i "s,  </style>,]]></style>," $newTestFullPath
+  sed -i "s/img {/image {/" $newTestFullPath
+
+  sed -i "s,support/,," $newTestFullPath
+  sed -i "s,<img\(.*\)>,<image\1/>," $newTestFullPath
+  sed -i "s,  <!--,<hbox>\n    <!--," $newTestFullPath
+  sed -i "s,  <br>,</hbox>," $newTestFullPath
+
+  # Update reftest manifest:
+  echo "== $newTestName $referenceName" \
+    >> $reftestListFileName
+
+done
diff --git a/layout/reftests/xul/generate-object-position-xul-tests.sh b/layout/reftests/xul/generate-object-position-xul-tests.sh
new file mode 100644
index 000000000..b03b24579
--- /dev/null
+++ b/layout/reftests/xul/generate-object-position-xul-tests.sh
@@ -0,0 +1,68 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate XUL <image> reftest files, from corresponding reftest
+# files that use <img>.
+#
+# This script expects to be run from this working directory:
+#  mozilla-central/layout/reftests/w3c-css/submitted/images3
+# and it expects to be run *after* generate-object-fit-xul-tests.sh, since the
+# copied test files will make use of image resources which are copied by that
+# other script.
+
+XUL_REFTEST_PATH="../../../xul"
+
+reftestListFileName="$XUL_REFTEST_PATH/reftest.list"
+
+# Loop across all object-position tests that use <img> ("i" suffix):
+for origTestName in object-position-png-*i.html; do
+  newTestName=$(echo $origTestName |
+                sed "s/i.html/.xul/")
+
+  # Find the corresponding reference case:
+  referenceName=$(echo $origTestName |
+                  sed "s/i.html/-ref.html/")
+
+  # Generate reference file (dropping "support" subdir from image paths):
+  echo "Copying $referenceName to $XUL_REFTEST_PATH."
+  newReferenceFullPath=$XUL_REFTEST_PATH/$referenceName
+  hg cp $referenceName $newReferenceFullPath
+  sed -i "s,support/,," $newReferenceFullPath
+
+  # Generate testcase
+  # (converting <video poster="support/foo.png"> to <video src="foo.webm">):
+  echo "Generating $newTestName from $origTestName."
+  newTestFullPath=$XUL_REFTEST_PATH/$newTestName
+  hg cp $origTestName $newTestFullPath
+
+  # Replace doctype with XML decl:
+  sed -i "s/<!DOCTYPE html>/<?xml version=\"1.0\"?>/" $newTestFullPath
+
+  # Replace html tags with window tags:
+  sed -i "s,<html>,<window xmlns=\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\">," $newTestFullPath
+
+  # Delete a bunch of HTML (not XUL) / W3C-testsuite boilerplate:
+  sed -i "/head>/d" $newTestFullPath # Delete head open & close tags
+  sed -i "/body>/d" $newTestFullPath # Delete body open & close tags
+  sed -i "/<meta/d" $newTestFullPath # Delete meta charset tag
+  sed -i "/<title/d" $newTestFullPath # Delete title line
+  sed -i "/<link/d" $newTestFullPath # Delete link tags
+
+  # Fix style open/close tags, and add 8px of padding on outer <window> to
+  # match our HTML reference case, and change style rule to target <image>.
+  # Also, add <hbox> to wrap the image elements.
+  sed -i "s,  <style type=\"text/css\">,\<style xmlns=\"http://www.w3.org/1999/xhtml\"><![CDATA[\n      window { padding: 8px; }," $newTestFullPath
+  sed -i "s,  </style>,]]></style>\n  <hbox>," $newTestFullPath
+  sed -i "s,</html>,  </hbox>\n</window>," $newTestFullPath
+  sed -i "s/img {/image {/" $newTestFullPath
+
+  sed -i "s,support/,," $newTestFullPath
+  sed -i "s,<img\(.*\)>,<image\1/>," $newTestFullPath
+
+  # Update reftest manifest:
+  echo "== $newTestName $referenceName" \
+    >> $reftestListFileName
+
+done
diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1205630-ref.html b/layout/reftests/xul/inactive-fixed-bg-bug1205630-ref.html
new file mode 100644
index 000000000..2322e4004
--- /dev/null
+++ b/layout/reftests/xul/inactive-fixed-bg-bug1205630-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Testcase</title>
+
+<style>
+
+body {
+  margin: 0px;
+  padding: 0px;
+}
+
+#inner {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(red, blue) no-repeat;
+  background-position: -50px -50px;
+  background-size: 800px 800px;
+}
+
+#outer {
+  margin: 50px 50px 0;
+  width: 100px;
+  height: 100px;
+  clip-path: url(#path);
+  position: fixed;
+}
+
+</style>
+</head>
+<body>
+<div id="outer">
+  <div id="inner"></div>
+</div>
+
+<svg height="0">
+  <defs>
+    <clipPath id="path" clipPathUnits="objectBoundingBox">
+      <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/>
+    </clipPath>
+  </defs>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1205630.xul b/layout/reftests/xul/inactive-fixed-bg-bug1205630.xul
new file mode 100644
index 000000000..306338c3f
--- /dev/null
+++ b/layout/reftests/xul/inactive-fixed-bg-bug1205630.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <!-- Test that a fixed background layer inside an inactive layer tree
+       is clipped correctly. Here, the inactive layer tree is created by
+       the SVGEffects display item built for the clip-path on the outer div.
+       The bug only reproduces in XUL because fixed backgrounds are only
+       layerized if their animated geometry root is the root frame, but
+       in HTML there's always an enclosing HTML scroll frame. -->
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+    #inner {
+      width: 100px;
+      height: 100px;
+      background: linear-gradient(red, blue) no-repeat fixed;
+      background-size: 800px 800px;
+    }
+
+    #outer {
+      margin: 50px 50px 0;
+      width: 100px;
+      height: 100px;
+      clip-path: url(#path);
+      position: fixed;
+    }
+  ]]></style>
+  <div xmlns="http://www.w3.org/1999/xhtml" id="outer">
+    <div xmlns="http://www.w3.org/1999/xhtml" id="inner"></div>
+  </div>
+
+  <svg xmlns="http://www.w3.org/2000/svg" height="0">
+    <defs>
+      <clipPath id="path" clipPathUnits="objectBoundingBox">
+        <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/>
+      </clipPath>
+    </defs>
+  </svg>
+</window>
diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1272525-ref.html b/layout/reftests/xul/inactive-fixed-bg-bug1272525-ref.html
new file mode 100644
index 000000000..82dc3193b
--- /dev/null
+++ b/layout/reftests/xul/inactive-fixed-bg-bug1272525-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Testcase</title>
+
+<style>
+
+body {
+  margin: 0px;
+  padding: 0px;
+}
+
+#inner {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(red, blue) no-repeat;
+  background-position: -50px -50px;
+  background-size: 800px 800px;
+}
+
+#outer {
+  margin: 50px 50px 0;
+  width: 100px;
+  height: 200px;
+  clip-path: url(#path);
+  position: fixed;
+}
+
+</style>
+</head>
+<body>
+<div id="outer">
+  <div id="inner"></div>
+</div>
+
+<svg height="0">
+  <defs>
+    <clipPath id="path" clipPathUnits="objectBoundingBox">
+      <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/>
+    </clipPath>
+  </defs>
+</svg>
+</body>
+</html>
diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1272525.xul b/layout/reftests/xul/inactive-fixed-bg-bug1272525.xul
new file mode 100644
index 000000000..81f2e9f8c
--- /dev/null
+++ b/layout/reftests/xul/inactive-fixed-bg-bug1272525.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <!-- Test that a fixed background layer inside an inactive layer tree
+       is clipped correctly. Here, the inactive layer tree is created by
+       the SVGEffects display item built for the clip-path on the outer div.
+       The bug only reproduces in XUL because fixed backgrounds are only
+       layerized if their animated geometry root is the root frame, but
+       in HTML there's always an enclosing HTML scroll frame. -->
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+    #inner {
+      width: 100px;
+      height: 100px;
+      background: linear-gradient(red, blue) no-repeat fixed;
+      background-size: 800px 800px;
+    }
+
+    #outer {
+      margin: 50px 50px 0;
+      width: 100px;
+      height: 200px;
+      clip-path: url(#path);
+      position: fixed;
+    }
+  ]]></style>
+  <div xmlns="http://www.w3.org/1999/xhtml" id="outer">
+    <div xmlns="http://www.w3.org/1999/xhtml" id="inner"></div>
+  </div>
+
+  <svg xmlns="http://www.w3.org/2000/svg" height="0">
+    <defs>
+      <clipPath id="path" clipPathUnits="objectBoundingBox">
+        <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/>
+      </clipPath>
+    </defs>
+  </svg>
+</window>
diff --git a/layout/reftests/xul/menuitem-key-ref.xul b/layout/reftests/xul/menuitem-key-ref.xul
new file mode 100644
index 000000000..2f1573f61
--- /dev/null
+++ b/layout/reftests/xul/menuitem-key-ref.xul
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<menuitem id="m1" label="Menu1" key="keytwo"/>
+<menuitem id="m2" label="Menu2"/>
+<menuitem id="m3" label="Menu3" key="keythree"/>
+<menuitem id="m4" label="Menu4" acceltext="Text"/>
+<menuitem id="m5" label="Menu5" acceltext="Text"/>
+<menuitem id="m6" label="Menu6" acceltext="Text"/>
+<menuitem id="m7" label="Menu7" key="keythree"/>
+<menuitem id="m8" label="Menu8"/>
+<menuitem id="m9" label="Menu9"/>
+
+<keyset>
+  <key id="keytwo" key="Y" modifiers="control"/>
+  <key id="keythree" key="X" modifiers="accel"/>
+</keyset>
+
+</window>
diff --git a/layout/reftests/xul/menuitem-key.xul b/layout/reftests/xul/menuitem-key.xul
new file mode 100644
index 000000000..504071122
--- /dev/null
+++ b/layout/reftests/xul/menuitem-key.xul
@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<window class="reftest-wait" onload="changeKeys()"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<menuitem id="m1" label="Menu1" key="keyone"/>
+<menuitem id="m2" label="Menu2" key="keytwo"/>
+<menuitem id="m3" label="Menu3"/>
+<menuitem id="m4" label="Menu4"/>
+<menuitem id="m5" label="Menu5"/>
+<menuitem id="m6" label="Menu6" key="keythree" acceltext="Text"/>
+<menuitem id="m7" label="Menu7" key="keythree" acceltext="Text"/>
+<menuitem id="m8" label="Menu8" key="keythree" acceltext="Text"/>
+<menuitem id="m9" label="Menu9" key="keytwo"/>
+
+<script>
+function changeKeys()
+{
+  document.getElementById("m1").setAttribute("key", "keytwo");
+  document.getElementById("m2").removeAttribute("key");
+  document.getElementById("m3").setAttribute("key", "keythree");
+
+  document.getElementById("m4").setAttribute("key", "keyone");
+  document.getElementById("m4").setAttribute("acceltext", "Text");
+
+  document.getElementById("m5").setAttribute("acceltext", "Text");
+  document.getElementById("m5").setAttribute("key", "keytwo");
+
+  document.getElementById("m6").removeAttribute("key");
+  document.getElementById("m7").removeAttribute("acceltext");
+
+  document.getElementById("m8").removeAttribute("key");
+  document.getElementById("m8").removeAttribute("acceltext");
+
+  document.getElementById("m9").removeAttribute("key");
+
+  document.documentElement.className='';
+}
+</script>
+
+<keyset>
+  <key id="keyone" key="Z" modifiers="control"/>
+  <key id="keytwo" key="Y" modifiers="control"/>
+  <key id="keythree" key="X" modifiers="accel"/>
+</keyset>
+
+</window>
diff --git a/layout/reftests/xul/menulist-shrinkwrap-1-ref.xul b/layout/reftests/xul/menulist-shrinkwrap-1-ref.xul
new file mode 100644
index 000000000..7c85e4c6b
--- /dev/null
+++ b/layout/reftests/xul/menulist-shrinkwrap-1-ref.xul
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="left">
+  <menulist style="color: transparent">
+    <menupopup>
+      <menuitem value="1" label="short" />
+      <menuitem value="2" label="long item" />
+    </menupopup>
+  </menulist>
+</window>
diff --git a/layout/reftests/xul/menulist-shrinkwrap-1.xul b/layout/reftests/xul/menulist-shrinkwrap-1.xul
new file mode 100644
index 000000000..c7141814f
--- /dev/null
+++ b/layout/reftests/xul/menulist-shrinkwrap-1.xul
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="left">
+  <menulist style="color: transparent">
+    <menupopup>
+      <menuitem value="1" label="long item" />
+      <menuitem value="2" label="short" />
+    </menupopup>
+  </menulist>
+</window>
diff --git a/layout/reftests/xul/menulist-shrinkwrap-2-ref.xul b/layout/reftests/xul/menulist-shrinkwrap-2-ref.xul
new file mode 100644
index 000000000..dc8e56d70
--- /dev/null
+++ b/layout/reftests/xul/menulist-shrinkwrap-2-ref.xul
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml">
+    <![CDATA[
+      menulist, menuitem, label { font: Menu }
+      #measurelabel { color: transparent }
+    ]]>
+  </style>
+  <stack>
+    <vbox>
+      <menulist>
+        <menupopup>
+          <menuitem value="1" label="long item" />
+          <menuitem value="2" label="short" />
+        </menupopup>
+      </menulist>
+    </vbox>
+    <hbox>
+      <label id="measurelabel" value="long item" />
+      <!-- cover up the right edge of the above -->
+      <box flex="1" style="background: white" />
+    </hbox>
+  </stack>
+</window>
diff --git a/layout/reftests/xul/menulist-shrinkwrap-2.xul b/layout/reftests/xul/menulist-shrinkwrap-2.xul
new file mode 100644
index 000000000..fa7b21678
--- /dev/null
+++ b/layout/reftests/xul/menulist-shrinkwrap-2.xul
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml">
+    <![CDATA[
+      menulist, menuitem, label { font: Menu }
+      #measurelabel { color: transparent }
+    ]]>
+  </style>
+  <stack>
+    <vbox align="left">
+      <menulist>
+        <menupopup>
+          <menuitem value="1" label="long item" />
+          <menuitem value="2" label="short" />
+        </menupopup>
+      </menulist>
+    </vbox>
+    <hbox>
+      <label id="measurelabel" value="long item" />
+      <!-- cover up the right edge of the above -->
+      <box flex="1" style="background: white" />
+    </hbox>
+  </stack>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-png-001-ref.html b/layout/reftests/xul/object-fit-contain-png-001-ref.html
new file mode 100644
index 000000000..2f96fbfd8
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-png-001.xul b/layout/reftests/xul/object-fit-contain-png-001.xul
new file mode 100644
index 000000000..dfd57d71e
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-png-001.xul
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8.png" class="bigWide tr"/>
+    <image src="colors-16x8.png" class="bigWide bl"/>
+    <image src="colors-16x8.png" class="bigWide tl"/>
+    <image src="colors-16x8.png" class="bigWide br"/>
+    <image src="colors-16x8.png" class="bigWide tc"/>
+    <image src="colors-16x8.png" class="bigWide cr"/>
+    <image src="colors-16x8.png" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8.png" class="bigTall tr"/>
+    <image src="colors-16x8.png" class="bigTall bl"/>
+    <image src="colors-16x8.png" class="bigTall tl"/>
+    <image src="colors-16x8.png" class="bigTall br"/>
+    <image src="colors-16x8.png" class="bigTall tc"/>
+    <image src="colors-16x8.png" class="bigTall cr"/>
+    <image src="colors-16x8.png" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8.png" class="small tr"/>
+    <image src="colors-16x8.png" class="small bl"/>
+    <image src="colors-16x8.png" class="small tl"/>
+    <image src="colors-16x8.png" class="small br"/>
+    <image src="colors-16x8.png" class="small tc"/>
+    <image src="colors-16x8.png" class="small cr"/>
+    <image src="colors-16x8.png" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-png-002-ref.html b/layout/reftests/xul/object-fit-contain-png-002-ref.html
new file mode 100644
index 000000000..bff827c5c
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-png-002.xul b/layout/reftests/xul/object-fit-contain-png-002.xul
new file mode 100644
index 000000000..6524e9303
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-png-002.xul
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16.png" class="bigWide tr"/>
+    <image src="colors-8x16.png" class="bigWide bl"/>
+    <image src="colors-8x16.png" class="bigWide tl"/>
+    <image src="colors-8x16.png" class="bigWide br"/>
+    <image src="colors-8x16.png" class="bigWide tc"/>
+    <image src="colors-8x16.png" class="bigWide cr"/>
+    <image src="colors-8x16.png" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16.png" class="bigTall tr"/>
+    <image src="colors-8x16.png" class="bigTall bl"/>
+    <image src="colors-8x16.png" class="bigTall tl"/>
+    <image src="colors-8x16.png" class="bigTall br"/>
+    <image src="colors-8x16.png" class="bigTall tc"/>
+    <image src="colors-8x16.png" class="bigTall cr"/>
+    <image src="colors-8x16.png" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16.png" class="small tr"/>
+    <image src="colors-8x16.png" class="small bl"/>
+    <image src="colors-8x16.png" class="small tl"/>
+    <image src="colors-8x16.png" class="small br"/>
+    <image src="colors-8x16.png" class="small tc"/>
+    <image src="colors-8x16.png" class="small cr"/>
+    <image src="colors-8x16.png" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-001-ref.html b/layout/reftests/xul/object-fit-contain-svg-001-ref.html
new file mode 100644
index 000000000..d532d3414
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-001.xul b/layout/reftests/xul/object-fit-contain-svg-001.xul
new file mode 100644
index 000000000..ce5e776b8
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-001.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8.svg" class="bigWide tr"/>
+    <image src="colors-16x8.svg" class="bigWide bl"/>
+    <image src="colors-16x8.svg" class="bigWide tl"/>
+    <image src="colors-16x8.svg" class="bigWide br"/>
+    <image src="colors-16x8.svg" class="bigWide tc"/>
+    <image src="colors-16x8.svg" class="bigWide cr"/>
+    <image src="colors-16x8.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8.svg" class="bigTall tr"/>
+    <image src="colors-16x8.svg" class="bigTall bl"/>
+    <image src="colors-16x8.svg" class="bigTall tl"/>
+    <image src="colors-16x8.svg" class="bigTall br"/>
+    <image src="colors-16x8.svg" class="bigTall tc"/>
+    <image src="colors-16x8.svg" class="bigTall cr"/>
+    <image src="colors-16x8.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8.svg" class="small tr"/>
+    <image src="colors-16x8.svg" class="small bl"/>
+    <image src="colors-16x8.svg" class="small tl"/>
+    <image src="colors-16x8.svg" class="small br"/>
+    <image src="colors-16x8.svg" class="small tc"/>
+    <image src="colors-16x8.svg" class="small cr"/>
+    <image src="colors-16x8.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-002-ref.html b/layout/reftests/xul/object-fit-contain-svg-002-ref.html
new file mode 100644
index 000000000..98262685c
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-002.xul b/layout/reftests/xul/object-fit-contain-svg-002.xul
new file mode 100644
index 000000000..a0135d6b4
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-002.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16.svg" class="bigWide tr"/>
+    <image src="colors-8x16.svg" class="bigWide bl"/>
+    <image src="colors-8x16.svg" class="bigWide tl"/>
+    <image src="colors-8x16.svg" class="bigWide br"/>
+    <image src="colors-8x16.svg" class="bigWide tc"/>
+    <image src="colors-8x16.svg" class="bigWide cr"/>
+    <image src="colors-8x16.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16.svg" class="bigTall tr"/>
+    <image src="colors-8x16.svg" class="bigTall bl"/>
+    <image src="colors-8x16.svg" class="bigTall tl"/>
+    <image src="colors-8x16.svg" class="bigTall br"/>
+    <image src="colors-8x16.svg" class="bigTall tc"/>
+    <image src="colors-8x16.svg" class="bigTall cr"/>
+    <image src="colors-8x16.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16.svg" class="small tr"/>
+    <image src="colors-8x16.svg" class="small bl"/>
+    <image src="colors-8x16.svg" class="small tl"/>
+    <image src="colors-8x16.svg" class="small br"/>
+    <image src="colors-8x16.svg" class="small tc"/>
+    <image src="colors-8x16.svg" class="small cr"/>
+    <image src="colors-8x16.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-003-ref.html b/layout/reftests/xul/object-fit-contain-svg-003-ref.html
new file mode 100644
index 000000000..f8aca453c
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8-noSize.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-003.xul b/layout/reftests/xul/object-fit-contain-svg-003.xul
new file mode 100644
index 000000000..6bbd1a900
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-003.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide br"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8-noSize.svg" class="small tr"/>
+    <image src="colors-16x8-noSize.svg" class="small bl"/>
+    <image src="colors-16x8-noSize.svg" class="small tl"/>
+    <image src="colors-16x8-noSize.svg" class="small br"/>
+    <image src="colors-16x8-noSize.svg" class="small tc"/>
+    <image src="colors-16x8-noSize.svg" class="small cr"/>
+    <image src="colors-16x8-noSize.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-004-ref.html b/layout/reftests/xul/object-fit-contain-svg-004-ref.html
new file mode 100644
index 000000000..7699a15db
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16-noSize.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-004.xul b/layout/reftests/xul/object-fit-contain-svg-004.xul
new file mode 100644
index 000000000..6c721365a
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-004.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide br"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16-noSize.svg" class="small tr"/>
+    <image src="colors-8x16-noSize.svg" class="small bl"/>
+    <image src="colors-8x16-noSize.svg" class="small tl"/>
+    <image src="colors-8x16-noSize.svg" class="small br"/>
+    <image src="colors-8x16-noSize.svg" class="small tc"/>
+    <image src="colors-8x16-noSize.svg" class="small cr"/>
+    <image src="colors-8x16-noSize.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-005-ref.html b/layout/reftests/xul/object-fit-contain-svg-005-ref.html
new file mode 100644
index 000000000..6a7c2bfeb
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8-parDefault.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-005.xul b/layout/reftests/xul/object-fit-contain-svg-005.xul
new file mode 100644
index 000000000..ab481ec0b
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-005.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8-parDefault.svg" class="small tr"/>
+    <image src="colors-16x8-parDefault.svg" class="small bl"/>
+    <image src="colors-16x8-parDefault.svg" class="small tl"/>
+    <image src="colors-16x8-parDefault.svg" class="small br"/>
+    <image src="colors-16x8-parDefault.svg" class="small tc"/>
+    <image src="colors-16x8-parDefault.svg" class="small cr"/>
+    <image src="colors-16x8-parDefault.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-contain-svg-006-ref.html b/layout/reftests/xul/object-fit-contain-svg-006-ref.html
new file mode 100644
index 000000000..412aebc14
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16-parDefault.svg");
+        background-size: contain;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-contain-svg-006.xul b/layout/reftests/xul/object-fit-contain-svg-006.xul
new file mode 100644
index 000000000..678dfba6d
--- /dev/null
+++ b/layout/reftests/xul/object-fit-contain-svg-006.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16-parDefault.svg" class="small tr"/>
+    <image src="colors-8x16-parDefault.svg" class="small bl"/>
+    <image src="colors-8x16-parDefault.svg" class="small tl"/>
+    <image src="colors-8x16-parDefault.svg" class="small br"/>
+    <image src="colors-8x16-parDefault.svg" class="small tc"/>
+    <image src="colors-8x16-parDefault.svg" class="small cr"/>
+    <image src="colors-8x16-parDefault.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-png-001-ref.html b/layout/reftests/xul/object-fit-cover-png-001-ref.html
new file mode 100644
index 000000000..fa4f77670
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-png-001.xul b/layout/reftests/xul/object-fit-cover-png-001.xul
new file mode 100644
index 000000000..bd2f98f0b
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-png-001.xul
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8.png" class="bigWide tr"/>
+    <image src="colors-16x8.png" class="bigWide bl"/>
+    <image src="colors-16x8.png" class="bigWide tl"/>
+    <image src="colors-16x8.png" class="bigWide br"/>
+    <image src="colors-16x8.png" class="bigWide tc"/>
+    <image src="colors-16x8.png" class="bigWide cr"/>
+    <image src="colors-16x8.png" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8.png" class="bigTall tr"/>
+    <image src="colors-16x8.png" class="bigTall bl"/>
+    <image src="colors-16x8.png" class="bigTall tl"/>
+    <image src="colors-16x8.png" class="bigTall br"/>
+    <image src="colors-16x8.png" class="bigTall tc"/>
+    <image src="colors-16x8.png" class="bigTall cr"/>
+    <image src="colors-16x8.png" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8.png" class="small tr"/>
+    <image src="colors-16x8.png" class="small bl"/>
+    <image src="colors-16x8.png" class="small tl"/>
+    <image src="colors-16x8.png" class="small br"/>
+    <image src="colors-16x8.png" class="small tc"/>
+    <image src="colors-16x8.png" class="small cr"/>
+    <image src="colors-16x8.png" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-png-002-ref.html b/layout/reftests/xul/object-fit-cover-png-002-ref.html
new file mode 100644
index 000000000..eb4c3dcad
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-png-002.xul b/layout/reftests/xul/object-fit-cover-png-002.xul
new file mode 100644
index 000000000..093c3e6fb
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-png-002.xul
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16.png" class="bigWide tr"/>
+    <image src="colors-8x16.png" class="bigWide bl"/>
+    <image src="colors-8x16.png" class="bigWide tl"/>
+    <image src="colors-8x16.png" class="bigWide br"/>
+    <image src="colors-8x16.png" class="bigWide tc"/>
+    <image src="colors-8x16.png" class="bigWide cr"/>
+    <image src="colors-8x16.png" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16.png" class="bigTall tr"/>
+    <image src="colors-8x16.png" class="bigTall bl"/>
+    <image src="colors-8x16.png" class="bigTall tl"/>
+    <image src="colors-8x16.png" class="bigTall br"/>
+    <image src="colors-8x16.png" class="bigTall tc"/>
+    <image src="colors-8x16.png" class="bigTall cr"/>
+    <image src="colors-8x16.png" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16.png" class="small tr"/>
+    <image src="colors-8x16.png" class="small bl"/>
+    <image src="colors-8x16.png" class="small tl"/>
+    <image src="colors-8x16.png" class="small br"/>
+    <image src="colors-8x16.png" class="small tc"/>
+    <image src="colors-8x16.png" class="small cr"/>
+    <image src="colors-8x16.png" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-001-ref.html b/layout/reftests/xul/object-fit-cover-svg-001-ref.html
new file mode 100644
index 000000000..4f479d37d
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-001.xul b/layout/reftests/xul/object-fit-cover-svg-001.xul
new file mode 100644
index 000000000..cb8d7e2dc
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-001.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8.svg" class="bigWide tr"/>
+    <image src="colors-16x8.svg" class="bigWide bl"/>
+    <image src="colors-16x8.svg" class="bigWide tl"/>
+    <image src="colors-16x8.svg" class="bigWide br"/>
+    <image src="colors-16x8.svg" class="bigWide tc"/>
+    <image src="colors-16x8.svg" class="bigWide cr"/>
+    <image src="colors-16x8.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8.svg" class="bigTall tr"/>
+    <image src="colors-16x8.svg" class="bigTall bl"/>
+    <image src="colors-16x8.svg" class="bigTall tl"/>
+    <image src="colors-16x8.svg" class="bigTall br"/>
+    <image src="colors-16x8.svg" class="bigTall tc"/>
+    <image src="colors-16x8.svg" class="bigTall cr"/>
+    <image src="colors-16x8.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8.svg" class="small tr"/>
+    <image src="colors-16x8.svg" class="small bl"/>
+    <image src="colors-16x8.svg" class="small tl"/>
+    <image src="colors-16x8.svg" class="small br"/>
+    <image src="colors-16x8.svg" class="small tc"/>
+    <image src="colors-16x8.svg" class="small cr"/>
+    <image src="colors-16x8.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-002-ref.html b/layout/reftests/xul/object-fit-cover-svg-002-ref.html
new file mode 100644
index 000000000..94ee04943
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-002.xul b/layout/reftests/xul/object-fit-cover-svg-002.xul
new file mode 100644
index 000000000..73b0a70e8
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-002.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16.svg" class="bigWide tr"/>
+    <image src="colors-8x16.svg" class="bigWide bl"/>
+    <image src="colors-8x16.svg" class="bigWide tl"/>
+    <image src="colors-8x16.svg" class="bigWide br"/>
+    <image src="colors-8x16.svg" class="bigWide tc"/>
+    <image src="colors-8x16.svg" class="bigWide cr"/>
+    <image src="colors-8x16.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16.svg" class="bigTall tr"/>
+    <image src="colors-8x16.svg" class="bigTall bl"/>
+    <image src="colors-8x16.svg" class="bigTall tl"/>
+    <image src="colors-8x16.svg" class="bigTall br"/>
+    <image src="colors-8x16.svg" class="bigTall tc"/>
+    <image src="colors-8x16.svg" class="bigTall cr"/>
+    <image src="colors-8x16.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16.svg" class="small tr"/>
+    <image src="colors-8x16.svg" class="small bl"/>
+    <image src="colors-8x16.svg" class="small tl"/>
+    <image src="colors-8x16.svg" class="small br"/>
+    <image src="colors-8x16.svg" class="small tc"/>
+    <image src="colors-8x16.svg" class="small cr"/>
+    <image src="colors-8x16.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-003-ref.html b/layout/reftests/xul/object-fit-cover-svg-003-ref.html
new file mode 100644
index 000000000..3cc59936f
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8-noSize.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-003.xul b/layout/reftests/xul/object-fit-cover-svg-003.xul
new file mode 100644
index 000000000..852067d0d
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-003.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide br"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8-noSize.svg" class="small tr"/>
+    <image src="colors-16x8-noSize.svg" class="small bl"/>
+    <image src="colors-16x8-noSize.svg" class="small tl"/>
+    <image src="colors-16x8-noSize.svg" class="small br"/>
+    <image src="colors-16x8-noSize.svg" class="small tc"/>
+    <image src="colors-16x8-noSize.svg" class="small cr"/>
+    <image src="colors-16x8-noSize.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-004-ref.html b/layout/reftests/xul/object-fit-cover-svg-004-ref.html
new file mode 100644
index 000000000..1d7473677
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16-noSize.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-004.xul b/layout/reftests/xul/object-fit-cover-svg-004.xul
new file mode 100644
index 000000000..db5721414
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-004.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide br"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16-noSize.svg" class="small tr"/>
+    <image src="colors-8x16-noSize.svg" class="small bl"/>
+    <image src="colors-8x16-noSize.svg" class="small tl"/>
+    <image src="colors-8x16-noSize.svg" class="small br"/>
+    <image src="colors-8x16-noSize.svg" class="small tc"/>
+    <image src="colors-8x16-noSize.svg" class="small cr"/>
+    <image src="colors-8x16-noSize.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-005-ref.html b/layout/reftests/xul/object-fit-cover-svg-005-ref.html
new file mode 100644
index 000000000..5e8a68b71
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8-parDefault.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-005.xul b/layout/reftests/xul/object-fit-cover-svg-005.xul
new file mode 100644
index 000000000..00699ff28
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-005.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8-parDefault.svg" class="small tr"/>
+    <image src="colors-16x8-parDefault.svg" class="small bl"/>
+    <image src="colors-16x8-parDefault.svg" class="small tl"/>
+    <image src="colors-16x8-parDefault.svg" class="small br"/>
+    <image src="colors-16x8-parDefault.svg" class="small tc"/>
+    <image src="colors-16x8-parDefault.svg" class="small cr"/>
+    <image src="colors-16x8-parDefault.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-cover-svg-006-ref.html b/layout/reftests/xul/object-fit-cover-svg-006-ref.html
new file mode 100644
index 000000000..878bd6a33
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16-parDefault.svg");
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-cover-svg-006.xul b/layout/reftests/xul/object-fit-cover-svg-006.xul
new file mode 100644
index 000000000..1fbf905cb
--- /dev/null
+++ b/layout/reftests/xul/object-fit-cover-svg-006.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16-parDefault.svg" class="small tr"/>
+    <image src="colors-8x16-parDefault.svg" class="small bl"/>
+    <image src="colors-8x16-parDefault.svg" class="small tl"/>
+    <image src="colors-8x16-parDefault.svg" class="small br"/>
+    <image src="colors-8x16-parDefault.svg" class="small tc"/>
+    <image src="colors-8x16-parDefault.svg" class="small cr"/>
+    <image src="colors-8x16-parDefault.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-png-001-ref.html b/layout/reftests/xul/object-fit-fill-png-001-ref.html
new file mode 100644
index 000000000..0e8d1bd82
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-png-001.xul b/layout/reftests/xul/object-fit-fill-png-001.xul
new file mode 100644
index 000000000..96a785a80
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-png-001.xul
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8.png" class="bigWide tr"/>
+    <image src="colors-16x8.png" class="bigWide bl"/>
+    <image src="colors-16x8.png" class="bigWide tl"/>
+    <image src="colors-16x8.png" class="bigWide br"/>
+    <image src="colors-16x8.png" class="bigWide tc"/>
+    <image src="colors-16x8.png" class="bigWide cr"/>
+    <image src="colors-16x8.png" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8.png" class="bigTall tr"/>
+    <image src="colors-16x8.png" class="bigTall bl"/>
+    <image src="colors-16x8.png" class="bigTall tl"/>
+    <image src="colors-16x8.png" class="bigTall br"/>
+    <image src="colors-16x8.png" class="bigTall tc"/>
+    <image src="colors-16x8.png" class="bigTall cr"/>
+    <image src="colors-16x8.png" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8.png" class="small tr"/>
+    <image src="colors-16x8.png" class="small bl"/>
+    <image src="colors-16x8.png" class="small tl"/>
+    <image src="colors-16x8.png" class="small br"/>
+    <image src="colors-16x8.png" class="small tc"/>
+    <image src="colors-16x8.png" class="small cr"/>
+    <image src="colors-16x8.png" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-png-002-ref.html b/layout/reftests/xul/object-fit-fill-png-002-ref.html
new file mode 100644
index 000000000..8e22d3d57
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-png-002.xul b/layout/reftests/xul/object-fit-fill-png-002.xul
new file mode 100644
index 000000000..81ab3fd2c
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-png-002.xul
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16.png" class="bigWide tr"/>
+    <image src="colors-8x16.png" class="bigWide bl"/>
+    <image src="colors-8x16.png" class="bigWide tl"/>
+    <image src="colors-8x16.png" class="bigWide br"/>
+    <image src="colors-8x16.png" class="bigWide tc"/>
+    <image src="colors-8x16.png" class="bigWide cr"/>
+    <image src="colors-8x16.png" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16.png" class="bigTall tr"/>
+    <image src="colors-8x16.png" class="bigTall bl"/>
+    <image src="colors-8x16.png" class="bigTall tl"/>
+    <image src="colors-8x16.png" class="bigTall br"/>
+    <image src="colors-8x16.png" class="bigTall tc"/>
+    <image src="colors-8x16.png" class="bigTall cr"/>
+    <image src="colors-8x16.png" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16.png" class="small tr"/>
+    <image src="colors-8x16.png" class="small bl"/>
+    <image src="colors-8x16.png" class="small tl"/>
+    <image src="colors-8x16.png" class="small br"/>
+    <image src="colors-8x16.png" class="small tc"/>
+    <image src="colors-8x16.png" class="small cr"/>
+    <image src="colors-8x16.png" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-001-ref.html b/layout/reftests/xul/object-fit-fill-svg-001-ref.html
new file mode 100644
index 000000000..13984a919
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-001.xul b/layout/reftests/xul/object-fit-fill-svg-001.xul
new file mode 100644
index 000000000..c0490ca02
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-001.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8.svg" class="bigWide tr"/>
+    <image src="colors-16x8.svg" class="bigWide bl"/>
+    <image src="colors-16x8.svg" class="bigWide tl"/>
+    <image src="colors-16x8.svg" class="bigWide br"/>
+    <image src="colors-16x8.svg" class="bigWide tc"/>
+    <image src="colors-16x8.svg" class="bigWide cr"/>
+    <image src="colors-16x8.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8.svg" class="bigTall tr"/>
+    <image src="colors-16x8.svg" class="bigTall bl"/>
+    <image src="colors-16x8.svg" class="bigTall tl"/>
+    <image src="colors-16x8.svg" class="bigTall br"/>
+    <image src="colors-16x8.svg" class="bigTall tc"/>
+    <image src="colors-16x8.svg" class="bigTall cr"/>
+    <image src="colors-16x8.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8.svg" class="small tr"/>
+    <image src="colors-16x8.svg" class="small bl"/>
+    <image src="colors-16x8.svg" class="small tl"/>
+    <image src="colors-16x8.svg" class="small br"/>
+    <image src="colors-16x8.svg" class="small tc"/>
+    <image src="colors-16x8.svg" class="small cr"/>
+    <image src="colors-16x8.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-002-ref.html b/layout/reftests/xul/object-fit-fill-svg-002-ref.html
new file mode 100644
index 000000000..efd8e4f6f
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-002.xul b/layout/reftests/xul/object-fit-fill-svg-002.xul
new file mode 100644
index 000000000..2ee41d629
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-002.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16.svg" class="bigWide tr"/>
+    <image src="colors-8x16.svg" class="bigWide bl"/>
+    <image src="colors-8x16.svg" class="bigWide tl"/>
+    <image src="colors-8x16.svg" class="bigWide br"/>
+    <image src="colors-8x16.svg" class="bigWide tc"/>
+    <image src="colors-8x16.svg" class="bigWide cr"/>
+    <image src="colors-8x16.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16.svg" class="bigTall tr"/>
+    <image src="colors-8x16.svg" class="bigTall bl"/>
+    <image src="colors-8x16.svg" class="bigTall tl"/>
+    <image src="colors-8x16.svg" class="bigTall br"/>
+    <image src="colors-8x16.svg" class="bigTall tc"/>
+    <image src="colors-8x16.svg" class="bigTall cr"/>
+    <image src="colors-8x16.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16.svg" class="small tr"/>
+    <image src="colors-8x16.svg" class="small bl"/>
+    <image src="colors-8x16.svg" class="small tl"/>
+    <image src="colors-8x16.svg" class="small br"/>
+    <image src="colors-8x16.svg" class="small tc"/>
+    <image src="colors-8x16.svg" class="small cr"/>
+    <image src="colors-8x16.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-003-ref.html b/layout/reftests/xul/object-fit-fill-svg-003-ref.html
new file mode 100644
index 000000000..95ab2853d
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8-noSize.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-003.xul b/layout/reftests/xul/object-fit-fill-svg-003.xul
new file mode 100644
index 000000000..21e212e47
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-003.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide br"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8-noSize.svg" class="small tr"/>
+    <image src="colors-16x8-noSize.svg" class="small bl"/>
+    <image src="colors-16x8-noSize.svg" class="small tl"/>
+    <image src="colors-16x8-noSize.svg" class="small br"/>
+    <image src="colors-16x8-noSize.svg" class="small tc"/>
+    <image src="colors-16x8-noSize.svg" class="small cr"/>
+    <image src="colors-16x8-noSize.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-004-ref.html b/layout/reftests/xul/object-fit-fill-svg-004-ref.html
new file mode 100644
index 000000000..1fb40f322
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16-noSize.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-004.xul b/layout/reftests/xul/object-fit-fill-svg-004.xul
new file mode 100644
index 000000000..49901ad16
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-004.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide br"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16-noSize.svg" class="small tr"/>
+    <image src="colors-8x16-noSize.svg" class="small bl"/>
+    <image src="colors-8x16-noSize.svg" class="small tl"/>
+    <image src="colors-8x16-noSize.svg" class="small br"/>
+    <image src="colors-8x16-noSize.svg" class="small tc"/>
+    <image src="colors-8x16-noSize.svg" class="small cr"/>
+    <image src="colors-8x16-noSize.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-005-ref.html b/layout/reftests/xul/object-fit-fill-svg-005-ref.html
new file mode 100644
index 000000000..df1977094
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8-parDefault.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-005.xul b/layout/reftests/xul/object-fit-fill-svg-005.xul
new file mode 100644
index 000000000..e38b80894
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-005.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8-parDefault.svg" class="small tr"/>
+    <image src="colors-16x8-parDefault.svg" class="small bl"/>
+    <image src="colors-16x8-parDefault.svg" class="small tl"/>
+    <image src="colors-16x8-parDefault.svg" class="small br"/>
+    <image src="colors-16x8-parDefault.svg" class="small tc"/>
+    <image src="colors-16x8-parDefault.svg" class="small cr"/>
+    <image src="colors-16x8-parDefault.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-fill-svg-006-ref.html b/layout/reftests/xul/object-fit-fill-svg-006-ref.html
new file mode 100644
index 000000000..d1d66a324
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16-parDefault.svg");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-fill-svg-006.xul b/layout/reftests/xul/object-fit-fill-svg-006.xul
new file mode 100644
index 000000000..c1ee06d86
--- /dev/null
+++ b/layout/reftests/xul/object-fit-fill-svg-006.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16-parDefault.svg" class="small tr"/>
+    <image src="colors-8x16-parDefault.svg" class="small bl"/>
+    <image src="colors-8x16-parDefault.svg" class="small tl"/>
+    <image src="colors-8x16-parDefault.svg" class="small br"/>
+    <image src="colors-8x16-parDefault.svg" class="small tc"/>
+    <image src="colors-8x16-parDefault.svg" class="small cr"/>
+    <image src="colors-8x16-parDefault.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-png-001-ref.html b/layout/reftests/xul/object-fit-none-png-001-ref.html
new file mode 100644
index 000000000..49c08ab88
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-png-001.xul b/layout/reftests/xul/object-fit-none-png-001.xul
new file mode 100644
index 000000000..90c0b88f7
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-png-001.xul
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8.png" class="bigWide tr"/>
+    <image src="colors-16x8.png" class="bigWide bl"/>
+    <image src="colors-16x8.png" class="bigWide tl"/>
+    <image src="colors-16x8.png" class="bigWide br"/>
+    <image src="colors-16x8.png" class="bigWide tc"/>
+    <image src="colors-16x8.png" class="bigWide cr"/>
+    <image src="colors-16x8.png" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8.png" class="bigTall tr"/>
+    <image src="colors-16x8.png" class="bigTall bl"/>
+    <image src="colors-16x8.png" class="bigTall tl"/>
+    <image src="colors-16x8.png" class="bigTall br"/>
+    <image src="colors-16x8.png" class="bigTall tc"/>
+    <image src="colors-16x8.png" class="bigTall cr"/>
+    <image src="colors-16x8.png" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8.png" class="small tr"/>
+    <image src="colors-16x8.png" class="small bl"/>
+    <image src="colors-16x8.png" class="small tl"/>
+    <image src="colors-16x8.png" class="small br"/>
+    <image src="colors-16x8.png" class="small tc"/>
+    <image src="colors-16x8.png" class="small cr"/>
+    <image src="colors-16x8.png" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-png-002-ref.html b/layout/reftests/xul/object-fit-none-png-002-ref.html
new file mode 100644
index 000000000..34a5fdad5
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-png-002.xul b/layout/reftests/xul/object-fit-none-png-002.xul
new file mode 100644
index 000000000..41ba46303
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-png-002.xul
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16.png" class="bigWide tr"/>
+    <image src="colors-8x16.png" class="bigWide bl"/>
+    <image src="colors-8x16.png" class="bigWide tl"/>
+    <image src="colors-8x16.png" class="bigWide br"/>
+    <image src="colors-8x16.png" class="bigWide tc"/>
+    <image src="colors-8x16.png" class="bigWide cr"/>
+    <image src="colors-8x16.png" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16.png" class="bigTall tr"/>
+    <image src="colors-8x16.png" class="bigTall bl"/>
+    <image src="colors-8x16.png" class="bigTall tl"/>
+    <image src="colors-8x16.png" class="bigTall br"/>
+    <image src="colors-8x16.png" class="bigTall tc"/>
+    <image src="colors-8x16.png" class="bigTall cr"/>
+    <image src="colors-8x16.png" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16.png" class="small tr"/>
+    <image src="colors-8x16.png" class="small bl"/>
+    <image src="colors-8x16.png" class="small tl"/>
+    <image src="colors-8x16.png" class="small br"/>
+    <image src="colors-8x16.png" class="small tc"/>
+    <image src="colors-8x16.png" class="small cr"/>
+    <image src="colors-8x16.png" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-001-ref.html b/layout/reftests/xul/object-fit-none-svg-001-ref.html
new file mode 100644
index 000000000..9022651c9
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-001.xul b/layout/reftests/xul/object-fit-none-svg-001.xul
new file mode 100644
index 000000000..6fba38bd5
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-001.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8.svg" class="bigWide tr"/>
+    <image src="colors-16x8.svg" class="bigWide bl"/>
+    <image src="colors-16x8.svg" class="bigWide tl"/>
+    <image src="colors-16x8.svg" class="bigWide br"/>
+    <image src="colors-16x8.svg" class="bigWide tc"/>
+    <image src="colors-16x8.svg" class="bigWide cr"/>
+    <image src="colors-16x8.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8.svg" class="bigTall tr"/>
+    <image src="colors-16x8.svg" class="bigTall bl"/>
+    <image src="colors-16x8.svg" class="bigTall tl"/>
+    <image src="colors-16x8.svg" class="bigTall br"/>
+    <image src="colors-16x8.svg" class="bigTall tc"/>
+    <image src="colors-16x8.svg" class="bigTall cr"/>
+    <image src="colors-16x8.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8.svg" class="small tr"/>
+    <image src="colors-16x8.svg" class="small bl"/>
+    <image src="colors-16x8.svg" class="small tl"/>
+    <image src="colors-16x8.svg" class="small br"/>
+    <image src="colors-16x8.svg" class="small tc"/>
+    <image src="colors-16x8.svg" class="small cr"/>
+    <image src="colors-16x8.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-002-ref.html b/layout/reftests/xul/object-fit-none-svg-002-ref.html
new file mode 100644
index 000000000..25abf3643
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-002-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-002.xul b/layout/reftests/xul/object-fit-none-svg-002.xul
new file mode 100644
index 000000000..fdd7217eb
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-002.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16.svg" class="bigWide tr"/>
+    <image src="colors-8x16.svg" class="bigWide bl"/>
+    <image src="colors-8x16.svg" class="bigWide tl"/>
+    <image src="colors-8x16.svg" class="bigWide br"/>
+    <image src="colors-8x16.svg" class="bigWide tc"/>
+    <image src="colors-8x16.svg" class="bigWide cr"/>
+    <image src="colors-8x16.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16.svg" class="bigTall tr"/>
+    <image src="colors-8x16.svg" class="bigTall bl"/>
+    <image src="colors-8x16.svg" class="bigTall tl"/>
+    <image src="colors-8x16.svg" class="bigTall br"/>
+    <image src="colors-8x16.svg" class="bigTall tc"/>
+    <image src="colors-8x16.svg" class="bigTall cr"/>
+    <image src="colors-8x16.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16.svg" class="small tr"/>
+    <image src="colors-8x16.svg" class="small bl"/>
+    <image src="colors-8x16.svg" class="small tl"/>
+    <image src="colors-8x16.svg" class="small br"/>
+    <image src="colors-8x16.svg" class="small tc"/>
+    <image src="colors-8x16.svg" class="small cr"/>
+    <image src="colors-8x16.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-003-ref.html b/layout/reftests/xul/object-fit-none-svg-003-ref.html
new file mode 100644
index 000000000..8376f997c
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-003-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8-noSize.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-003.xul b/layout/reftests/xul/object-fit-none-svg-003.xul
new file mode 100644
index 000000000..031e83cad
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-003.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide br"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8-noSize.svg" class="small tr"/>
+    <image src="colors-16x8-noSize.svg" class="small bl"/>
+    <image src="colors-16x8-noSize.svg" class="small tl"/>
+    <image src="colors-16x8-noSize.svg" class="small br"/>
+    <image src="colors-16x8-noSize.svg" class="small tc"/>
+    <image src="colors-16x8-noSize.svg" class="small cr"/>
+    <image src="colors-16x8-noSize.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-004-ref.html b/layout/reftests/xul/object-fit-none-svg-004-ref.html
new file mode 100644
index 000000000..86e39853a
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-004-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16-noSize.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-004.xul b/layout/reftests/xul/object-fit-none-svg-004.xul
new file mode 100644
index 000000000..0ae5ab67d
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-004.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide br"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16-noSize.svg" class="small tr"/>
+    <image src="colors-8x16-noSize.svg" class="small bl"/>
+    <image src="colors-8x16-noSize.svg" class="small tl"/>
+    <image src="colors-8x16-noSize.svg" class="small br"/>
+    <image src="colors-8x16-noSize.svg" class="small tc"/>
+    <image src="colors-8x16-noSize.svg" class="small cr"/>
+    <image src="colors-8x16-noSize.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-005-ref.html b/layout/reftests/xul/object-fit-none-svg-005-ref.html
new file mode 100644
index 000000000..3b8ccb3f8
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-005-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8-parDefault.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-005.xul b/layout/reftests/xul/object-fit-none-svg-005.xul
new file mode 100644
index 000000000..72fef0cf6
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-005.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8-parDefault.svg" class="small tr"/>
+    <image src="colors-16x8-parDefault.svg" class="small bl"/>
+    <image src="colors-16x8-parDefault.svg" class="small tl"/>
+    <image src="colors-16x8-parDefault.svg" class="small br"/>
+    <image src="colors-16x8-parDefault.svg" class="small tc"/>
+    <image src="colors-16x8-parDefault.svg" class="small cr"/>
+    <image src="colors-16x8-parDefault.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-none-svg-006-ref.html b/layout/reftests/xul/object-fit-none-svg-006-ref.html
new file mode 100644
index 000000000..1a78e8c8e
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16-parDefault.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-none-svg-006.xul b/layout/reftests/xul/object-fit-none-svg-006.xul
new file mode 100644
index 000000000..5902fc0f7
--- /dev/null
+++ b/layout/reftests/xul/object-fit-none-svg-006.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16-parDefault.svg" class="small tr"/>
+    <image src="colors-8x16-parDefault.svg" class="small bl"/>
+    <image src="colors-8x16-parDefault.svg" class="small tl"/>
+    <image src="colors-8x16-parDefault.svg" class="small br"/>
+    <image src="colors-8x16-parDefault.svg" class="small tc"/>
+    <image src="colors-8x16-parDefault.svg" class="small cr"/>
+    <image src="colors-8x16-parDefault.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-png-001-ref.html b/layout/reftests/xul/object-fit-scale-down-png-001-ref.html
new file mode 100644
index 000000000..58c0abacd
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-png-001-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-png-001.xul b/layout/reftests/xul/object-fit-scale-down-png-001.xul
new file mode 100644
index 000000000..283b35d32
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-png-001.xul
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8.png" class="bigWide tr"/>
+    <image src="colors-16x8.png" class="bigWide bl"/>
+    <image src="colors-16x8.png" class="bigWide tl"/>
+    <image src="colors-16x8.png" class="bigWide br"/>
+    <image src="colors-16x8.png" class="bigWide tc"/>
+    <image src="colors-16x8.png" class="bigWide cr"/>
+    <image src="colors-16x8.png" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8.png" class="bigTall tr"/>
+    <image src="colors-16x8.png" class="bigTall bl"/>
+    <image src="colors-16x8.png" class="bigTall tl"/>
+    <image src="colors-16x8.png" class="bigTall br"/>
+    <image src="colors-16x8.png" class="bigTall tc"/>
+    <image src="colors-16x8.png" class="bigTall cr"/>
+    <image src="colors-16x8.png" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8.png" class="small tr"/>
+    <image src="colors-16x8.png" class="small bl"/>
+    <image src="colors-16x8.png" class="small tl"/>
+    <image src="colors-16x8.png" class="small br"/>
+    <image src="colors-16x8.png" class="small tc"/>
+    <image src="colors-16x8.png" class="small cr"/>
+    <image src="colors-16x8.png" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-png-002-ref.html b/layout/reftests/xul/object-fit-scale-down-png-002-ref.html
new file mode 100644
index 000000000..1a554b7da
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-png-002-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-png-002.xul b/layout/reftests/xul/object-fit-scale-down-png-002.xul
new file mode 100644
index 000000000..828890c57
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-png-002.xul
@@ -0,0 +1,70 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16.png" class="bigWide tr"/>
+    <image src="colors-8x16.png" class="bigWide bl"/>
+    <image src="colors-8x16.png" class="bigWide tl"/>
+    <image src="colors-8x16.png" class="bigWide br"/>
+    <image src="colors-8x16.png" class="bigWide tc"/>
+    <image src="colors-8x16.png" class="bigWide cr"/>
+    <image src="colors-8x16.png" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16.png" class="bigTall tr"/>
+    <image src="colors-8x16.png" class="bigTall bl"/>
+    <image src="colors-8x16.png" class="bigTall tl"/>
+    <image src="colors-8x16.png" class="bigTall br"/>
+    <image src="colors-8x16.png" class="bigTall tc"/>
+    <image src="colors-8x16.png" class="bigTall cr"/>
+    <image src="colors-8x16.png" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16.png" class="small tr"/>
+    <image src="colors-8x16.png" class="small bl"/>
+    <image src="colors-8x16.png" class="small tl"/>
+    <image src="colors-8x16.png" class="small br"/>
+    <image src="colors-8x16.png" class="small tc"/>
+    <image src="colors-8x16.png" class="small cr"/>
+    <image src="colors-8x16.png" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-001-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-001-ref.html
new file mode 100644
index 000000000..7930af730
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-001.xul b/layout/reftests/xul/object-fit-scale-down-svg-001.xul
new file mode 100644
index 000000000..c78ecc63e
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-001.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8.svg" class="bigWide tr"/>
+    <image src="colors-16x8.svg" class="bigWide bl"/>
+    <image src="colors-16x8.svg" class="bigWide tl"/>
+    <image src="colors-16x8.svg" class="bigWide br"/>
+    <image src="colors-16x8.svg" class="bigWide tc"/>
+    <image src="colors-16x8.svg" class="bigWide cr"/>
+    <image src="colors-16x8.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8.svg" class="bigTall tr"/>
+    <image src="colors-16x8.svg" class="bigTall bl"/>
+    <image src="colors-16x8.svg" class="bigTall tl"/>
+    <image src="colors-16x8.svg" class="bigTall br"/>
+    <image src="colors-16x8.svg" class="bigTall tc"/>
+    <image src="colors-16x8.svg" class="bigTall cr"/>
+    <image src="colors-16x8.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8.svg" class="small tr"/>
+    <image src="colors-16x8.svg" class="small bl"/>
+    <image src="colors-16x8.svg" class="small tl"/>
+    <image src="colors-16x8.svg" class="small br"/>
+    <image src="colors-16x8.svg" class="small tc"/>
+    <image src="colors-16x8.svg" class="small cr"/>
+    <image src="colors-16x8.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-002-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-002-ref.html
new file mode 100644
index 000000000..ffba4c042
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-002.xul b/layout/reftests/xul/object-fit-scale-down-svg-002.xul
new file mode 100644
index 000000000..725d7e375
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-002.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16.svg" class="bigWide tr"/>
+    <image src="colors-8x16.svg" class="bigWide bl"/>
+    <image src="colors-8x16.svg" class="bigWide tl"/>
+    <image src="colors-8x16.svg" class="bigWide br"/>
+    <image src="colors-8x16.svg" class="bigWide tc"/>
+    <image src="colors-8x16.svg" class="bigWide cr"/>
+    <image src="colors-8x16.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16.svg" class="bigTall tr"/>
+    <image src="colors-8x16.svg" class="bigTall bl"/>
+    <image src="colors-8x16.svg" class="bigTall tl"/>
+    <image src="colors-8x16.svg" class="bigTall br"/>
+    <image src="colors-8x16.svg" class="bigTall tc"/>
+    <image src="colors-8x16.svg" class="bigTall cr"/>
+    <image src="colors-8x16.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16.svg" class="small tr"/>
+    <image src="colors-8x16.svg" class="small bl"/>
+    <image src="colors-8x16.svg" class="small tl"/>
+    <image src="colors-8x16.svg" class="small br"/>
+    <image src="colors-8x16.svg" class="small tc"/>
+    <image src="colors-8x16.svg" class="small cr"/>
+    <image src="colors-8x16.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-003-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-003-ref.html
new file mode 100644
index 000000000..2a7ba611e
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-003-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8-noSize.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-003.xul b/layout/reftests/xul/object-fit-scale-down-svg-003.xul
new file mode 100644
index 000000000..193d41be0
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-003.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide br"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8-noSize.svg" class="small tr"/>
+    <image src="colors-16x8-noSize.svg" class="small bl"/>
+    <image src="colors-16x8-noSize.svg" class="small tl"/>
+    <image src="colors-16x8-noSize.svg" class="small br"/>
+    <image src="colors-16x8-noSize.svg" class="small tc"/>
+    <image src="colors-16x8-noSize.svg" class="small cr"/>
+    <image src="colors-16x8-noSize.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-004-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-004-ref.html
new file mode 100644
index 000000000..b4b07a55c
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-004-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16-noSize.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-004.xul b/layout/reftests/xul/object-fit-scale-down-svg-004.xul
new file mode 100644
index 000000000..091be4bd2
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-004.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide br"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16-noSize.svg" class="small tr"/>
+    <image src="colors-8x16-noSize.svg" class="small bl"/>
+    <image src="colors-8x16-noSize.svg" class="small tl"/>
+    <image src="colors-8x16-noSize.svg" class="small br"/>
+    <image src="colors-8x16-noSize.svg" class="small tc"/>
+    <image src="colors-8x16-noSize.svg" class="small cr"/>
+    <image src="colors-8x16-noSize.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-005-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-005-ref.html
new file mode 100644
index 000000000..bac7f3db1
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-005-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-16x8-parDefault.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-005.xul b/layout/reftests/xul/object-fit-scale-down-svg-005.xul
new file mode 100644
index 000000000..2d6a9e743
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-005.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-16x8-parDefault.svg" class="small tr"/>
+    <image src="colors-16x8-parDefault.svg" class="small bl"/>
+    <image src="colors-16x8-parDefault.svg" class="small tl"/>
+    <image src="colors-16x8-parDefault.svg" class="small br"/>
+    <image src="colors-16x8-parDefault.svg" class="small tc"/>
+    <image src="colors-16x8-parDefault.svg" class="small cr"/>
+    <image src="colors-16x8-parDefault.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-006-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-006-ref.html
new file mode 100644
index 000000000..30097222b
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-006-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("colors-8x16-parDefault.svg");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-fit-scale-down-svg-006.xul b/layout/reftests/xul/object-fit-scale-down-svg-006.xul
new file mode 100644
index 000000000..645498a98
--- /dev/null
+++ b/layout/reftests/xul/object-fit-scale-down-svg-006.xul
@@ -0,0 +1,69 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 52px;
+        height: 36px;
+      }
+      .bigTall {
+        width: 36px;
+        height: 52px;
+      }
+      .small {
+        width: 12px;
+        height: 12px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+  ]]></style>
+  <hbox>
+    <!-- big/wide: -->
+    <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
+    <!-- big/tall: -->
+    <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
+    <!-- small: -->
+    <image src="colors-8x16-parDefault.svg" class="small tr"/>
+    <image src="colors-8x16-parDefault.svg" class="small bl"/>
+    <image src="colors-8x16-parDefault.svg" class="small tl"/>
+    <image src="colors-8x16-parDefault.svg" class="small br"/>
+    <image src="colors-8x16-parDefault.svg" class="small tc"/>
+    <image src="colors-8x16-parDefault.svg" class="small cr"/>
+    <image src="colors-8x16-parDefault.svg" class="small"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-position-png-001-ref.html b/layout/reftests/xul/object-position-png-001-ref.html
new file mode 100644
index 000000000..4a1267a4f
--- /dev/null
+++ b/layout/reftests/xul/object-position-png-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("colors-16x8.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { background-position: 50%  -7% }
+      .op_y13  { background-position: 50%  13% }
+      .op_y23  { background-position: 50%  23% }
+      .op_y50  { background-position: 50%  50% }
+      .op_y75  { background-position: 50%  75% }
+      .op_y88  { background-position: 50%  88% }
+      .op_y111 { background-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_y-7"></div>
+    <div class="op_y13"></div>
+    <div class="op_y23"></div>
+    <div class="op_y50"></div>
+    <div class="op_y75"></div>
+    <div class="op_y88"></div>
+    <div class="op_y111"></div>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-position-png-001.xul b/layout/reftests/xul/object-position-png-001.xul
new file mode 100644
index 000000000..e216dc849
--- /dev/null
+++ b/layout/reftests/xul/object-position-png-001.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+  ]]></style>
+  <hbox>
+    <image src="colors-16x8.png" class="op_y-7"/>
+    <image src="colors-16x8.png" class="op_y13"/>
+    <image src="colors-16x8.png" class="op_y23"/>
+    <image src="colors-16x8.png" class="op_y50"/>
+    <image src="colors-16x8.png" class="op_y75"/>
+    <image src="colors-16x8.png" class="op_y88"/>
+    <image src="colors-16x8.png" class="op_y111"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/object-position-png-002-ref.html b/layout/reftests/xul/object-position-png-002-ref.html
new file mode 100644
index 000000000..8c687d3e9
--- /dev/null
+++ b/layout/reftests/xul/object-position-png-002-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("colors-8x16.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { background-position:  -7% 50% }
+      .op_x13  { background-position:  13% 50% }
+      .op_x23  { background-position:  23% 50% }
+      .op_x50  { background-position:  50% 50% }
+      .op_x75  { background-position:  75% 50% }
+      .op_x88  { background-position:  88% 50% }
+      .op_x111 { background-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_x-7"></div>
+    <div class="op_x13"></div>
+    <div class="op_x23"></div>
+    <div class="op_x50"></div>
+    <div class="op_x75"></div>
+    <div class="op_x88"></div>
+    <div class="op_x111"></div>
+  </body>
+</html>
diff --git a/layout/reftests/xul/object-position-png-002.xul b/layout/reftests/xul/object-position-png-002.xul
new file mode 100644
index 000000000..62a2035b3
--- /dev/null
+++ b/layout/reftests/xul/object-position-png-002.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+  ]]></style>
+  <hbox>
+    <image src="colors-8x16.png" class="op_x-7"/>
+    <image src="colors-8x16.png" class="op_x13"/>
+    <image src="colors-8x16.png" class="op_x23"/>
+    <image src="colors-8x16.png" class="op_x50"/>
+    <image src="colors-8x16.png" class="op_x75"/>
+    <image src="colors-8x16.png" class="op_x88"/>
+    <image src="colors-8x16.png" class="op_x111"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/reftest-stylo.list b/layout/reftests/xul/reftest-stylo.list
new file mode 100644
index 000000000..e1d13825f
--- /dev/null
+++ b/layout/reftests/xul/reftest-stylo.list
@@ -0,0 +1,90 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+skip-if((B2G&&browserIsRemote)||Mulet) == menuitem-key.xul menuitem-key.xul
+# Initial mulet triage: parity with B2G/B2G Desktop
+# these random-if(Android) are due to differences between Android Native & Xul, see bug 732569
+random-if(Android||B2G) skip-if((B2G&&browserIsRemote)||Mulet) == menulist-shrinkwrap-1.xul menulist-shrinkwrap-1.xul
+# Initial mulet triage: parity with B2G/B2G Desktop
+random-if(Android||B2G) fails-if(winWidget) skip-if((B2G&&browserIsRemote)||Mulet) == menulist-shrinkwrap-2.xul menulist-shrinkwrap-2.xul
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if((B2G&&browserIsRemote)||Mulet) == textbox-overflow-1.xul textbox-overflow-1.xul
+# for bug 749658
+# Initial mulet triage: parity with B2G/B2G Desktop
+# accesskeys are not normally displayed on Mac, so skip this test
+skip-if(cocoaWidget) skip-if((B2G&&browserIsRemote)||Mulet) == accesskey.xul accesskey.xul
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(cocoaWidget) fails-if(browserIsRemote&&d2d) fuzzy-if(xulRuntime.widgetToolkit=="gtk3",1,11) skip-if((B2G&&browserIsRemote)||Mulet) == tree-row-outline-1.xul tree-row-outline-1.xul
+# Initial mulet triage: parity with B2G/B2G Desktop, win8: bug 1254832
+skip-if((B2G&&browserIsRemote)||Mulet) == tree-row-outline-1.xul tree-row-outline-1.xul
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if((B2G&&browserIsRemote)||Mulet) == text-small-caps-1.xul text-small-caps-1.xul
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if((B2G&&browserIsRemote)||Mulet) fuzzy-if(skiaContent,1,60) fuzzy-if(cocoaWidget&&browserIsRemote&&!skiaContent,1,31) fuzzy-if(winWidget&&browserIsRemote&&layersGPUAccelerated,1,50) == inactive-fixed-bg-bug1205630.xul inactive-fixed-bg-bug1205630.xul
+skip-if((B2G&&browserIsRemote)||Mulet) fuzzy-if(skiaContent,1,60) fuzzy-if(cocoaWidget&&browserIsRemote&&!skiaContent,1,31) fuzzy-if(winWidget&&browserIsRemote&&layersGPUAccelerated,1,50) == inactive-fixed-bg-bug1272525.xul inactive-fixed-bg-bug1272525.xul
+
+# Tests for XUL <image> with 'object-fit' & 'object-position':
+# These tests should be very similar to tests in our w3c-css/submitted/images3
+# reftest directory. They live here because they use XUL, and it
+# wouldn't be fair of us to make a W3C testsuite implicitly depend on XUL.
+# NOTE: These are marked "skip-if(Mulet)" for now, because they seem to impact
+# the reftest-chunking in a way that makes later tests fail (likely through no
+# fault of these tests here, aside from their impact on chunking). See:
+#   https://bugzilla.mozilla.org/show_bug.cgi?id=1170052#c25
+# And they're skipped on B2G Emulator (like everything else in this file)
+# because XUL reftests trigger error pages on that platform.
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-contain-png-001.xul object-fit-contain-png-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-contain-png-002.xul object-fit-contain-png-002.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-contain-svg-001.xul object-fit-contain-svg-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-contain-svg-002.xul object-fit-contain-svg-002.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-contain-svg-003.xul object-fit-contain-svg-003.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-contain-svg-004.xul object-fit-contain-svg-004.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-contain-svg-005.xul object-fit-contain-svg-005.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-contain-svg-006.xul object-fit-contain-svg-006.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-cover-png-001.xul object-fit-cover-png-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-cover-png-002.xul object-fit-cover-png-002.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-cover-svg-001.xul object-fit-cover-svg-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-cover-svg-002.xul object-fit-cover-svg-002.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-cover-svg-003.xul object-fit-cover-svg-003.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-cover-svg-004.xul object-fit-cover-svg-004.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-cover-svg-005.xul object-fit-cover-svg-005.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-cover-svg-006.xul object-fit-cover-svg-006.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-fill-png-001.xul object-fit-fill-png-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-fill-png-002.xul object-fit-fill-png-002.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-fill-svg-001.xul object-fit-fill-svg-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-fill-svg-002.xul object-fit-fill-svg-002.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-fill-svg-003.xul object-fit-fill-svg-003.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-fill-svg-004.xul object-fit-fill-svg-004.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-fill-svg-005.xul object-fit-fill-svg-005.xul
+# bug 1092436
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-fill-svg-006.xul object-fit-fill-svg-006.xul
+# bug 1092436
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-none-png-001.xul object-fit-none-png-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-none-png-002.xul object-fit-none-png-002.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-none-svg-001.xul object-fit-none-svg-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-none-svg-002.xul object-fit-none-svg-002.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-none-svg-003.xul object-fit-none-svg-003.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-none-svg-004.xul object-fit-none-svg-004.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-none-svg-005.xul object-fit-none-svg-005.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-none-svg-006.xul object-fit-none-svg-006.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-scale-down-png-001.xul object-fit-scale-down-png-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-scale-down-png-002.xul object-fit-scale-down-png-002.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-scale-down-svg-001.xul object-fit-scale-down-svg-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-scale-down-svg-002.xul object-fit-scale-down-svg-002.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-scale-down-svg-003.xul object-fit-scale-down-svg-003.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-scale-down-svg-004.xul object-fit-scale-down-svg-004.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-scale-down-svg-005.xul object-fit-scale-down-svg-005.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-fit-scale-down-svg-006.xul object-fit-scale-down-svg-006.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-position-png-001.xul object-position-png-001.xul
+skip-if((B2G&&browserIsRemote)||Mulet) == object-position-png-002.xul object-position-png-002.xul
+
+# Tests for rendering SVG images in a XUL <treecell>:
+# XXXdholbert: These are marked as "random" right now, since they might not
+# render the images they trying to test in time for the reftest snapshot, per
+# bug 1218954. Once that bug is fixed, we should replace the "random"
+# annotation with "skip-if((B2G&&browserIsRemote)||Mulet)", like above tests.
+skip == treecell-image-svg-1a.xul treecell-image-svg-1a.xul
+# bug 1218954
+skip == treecell-image-svg-1b.xul treecell-image-svg-1b.xul
+# bug 1218954
+
+skip-if((B2G&&browserIsRemote)||Mulet) == treechildren-padding-percent-1.xul treechildren-padding-percent-1.xul
diff --git a/layout/reftests/xul/reftest.list b/layout/reftests/xul/reftest.list
new file mode 100644
index 000000000..da09b7c81
--- /dev/null
+++ b/layout/reftests/xul/reftest.list
@@ -0,0 +1,70 @@
+== menuitem-key.xul menuitem-key-ref.xul
+# these random-if(Android) are due to differences between Android Native & Xul, see bug 732569
+random-if(Android) == menulist-shrinkwrap-1.xul menulist-shrinkwrap-1-ref.xul
+random-if(Android) fails-if(winWidget) == menulist-shrinkwrap-2.xul menulist-shrinkwrap-2-ref.xul
+== textbox-overflow-1.xul textbox-overflow-1-ref.xul # for bug 749658
+# accesskeys are not normally displayed on Mac, so skip this test
+skip-if(cocoaWidget) == accesskey.xul accesskey-ref.xul
+fails-if(cocoaWidget) fails-if(browserIsRemote&&dwrite) fuzzy-if(xulRuntime.widgetToolkit=="gtk3",1,11) == tree-row-outline-1.xul tree-row-outline-1-ref.xul # win8: bug 1254832
+!= tree-row-outline-1.xul tree-row-outline-1-notref.xul
+== text-crop.xul text-crop-ref.xul
+== text-small-caps-1.xul text-small-caps-1-ref.xul
+fuzzy-if(skiaContent,1,60) fuzzy-if(cocoaWidget&&browserIsRemote&&!skiaContent,1,31) fuzzy-if(winWidget&&browserIsRemote&&layersGPUAccelerated,1,50) == inactive-fixed-bg-bug1205630.xul inactive-fixed-bg-bug1205630-ref.html
+fuzzy-if(skiaContent,1,60) fuzzy-if(cocoaWidget&&browserIsRemote&&!skiaContent,1,31) fuzzy-if(winWidget&&browserIsRemote&&layersGPUAccelerated,1,50) == inactive-fixed-bg-bug1272525.xul inactive-fixed-bg-bug1272525-ref.html
+
+# Tests for XUL <image> with 'object-fit' & 'object-position':
+# These tests should be very similar to tests in our w3c-css/submitted/images3
+# reftest directory. They live here because they use XUL, and it
+# wouldn't be fair of us to make a W3C testsuite implicitly depend on XUL.
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+== object-fit-contain-png-001.xul object-fit-contain-png-001-ref.html
+== object-fit-contain-png-002.xul object-fit-contain-png-002-ref.html
+== object-fit-contain-svg-001.xul object-fit-contain-svg-001-ref.html
+== object-fit-contain-svg-002.xul object-fit-contain-svg-002-ref.html
+== object-fit-contain-svg-003.xul object-fit-contain-svg-003-ref.html
+== object-fit-contain-svg-004.xul object-fit-contain-svg-004-ref.html
+== object-fit-contain-svg-005.xul object-fit-contain-svg-005-ref.html
+== object-fit-contain-svg-006.xul object-fit-contain-svg-006-ref.html
+== object-fit-cover-png-001.xul object-fit-cover-png-001-ref.html
+== object-fit-cover-png-002.xul object-fit-cover-png-002-ref.html
+== object-fit-cover-svg-001.xul object-fit-cover-svg-001-ref.html
+== object-fit-cover-svg-002.xul object-fit-cover-svg-002-ref.html
+== object-fit-cover-svg-003.xul object-fit-cover-svg-003-ref.html
+== object-fit-cover-svg-004.xul object-fit-cover-svg-004-ref.html
+== object-fit-cover-svg-005.xul object-fit-cover-svg-005-ref.html
+== object-fit-cover-svg-006.xul object-fit-cover-svg-006-ref.html
+== object-fit-fill-png-001.xul object-fit-fill-png-001-ref.html
+== object-fit-fill-png-002.xul object-fit-fill-png-002-ref.html
+== object-fit-fill-svg-001.xul object-fit-fill-svg-001-ref.html
+== object-fit-fill-svg-002.xul object-fit-fill-svg-002-ref.html
+== object-fit-fill-svg-003.xul object-fit-fill-svg-003-ref.html
+== object-fit-fill-svg-004.xul object-fit-fill-svg-004-ref.html
+fails == object-fit-fill-svg-005.xul object-fit-fill-svg-005-ref.html # bug 1092436
+fails == object-fit-fill-svg-006.xul object-fit-fill-svg-006-ref.html # bug 1092436
+== object-fit-none-png-001.xul object-fit-none-png-001-ref.html
+== object-fit-none-png-002.xul object-fit-none-png-002-ref.html
+== object-fit-none-svg-001.xul object-fit-none-svg-001-ref.html
+== object-fit-none-svg-002.xul object-fit-none-svg-002-ref.html
+== object-fit-none-svg-003.xul object-fit-none-svg-003-ref.html
+== object-fit-none-svg-004.xul object-fit-none-svg-004-ref.html
+== object-fit-none-svg-005.xul object-fit-none-svg-005-ref.html
+== object-fit-none-svg-006.xul object-fit-none-svg-006-ref.html
+== object-fit-scale-down-png-001.xul object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-002.xul object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-svg-001.xul object-fit-scale-down-svg-001-ref.html
+== object-fit-scale-down-svg-002.xul object-fit-scale-down-svg-002-ref.html
+== object-fit-scale-down-svg-003.xul object-fit-scale-down-svg-003-ref.html
+== object-fit-scale-down-svg-004.xul object-fit-scale-down-svg-004-ref.html
+== object-fit-scale-down-svg-005.xul object-fit-scale-down-svg-005-ref.html
+== object-fit-scale-down-svg-006.xul object-fit-scale-down-svg-006-ref.html
+== object-position-png-001.xul object-position-png-001-ref.html
+== object-position-png-002.xul object-position-png-002-ref.html
+
+# Tests for rendering SVG images in a XUL <treecell>:
+# XXXdholbert: These are marked as "random" right now, since they might not
+# render the images they trying to test in time for the reftest snapshot, per
+# bug 1218954.
+skip == treecell-image-svg-1a.xul treecell-image-svg-1-ref.xul # bug 1218954
+skip == treecell-image-svg-1b.xul treecell-image-svg-1-ref.xul # bug 1218954
+
+== treechildren-padding-percent-1.xul treechildren-padding-percent-1-ref.xul
diff --git a/layout/reftests/xul/text-crop-ref.xul b/layout/reftests/xul/text-crop-ref.xul
new file mode 100644
index 000000000..b4d8c123d
--- /dev/null
+++ b/layout/reftests/xul/text-crop-ref.xul
@@ -0,0 +1,33 @@
+<?xml version="1.0"?>
+<window class="reftest-wait"
+        align="left"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <html:style type="text/css">
+    @font-face {
+      font-family: firasans;
+      src: url(../fonts/fira/FiraSans-Regular.otf);
+    }
+    vbox {
+      font-family: firasans;
+      font-size: 40px;
+    }
+  </html:style>
+<vbox width="230">
+  <label id="start" value="" />
+  <label id="end" value="" />
+  <label id="center" value="" />
+</vbox>
+<script>
+<![CDATA[
+function text(n) {
+  return "\u{1F310}".repeat(n);
+}
+var e = "\u{2026}";
+document.getElementById("start").value = e + text(4);
+document.getElementById("end").value = text(4) + e;
+document.getElementById("center").value = text(2) + e + text(2);
+document.documentElement.className = "";
+]]>
+</script>
+</window>
diff --git a/layout/reftests/xul/text-crop.xul b/layout/reftests/xul/text-crop.xul
new file mode 100644
index 000000000..5e45400ec
--- /dev/null
+++ b/layout/reftests/xul/text-crop.xul
@@ -0,0 +1,32 @@
+<?xml version="1.0"?>
+<window class="reftest-wait"
+        align="left"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <html:style type="text/css">
+    @font-face {
+      font-family: firasans;
+      src: url(../fonts/fira/FiraSans-Regular.otf);
+    }
+    vbox {
+      font-family: firasans;
+      font-size: 40px;
+    }
+  </html:style>
+<vbox width="230">
+  <label id="start" value="" crop="start" />
+  <label id="end" value="" crop="end" />
+  <label id="center" value="" crop="center" />
+</vbox>
+<script>
+<![CDATA[
+function text(n) {
+  return "\u{1F310}".repeat(n);
+}
+document.getElementById("start").value = text(10);
+document.getElementById("end").value = text(10);
+document.getElementById("center").value = text(10);
+document.documentElement.className = "";
+]]>
+</script>
+</window>
diff --git a/layout/reftests/xul/text-small-caps-1-ref.xul b/layout/reftests/xul/text-small-caps-1-ref.xul
new file mode 100644
index 000000000..e3df45e14
--- /dev/null
+++ b/layout/reftests/xul/text-small-caps-1-ref.xul
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="left">
+<hbox style="font: 40px monospace;" align="baseline">
+  <label value="lowercase"/>
+  <label value="SMALLCAPS" style="font-size: 32px;"/>
+  <label value="CAPITALS"/>
+</hbox>
+</window>
diff --git a/layout/reftests/xul/text-small-caps-1.xul b/layout/reftests/xul/text-small-caps-1.xul
new file mode 100644
index 000000000..e1d1d77be
--- /dev/null
+++ b/layout/reftests/xul/text-small-caps-1.xul
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="left">
+<hbox style="font: 40px monospace;">
+  <label value="lowercase" style="font-variant: normal;"/>
+  <label value="smallcaps" style="font-variant: small-caps;"/>
+  <label value="CAPITALS" style="font-variant: small-caps;"/>
+</hbox>
+</window>
diff --git a/layout/reftests/xul/textbox-overflow-1-ref.xul b/layout/reftests/xul/textbox-overflow-1-ref.xul
new file mode 100644
index 000000000..d6d3a5376
--- /dev/null
+++ b/layout/reftests/xul/textbox-overflow-1-ref.xul
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<!-- bug 749658 - The cropped label should *not* cause a scroll bar to appear.
+     If it does, the scrollbars in the testcase and reference will differ
+     because the total scroll-overflow extent will be different. -->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="left">
+  <hbox width="150px" style="overflow: scroll">
+    <label value="A very long label for a small item"
+           width="120px" crop="right"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/textbox-overflow-1.xul b/layout/reftests/xul/textbox-overflow-1.xul
new file mode 100644
index 000000000..431d29ba8
--- /dev/null
+++ b/layout/reftests/xul/textbox-overflow-1.xul
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<!-- bug 749658 - The cropped label should *not* cause a scroll bar to appear.
+     If it does, the scrollbars in the testcase and reference will differ
+     because the total scroll-overflow extent will be different. -->
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="left">
+  <hbox width="150px" style="overflow: scroll">
+    <label value="A very long label for a small item that should not trigger a scroll bar"
+           width="120px" crop="right"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/xul/tree-row-outline-1-notref.xul b/layout/reftests/xul/tree-row-outline-1-notref.xul
new file mode 100644
index 000000000..736d42dae
--- /dev/null
+++ b/layout/reftests/xul/tree-row-outline-1-notref.xul
@@ -0,0 +1,20 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        >
+
+  <tree seltype="single" flex="1">
+    <treecols>
+      <treecol flex="1"/>
+      <treecol flex="1"/>
+    </treecols>
+    <treechildren>
+      <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+      <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+      <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+    </treechildren>
+  </tree>
+
+</window>
diff --git a/layout/reftests/xul/tree-row-outline-1-ref.xul b/layout/reftests/xul/tree-row-outline-1-ref.xul
new file mode 100644
index 000000000..006d836ac
--- /dev/null
+++ b/layout/reftests/xul/tree-row-outline-1-ref.xul
@@ -0,0 +1,30 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        >
+
+  <html:style>
+    <![CDATA[
+
+      treechildren::-moz-tree-row(odd) {
+        border: 2px solid blue;
+      }
+
+    ]]>
+  </html:style>
+
+  <tree seltype="single" flex="1">
+    <treecols>
+      <treecol flex="1"/>
+      <treecol flex="1"/>
+    </treecols>
+    <treechildren>
+      <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+      <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+      <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+    </treechildren>
+  </tree>
+
+</window>
diff --git a/layout/reftests/xul/tree-row-outline-1.xul b/layout/reftests/xul/tree-row-outline-1.xul
new file mode 100644
index 000000000..4b0af1d96
--- /dev/null
+++ b/layout/reftests/xul/tree-row-outline-1.xul
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        >
+
+  <html:style>
+    <![CDATA[
+
+      treechildren::-moz-tree-row(odd) {
+        outline: 2px solid blue;
+        outline-offset: -2px;
+      }
+
+    ]]>
+  </html:style>
+
+  <tree seltype="single" flex="1">
+    <treecols>
+      <treecol flex="1"/>
+      <treecol flex="1"/>
+    </treecols>
+    <treechildren>
+      <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+      <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+      <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem>
+    </treechildren>
+  </tree>
+
+</window>
diff --git a/layout/reftests/xul/treecell-image-svg-1-ref.xul b/layout/reftests/xul/treecell-image-svg-1-ref.xul
new file mode 100644
index 000000000..029b140f0
--- /dev/null
+++ b/layout/reftests/xul/treecell-image-svg-1-ref.xul
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <tree seltype="single" flex="1">
+    <treecols>
+      <treecol flex="1"/>
+    </treecols>
+    <treechildren>
+      <treeitem>
+        <treerow>
+          <treecell src="colors-16x8.png"/>
+        </treerow>
+      </treeitem>
+    </treechildren>
+  </tree>
+</window>
diff --git a/layout/reftests/xul/treecell-image-svg-1a.xul b/layout/reftests/xul/treecell-image-svg-1a.xul
new file mode 100644
index 000000000..d48119034
--- /dev/null
+++ b/layout/reftests/xul/treecell-image-svg-1a.xul
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <tree seltype="single" flex="1">
+    <treecols>
+      <treecol flex="1"/>
+    </treecols>
+    <treechildren>
+      <treeitem>
+        <treerow>
+          <treecell src="colors-16x8.svg"/>
+        </treerow>
+      </treeitem>
+    </treechildren>
+  </tree>
+</window>
diff --git a/layout/reftests/xul/treecell-image-svg-1b.xul b/layout/reftests/xul/treecell-image-svg-1b.xul
new file mode 100644
index 000000000..f13c138fd
--- /dev/null
+++ b/layout/reftests/xul/treecell-image-svg-1b.xul
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <tree seltype="single" flex="1">
+    <treecols>
+      <treecol flex="1"/>
+    </treecols>
+    <treechildren>
+      <treeitem>
+        <treerow>
+          <treecell src="colors-16x8-noSize.svg"/>
+        </treerow>
+      </treeitem>
+    </treechildren>
+  </tree>
+</window>
diff --git a/layout/reftests/xul/treechildren-padding-percent-1-ref.xul b/layout/reftests/xul/treechildren-padding-percent-1-ref.xul
new file mode 100644
index 000000000..31e803c7f
--- /dev/null
+++ b/layout/reftests/xul/treechildren-padding-percent-1-ref.xul
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style>
+  </style>
+  <tree seltype="single" flex="1">
+    <treecols>
+      <treecol flex="1"/>
+    </treecols>
+    <treechildren>
+      <treeitem>
+        <treerow>
+          <treecell label="I am a treecell"></treecell>
+        </treerow>
+      </treeitem>
+    </treechildren>
+  </tree>
+</window>
diff --git a/layout/reftests/xul/treechildren-padding-percent-1.xul b/layout/reftests/xul/treechildren-padding-percent-1.xul
new file mode 100644
index 000000000..183471234
--- /dev/null
+++ b/layout/reftests/xul/treechildren-padding-percent-1.xul
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style>
+  </style>
+  <tree seltype="single" flex="1">
+    <treecols>
+      <treecol flex="1"/>
+    </treecols>
+    <treechildren style="padding: 5%">
+      <treeitem>
+        <treerow>
+          <treecell label="I am a treecell"></treecell>
+        </treerow>
+      </treeitem>
+    </treechildren>
+  </tree>
+</window>