Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /layout/reftests/w3c-css/submitted/images3
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
251 files changed, 18385 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html
new file mode 100644
index 000000000..8b5cce62b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html
new file mode 100644
index 000000000..a6dfd9581
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html
new file mode 100644
index 000000000..572d30eee
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.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 Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html
new file mode 100644
index 000000000..39bbf249d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.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 Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html
new file mode 100644
index 000000000..b126b4816
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.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 Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html
new file mode 100644
index 000000000..66c165e99
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.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 Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html
new file mode 100644
index 000000000..337775d96
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html
new file mode 100644
index 000000000..4e49d0fbf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html
new file mode 100644
index 000000000..e42f05f03
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.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 Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html
new file mode 100644
index 000000000..b03bafe86
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.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 Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html
new file mode 100644
index 000000000..f4aa820e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.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 Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html
new file mode 100644
index 000000000..f18e4818a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.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 Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html
new file mode 100644
index 000000000..84fa4d5ac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.html
new file mode 100644
index 000000000..f067b335c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html
new file mode 100644
index 000000000..48098656f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html
new file mode 100644
index 000000000..4debef17e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html
new file mode 100644
index 000000000..ff6cb4b06
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html
new file mode 100644
index 000000000..3a8a5b542
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.html
new file mode 100644
index 000000000..5c82003b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html
new file mode 100644
index 000000000..bc8703c97
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html
new file mode 100644
index 000000000..76f85f8ca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html
new file mode 100644
index 000000000..b8551be1a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html
new file mode 100644
index 000000000..fde7f9fc9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.html
new file mode 100644
index 000000000..34b223601
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html
new file mode 100644
index 000000000..2c9ce62f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html
new file mode 100644
index 000000000..9bf111b12
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html
new file mode 100644
index 000000000..87e37f3a4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html
new file mode 100644
index 000000000..25e768080
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.html
new file mode 100644
index 000000000..4e4831da0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html
new file mode 100644
index 000000000..27769a8ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html
new file mode 100644
index 000000000..8db408680
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html
new file mode 100644
index 000000000..0a4502b52
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html
new file mode 100644
index 000000000..c9089343c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.html
new file mode 100644
index 000000000..f4a8ad0fa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html
new file mode 100644
index 000000000..9c9b35b0e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html
new file mode 100644
index 000000000..5bff95aa5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html
new file mode 100644
index 000000000..fd2f2fe69
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html
new file mode 100644
index 000000000..21f9f2f29
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.html
new file mode 100644
index 000000000..5914ee567
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html
new file mode 100644
index 000000000..1426a30bd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html
new file mode 100644
index 000000000..c0de015b3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html
new file mode 100644
index 000000000..1fcc56ae1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html
new file mode 100644
index 000000000..9245b71a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html
new file mode 100644
index 000000000..f2a26a67c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html
new file mode 100644
index 000000000..e39b710bc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.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 Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html
new file mode 100644
index 000000000..7d88c1a6d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.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 Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html
new file mode 100644
index 000000000..e0e657099
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.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 Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html
new file mode 100644
index 000000000..49eb6dc32
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.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 Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html
new file mode 100644
index 000000000..ce31bc73d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html
new file mode 100644
index 000000000..ac0f1da74
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html
new file mode 100644
index 000000000..dff433a9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.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 Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html
new file mode 100644
index 000000000..0c595c3e4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.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 Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html
new file mode 100644
index 000000000..1148a6ee2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.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 Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html
new file mode 100644
index 000000000..937be0c17
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.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 Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html
new file mode 100644
index 000000000..b1539f927
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.html
new file mode 100644
index 000000000..5ab74f185
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html
new file mode 100644
index 000000000..b0d82e47e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html
new file mode 100644
index 000000000..78c6b87cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html
new file mode 100644
index 000000000..3a5f3bf6d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html
new file mode 100644
index 000000000..86706084f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.html
new file mode 100644
index 000000000..48f3fc53a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html
new file mode 100644
index 000000000..a7a78b883
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html
new file mode 100644
index 000000000..fd0050ff2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html
new file mode 100644
index 000000000..272b3c714
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html
new file mode 100644
index 000000000..18aa36243
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.html
new file mode 100644
index 000000000..75b4ba6e9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html
new file mode 100644
index 000000000..b764d3db7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html
new file mode 100644
index 000000000..aca67ff23
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html
new file mode 100644
index 000000000..76f54d6fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html
new file mode 100644
index 000000000..cf0f747f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.html
new file mode 100644
index 000000000..17a20a97f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html
new file mode 100644
index 000000000..7094a04b2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html
new file mode 100644
index 000000000..954bbb459
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html
new file mode 100644
index 000000000..d8fc343f3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html
new file mode 100644
index 000000000..374b0ac7e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.html
new file mode 100644
index 000000000..d4d7e9199
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html
new file mode 100644
index 000000000..6b9ea338c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html
new file mode 100644
index 000000000..8ec4dcbf2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html
new file mode 100644
index 000000000..2aaaf66a3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html
new file mode 100644
index 000000000..2e0ecc7d0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.html
new file mode 100644
index 000000000..278d195a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html
new file mode 100644
index 000000000..325b4c833
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html
new file mode 100644
index 000000000..8ff547f8f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html
new file mode 100644
index 000000000..8245fca4e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html
new file mode 100644
index 000000000..a7ed886b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html
new file mode 100644
index 000000000..bdf547e19
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html
new file mode 100644
index 000000000..b36e1491f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.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 Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html
new file mode 100644
index 000000000..1bf280d41
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.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 Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html
new file mode 100644
index 000000000..55f75245a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.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 Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html
new file mode 100644
index 000000000..0299aefc1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.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 Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html
new file mode 100644
index 000000000..a6e9f59d6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html
new file mode 100644
index 000000000..1a851bd6d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html
new file mode 100644
index 000000000..3f5dc254d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.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 Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html
new file mode 100644
index 000000000..708a77207
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.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 Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html
new file mode 100644
index 000000000..9b8433ff4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.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 Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html
new file mode 100644
index 000000000..fd51e9274
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.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 Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html
new file mode 100644
index 000000000..afb32785a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.html
new file mode 100644
index 000000000..a907f3841
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html
new file mode 100644
index 000000000..487cf7c9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html
new file mode 100644
index 000000000..7498dc1a8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html
new file mode 100644
index 000000000..40c80f8f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html
new file mode 100644
index 000000000..13c4d8403
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.html
new file mode 100644
index 000000000..2b1cb19fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html
new file mode 100644
index 000000000..7ecac72ae
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html
new file mode 100644
index 000000000..2b8335002
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html
new file mode 100644
index 000000000..d2527daff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html
new file mode 100644
index 000000000..ab27b3d71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.html
new file mode 100644
index 000000000..bc52a6e60
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html
new file mode 100644
index 000000000..26e251e66
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html
new file mode 100644
index 000000000..dabf5685f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html
new file mode 100644
index 000000000..a8fd8c21a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html
new file mode 100644
index 000000000..70c948796
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.html
new file mode 100644
index 000000000..412721508
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html
new file mode 100644
index 000000000..483849c1e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html
new file mode 100644
index 000000000..4236112d5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html
new file mode 100644
index 000000000..6032b19e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html
new file mode 100644
index 000000000..c8e4ce1e7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.html
new file mode 100644
index 000000000..8dc338e2f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html
new file mode 100644
index 000000000..67d086d35
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html
new file mode 100644
index 000000000..ca9ba1c6b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html
new file mode 100644
index 000000000..54402d8c0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html
new file mode 100644
index 000000000..85883fe9d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.html
new file mode 100644
index 000000000..a5cb34316
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html
new file mode 100644
index 000000000..eceb363da
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html
new file mode 100644
index 000000000..05a333915
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html
new file mode 100644
index 000000000..c8e9ff2c1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html
new file mode 100644
index 000000000..3b151feba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html
new file mode 100644
index 000000000..c984fefb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html
new file mode 100644
index 000000000..22417890c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.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 Test: 'object-fit: none' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html
new file mode 100644
index 000000000..200ac3daf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.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 Test: 'object-fit: none' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html
new file mode 100644
index 000000000..4b2659a2d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.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 Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html
new file mode 100644
index 000000000..3e18c7960
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.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 Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html
new file mode 100644
index 000000000..f3a914f77
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html
new file mode 100644
index 000000000..df58f407d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html
new file mode 100644
index 000000000..9d9146523
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.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 Test: 'object-fit: none' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html
new file mode 100644
index 000000000..57c66a35d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.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 Test: 'object-fit: none' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html
new file mode 100644
index 000000000..a34f947cd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.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 Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html
new file mode 100644
index 000000000..7b1ee9a7d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.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 Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html
new file mode 100644
index 000000000..3332452df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.html
new file mode 100644
index 000000000..eb40852da
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html
new file mode 100644
index 000000000..128f6e4b5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html
new file mode 100644
index 000000000..8df5bfb5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html
new file mode 100644
index 000000000..9e82eb5e4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html
new file mode 100644
index 000000000..0e48003ec
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.html
new file mode 100644
index 000000000..e7055bb3f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html
new file mode 100644
index 000000000..dbcba47ca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html
new file mode 100644
index 000000000..c6d017bb8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html
new file mode 100644
index 000000000..69fa42493
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html
new file mode 100644
index 000000000..33a01176f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.html
new file mode 100644
index 000000000..f90d1f8c7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html
new file mode 100644
index 000000000..769c10b46
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html
new file mode 100644
index 000000000..04ff94b78
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html
new file mode 100644
index 000000000..c1963da6e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html
new file mode 100644
index 000000000..757708cac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.html
new file mode 100644
index 000000000..e9591d3bd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html
new file mode 100644
index 000000000..d9d0844ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html
new file mode 100644
index 000000000..91c7610cf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html
new file mode 100644
index 000000000..2c9f0c687
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html
new file mode 100644
index 000000000..c8d70e4e0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.html
new file mode 100644
index 000000000..f47196164
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html
new file mode 100644
index 000000000..8407e78a7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html
new file mode 100644
index 000000000..df31fa268
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html
new file mode 100644
index 000000000..aeafcb200
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html
new file mode 100644
index 000000000..016ef6961
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.html
new file mode 100644
index 000000000..f7c0dcdd4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html
new file mode 100644
index 000000000..ea9ea1f79
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html
new file mode 100644
index 000000000..2fe345923
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html
new file mode 100644
index 000000000..47776f29e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html
new file mode 100644
index 000000000..a0df58555
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html
new file mode 100644
index 000000000..d3f7e4289
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html
new file mode 100644
index 000000000..9950736c0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.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 Test: 'object-fit: scale-down' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html
new file mode 100644
index 000000000..f7bad0219
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.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 Test: 'object-fit: scale-down' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html
new file mode 100644
index 000000000..88fe859d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.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 Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html
new file mode 100644
index 000000000..55b24df75
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.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 Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html
new file mode 100644
index 000000000..5162493d2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html
new file mode 100644
index 000000000..ece408d09
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html
new file mode 100644
index 000000000..4cd28c91a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.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 Test: 'object-fit: scale-down' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html
new file mode 100644
index 000000000..db5f38522
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.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 Test: 'object-fit: scale-down' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html
new file mode 100644
index 000000000..43700fd7a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.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 Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html
new file mode 100644
index 000000000..7089444b3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.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 Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html
new file mode 100644
index 000000000..1fad02c91
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html
new file mode 100644
index 000000000..0640de4f3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html
new file mode 100644
index 000000000..0e5954b8d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html
new file mode 100644
index 000000000..15f19bb18
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html
new file mode 100644
index 000000000..b54243369
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html
new file mode 100644
index 000000000..03d4f4c93
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html
new file mode 100644
index 000000000..813ab7ad4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html
new file mode 100644
index 000000000..107ad0192
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html
new file mode 100644
index 000000000..7c9c9be8c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html
new file mode 100644
index 000000000..78bce1974
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html
new file mode 100644
index 000000000..18883dc9a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html
new file mode 100644
index 000000000..65121fcf5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html
new file mode 100644
index 000000000..1e683fcb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html
new file mode 100644
index 000000000..78023f789
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html
new file mode 100644
index 000000000..7070e08a3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html
new file mode 100644
index 000000000..126b62ed3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html
new file mode 100644
index 000000000..cdf7ef12b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html
new file mode 100644
index 000000000..57d2183ff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html
new file mode 100644
index 000000000..ee0ebfd2f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html
new file mode 100644
index 000000000..f7388b6a9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html
new file mode 100644
index 000000000..a107fb464
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html
new file mode 100644
index 000000000..1e09aee16
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html
new file mode 100644
index 000000000..dd5c82b9e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html
new file mode 100644
index 000000000..108d97f28
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html
new file mode 100644
index 000000000..56cbaba98
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html
new file mode 100644
index 000000000..4a06d37b5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html
new file mode 100644
index 000000000..9e6b0dc2c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html
new file mode 100644
index 000000000..29c2f227a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html
new file mode 100644
index 000000000..43358a9b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html
new file mode 100644
index 000000000..fe35065b2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html
new file mode 100644
index 000000000..1027cfc35
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-position-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html
new file mode 100644
index 000000000..20ff1cb93
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <canvas width="16" height="8" class="op_y-7"></canvas>
+    <canvas width="16" height="8" class="op_y13"></canvas>
+    <canvas width="16" height="8" class="op_y23"></canvas>
+    <canvas width="16" height="8" class="op_y50"></canvas>
+    <canvas width="16" height="8" class="op_y75"></canvas>
+    <canvas width="16" height="8" class="op_y88"></canvas>
+    <canvas width="16" height="8" class="op_y111"></canvas>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html
new file mode 100644
index 000000000..cdf35a1fc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size embed element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        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>
+  </head>
+  <body>
+    <embed src="support/colors-16x8.png" class="op_y-7">
+    <embed src="support/colors-16x8.png" class="op_y13">
+    <embed src="support/colors-16x8.png" class="op_y23">
+    <embed src="support/colors-16x8.png" class="op_y50">
+    <embed src="support/colors-16x8.png" class="op_y75">
+    <embed src="support/colors-16x8.png" class="op_y88">
+    <embed src="support/colors-16x8.png" class="op_y111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html
new file mode 100644
index 000000000..d3e2622b4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      img {
+        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>
+  </head>
+  <body>
+    <img src="support/colors-16x8.png" class="op_y-7">
+    <img src="support/colors-16x8.png" class="op_y13">
+    <img src="support/colors-16x8.png" class="op_y23">
+    <img src="support/colors-16x8.png" class="op_y50">
+    <img src="support/colors-16x8.png" class="op_y75">
+    <img src="support/colors-16x8.png" class="op_y88">
+    <img src="support/colors-16x8.png" class="op_y111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html
new file mode 100644
index 000000000..cdf0e0b53
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      object {
+        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>
+  </head>
+  <body>
+    <object data="support/colors-16x8.png" class="op_y-7"></object>
+    <object data="support/colors-16x8.png" class="op_y13"></object>
+    <object data="support/colors-16x8.png" class="op_y23"></object>
+    <object data="support/colors-16x8.png" class="op_y50"></object>
+    <object data="support/colors-16x8.png" class="op_y75"></object>
+    <object data="support/colors-16x8.png" class="op_y88"></object>
+    <object data="support/colors-16x8.png" class="op_y111"></object>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html
new file mode 100644
index 000000000..8b80b9c5b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size video element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      video {
+        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>
+  </head>
+  <body>
+    <video poster="support/colors-16x8.png" class="op_y-7"></video>
+    <video poster="support/colors-16x8.png" class="op_y13"></video>
+    <video poster="support/colors-16x8.png" class="op_y23"></video>
+    <video poster="support/colors-16x8.png" class="op_y50"></video>
+    <video poster="support/colors-16x8.png" class="op_y75"></video>
+    <video poster="support/colors-16x8.png" class="op_y88"></video>
+    <video poster="support/colors-16x8.png" class="op_y111"></video>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html
new file mode 100644
index 000000000..bd14f9cfc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-position-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html
new file mode 100644
index 000000000..5ad030ffb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        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>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <canvas width="8" height="16" class="op_x-7"></canvas>
+    <canvas width="8" height="16" class="op_x13"></canvas>
+    <canvas width="8" height="16" class="op_x23"></canvas>
+    <canvas width="8" height="16" class="op_x50"></canvas>
+    <canvas width="8" height="16" class="op_x75"></canvas>
+    <canvas width="8" height="16" class="op_x88"></canvas>
+    <canvas width="8" height="16" class="op_x111"></canvas>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html
new file mode 100644
index 000000000..749948ae4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size embed element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        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>
+  </head>
+  <body>
+    <embed src="support/colors-8x16.png" class="op_x-7">
+    <embed src="support/colors-8x16.png" class="op_x13">
+    <embed src="support/colors-8x16.png" class="op_x23">
+    <embed src="support/colors-8x16.png" class="op_x50">
+    <embed src="support/colors-8x16.png" class="op_x75">
+    <embed src="support/colors-8x16.png" class="op_x88">
+    <embed src="support/colors-8x16.png" class="op_x111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html
new file mode 100644
index 000000000..88b4a1500
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      img {
+        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>
+  </head>
+  <body>
+    <img src="support/colors-8x16.png" class="op_x-7">
+    <img src="support/colors-8x16.png" class="op_x13">
+    <img src="support/colors-8x16.png" class="op_x23">
+    <img src="support/colors-8x16.png" class="op_x50">
+    <img src="support/colors-8x16.png" class="op_x75">
+    <img src="support/colors-8x16.png" class="op_x88">
+    <img src="support/colors-8x16.png" class="op_x111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html
new file mode 100644
index 000000000..0d507900f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      object {
+        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>
+  </head>
+  <body>
+    <object data="support/colors-8x16.png" class="op_x-7"></object>
+    <object data="support/colors-8x16.png" class="op_x13"></object>
+    <object data="support/colors-8x16.png" class="op_x23"></object>
+    <object data="support/colors-8x16.png" class="op_x50"></object>
+    <object data="support/colors-8x16.png" class="op_x75"></object>
+    <object data="support/colors-8x16.png" class="op_x88"></object>
+    <object data="support/colors-8x16.png" class="op_x111"></object>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html
new file mode 100644
index 000000000..00ace782b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size video element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      video {
+        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>
+  </head>
+  <body>
+    <video poster="support/colors-8x16.png" class="op_x-7"></video>
+    <video poster="support/colors-8x16.png" class="op_x13"></video>
+    <video poster="support/colors-8x16.png" class="op_x23"></video>
+    <video poster="support/colors-8x16.png" class="op_x50"></video>
+    <video poster="support/colors-8x16.png" class="op_x75"></video>
+    <video poster="support/colors-8x16.png" class="op_x88"></video>
+    <video poster="support/colors-8x16.png" class="op_x111"></video>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001-ref.html
new file mode 100644
index 000000000..61c386d88
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-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("support/colors-16x8.svg");
+        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/w3c-css/submitted/images3/object-position-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001e.html
new file mode 100644
index 000000000..05f226cd8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001e.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size embed element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        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>
+  </head>
+  <body>
+    <embed src="support/colors-16x8.svg" class="op_y-7">
+    <embed src="support/colors-16x8.svg" class="op_y13">
+    <embed src="support/colors-16x8.svg" class="op_y23">
+    <embed src="support/colors-16x8.svg" class="op_y50">
+    <embed src="support/colors-16x8.svg" class="op_y75">
+    <embed src="support/colors-16x8.svg" class="op_y88">
+    <embed src="support/colors-16x8.svg" class="op_y111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001i.html
new file mode 100644
index 000000000..eecf0f433
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001i.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size img element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        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>
+  </head>
+  <body>
+    <img src="support/colors-16x8.svg" class="op_y-7">
+    <img src="support/colors-16x8.svg" class="op_y13">
+    <img src="support/colors-16x8.svg" class="op_y23">
+    <img src="support/colors-16x8.svg" class="op_y50">
+    <img src="support/colors-16x8.svg" class="op_y75">
+    <img src="support/colors-16x8.svg" class="op_y88">
+    <img src="support/colors-16x8.svg" class="op_y111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001o.html
new file mode 100644
index 000000000..589999c91
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001o.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size object element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        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>
+  </head>
+  <body>
+    <object data="support/colors-16x8.svg" class="op_y-7"></object>
+    <object data="support/colors-16x8.svg" class="op_y13"></object>
+    <object data="support/colors-16x8.svg" class="op_y23"></object>
+    <object data="support/colors-16x8.svg" class="op_y50"></object>
+    <object data="support/colors-16x8.svg" class="op_y75"></object>
+    <object data="support/colors-16x8.svg" class="op_y88"></object>
+    <object data="support/colors-16x8.svg" class="op_y111"></object>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001p.html
new file mode 100644
index 000000000..8b0b468b2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001p.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size video element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        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>
+  </head>
+  <body>
+    <video poster="support/colors-16x8.svg" class="op_y-7"></video>
+    <video poster="support/colors-16x8.svg" class="op_y13"></video>
+    <video poster="support/colors-16x8.svg" class="op_y23"></video>
+    <video poster="support/colors-16x8.svg" class="op_y50"></video>
+    <video poster="support/colors-16x8.svg" class="op_y75"></video>
+    <video poster="support/colors-16x8.svg" class="op_y88"></video>
+    <video poster="support/colors-16x8.svg" class="op_y111"></video>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002-ref.html
new file mode 100644
index 000000000..d75e5edb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-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("support/colors-8x16.svg");
+        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/w3c-css/submitted/images3/object-position-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002e.html
new file mode 100644
index 000000000..0bde50d0c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002e.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size embed element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        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>
+  </head>
+  <body>
+    <embed src="support/colors-8x16.svg" class="op_x-7">
+    <embed src="support/colors-8x16.svg" class="op_x13">
+    <embed src="support/colors-8x16.svg" class="op_x23">
+    <embed src="support/colors-8x16.svg" class="op_x50">
+    <embed src="support/colors-8x16.svg" class="op_x75">
+    <embed src="support/colors-8x16.svg" class="op_x88">
+    <embed src="support/colors-8x16.svg" class="op_x111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002i.html
new file mode 100644
index 000000000..202b171c3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002i.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size img element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        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>
+  </head>
+  <body>
+    <img src="support/colors-8x16.svg" class="op_x-7">
+    <img src="support/colors-8x16.svg" class="op_x13">
+    <img src="support/colors-8x16.svg" class="op_x23">
+    <img src="support/colors-8x16.svg" class="op_x50">
+    <img src="support/colors-8x16.svg" class="op_x75">
+    <img src="support/colors-8x16.svg" class="op_x88">
+    <img src="support/colors-8x16.svg" class="op_x111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002o.html
new file mode 100644
index 000000000..e05938167
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002o.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size object element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        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>
+  </head>
+  <body>
+    <object data="support/colors-8x16.svg" class="op_x-7"></object>
+    <object data="support/colors-8x16.svg" class="op_x13"></object>
+    <object data="support/colors-8x16.svg" class="op_x23"></object>
+    <object data="support/colors-8x16.svg" class="op_x50"></object>
+    <object data="support/colors-8x16.svg" class="op_x75"></object>
+    <object data="support/colors-8x16.svg" class="op_x88"></object>
+    <object data="support/colors-8x16.svg" class="op_x111"></object>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002p.html
new file mode 100644
index 000000000..3c6b7a3d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002p.html
@@ -0,0 +1,44 @@
+<!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 Test: various 'object-position' values on a fixed-size video element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        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>
+  </head>
+  <body>
+    <video poster="support/colors-8x16.svg" class="op_x-7"></video>
+    <video poster="support/colors-8x16.svg" class="op_x13"></video>
+    <video poster="support/colors-8x16.svg" class="op_x23"></video>
+    <video poster="support/colors-8x16.svg" class="op_x50"></video>
+    <video poster="support/colors-8x16.svg" class="op_x75"></video>
+    <video poster="support/colors-8x16.svg" class="op_x88"></video>
+    <video poster="support/colors-8x16.svg" class="op_x111"></video>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/images3/reftest-stylo.list
new file mode 100644
index 000000000..5dd182187
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/reftest-stylo.list
@@ -0,0 +1,209 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+# Tests for 'object-fit' / 'object-position' with a PNG image
+== object-fit-fill-png-001c.html object-fit-fill-png-001c.html
+fails == object-fit-fill-png-001e.html object-fit-fill-png-001e.html
+== object-fit-fill-png-001i.html object-fit-fill-png-001i.html
+fails == object-fit-fill-png-001o.html object-fit-fill-png-001o.html
+== object-fit-fill-png-001p.html object-fit-fill-png-001p.html
+== object-fit-fill-png-002c.html object-fit-fill-png-002c.html
+fails == object-fit-fill-png-002e.html object-fit-fill-png-002e.html
+== object-fit-fill-png-002i.html object-fit-fill-png-002i.html
+fails == object-fit-fill-png-002o.html object-fit-fill-png-002o.html
+== object-fit-fill-png-002p.html object-fit-fill-png-002p.html
+== object-fit-contain-png-001c.html object-fit-contain-png-001c.html
+fails == object-fit-contain-png-001e.html object-fit-contain-png-001e.html
+== object-fit-contain-png-001i.html object-fit-contain-png-001i.html
+fails == object-fit-contain-png-001o.html object-fit-contain-png-001o.html
+== object-fit-contain-png-001p.html object-fit-contain-png-001p.html
+== object-fit-contain-png-002c.html object-fit-contain-png-002c.html
+fails == object-fit-contain-png-002e.html object-fit-contain-png-002e.html
+== object-fit-contain-png-002i.html object-fit-contain-png-002i.html
+fails == object-fit-contain-png-002o.html object-fit-contain-png-002o.html
+== object-fit-contain-png-002p.html object-fit-contain-png-002p.html
+== object-fit-cover-png-001c.html object-fit-cover-png-001c.html
+fails == object-fit-cover-png-001e.html object-fit-cover-png-001e.html
+== object-fit-cover-png-001i.html object-fit-cover-png-001i.html
+== object-fit-cover-png-001o.html object-fit-cover-png-001o.html
+== object-fit-cover-png-001p.html object-fit-cover-png-001p.html
+== object-fit-cover-png-002c.html object-fit-cover-png-002c.html
+fails == object-fit-cover-png-002e.html object-fit-cover-png-002e.html
+== object-fit-cover-png-002i.html object-fit-cover-png-002i.html
+fails == object-fit-cover-png-002o.html object-fit-cover-png-002o.html
+== object-fit-cover-png-002p.html object-fit-cover-png-002p.html
+skip == object-fit-none-png-001c.html object-fit-none-png-001c.html
+== object-fit-none-png-001e.html object-fit-none-png-001e.html
+== object-fit-none-png-001i.html object-fit-none-png-001i.html
+fails == object-fit-none-png-001o.html object-fit-none-png-001o.html
+== object-fit-none-png-001p.html object-fit-none-png-001p.html
+== object-fit-none-png-002c.html object-fit-none-png-002c.html
+fails == object-fit-none-png-002e.html object-fit-none-png-002e.html
+== object-fit-none-png-002i.html object-fit-none-png-002i.html
+fails == object-fit-none-png-002o.html object-fit-none-png-002o.html
+== object-fit-none-png-002p.html object-fit-none-png-002p.html
+== object-fit-scale-down-png-001c.html object-fit-scale-down-png-001c.html
+== object-fit-scale-down-png-001e.html object-fit-scale-down-png-001e.html
+== object-fit-scale-down-png-001i.html object-fit-scale-down-png-001i.html
+== object-fit-scale-down-png-001o.html object-fit-scale-down-png-001o.html
+== object-fit-scale-down-png-001p.html object-fit-scale-down-png-001p.html
+== object-fit-scale-down-png-002c.html object-fit-scale-down-png-002c.html
+fails == object-fit-scale-down-png-002e.html object-fit-scale-down-png-002e.html
+== object-fit-scale-down-png-002i.html object-fit-scale-down-png-002i.html
+fails == object-fit-scale-down-png-002o.html object-fit-scale-down-png-002o.html
+== object-fit-scale-down-png-002p.html object-fit-scale-down-png-002p.html
+
+# Tests for 'object-fit' / 'object-position' with an SVG image
+fails == object-fit-fill-svg-001e.html object-fit-fill-svg-001e.html
+== object-fit-fill-svg-001i.html object-fit-fill-svg-001i.html
+== object-fit-fill-svg-001o.html object-fit-fill-svg-001o.html
+== object-fit-fill-svg-001p.html object-fit-fill-svg-001p.html
+fails == object-fit-fill-svg-002e.html object-fit-fill-svg-002e.html
+== object-fit-fill-svg-002i.html object-fit-fill-svg-002i.html
+fails == object-fit-fill-svg-002o.html object-fit-fill-svg-002o.html
+== object-fit-fill-svg-002p.html object-fit-fill-svg-002p.html
+fails == object-fit-fill-svg-003e.html object-fit-fill-svg-003e.html
+== object-fit-fill-svg-003i.html object-fit-fill-svg-003i.html
+fails == object-fit-fill-svg-003o.html object-fit-fill-svg-003o.html
+== object-fit-fill-svg-003p.html object-fit-fill-svg-003p.html
+fails == object-fit-fill-svg-004e.html object-fit-fill-svg-004e.html
+== object-fit-fill-svg-004i.html object-fit-fill-svg-004i.html
+== object-fit-fill-svg-004o.html object-fit-fill-svg-004o.html
+== object-fit-fill-svg-004p.html object-fit-fill-svg-004p.html
+== object-fit-fill-svg-005e.html object-fit-fill-svg-005e.html
+# bug 1092436
+== object-fit-fill-svg-005i.html object-fit-fill-svg-005i.html
+# bug 1092436
+== object-fit-fill-svg-005o.html object-fit-fill-svg-005o.html
+# bug 1092436
+== object-fit-fill-svg-005p.html object-fit-fill-svg-005p.html
+# bug 1092436
+fails == object-fit-fill-svg-006e.html object-fit-fill-svg-006e.html
+# bug 1092436
+== object-fit-fill-svg-006i.html object-fit-fill-svg-006i.html
+# bug 1092436
+fails == object-fit-fill-svg-006o.html object-fit-fill-svg-006o.html
+# bug 1092436
+== object-fit-fill-svg-006p.html object-fit-fill-svg-006p.html
+# bug 1092436
+fails skip-if(B2G) == object-fit-contain-svg-001e.html object-fit-contain-svg-001e.html
+== object-fit-contain-svg-001i.html object-fit-contain-svg-001i.html
+fails skip-if(B2G) == object-fit-contain-svg-001o.html object-fit-contain-svg-001o.html
+== object-fit-contain-svg-001p.html object-fit-contain-svg-001p.html
+skip-if(B2G) == object-fit-contain-svg-002e.html object-fit-contain-svg-002e.html
+== object-fit-contain-svg-002i.html object-fit-contain-svg-002i.html
+skip-if(B2G) == object-fit-contain-svg-002o.html object-fit-contain-svg-002o.html
+== object-fit-contain-svg-002p.html object-fit-contain-svg-002p.html
+fails == object-fit-contain-svg-003e.html object-fit-contain-svg-003e.html
+== object-fit-contain-svg-003i.html object-fit-contain-svg-003i.html
+fails == object-fit-contain-svg-003o.html object-fit-contain-svg-003o.html
+== object-fit-contain-svg-003p.html object-fit-contain-svg-003p.html
+== object-fit-contain-svg-004e.html object-fit-contain-svg-004e.html
+== object-fit-contain-svg-004i.html object-fit-contain-svg-004i.html
+== object-fit-contain-svg-004o.html object-fit-contain-svg-004o.html
+== object-fit-contain-svg-004p.html object-fit-contain-svg-004p.html
+fails == object-fit-contain-svg-005e.html object-fit-contain-svg-005e.html
+== object-fit-contain-svg-005i.html object-fit-contain-svg-005i.html
+== object-fit-contain-svg-005o.html object-fit-contain-svg-005o.html
+== object-fit-contain-svg-005p.html object-fit-contain-svg-005p.html
+fails == object-fit-contain-svg-006e.html object-fit-contain-svg-006e.html
+== object-fit-contain-svg-006i.html object-fit-contain-svg-006i.html
+fails == object-fit-contain-svg-006o.html object-fit-contain-svg-006o.html
+== object-fit-contain-svg-006p.html object-fit-contain-svg-006p.html
+== object-fit-cover-svg-001e.html object-fit-cover-svg-001e.html
+== object-fit-cover-svg-001i.html object-fit-cover-svg-001i.html
+== object-fit-cover-svg-001o.html object-fit-cover-svg-001o.html
+== object-fit-cover-svg-001p.html object-fit-cover-svg-001p.html
+skip-if(B2G) == object-fit-cover-svg-002e.html object-fit-cover-svg-002e.html
+== object-fit-cover-svg-002i.html object-fit-cover-svg-002i.html
+fails skip-if(B2G) == object-fit-cover-svg-002o.html object-fit-cover-svg-002o.html
+== object-fit-cover-svg-002p.html object-fit-cover-svg-002p.html
+fails skip-if(B2G) == object-fit-cover-svg-003e.html object-fit-cover-svg-003e.html
+== object-fit-cover-svg-003i.html object-fit-cover-svg-003i.html
+fails skip-if(B2G) == object-fit-cover-svg-003o.html object-fit-cover-svg-003o.html
+== object-fit-cover-svg-003p.html object-fit-cover-svg-003p.html
+fails skip-if(B2G) == object-fit-cover-svg-004e.html object-fit-cover-svg-004e.html
+== object-fit-cover-svg-004i.html object-fit-cover-svg-004i.html
+skip-if(B2G) == object-fit-cover-svg-004o.html object-fit-cover-svg-004o.html
+== object-fit-cover-svg-004p.html object-fit-cover-svg-004p.html
+skip-if(B2G) == object-fit-cover-svg-005e.html object-fit-cover-svg-005e.html
+== object-fit-cover-svg-005i.html object-fit-cover-svg-005i.html
+fails skip-if(B2G) == object-fit-cover-svg-005o.html object-fit-cover-svg-005o.html
+== object-fit-cover-svg-005p.html object-fit-cover-svg-005p.html
+fails skip-if(B2G) == object-fit-cover-svg-006e.html object-fit-cover-svg-006e.html
+== object-fit-cover-svg-006i.html object-fit-cover-svg-006i.html
+fails skip-if(B2G) == object-fit-cover-svg-006o.html object-fit-cover-svg-006o.html
+== object-fit-cover-svg-006p.html object-fit-cover-svg-006p.html
+fails == object-fit-none-svg-001e.html object-fit-none-svg-001e.html
+== object-fit-none-svg-001i.html object-fit-none-svg-001i.html
+fails == object-fit-none-svg-001o.html object-fit-none-svg-001o.html
+== object-fit-none-svg-001p.html object-fit-none-svg-001p.html
+== object-fit-none-svg-002e.html object-fit-none-svg-002e.html
+== object-fit-none-svg-002i.html object-fit-none-svg-002i.html
+fails == object-fit-none-svg-002o.html object-fit-none-svg-002o.html
+== object-fit-none-svg-002p.html object-fit-none-svg-002p.html
+fails == object-fit-none-svg-003e.html object-fit-none-svg-003e.html
+== object-fit-none-svg-003i.html object-fit-none-svg-003i.html
+== object-fit-none-svg-003o.html object-fit-none-svg-003o.html
+== object-fit-none-svg-003p.html object-fit-none-svg-003p.html
+fails == object-fit-none-svg-004e.html object-fit-none-svg-004e.html
+== object-fit-none-svg-004i.html object-fit-none-svg-004i.html
+fails == object-fit-none-svg-004o.html object-fit-none-svg-004o.html
+== object-fit-none-svg-004p.html object-fit-none-svg-004p.html
+fails skip-if(B2G) == object-fit-none-svg-005e.html object-fit-none-svg-005e.html
+== object-fit-none-svg-005i.html object-fit-none-svg-005i.html
+fails skip-if(B2G) == object-fit-none-svg-005o.html object-fit-none-svg-005o.html
+== object-fit-none-svg-005p.html object-fit-none-svg-005p.html
+fails skip-if(B2G) == object-fit-none-svg-006e.html object-fit-none-svg-006e.html
+== object-fit-none-svg-006i.html object-fit-none-svg-006i.html
+fails skip-if(B2G) == object-fit-none-svg-006o.html object-fit-none-svg-006o.html
+== object-fit-none-svg-006p.html object-fit-none-svg-006p.html
+fails skip-if(B2G) == object-fit-scale-down-svg-001e.html object-fit-scale-down-svg-001e.html
+== object-fit-scale-down-svg-001i.html object-fit-scale-down-svg-001i.html
+fails skip-if(B2G) == object-fit-scale-down-svg-001o.html object-fit-scale-down-svg-001o.html
+== object-fit-scale-down-svg-001p.html object-fit-scale-down-svg-001p.html
+skip-if(B2G) == object-fit-scale-down-svg-002e.html object-fit-scale-down-svg-002e.html
+== object-fit-scale-down-svg-002i.html object-fit-scale-down-svg-002i.html
+fails skip-if(B2G) == object-fit-scale-down-svg-002o.html object-fit-scale-down-svg-002o.html
+== object-fit-scale-down-svg-002p.html object-fit-scale-down-svg-002p.html
+fails == object-fit-scale-down-svg-003e.html object-fit-scale-down-svg-003e.html
+== object-fit-scale-down-svg-003i.html object-fit-scale-down-svg-003i.html
+fails == object-fit-scale-down-svg-003o.html object-fit-scale-down-svg-003o.html
+== object-fit-scale-down-svg-003p.html object-fit-scale-down-svg-003p.html
+== object-fit-scale-down-svg-004e.html object-fit-scale-down-svg-004e.html
+== object-fit-scale-down-svg-004i.html object-fit-scale-down-svg-004i.html
+fails == object-fit-scale-down-svg-004o.html object-fit-scale-down-svg-004o.html
+== object-fit-scale-down-svg-004p.html object-fit-scale-down-svg-004p.html
+== object-fit-scale-down-svg-005e.html object-fit-scale-down-svg-005e.html
+== object-fit-scale-down-svg-005i.html object-fit-scale-down-svg-005i.html
+fails == object-fit-scale-down-svg-005o.html object-fit-scale-down-svg-005o.html
+== object-fit-scale-down-svg-005p.html object-fit-scale-down-svg-005p.html
+fails == object-fit-scale-down-svg-006e.html object-fit-scale-down-svg-006e.html
+== object-fit-scale-down-svg-006i.html object-fit-scale-down-svg-006i.html
+== object-fit-scale-down-svg-006o.html object-fit-scale-down-svg-006o.html
+== object-fit-scale-down-svg-006p.html object-fit-scale-down-svg-006p.html
+== object-position-png-001c.html object-position-png-001c.html
+# bug 1105150
+fuzzy-if(Mulet,2,20) == object-position-png-001e.html object-position-png-001e.html
+# Bug 1150536
+== object-position-png-001i.html object-position-png-001i.html
+fails fuzzy-if(Mulet,2,20) == object-position-png-001o.html object-position-png-001o.html
+# Bug 1150492
+== object-position-png-001p.html object-position-png-001p.html
+== object-position-png-002c.html object-position-png-002c.html
+# bug 1105150
+== object-position-png-002e.html object-position-png-002e.html
+== object-position-png-002i.html object-position-png-002i.html
+fails == object-position-png-002o.html object-position-png-002o.html
+== object-position-png-002p.html object-position-png-002p.html
+== object-position-svg-001e.html object-position-svg-001e.html
+# bug 1103286
+== object-position-svg-001i.html object-position-svg-001i.html
+fails == object-position-svg-001o.html object-position-svg-001o.html
+# bug 1103286
+== object-position-svg-001p.html object-position-svg-001p.html
+fails == object-position-svg-002e.html object-position-svg-002e.html
+# bug 1103286
+== object-position-svg-002i.html object-position-svg-002i.html
+== object-position-svg-002o.html object-position-svg-002o.html
+# bug 1103286
+== object-position-svg-002p.html object-position-svg-002p.html
diff --git a/layout/reftests/w3c-css/submitted/images3/reftest.list b/layout/reftests/w3c-css/submitted/images3/reftest.list
new file mode 100644
index 000000000..3834b0713
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/reftest.list
@@ -0,0 +1,192 @@
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+# Tests for 'object-fit' / 'object-position' with a PNG image
+== object-fit-fill-png-001c.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001e.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001i.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001o.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001p.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-002c.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002e.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002i.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002o.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002p.html object-fit-fill-png-002-ref.html
+== object-fit-contain-png-001c.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001e.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001i.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001o.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001p.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-002c.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002e.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002i.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002o.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002p.html object-fit-contain-png-002-ref.html
+== object-fit-cover-png-001c.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001e.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001i.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001o.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001p.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-002c.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002e.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002i.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002o.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002p.html object-fit-cover-png-002-ref.html
+== object-fit-none-png-001c.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001e.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001i.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001o.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001p.html object-fit-none-png-001-ref.html
+== object-fit-none-png-002c.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002e.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002i.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002o.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002p.html object-fit-none-png-002-ref.html
+== object-fit-scale-down-png-001c.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001e.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001i.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001o.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001p.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-002c.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002e.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002i.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002o.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002p.html object-fit-scale-down-png-002-ref.html
+
+# Tests for 'object-fit' / 'object-position' with an SVG image
+== object-fit-fill-svg-001e.html object-fit-fill-svg-001-ref.html
+== object-fit-fill-svg-001i.html object-fit-fill-svg-001-ref.html
+== object-fit-fill-svg-001o.html object-fit-fill-svg-001-ref.html
+== object-fit-fill-svg-001p.html object-fit-fill-svg-001-ref.html
+== object-fit-fill-svg-002e.html object-fit-fill-svg-002-ref.html
+== object-fit-fill-svg-002i.html object-fit-fill-svg-002-ref.html
+== object-fit-fill-svg-002o.html object-fit-fill-svg-002-ref.html
+== object-fit-fill-svg-002p.html object-fit-fill-svg-002-ref.html
+== object-fit-fill-svg-003e.html object-fit-fill-svg-003-ref.html
+== object-fit-fill-svg-003i.html object-fit-fill-svg-003-ref.html
+== object-fit-fill-svg-003o.html object-fit-fill-svg-003-ref.html
+== object-fit-fill-svg-003p.html object-fit-fill-svg-003-ref.html
+== object-fit-fill-svg-004e.html object-fit-fill-svg-004-ref.html
+== object-fit-fill-svg-004i.html object-fit-fill-svg-004-ref.html
+== object-fit-fill-svg-004o.html object-fit-fill-svg-004-ref.html
+== object-fit-fill-svg-004p.html object-fit-fill-svg-004-ref.html
+fails == object-fit-fill-svg-005e.html object-fit-fill-svg-005-ref.html # bug 1092436
+fails == object-fit-fill-svg-005i.html object-fit-fill-svg-005-ref.html # bug 1092436
+fails == object-fit-fill-svg-005o.html object-fit-fill-svg-005-ref.html # bug 1092436
+fails == object-fit-fill-svg-005p.html object-fit-fill-svg-005-ref.html # bug 1092436
+fails == object-fit-fill-svg-006e.html object-fit-fill-svg-006-ref.html # bug 1092436
+fails == object-fit-fill-svg-006i.html object-fit-fill-svg-006-ref.html # bug 1092436
+fails == object-fit-fill-svg-006o.html object-fit-fill-svg-006-ref.html # bug 1092436
+fails == object-fit-fill-svg-006p.html object-fit-fill-svg-006-ref.html # bug 1092436
+== object-fit-contain-svg-001e.html object-fit-contain-svg-001-ref.html
+== object-fit-contain-svg-001i.html object-fit-contain-svg-001-ref.html
+== object-fit-contain-svg-001o.html object-fit-contain-svg-001-ref.html
+== object-fit-contain-svg-001p.html object-fit-contain-svg-001-ref.html
+== object-fit-contain-svg-002e.html object-fit-contain-svg-002-ref.html
+== object-fit-contain-svg-002i.html object-fit-contain-svg-002-ref.html
+== object-fit-contain-svg-002o.html object-fit-contain-svg-002-ref.html
+== object-fit-contain-svg-002p.html object-fit-contain-svg-002-ref.html
+== object-fit-contain-svg-003e.html object-fit-contain-svg-003-ref.html
+== object-fit-contain-svg-003i.html object-fit-contain-svg-003-ref.html
+== object-fit-contain-svg-003o.html object-fit-contain-svg-003-ref.html
+== object-fit-contain-svg-003p.html object-fit-contain-svg-003-ref.html
+== object-fit-contain-svg-004e.html object-fit-contain-svg-004-ref.html
+== object-fit-contain-svg-004i.html object-fit-contain-svg-004-ref.html
+== object-fit-contain-svg-004o.html object-fit-contain-svg-004-ref.html
+== object-fit-contain-svg-004p.html object-fit-contain-svg-004-ref.html
+== object-fit-contain-svg-005e.html object-fit-contain-svg-005-ref.html
+== object-fit-contain-svg-005i.html object-fit-contain-svg-005-ref.html
+== object-fit-contain-svg-005o.html object-fit-contain-svg-005-ref.html
+== object-fit-contain-svg-005p.html object-fit-contain-svg-005-ref.html
+== object-fit-contain-svg-006e.html object-fit-contain-svg-006-ref.html
+== object-fit-contain-svg-006i.html object-fit-contain-svg-006-ref.html
+== object-fit-contain-svg-006o.html object-fit-contain-svg-006-ref.html
+== object-fit-contain-svg-006p.html object-fit-contain-svg-006-ref.html
+== object-fit-cover-svg-001e.html object-fit-cover-svg-001-ref.html
+== object-fit-cover-svg-001i.html object-fit-cover-svg-001-ref.html
+== object-fit-cover-svg-001o.html object-fit-cover-svg-001-ref.html
+== object-fit-cover-svg-001p.html object-fit-cover-svg-001-ref.html
+== object-fit-cover-svg-002e.html object-fit-cover-svg-002-ref.html
+== object-fit-cover-svg-002i.html object-fit-cover-svg-002-ref.html
+== object-fit-cover-svg-002o.html object-fit-cover-svg-002-ref.html
+== object-fit-cover-svg-002p.html object-fit-cover-svg-002-ref.html
+== object-fit-cover-svg-003e.html object-fit-cover-svg-003-ref.html
+== object-fit-cover-svg-003i.html object-fit-cover-svg-003-ref.html
+== object-fit-cover-svg-003o.html object-fit-cover-svg-003-ref.html
+== object-fit-cover-svg-003p.html object-fit-cover-svg-003-ref.html
+== object-fit-cover-svg-004e.html object-fit-cover-svg-004-ref.html
+== object-fit-cover-svg-004i.html object-fit-cover-svg-004-ref.html
+== object-fit-cover-svg-004o.html object-fit-cover-svg-004-ref.html
+== object-fit-cover-svg-004p.html object-fit-cover-svg-004-ref.html
+== object-fit-cover-svg-005e.html object-fit-cover-svg-005-ref.html
+== object-fit-cover-svg-005i.html object-fit-cover-svg-005-ref.html
+== object-fit-cover-svg-005o.html object-fit-cover-svg-005-ref.html
+== object-fit-cover-svg-005p.html object-fit-cover-svg-005-ref.html
+== object-fit-cover-svg-006e.html object-fit-cover-svg-006-ref.html
+== object-fit-cover-svg-006i.html object-fit-cover-svg-006-ref.html
+== object-fit-cover-svg-006o.html object-fit-cover-svg-006-ref.html
+== object-fit-cover-svg-006p.html object-fit-cover-svg-006-ref.html
+== object-fit-none-svg-001e.html object-fit-none-svg-001-ref.html
+== object-fit-none-svg-001i.html object-fit-none-svg-001-ref.html
+== object-fit-none-svg-001o.html object-fit-none-svg-001-ref.html
+== object-fit-none-svg-001p.html object-fit-none-svg-001-ref.html
+== object-fit-none-svg-002e.html object-fit-none-svg-002-ref.html
+== object-fit-none-svg-002i.html object-fit-none-svg-002-ref.html
+== object-fit-none-svg-002o.html object-fit-none-svg-002-ref.html
+== object-fit-none-svg-002p.html object-fit-none-svg-002-ref.html
+== object-fit-none-svg-003e.html object-fit-none-svg-003-ref.html
+== object-fit-none-svg-003i.html object-fit-none-svg-003-ref.html
+== object-fit-none-svg-003o.html object-fit-none-svg-003-ref.html
+== object-fit-none-svg-003p.html object-fit-none-svg-003-ref.html
+== object-fit-none-svg-004e.html object-fit-none-svg-004-ref.html
+== object-fit-none-svg-004i.html object-fit-none-svg-004-ref.html
+== object-fit-none-svg-004o.html object-fit-none-svg-004-ref.html
+== object-fit-none-svg-004p.html object-fit-none-svg-004-ref.html
+== object-fit-none-svg-005e.html object-fit-none-svg-005-ref.html
+== object-fit-none-svg-005i.html object-fit-none-svg-005-ref.html
+== object-fit-none-svg-005o.html object-fit-none-svg-005-ref.html
+== object-fit-none-svg-005p.html object-fit-none-svg-005-ref.html
+== object-fit-none-svg-006e.html object-fit-none-svg-006-ref.html
+== object-fit-none-svg-006i.html object-fit-none-svg-006-ref.html
+== object-fit-none-svg-006o.html object-fit-none-svg-006-ref.html
+== object-fit-none-svg-006p.html object-fit-none-svg-006-ref.html
+== object-fit-scale-down-svg-001e.html object-fit-scale-down-svg-001-ref.html
+== object-fit-scale-down-svg-001i.html object-fit-scale-down-svg-001-ref.html
+== object-fit-scale-down-svg-001o.html object-fit-scale-down-svg-001-ref.html
+== object-fit-scale-down-svg-001p.html object-fit-scale-down-svg-001-ref.html
+== object-fit-scale-down-svg-002e.html object-fit-scale-down-svg-002-ref.html
+== object-fit-scale-down-svg-002i.html object-fit-scale-down-svg-002-ref.html
+== object-fit-scale-down-svg-002o.html object-fit-scale-down-svg-002-ref.html
+== object-fit-scale-down-svg-002p.html object-fit-scale-down-svg-002-ref.html
+== object-fit-scale-down-svg-003e.html object-fit-scale-down-svg-003-ref.html
+== object-fit-scale-down-svg-003i.html object-fit-scale-down-svg-003-ref.html
+== object-fit-scale-down-svg-003o.html object-fit-scale-down-svg-003-ref.html
+== object-fit-scale-down-svg-003p.html object-fit-scale-down-svg-003-ref.html
+== object-fit-scale-down-svg-004e.html object-fit-scale-down-svg-004-ref.html
+== object-fit-scale-down-svg-004i.html object-fit-scale-down-svg-004-ref.html
+== object-fit-scale-down-svg-004o.html object-fit-scale-down-svg-004-ref.html
+== object-fit-scale-down-svg-004p.html object-fit-scale-down-svg-004-ref.html
+== object-fit-scale-down-svg-005e.html object-fit-scale-down-svg-005-ref.html
+== object-fit-scale-down-svg-005i.html object-fit-scale-down-svg-005-ref.html
+== object-fit-scale-down-svg-005o.html object-fit-scale-down-svg-005-ref.html
+== object-fit-scale-down-svg-005p.html object-fit-scale-down-svg-005-ref.html
+== object-fit-scale-down-svg-006e.html object-fit-scale-down-svg-006-ref.html
+== object-fit-scale-down-svg-006i.html object-fit-scale-down-svg-006-ref.html
+== object-fit-scale-down-svg-006o.html object-fit-scale-down-svg-006-ref.html
+== object-fit-scale-down-svg-006p.html object-fit-scale-down-svg-006-ref.html
+fails == object-position-png-001c.html object-position-png-001-ref.html # bug 1105150
+== object-position-png-001e.html object-position-png-001-ref.html
+== object-position-png-001i.html object-position-png-001-ref.html
+== object-position-png-001o.html object-position-png-001-ref.html
+== object-position-png-001p.html object-position-png-001-ref.html
+fails == object-position-png-002c.html object-position-png-002-ref.html # bug 1105150
+== object-position-png-002e.html object-position-png-002-ref.html
+== object-position-png-002i.html object-position-png-002-ref.html
+== object-position-png-002o.html object-position-png-002-ref.html
+== object-position-png-002p.html object-position-png-002-ref.html
+fails == object-position-svg-001e.html object-position-svg-001-ref.html # bug 1103286
+== object-position-svg-001i.html object-position-svg-001-ref.html
+fails == object-position-svg-001o.html object-position-svg-001-ref.html # bug 1103286
+== object-position-svg-001p.html object-position-svg-001-ref.html
+fails == object-position-svg-002e.html object-position-svg-002-ref.html # bug 1103286
+== object-position-svg-002i.html object-position-svg-002-ref.html
+fails == object-position-svg-002o.html object-position-svg-002-ref.html # bug 1103286
+== object-position-svg-002p.html object-position-svg-002-ref.html
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg
new file mode 100644
index 000000000..db715d875
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg
new file mode 100644
index 000000000..1b0bca073
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/colors-16x8.png b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png
new file mode 100644
index 000000000..bd2384587
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg
new file mode 100644
index 000000000..08e365940
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/colors-8x16-noSize.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg
new file mode 100644
index 000000000..e741537b9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg
new file mode 100644
index 000000000..ec8c59dcb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/colors-8x16.png b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png
new file mode 100644
index 000000000..596fdb389
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg
new file mode 100644
index 000000000..c336e3af1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh
new file mode 100644
index 000000000..b66ea4726
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh
@@ -0,0 +1,72 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate <canvas src> reftest files for "object-fit" and
+# "object-position", from corresponding reftest files that use <object>.
+#
+# This script expects to be run from this working directory:
+#  mozilla-central/layout/reftests/w3c-css/submitted/images3
+
+# Array of image files that we'll use
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+canvasAttributeArr=('width="16" height="8"'   'width="8" height="16"')
+numImageFiles=${#imageFileArr[@]}
+
+
+for ((i = 0; i < $numImageFiles; i++)); do
+
+  imageFile=${imageFileArr[$i]}
+  canvasAttrs=${canvasAttributeArr[$i]}
+
+  # Loop across <object> tests:
+  # (We assume that tests that end with "001" use the first PNG image in
+  # $imageFileArr, and tests that end with "002" use the second PNG image.)
+  let testNum=$i+1
+  for origTestName in object-*-png-*00${testNum}o.html; do
+    # Find the corresponding reference case:
+    origReferenceName=$(echo $origTestName |
+                        sed "s/o.html/-ref.html/")
+
+    # Replace "o" suffix in filename with "c" (for "canvas")
+    canvasTestName=$(echo $origTestName |
+                     sed "s/o.html/c.html/")
+
+    # Generate testcase
+    # (converting <object data="..."> to <canvas width="..." height="...">
+    echo "Generating $canvasTestName from $origTestName."
+    hg cp $origTestName $canvasTestName
+
+    # Do string-replacements in testcase to convert it to test canvas:
+    # Adjust html & body nodes:
+    sed -i "s|<html>|<html class=\"reftest-wait\">|" $canvasTestName
+    sed -i "s|<body>|<body onload=\"drawImageToCanvases('$imageFile')\">|" $canvasTestName
+    # Adjust <title>:
+    sed -i "s|object element|canvas element|g" $canvasTestName
+    # Tweak the actual tags (open & close tags, and CSS rule):
+    sed -i "s|object {|canvas {|" $canvasTestName
+    sed -i "s|<object|<canvas|" $canvasTestName
+    sed -i "s|</object>|</canvas>|" $canvasTestName
+    # Drop "data" attr (pointing to image URI) and replace with
+    # width/height attrs to establish the canvas's intrinsic size:
+    sed -i "s|data=\"$imageFile\"|$canvasAttrs|" $canvasTestName
+
+    # Add a <script> block to draw an image into each canvas:
+    sed -i "/<\/style>/a \\
+    <script>\n\
+      function drawImageToCanvases(imageURI) {\n\
+        var image = new Image();\n\
+        image.onload = function() {\n\
+          var canvasElems = document.getElementsByTagName(\"canvas\");\n\
+          for (var i = 0; i < canvasElems.length; i++) {\n\
+            var ctx = canvasElems[i].getContext(\"2d\");\n\
+            ctx.drawImage(image, 0, 0);\n\
+          }\n\
+          document.documentElement.removeAttribute(\"class\");\n\
+        }\n\
+        image.src = imageURI;\n\
+      }\n\
+    <\/script>" $canvasTestName
+  done
+done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh
new file mode 100644
index 000000000..476977c89
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh
@@ -0,0 +1,109 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position", using a template testcase
+# file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+# (One exception: since there is no "background-size" equivalent of
+# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
+# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
+
+imageFileFormat="png"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of "object-fit" values, & of corresponding "background-size" values.
+# (Note: background-size has no equivalent for "object-fit: scale-down". We use
+# "auto auto" here, which is equivalent *some* of the time; and for the cases
+# where it's *not* equivalent, we use an extra CSS rule in the reference case.
+# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+objectFitArr=(           "fill"      "contain" "cover" "none"      "scale-down" )
+backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto"  )
+numObjectFitVals=${#objectFitArr[@]}
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+# FIRST: Add 'default-preferences' line to the top of our reftest manifest:
+echo "default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+# Tests for 'object-fit' / 'object-position' with a PNG image" \
+ >> $REFTEST_LIST_FILE
+
+for ((i = 0; i < $numObjectFitVals; i++)); do
+  objectFit=${objectFitArr[$i]}
+  backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
+
+  # The reference case for "scale-down" needs an additional style rule, to
+  # look like "object-fit: scale-down" on small objects. (This is necessary
+  # because "background-size" doesn't have a value that exactly maps to
+  # "object-fit: scale-down".)
+  if [[ $objectFit == "scale-down" ]]; then
+      scaledownRule=".objectOuter > .small { background-size: contain; }"
+      scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
+  else
+      # (We're not testing "scale-down" in this generated file, so just delete
+      # the template's placeholder line for a "scale-down"-specific CSS rule.)
+      scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
+  fi
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
+      | sed "$scaledownSedCmd" \
+      > $FILE_PATH/$filenameRef;
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="'object-fit: $objectFit' on $tagName element, with a PNG image and with various 'object-position' values"
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
+done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh
new file mode 100644
index 000000000..c4d51877e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh
@@ -0,0 +1,116 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position", using a template testcase
+# file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+# (One exception: since there is no "background-size" equivalent of
+# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
+# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
+
+imageFileFormat="svg"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.svg"
+              "support/colors-8x16.svg"
+              "support/colors-16x8-noSize.svg"
+              "support/colors-8x16-noSize.svg"
+              "support/colors-16x8-parDefault.svg"
+              "support/colors-8x16-parDefault.svg")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of "object-fit" values, & of corresponding "background-size" values.
+# (Note: background-size has no equivalent for "object-fit: scale-down". We use
+# "auto auto" here, which is equivalent *some* of the time; and for the cases
+# where it's *not* equivalent, we use an extra CSS rule in the reference case.
+# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+objectFitArr=(           "fill"      "contain" "cover" "none"      "scale-down" )
+backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto"  )
+numObjectFitVals=${#objectFitArr[@]}
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+# FIRST: Add blank line & descriptive comment to reftest manifest:
+echo "
+# Tests for 'object-fit' / 'object-position' with an SVG image" \
+ >> $REFTEST_LIST_FILE
+
+for ((i = 0; i < $numObjectFitVals; i++)); do
+  objectFit=${objectFitArr[$i]}
+  backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
+
+  # The reference case for "scale-down" needs an additional style rule, to
+  # look like "object-fit: scale-down" on small objects. (This is necessary
+  # because "background-size" doesn't have a value that exactly maps to
+  # "object-fit: scale-down".)
+  if [[ $objectFit == "scale-down" ]]; then
+      scaledownRule=".objectOuter > .small { background-size: contain; }"
+      scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
+  else
+      # (We're not testing "scale-down" in this generated file, so just delete
+      # the template's placeholder line for a "scale-down"-specific CSS rule.)
+      scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
+  fi
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
+      | sed "$scaledownSedCmd" \
+      | sed "/image-rendering:/d" \
+      > $FILE_PATH/$filenameRef;
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="'object-fit: $objectFit' on $tagName element, with a SVG image and with various 'object-position' values"
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
+        | sed "/image-rendering:/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
+done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh
new file mode 100644
index 000000000..4763fabf7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh
@@ -0,0 +1,88 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position" (focusing on edge-case
+# object-position values that require pixel rounding), using a template
+# testcase file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html
+
+imageFileFormat="png"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of CSS classes to delete from the template, for a given image-file.
+# DETAILS: The template files contain some elements/styles that exercise
+# object-position x-values (op_x), and other elements/styles that exercise
+# object-position y-values (op_y). But actually, we'll only have extra space
+# for these percent values to resolve against in *one* dimension (since our
+# image-files are rectangular, and the container element is square, and we
+# scale the image up with "object-fit: contain"). So, we delete the
+# elements/styles in the dimension where object-position % values will just
+# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image).
+classPatternToDeleteArr=("op_x" "op_y")
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+
+    classPatternToDelete=${classPatternToDeleteArr[$j]}
+
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-position-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "/$classPatternToDelete/d" \
+      > $FILE_PATH/$filenameRef
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="various 'object-position' values on a fixed-size $tagName element, with a PNG image and 'object-fit:contain'."
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "/$classPatternToDelete/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh
new file mode 100644
index 000000000..e00385a47
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh
@@ -0,0 +1,88 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position" (focusing on edge-case
+# object-position values that require pixel rounding), using a template
+# testcase file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html
+
+imageFileFormat="svg"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.svg" "support/colors-8x16.svg")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of CSS classes to delete from the template, for a given image-file.
+# DETAILS: The template files contain some elements/styles that exercise
+# object-position x-values (op_x), and other elements/styles that exercise
+# object-position y-values (op_y). But actually, we'll only have extra space
+# for these percent values to resolve against in *one* dimension (since our
+# image-files are rectangular, and the container element is square, and we
+# scale the image up with "object-fit: contain"). So, we delete the
+# elements/styles in the dimension where object-position % values will just
+# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image).
+classPatternToDeleteArr=("op_x" "op_y")
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+
+    classPatternToDelete=${classPatternToDeleteArr[$j]}
+
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-position-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "/$classPatternToDelete/d" \
+      > $FILE_PATH/$filenameRef
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="various 'object-position' values on a fixed-size $tagName element, with a SVG image and 'object-fit:contain'."
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "/$classPatternToDelete/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html
new file mode 100644
index 000000000..94caf1ecb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-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("REPLACEME_IMAGE_FILENAME");
+        background-size: REPLACEME_BACKGROUND_SIZE_VAL;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      REPLACEME_SCALE_DOWN_EXTRA_RULE
+      .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/w3c-css/submitted/images3/support/template-object-fit-test.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html
new file mode 100644
index 000000000..fe1518235
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.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 Test: REPLACEME_TEST_TITLE</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="REPLACEME_REFERENCE_FILENAME">
+    <style type="text/css">
+      REPLACEME_CONTAINER_TAG {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: REPLACEME_OBJECT_FIT_VAL;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      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>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+    <!-- big/tall: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+    <!-- small: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html
new file mode 100644
index 000000000..19661f41f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html
@@ -0,0 +1,56 @@
+<!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("REPLACEME_IMAGE_FILENAME");
+        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% }
+      .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_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>
+    <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/w3c-css/submitted/images3/support/template-object-position-test.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html
new file mode 100644
index 000000000..fb4b3ad3c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html
@@ -0,0 +1,58 @@
+<!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 Test: REPLACEME_TEST_TITLE</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="REPLACEME_REFERENCE_FILENAME">
+    <style type="text/css">
+      REPLACEME_CONTAINER_TAG {
+        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% }
+      .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>
+  </head>
+  <body>
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x-7">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x13">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x23">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x50">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x75">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x88">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x111">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y-7">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y13">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y23">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y50">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y75">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y88">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y111">REPLACEME_CONTAINER_CLOSETAG
+  </body>
+</html>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /layout/reftests/w3c-css/submitted/images3
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip