Bug 624647 reftests, part 1: Test 'object-fit' & 'object-position' properties with a PNG image in various container elements. r=seth
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 14 Nov 2014 16:45:24 -0800
changeset 240192 91b71378545828f35bc78bb7bec7c35e6b43fefb
parent 240191 466d3ff030e6343ff8cba81c6e6f328dcea55738
child 240193 270fc475e29cbdeeff12de154b26b0914cef1cc6
push id4311
push userraliiev@mozilla.com
push dateMon, 12 Jan 2015 19:37:41 +0000
treeherdermozilla-beta@150c9fed433b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersseth
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 1: Test 'object-fit' & 'object-position' properties with a PNG image in various container elements. r=seth
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html
layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html
layout/reftests/w3c-css/submitted/images3/reftest.list
layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png
layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png
layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh
layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html
layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html
layout/reftests/w3c-css/submitted/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-8x16.png");
+        background-size: auto auto;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      .objectOuter > .small { background-size: contain; }
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/reftest.list
@@ -0,0 +1,42 @@
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+# Tests for 'object-fit' / 'object-position' with a PNG image
+== object-fit-fill-png-001e.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001i.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001o.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001p.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-002e.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002i.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002o.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002p.html object-fit-fill-png-002-ref.html
+== object-fit-contain-png-001e.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001i.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001o.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001p.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-002e.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002i.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002o.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002p.html object-fit-contain-png-002-ref.html
+== object-fit-cover-png-001e.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001i.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001o.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001p.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-002e.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002i.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002o.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002p.html object-fit-cover-png-002-ref.html
+== object-fit-none-png-001e.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001i.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001o.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001p.html object-fit-none-png-001-ref.html
+== object-fit-none-png-002e.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002i.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002o.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002p.html object-fit-none-png-002-ref.html
+== object-fit-scale-down-png-001e.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001i.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001o.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001p.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-002e.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002i.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002o.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002p.html object-fit-scale-down-png-002-ref.html
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..bd238458713fb195283368e22853b21de4335c47
GIT binary patch
literal 93
zc%17D@N?(olHy`uVBq!ia0vp^0zk~c!2~4hMP3{LQYxM<jv*44lT#9YoNtgdND@s=
rQV_fl$9(#Ko7)?^73mUMbqox-PnakD^NBVDs%P+Y^>bP0l+XkK|L+<E
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..596fdb389d6cedd10f54939edd07dacb0e615ac2
GIT binary patch
literal 92
zc%17D@N?(olHy`uVBq!ia0vp^96&6<!2~3iyjZCPq?A2f977~7C#NL*IN!j~Qy?bH
q%x7Ss8u8EEM5!k5yg|rcMutfTm>2zS+uZ_G&fw|l=d#Wzp$P!Vi5Y4D
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh
@@ -0,0 +1,109 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position", using a template testcase
+# file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+# (One exception: since there is no "background-size" equivalent of
+# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
+# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
+
+imageFileFormat="png"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of "object-fit" values, & of corresponding "background-size" values.
+# (Note: background-size has no equivalent for "object-fit: scale-down". We use
+# "auto auto" here, which is equivalent *some* of the time; and for the cases
+# where it's *not* equivalent, we use an extra CSS rule in the reference case.
+# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+objectFitArr=(           "fill"      "contain" "cover" "none"      "scale-down" )
+backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto"  )
+numObjectFitVals=${#objectFitArr[@]}
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+# FIRST: Add 'default-preferences' line to the top of our reftest manifest:
+echo "default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+# Tests for 'object-fit' / 'object-position' with a PNG image" \
+ >> $REFTEST_LIST_FILE
+
+for ((i = 0; i < $numObjectFitVals; i++)); do
+  objectFit=${objectFitArr[$i]}
+  backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
+
+  # The reference case for "scale-down" needs an additional style rule, to
+  # look like "object-fit: scale-down" on small objects. (This is necessary
+  # because "background-size" doesn't have a value that exactly maps to
+  # "object-fit: scale-down".)
+  if [[ $objectFit == "scale-down" ]]; then
+      scaledownRule=".objectOuter > .small { background-size: contain; }"
+      scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
+  else
+      # (We're not testing "scale-down" in this generated file, so just delete
+      # the template's placeholder line for a "scale-down"-specific CSS rule.)
+      scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
+  fi
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
+      | sed "$scaledownSedCmd" \
+      > $FILE_PATH/$filenameRef;
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="'object-fit: $objectFit' on $tagName element, with a PNG image and with various 'object-position' values"
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
+done
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("REPLACEME_IMAGE_FILENAME");
+        background-size: REPLACEME_BACKGROUND_SIZE_VAL;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      REPLACEME_SCALE_DOWN_EXTRA_RULE
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: REPLACEME_TEST_TITLE</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="REPLACEME_REFERENCE_FILENAME">
+    <style type="text/css">
+      REPLACEME_CONTAINER_TAG {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: REPLACEME_OBJECT_FIT_VAL;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+    <!-- big/tall: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+    <!-- small: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+  </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/reftest.list
+++ b/layout/reftests/w3c-css/submitted/reftest.list
@@ -21,17 +21,17 @@ include conditional3/reftest.list
 
 # Flexible Box Layout Module
 include flexbox/reftest.list
 
 # Fonts Level 3
 # include fonts3/reftest.list
 
 # Image Values and Replaced Content Level 3
-# include images3/reftest.list
+include images3/reftest.list
 
 # Media Queries Level 3
 # include mediaqueries3/reftest.list
 
 # Multi-column Layout 3
 include multicol3/reftest.list
 
 # Selectors Level 3