Bug 624647 reftests, part 3: Test 'object-fit' & 'object-position' properties with SVG images in various container elements. (no review because substantially similar to r+'d reftests part 1)
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 14 Nov 2014 16:45:24 -0800
changeset 215880 3cd01637b2ef04dfd818d3bfa7e10ecd8fab30ec
parent 215879 270fc475e29cbdeeff12de154b26b0914cef1cc6
child 215881 b683d38c4c0055c40b705c0e4d0d238296693f09
push id27829
push usergszorc@mozilla.com
push dateSat, 15 Nov 2014 22:34:49 +0000
treeherderautoland@19f75e1211e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs624647
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 624647 reftests, part 3: Test 'object-fit' & 'object-position' properties with SVG images in various container elements. (no review because substantially similar to r+'d reftests part 1)
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html
layout/reftests/w3c-css/submitted/images3/reftest.list
layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg
layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg
layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg
layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg
layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg
layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg
layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>