Bug 1170052 part 4: Add reftests for object-fit/object-position on XUL <image> element (as modified copies of existing <img> tests). (test-only)
☠☠ backed out by c117126d24e7 ☠ ☠
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 12 Jun 2015 11:40:36 -0700
changeset 279431 198a12989a3492c377c7c1ba9b18ca8966723f3f
parent 279430 629a920112ee10beae64510be88658742f427619
child 279432 db848e0a090d86551b7030fad475c2b29d9265e0
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-beta@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1170052
milestone41.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 1170052 part 4: Add reftests for object-fit/object-position on XUL <image> element (as modified copies of existing <img> tests). (test-only)
layout/reftests/xul/colors-16x8-noSize.svg
layout/reftests/xul/colors-16x8-parDefault.svg
layout/reftests/xul/colors-16x8.png
layout/reftests/xul/colors-16x8.svg
layout/reftests/xul/colors-8x16-noSize.svg
layout/reftests/xul/colors-8x16-parDefault.svg
layout/reftests/xul/colors-8x16.png
layout/reftests/xul/colors-8x16.svg
layout/reftests/xul/object-fit-contain-png-001-ref.html
layout/reftests/xul/object-fit-contain-png-001.xul
layout/reftests/xul/object-fit-contain-png-002-ref.html
layout/reftests/xul/object-fit-contain-png-002.xul
layout/reftests/xul/object-fit-contain-svg-001-ref.html
layout/reftests/xul/object-fit-contain-svg-001.xul
layout/reftests/xul/object-fit-contain-svg-002-ref.html
layout/reftests/xul/object-fit-contain-svg-002.xul
layout/reftests/xul/object-fit-contain-svg-003-ref.html
layout/reftests/xul/object-fit-contain-svg-003.xul
layout/reftests/xul/object-fit-contain-svg-004-ref.html
layout/reftests/xul/object-fit-contain-svg-004.xul
layout/reftests/xul/object-fit-contain-svg-005-ref.html
layout/reftests/xul/object-fit-contain-svg-005.xul
layout/reftests/xul/object-fit-contain-svg-006-ref.html
layout/reftests/xul/object-fit-contain-svg-006.xul
layout/reftests/xul/object-fit-cover-png-001-ref.html
layout/reftests/xul/object-fit-cover-png-001.xul
layout/reftests/xul/object-fit-cover-png-002-ref.html
layout/reftests/xul/object-fit-cover-png-002.xul
layout/reftests/xul/object-fit-cover-svg-001-ref.html
layout/reftests/xul/object-fit-cover-svg-001.xul
layout/reftests/xul/object-fit-cover-svg-002-ref.html
layout/reftests/xul/object-fit-cover-svg-002.xul
layout/reftests/xul/object-fit-cover-svg-003-ref.html
layout/reftests/xul/object-fit-cover-svg-003.xul
layout/reftests/xul/object-fit-cover-svg-004-ref.html
layout/reftests/xul/object-fit-cover-svg-004.xul
layout/reftests/xul/object-fit-cover-svg-005-ref.html
layout/reftests/xul/object-fit-cover-svg-005.xul
layout/reftests/xul/object-fit-cover-svg-006-ref.html
layout/reftests/xul/object-fit-cover-svg-006.xul
layout/reftests/xul/object-fit-fill-png-001-ref.html
layout/reftests/xul/object-fit-fill-png-001.xul
layout/reftests/xul/object-fit-fill-png-002-ref.html
layout/reftests/xul/object-fit-fill-png-002.xul
layout/reftests/xul/object-fit-fill-svg-001-ref.html
layout/reftests/xul/object-fit-fill-svg-001.xul
layout/reftests/xul/object-fit-fill-svg-002-ref.html
layout/reftests/xul/object-fit-fill-svg-002.xul
layout/reftests/xul/object-fit-fill-svg-003-ref.html
layout/reftests/xul/object-fit-fill-svg-003.xul
layout/reftests/xul/object-fit-fill-svg-004-ref.html
layout/reftests/xul/object-fit-fill-svg-004.xul
layout/reftests/xul/object-fit-fill-svg-005-ref.html
layout/reftests/xul/object-fit-fill-svg-005.xul
layout/reftests/xul/object-fit-fill-svg-006-ref.html
layout/reftests/xul/object-fit-fill-svg-006.xul
layout/reftests/xul/object-fit-none-png-001-ref.html
layout/reftests/xul/object-fit-none-png-001.xul
layout/reftests/xul/object-fit-none-png-002-ref.html
layout/reftests/xul/object-fit-none-png-002.xul
layout/reftests/xul/object-fit-none-svg-001-ref.html
layout/reftests/xul/object-fit-none-svg-001.xul
layout/reftests/xul/object-fit-none-svg-002-ref.html
layout/reftests/xul/object-fit-none-svg-002.xul
layout/reftests/xul/object-fit-none-svg-003-ref.html
layout/reftests/xul/object-fit-none-svg-003.xul
layout/reftests/xul/object-fit-none-svg-004-ref.html
layout/reftests/xul/object-fit-none-svg-004.xul
layout/reftests/xul/object-fit-none-svg-005-ref.html
layout/reftests/xul/object-fit-none-svg-005.xul
layout/reftests/xul/object-fit-none-svg-006-ref.html
layout/reftests/xul/object-fit-none-svg-006.xul
layout/reftests/xul/object-fit-scale-down-png-001-ref.html
layout/reftests/xul/object-fit-scale-down-png-001.xul
layout/reftests/xul/object-fit-scale-down-png-002-ref.html
layout/reftests/xul/object-fit-scale-down-png-002.xul
layout/reftests/xul/object-fit-scale-down-svg-001-ref.html
layout/reftests/xul/object-fit-scale-down-svg-001.xul
layout/reftests/xul/object-fit-scale-down-svg-002-ref.html
layout/reftests/xul/object-fit-scale-down-svg-002.xul
layout/reftests/xul/object-fit-scale-down-svg-003-ref.html
layout/reftests/xul/object-fit-scale-down-svg-003.xul
layout/reftests/xul/object-fit-scale-down-svg-004-ref.html
layout/reftests/xul/object-fit-scale-down-svg-004.xul
layout/reftests/xul/object-fit-scale-down-svg-005-ref.html
layout/reftests/xul/object-fit-scale-down-svg-005.xul
layout/reftests/xul/object-fit-scale-down-svg-006-ref.html
layout/reftests/xul/object-fit-scale-down-svg-006.xul
layout/reftests/xul/object-position-png-001-ref.html
layout/reftests/xul/object-position-png-001.xul
layout/reftests/xul/object-position-png-002-ref.html
layout/reftests/xul/object-position-png-002.xul
layout/reftests/xul/reftest.list
copy from layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg
copy to layout/reftests/xul/colors-16x8-noSize.svg
copy from layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg
copy to layout/reftests/xul/colors-16x8-parDefault.svg
copy from layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png
copy to layout/reftests/xul/colors-16x8.png
copy from layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg
copy to layout/reftests/xul/colors-16x8.svg
copy from layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg
copy to layout/reftests/xul/colors-8x16-noSize.svg
copy from layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg
copy to layout/reftests/xul/colors-8x16-parDefault.svg
copy from layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png
copy to layout/reftests/xul/colors-8x16.png
copy from layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg
copy to layout/reftests/xul/colors-8x16.svg
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html
copy to layout/reftests/xul/object-fit-contain-png-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html
+++ b/layout/reftests/xul/object-fit-contain-png-001-ref.html
@@ -10,17 +10,17 @@
     <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-image: url("colors-16x8.png");
         background-size: contain;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html
copy to layout/reftests/xul/object-fit-contain-png-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html
+++ b/layout/reftests/xul/object-fit-contain-png-001.xul
@@ -1,77 +1,70 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright 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 {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: contain;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- 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>
+    <image src="colors-16x8.png" class="bigWide tr"/>
+    <image src="colors-16x8.png" class="bigWide bl"/>
+    <image src="colors-16x8.png" class="bigWide tl"/>
+    <image src="colors-16x8.png" class="bigWide br"/>
+    <image src="colors-16x8.png" class="bigWide tc"/>
+    <image src="colors-16x8.png" class="bigWide cr"/>
+    <image src="colors-16x8.png" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <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>
+    <image src="colors-16x8.png" class="bigTall tr"/>
+    <image src="colors-16x8.png" class="bigTall bl"/>
+    <image src="colors-16x8.png" class="bigTall tl"/>
+    <image src="colors-16x8.png" class="bigTall br"/>
+    <image src="colors-16x8.png" class="bigTall tc"/>
+    <image src="colors-16x8.png" class="bigTall cr"/>
+    <image src="colors-16x8.png" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <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>
+    <image src="colors-16x8.png" class="small tr"/>
+    <image src="colors-16x8.png" class="small bl"/>
+    <image src="colors-16x8.png" class="small tl"/>
+    <image src="colors-16x8.png" class="small br"/>
+    <image src="colors-16x8.png" class="small tc"/>
+    <image src="colors-16x8.png" class="small cr"/>
+    <image src="colors-16x8.png" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html
copy to layout/reftests/xul/object-fit-contain-png-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html
+++ b/layout/reftests/xul/object-fit-contain-png-002-ref.html
@@ -10,17 +10,17 @@
     <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-image: url("colors-8x16.png");
         background-size: contain;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html
copy to layout/reftests/xul/object-fit-contain-png-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html
+++ b/layout/reftests/xul/object-fit-contain-png-002.xul
@@ -1,77 +1,70 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright 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 {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: contain;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- 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>
+    <image src="colors-8x16.png" class="bigWide tr"/>
+    <image src="colors-8x16.png" class="bigWide bl"/>
+    <image src="colors-8x16.png" class="bigWide tl"/>
+    <image src="colors-8x16.png" class="bigWide br"/>
+    <image src="colors-8x16.png" class="bigWide tc"/>
+    <image src="colors-8x16.png" class="bigWide cr"/>
+    <image src="colors-8x16.png" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <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>
+    <image src="colors-8x16.png" class="bigTall tr"/>
+    <image src="colors-8x16.png" class="bigTall bl"/>
+    <image src="colors-8x16.png" class="bigTall tl"/>
+    <image src="colors-8x16.png" class="bigTall br"/>
+    <image src="colors-8x16.png" class="bigTall tc"/>
+    <image src="colors-8x16.png" class="bigTall cr"/>
+    <image src="colors-8x16.png" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <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>
+    <image src="colors-8x16.png" class="small tr"/>
+    <image src="colors-8x16.png" class="small bl"/>
+    <image src="colors-8x16.png" class="small tl"/>
+    <image src="colors-8x16.png" class="small br"/>
+    <image src="colors-8x16.png" class="small tc"/>
+    <image src="colors-8x16.png" class="small cr"/>
+    <image src="colors-8x16.png" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html
copy to layout/reftests/xul/object-fit-contain-svg-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html
+++ b/layout/reftests/xul/object-fit-contain-svg-001-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8.svg");
+        background-image: url("colors-16x8.svg");
         background-size: contain;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html
copy to layout/reftests/xul/object-fit-contain-svg-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html
+++ b/layout/reftests/xul/object-fit-contain-svg-001.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-contain-svg-001-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: contain;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8.svg" class="bigWide tr">
-    <img src="support/colors-16x8.svg" class="bigWide bl">
-    <img src="support/colors-16x8.svg" class="bigWide tl">
-    <img src="support/colors-16x8.svg" class="bigWide br">
-    <img src="support/colors-16x8.svg" class="bigWide tc">
-    <img src="support/colors-16x8.svg" class="bigWide cr">
-    <img src="support/colors-16x8.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8.svg" class="bigWide tr"/>
+    <image src="colors-16x8.svg" class="bigWide bl"/>
+    <image src="colors-16x8.svg" class="bigWide tl"/>
+    <image src="colors-16x8.svg" class="bigWide br"/>
+    <image src="colors-16x8.svg" class="bigWide tc"/>
+    <image src="colors-16x8.svg" class="bigWide cr"/>
+    <image src="colors-16x8.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8.svg" class="bigTall tr">
-    <img src="support/colors-16x8.svg" class="bigTall bl">
-    <img src="support/colors-16x8.svg" class="bigTall tl">
-    <img src="support/colors-16x8.svg" class="bigTall br">
-    <img src="support/colors-16x8.svg" class="bigTall tc">
-    <img src="support/colors-16x8.svg" class="bigTall cr">
-    <img src="support/colors-16x8.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8.svg" class="bigTall tr"/>
+    <image src="colors-16x8.svg" class="bigTall bl"/>
+    <image src="colors-16x8.svg" class="bigTall tl"/>
+    <image src="colors-16x8.svg" class="bigTall br"/>
+    <image src="colors-16x8.svg" class="bigTall tc"/>
+    <image src="colors-16x8.svg" class="bigTall cr"/>
+    <image src="colors-16x8.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8.svg" class="small tr">
-    <img src="support/colors-16x8.svg" class="small bl">
-    <img src="support/colors-16x8.svg" class="small tl">
-    <img src="support/colors-16x8.svg" class="small br">
-    <img src="support/colors-16x8.svg" class="small tc">
-    <img src="support/colors-16x8.svg" class="small cr">
-    <img src="support/colors-16x8.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8.svg" class="small tr"/>
+    <image src="colors-16x8.svg" class="small bl"/>
+    <image src="colors-16x8.svg" class="small tl"/>
+    <image src="colors-16x8.svg" class="small br"/>
+    <image src="colors-16x8.svg" class="small tc"/>
+    <image src="colors-16x8.svg" class="small cr"/>
+    <image src="colors-16x8.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html
copy to layout/reftests/xul/object-fit-contain-svg-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html
+++ b/layout/reftests/xul/object-fit-contain-svg-002-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16.svg");
+        background-image: url("colors-8x16.svg");
         background-size: contain;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html
copy to layout/reftests/xul/object-fit-contain-svg-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html
+++ b/layout/reftests/xul/object-fit-contain-svg-002.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-contain-svg-002-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: contain;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16.svg" class="bigWide tr">
-    <img src="support/colors-8x16.svg" class="bigWide bl">
-    <img src="support/colors-8x16.svg" class="bigWide tl">
-    <img src="support/colors-8x16.svg" class="bigWide br">
-    <img src="support/colors-8x16.svg" class="bigWide tc">
-    <img src="support/colors-8x16.svg" class="bigWide cr">
-    <img src="support/colors-8x16.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16.svg" class="bigWide tr"/>
+    <image src="colors-8x16.svg" class="bigWide bl"/>
+    <image src="colors-8x16.svg" class="bigWide tl"/>
+    <image src="colors-8x16.svg" class="bigWide br"/>
+    <image src="colors-8x16.svg" class="bigWide tc"/>
+    <image src="colors-8x16.svg" class="bigWide cr"/>
+    <image src="colors-8x16.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16.svg" class="bigTall tr">
-    <img src="support/colors-8x16.svg" class="bigTall bl">
-    <img src="support/colors-8x16.svg" class="bigTall tl">
-    <img src="support/colors-8x16.svg" class="bigTall br">
-    <img src="support/colors-8x16.svg" class="bigTall tc">
-    <img src="support/colors-8x16.svg" class="bigTall cr">
-    <img src="support/colors-8x16.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16.svg" class="bigTall tr"/>
+    <image src="colors-8x16.svg" class="bigTall bl"/>
+    <image src="colors-8x16.svg" class="bigTall tl"/>
+    <image src="colors-8x16.svg" class="bigTall br"/>
+    <image src="colors-8x16.svg" class="bigTall tc"/>
+    <image src="colors-8x16.svg" class="bigTall cr"/>
+    <image src="colors-8x16.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16.svg" class="small tr">
-    <img src="support/colors-8x16.svg" class="small bl">
-    <img src="support/colors-8x16.svg" class="small tl">
-    <img src="support/colors-8x16.svg" class="small br">
-    <img src="support/colors-8x16.svg" class="small tc">
-    <img src="support/colors-8x16.svg" class="small cr">
-    <img src="support/colors-8x16.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16.svg" class="small tr"/>
+    <image src="colors-8x16.svg" class="small bl"/>
+    <image src="colors-8x16.svg" class="small tl"/>
+    <image src="colors-8x16.svg" class="small br"/>
+    <image src="colors-8x16.svg" class="small tc"/>
+    <image src="colors-8x16.svg" class="small cr"/>
+    <image src="colors-8x16.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html
copy to layout/reftests/xul/object-fit-contain-svg-003-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html
+++ b/layout/reftests/xul/object-fit-contain-svg-003-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8-noSize.svg");
+        background-image: url("colors-16x8-noSize.svg");
         background-size: contain;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html
copy to layout/reftests/xul/object-fit-contain-svg-003.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html
+++ b/layout/reftests/xul/object-fit-contain-svg-003.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-contain-svg-003-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: contain;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide br"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8-noSize.svg" class="small tr">
-    <img src="support/colors-16x8-noSize.svg" class="small bl">
-    <img src="support/colors-16x8-noSize.svg" class="small tl">
-    <img src="support/colors-16x8-noSize.svg" class="small br">
-    <img src="support/colors-16x8-noSize.svg" class="small tc">
-    <img src="support/colors-16x8-noSize.svg" class="small cr">
-    <img src="support/colors-16x8-noSize.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8-noSize.svg" class="small tr"/>
+    <image src="colors-16x8-noSize.svg" class="small bl"/>
+    <image src="colors-16x8-noSize.svg" class="small tl"/>
+    <image src="colors-16x8-noSize.svg" class="small br"/>
+    <image src="colors-16x8-noSize.svg" class="small tc"/>
+    <image src="colors-16x8-noSize.svg" class="small cr"/>
+    <image src="colors-16x8-noSize.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html
copy to layout/reftests/xul/object-fit-contain-svg-004-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html
+++ b/layout/reftests/xul/object-fit-contain-svg-004-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16-noSize.svg");
+        background-image: url("colors-8x16-noSize.svg");
         background-size: contain;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html
copy to layout/reftests/xul/object-fit-contain-svg-004.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html
+++ b/layout/reftests/xul/object-fit-contain-svg-004.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-contain-svg-004-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: contain;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide br"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16-noSize.svg" class="small tr">
-    <img src="support/colors-8x16-noSize.svg" class="small bl">
-    <img src="support/colors-8x16-noSize.svg" class="small tl">
-    <img src="support/colors-8x16-noSize.svg" class="small br">
-    <img src="support/colors-8x16-noSize.svg" class="small tc">
-    <img src="support/colors-8x16-noSize.svg" class="small cr">
-    <img src="support/colors-8x16-noSize.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16-noSize.svg" class="small tr"/>
+    <image src="colors-8x16-noSize.svg" class="small bl"/>
+    <image src="colors-8x16-noSize.svg" class="small tl"/>
+    <image src="colors-8x16-noSize.svg" class="small br"/>
+    <image src="colors-8x16-noSize.svg" class="small tc"/>
+    <image src="colors-8x16-noSize.svg" class="small cr"/>
+    <image src="colors-8x16-noSize.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html
copy to layout/reftests/xul/object-fit-contain-svg-005-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html
+++ b/layout/reftests/xul/object-fit-contain-svg-005-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8-parDefault.svg");
+        background-image: url("colors-16x8-parDefault.svg");
         background-size: contain;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html
copy to layout/reftests/xul/object-fit-contain-svg-005.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html
+++ b/layout/reftests/xul/object-fit-contain-svg-005.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-contain-svg-005-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: contain;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8-parDefault.svg" class="small tr">
-    <img src="support/colors-16x8-parDefault.svg" class="small bl">
-    <img src="support/colors-16x8-parDefault.svg" class="small tl">
-    <img src="support/colors-16x8-parDefault.svg" class="small br">
-    <img src="support/colors-16x8-parDefault.svg" class="small tc">
-    <img src="support/colors-16x8-parDefault.svg" class="small cr">
-    <img src="support/colors-16x8-parDefault.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8-parDefault.svg" class="small tr"/>
+    <image src="colors-16x8-parDefault.svg" class="small bl"/>
+    <image src="colors-16x8-parDefault.svg" class="small tl"/>
+    <image src="colors-16x8-parDefault.svg" class="small br"/>
+    <image src="colors-16x8-parDefault.svg" class="small tc"/>
+    <image src="colors-16x8-parDefault.svg" class="small cr"/>
+    <image src="colors-16x8-parDefault.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html
copy to layout/reftests/xul/object-fit-contain-svg-006-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html
+++ b/layout/reftests/xul/object-fit-contain-svg-006-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16-parDefault.svg");
+        background-image: url("colors-8x16-parDefault.svg");
         background-size: contain;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html
copy to layout/reftests/xul/object-fit-contain-svg-006.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html
+++ b/layout/reftests/xul/object-fit-contain-svg-006.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-contain-svg-006-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: contain;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16-parDefault.svg" class="small tr">
-    <img src="support/colors-8x16-parDefault.svg" class="small bl">
-    <img src="support/colors-8x16-parDefault.svg" class="small tl">
-    <img src="support/colors-8x16-parDefault.svg" class="small br">
-    <img src="support/colors-8x16-parDefault.svg" class="small tc">
-    <img src="support/colors-8x16-parDefault.svg" class="small cr">
-    <img src="support/colors-8x16-parDefault.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16-parDefault.svg" class="small tr"/>
+    <image src="colors-8x16-parDefault.svg" class="small bl"/>
+    <image src="colors-8x16-parDefault.svg" class="small tl"/>
+    <image src="colors-8x16-parDefault.svg" class="small br"/>
+    <image src="colors-8x16-parDefault.svg" class="small tc"/>
+    <image src="colors-8x16-parDefault.svg" class="small cr"/>
+    <image src="colors-8x16-parDefault.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html
copy to layout/reftests/xul/object-fit-cover-png-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html
+++ b/layout/reftests/xul/object-fit-cover-png-001-ref.html
@@ -10,17 +10,17 @@
     <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-image: url("colors-16x8.png");
         background-size: cover;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html
copy to layout/reftests/xul/object-fit-cover-png-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html
+++ b/layout/reftests/xul/object-fit-cover-png-001.xul
@@ -1,77 +1,70 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright 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 {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: cover;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- 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>
+    <image src="colors-16x8.png" class="bigWide tr"/>
+    <image src="colors-16x8.png" class="bigWide bl"/>
+    <image src="colors-16x8.png" class="bigWide tl"/>
+    <image src="colors-16x8.png" class="bigWide br"/>
+    <image src="colors-16x8.png" class="bigWide tc"/>
+    <image src="colors-16x8.png" class="bigWide cr"/>
+    <image src="colors-16x8.png" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <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>
+    <image src="colors-16x8.png" class="bigTall tr"/>
+    <image src="colors-16x8.png" class="bigTall bl"/>
+    <image src="colors-16x8.png" class="bigTall tl"/>
+    <image src="colors-16x8.png" class="bigTall br"/>
+    <image src="colors-16x8.png" class="bigTall tc"/>
+    <image src="colors-16x8.png" class="bigTall cr"/>
+    <image src="colors-16x8.png" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <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>
+    <image src="colors-16x8.png" class="small tr"/>
+    <image src="colors-16x8.png" class="small bl"/>
+    <image src="colors-16x8.png" class="small tl"/>
+    <image src="colors-16x8.png" class="small br"/>
+    <image src="colors-16x8.png" class="small tc"/>
+    <image src="colors-16x8.png" class="small cr"/>
+    <image src="colors-16x8.png" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html
copy to layout/reftests/xul/object-fit-cover-png-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html
+++ b/layout/reftests/xul/object-fit-cover-png-002-ref.html
@@ -10,17 +10,17 @@
     <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-image: url("colors-8x16.png");
         background-size: cover;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html
copy to layout/reftests/xul/object-fit-cover-png-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html
+++ b/layout/reftests/xul/object-fit-cover-png-002.xul
@@ -1,77 +1,70 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright 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 {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: cover;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- 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>
+    <image src="colors-8x16.png" class="bigWide tr"/>
+    <image src="colors-8x16.png" class="bigWide bl"/>
+    <image src="colors-8x16.png" class="bigWide tl"/>
+    <image src="colors-8x16.png" class="bigWide br"/>
+    <image src="colors-8x16.png" class="bigWide tc"/>
+    <image src="colors-8x16.png" class="bigWide cr"/>
+    <image src="colors-8x16.png" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <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>
+    <image src="colors-8x16.png" class="bigTall tr"/>
+    <image src="colors-8x16.png" class="bigTall bl"/>
+    <image src="colors-8x16.png" class="bigTall tl"/>
+    <image src="colors-8x16.png" class="bigTall br"/>
+    <image src="colors-8x16.png" class="bigTall tc"/>
+    <image src="colors-8x16.png" class="bigTall cr"/>
+    <image src="colors-8x16.png" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <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>
+    <image src="colors-8x16.png" class="small tr"/>
+    <image src="colors-8x16.png" class="small bl"/>
+    <image src="colors-8x16.png" class="small tl"/>
+    <image src="colors-8x16.png" class="small br"/>
+    <image src="colors-8x16.png" class="small tc"/>
+    <image src="colors-8x16.png" class="small cr"/>
+    <image src="colors-8x16.png" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html
copy to layout/reftests/xul/object-fit-cover-svg-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html
+++ b/layout/reftests/xul/object-fit-cover-svg-001-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8.svg");
+        background-image: url("colors-16x8.svg");
         background-size: cover;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html
copy to layout/reftests/xul/object-fit-cover-svg-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html
+++ b/layout/reftests/xul/object-fit-cover-svg-001.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-cover-svg-001-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: cover;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8.svg" class="bigWide tr">
-    <img src="support/colors-16x8.svg" class="bigWide bl">
-    <img src="support/colors-16x8.svg" class="bigWide tl">
-    <img src="support/colors-16x8.svg" class="bigWide br">
-    <img src="support/colors-16x8.svg" class="bigWide tc">
-    <img src="support/colors-16x8.svg" class="bigWide cr">
-    <img src="support/colors-16x8.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8.svg" class="bigWide tr"/>
+    <image src="colors-16x8.svg" class="bigWide bl"/>
+    <image src="colors-16x8.svg" class="bigWide tl"/>
+    <image src="colors-16x8.svg" class="bigWide br"/>
+    <image src="colors-16x8.svg" class="bigWide tc"/>
+    <image src="colors-16x8.svg" class="bigWide cr"/>
+    <image src="colors-16x8.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8.svg" class="bigTall tr">
-    <img src="support/colors-16x8.svg" class="bigTall bl">
-    <img src="support/colors-16x8.svg" class="bigTall tl">
-    <img src="support/colors-16x8.svg" class="bigTall br">
-    <img src="support/colors-16x8.svg" class="bigTall tc">
-    <img src="support/colors-16x8.svg" class="bigTall cr">
-    <img src="support/colors-16x8.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8.svg" class="bigTall tr"/>
+    <image src="colors-16x8.svg" class="bigTall bl"/>
+    <image src="colors-16x8.svg" class="bigTall tl"/>
+    <image src="colors-16x8.svg" class="bigTall br"/>
+    <image src="colors-16x8.svg" class="bigTall tc"/>
+    <image src="colors-16x8.svg" class="bigTall cr"/>
+    <image src="colors-16x8.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8.svg" class="small tr">
-    <img src="support/colors-16x8.svg" class="small bl">
-    <img src="support/colors-16x8.svg" class="small tl">
-    <img src="support/colors-16x8.svg" class="small br">
-    <img src="support/colors-16x8.svg" class="small tc">
-    <img src="support/colors-16x8.svg" class="small cr">
-    <img src="support/colors-16x8.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8.svg" class="small tr"/>
+    <image src="colors-16x8.svg" class="small bl"/>
+    <image src="colors-16x8.svg" class="small tl"/>
+    <image src="colors-16x8.svg" class="small br"/>
+    <image src="colors-16x8.svg" class="small tc"/>
+    <image src="colors-16x8.svg" class="small cr"/>
+    <image src="colors-16x8.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html
copy to layout/reftests/xul/object-fit-cover-svg-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html
+++ b/layout/reftests/xul/object-fit-cover-svg-002-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16.svg");
+        background-image: url("colors-8x16.svg");
         background-size: cover;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html
copy to layout/reftests/xul/object-fit-cover-svg-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html
+++ b/layout/reftests/xul/object-fit-cover-svg-002.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-cover-svg-002-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: cover;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16.svg" class="bigWide tr">
-    <img src="support/colors-8x16.svg" class="bigWide bl">
-    <img src="support/colors-8x16.svg" class="bigWide tl">
-    <img src="support/colors-8x16.svg" class="bigWide br">
-    <img src="support/colors-8x16.svg" class="bigWide tc">
-    <img src="support/colors-8x16.svg" class="bigWide cr">
-    <img src="support/colors-8x16.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16.svg" class="bigWide tr"/>
+    <image src="colors-8x16.svg" class="bigWide bl"/>
+    <image src="colors-8x16.svg" class="bigWide tl"/>
+    <image src="colors-8x16.svg" class="bigWide br"/>
+    <image src="colors-8x16.svg" class="bigWide tc"/>
+    <image src="colors-8x16.svg" class="bigWide cr"/>
+    <image src="colors-8x16.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16.svg" class="bigTall tr">
-    <img src="support/colors-8x16.svg" class="bigTall bl">
-    <img src="support/colors-8x16.svg" class="bigTall tl">
-    <img src="support/colors-8x16.svg" class="bigTall br">
-    <img src="support/colors-8x16.svg" class="bigTall tc">
-    <img src="support/colors-8x16.svg" class="bigTall cr">
-    <img src="support/colors-8x16.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16.svg" class="bigTall tr"/>
+    <image src="colors-8x16.svg" class="bigTall bl"/>
+    <image src="colors-8x16.svg" class="bigTall tl"/>
+    <image src="colors-8x16.svg" class="bigTall br"/>
+    <image src="colors-8x16.svg" class="bigTall tc"/>
+    <image src="colors-8x16.svg" class="bigTall cr"/>
+    <image src="colors-8x16.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16.svg" class="small tr">
-    <img src="support/colors-8x16.svg" class="small bl">
-    <img src="support/colors-8x16.svg" class="small tl">
-    <img src="support/colors-8x16.svg" class="small br">
-    <img src="support/colors-8x16.svg" class="small tc">
-    <img src="support/colors-8x16.svg" class="small cr">
-    <img src="support/colors-8x16.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16.svg" class="small tr"/>
+    <image src="colors-8x16.svg" class="small bl"/>
+    <image src="colors-8x16.svg" class="small tl"/>
+    <image src="colors-8x16.svg" class="small br"/>
+    <image src="colors-8x16.svg" class="small tc"/>
+    <image src="colors-8x16.svg" class="small cr"/>
+    <image src="colors-8x16.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html
copy to layout/reftests/xul/object-fit-cover-svg-003-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html
+++ b/layout/reftests/xul/object-fit-cover-svg-003-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8-noSize.svg");
+        background-image: url("colors-16x8-noSize.svg");
         background-size: cover;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html
copy to layout/reftests/xul/object-fit-cover-svg-003.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html
+++ b/layout/reftests/xul/object-fit-cover-svg-003.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-cover-svg-003-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: cover;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide br"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8-noSize.svg" class="small tr">
-    <img src="support/colors-16x8-noSize.svg" class="small bl">
-    <img src="support/colors-16x8-noSize.svg" class="small tl">
-    <img src="support/colors-16x8-noSize.svg" class="small br">
-    <img src="support/colors-16x8-noSize.svg" class="small tc">
-    <img src="support/colors-16x8-noSize.svg" class="small cr">
-    <img src="support/colors-16x8-noSize.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8-noSize.svg" class="small tr"/>
+    <image src="colors-16x8-noSize.svg" class="small bl"/>
+    <image src="colors-16x8-noSize.svg" class="small tl"/>
+    <image src="colors-16x8-noSize.svg" class="small br"/>
+    <image src="colors-16x8-noSize.svg" class="small tc"/>
+    <image src="colors-16x8-noSize.svg" class="small cr"/>
+    <image src="colors-16x8-noSize.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html
copy to layout/reftests/xul/object-fit-cover-svg-004-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html
+++ b/layout/reftests/xul/object-fit-cover-svg-004-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16-noSize.svg");
+        background-image: url("colors-8x16-noSize.svg");
         background-size: cover;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html
copy to layout/reftests/xul/object-fit-cover-svg-004.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html
+++ b/layout/reftests/xul/object-fit-cover-svg-004.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-cover-svg-004-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: cover;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide br"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16-noSize.svg" class="small tr">
-    <img src="support/colors-8x16-noSize.svg" class="small bl">
-    <img src="support/colors-8x16-noSize.svg" class="small tl">
-    <img src="support/colors-8x16-noSize.svg" class="small br">
-    <img src="support/colors-8x16-noSize.svg" class="small tc">
-    <img src="support/colors-8x16-noSize.svg" class="small cr">
-    <img src="support/colors-8x16-noSize.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16-noSize.svg" class="small tr"/>
+    <image src="colors-8x16-noSize.svg" class="small bl"/>
+    <image src="colors-8x16-noSize.svg" class="small tl"/>
+    <image src="colors-8x16-noSize.svg" class="small br"/>
+    <image src="colors-8x16-noSize.svg" class="small tc"/>
+    <image src="colors-8x16-noSize.svg" class="small cr"/>
+    <image src="colors-8x16-noSize.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html
copy to layout/reftests/xul/object-fit-cover-svg-005-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html
+++ b/layout/reftests/xul/object-fit-cover-svg-005-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8-parDefault.svg");
+        background-image: url("colors-16x8-parDefault.svg");
         background-size: cover;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html
copy to layout/reftests/xul/object-fit-cover-svg-005.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html
+++ b/layout/reftests/xul/object-fit-cover-svg-005.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-cover-svg-005-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: cover;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8-parDefault.svg" class="small tr">
-    <img src="support/colors-16x8-parDefault.svg" class="small bl">
-    <img src="support/colors-16x8-parDefault.svg" class="small tl">
-    <img src="support/colors-16x8-parDefault.svg" class="small br">
-    <img src="support/colors-16x8-parDefault.svg" class="small tc">
-    <img src="support/colors-16x8-parDefault.svg" class="small cr">
-    <img src="support/colors-16x8-parDefault.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8-parDefault.svg" class="small tr"/>
+    <image src="colors-16x8-parDefault.svg" class="small bl"/>
+    <image src="colors-16x8-parDefault.svg" class="small tl"/>
+    <image src="colors-16x8-parDefault.svg" class="small br"/>
+    <image src="colors-16x8-parDefault.svg" class="small tc"/>
+    <image src="colors-16x8-parDefault.svg" class="small cr"/>
+    <image src="colors-16x8-parDefault.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html
copy to layout/reftests/xul/object-fit-cover-svg-006-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html
+++ b/layout/reftests/xul/object-fit-cover-svg-006-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16-parDefault.svg");
+        background-image: url("colors-8x16-parDefault.svg");
         background-size: cover;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html
copy to layout/reftests/xul/object-fit-cover-svg-006.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html
+++ b/layout/reftests/xul/object-fit-cover-svg-006.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-cover-svg-006-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: cover;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16-parDefault.svg" class="small tr">
-    <img src="support/colors-8x16-parDefault.svg" class="small bl">
-    <img src="support/colors-8x16-parDefault.svg" class="small tl">
-    <img src="support/colors-8x16-parDefault.svg" class="small br">
-    <img src="support/colors-8x16-parDefault.svg" class="small tc">
-    <img src="support/colors-8x16-parDefault.svg" class="small cr">
-    <img src="support/colors-8x16-parDefault.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16-parDefault.svg" class="small tr"/>
+    <image src="colors-8x16-parDefault.svg" class="small bl"/>
+    <image src="colors-8x16-parDefault.svg" class="small tl"/>
+    <image src="colors-8x16-parDefault.svg" class="small br"/>
+    <image src="colors-8x16-parDefault.svg" class="small tc"/>
+    <image src="colors-8x16-parDefault.svg" class="small cr"/>
+    <image src="colors-8x16-parDefault.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html
copy to layout/reftests/xul/object-fit-fill-png-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html
+++ b/layout/reftests/xul/object-fit-fill-png-001-ref.html
@@ -10,17 +10,17 @@
     <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-image: url("colors-16x8.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html
copy to layout/reftests/xul/object-fit-fill-png-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html
+++ b/layout/reftests/xul/object-fit-fill-png-001.xul
@@ -1,77 +1,70 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright 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 {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: fill;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- 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>
+    <image src="colors-16x8.png" class="bigWide tr"/>
+    <image src="colors-16x8.png" class="bigWide bl"/>
+    <image src="colors-16x8.png" class="bigWide tl"/>
+    <image src="colors-16x8.png" class="bigWide br"/>
+    <image src="colors-16x8.png" class="bigWide tc"/>
+    <image src="colors-16x8.png" class="bigWide cr"/>
+    <image src="colors-16x8.png" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <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>
+    <image src="colors-16x8.png" class="bigTall tr"/>
+    <image src="colors-16x8.png" class="bigTall bl"/>
+    <image src="colors-16x8.png" class="bigTall tl"/>
+    <image src="colors-16x8.png" class="bigTall br"/>
+    <image src="colors-16x8.png" class="bigTall tc"/>
+    <image src="colors-16x8.png" class="bigTall cr"/>
+    <image src="colors-16x8.png" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <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>
+    <image src="colors-16x8.png" class="small tr"/>
+    <image src="colors-16x8.png" class="small bl"/>
+    <image src="colors-16x8.png" class="small tl"/>
+    <image src="colors-16x8.png" class="small br"/>
+    <image src="colors-16x8.png" class="small tc"/>
+    <image src="colors-16x8.png" class="small cr"/>
+    <image src="colors-16x8.png" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html
copy to layout/reftests/xul/object-fit-fill-png-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html
+++ b/layout/reftests/xul/object-fit-fill-png-002-ref.html
@@ -10,17 +10,17 @@
     <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-image: url("colors-8x16.png");
         background-size: 100% 100%;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html
copy to layout/reftests/xul/object-fit-fill-png-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html
+++ b/layout/reftests/xul/object-fit-fill-png-002.xul
@@ -1,77 +1,70 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright 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 {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: fill;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- 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>
+    <image src="colors-8x16.png" class="bigWide tr"/>
+    <image src="colors-8x16.png" class="bigWide bl"/>
+    <image src="colors-8x16.png" class="bigWide tl"/>
+    <image src="colors-8x16.png" class="bigWide br"/>
+    <image src="colors-8x16.png" class="bigWide tc"/>
+    <image src="colors-8x16.png" class="bigWide cr"/>
+    <image src="colors-8x16.png" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <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>
+    <image src="colors-8x16.png" class="bigTall tr"/>
+    <image src="colors-8x16.png" class="bigTall bl"/>
+    <image src="colors-8x16.png" class="bigTall tl"/>
+    <image src="colors-8x16.png" class="bigTall br"/>
+    <image src="colors-8x16.png" class="bigTall tc"/>
+    <image src="colors-8x16.png" class="bigTall cr"/>
+    <image src="colors-8x16.png" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <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>
+    <image src="colors-8x16.png" class="small tr"/>
+    <image src="colors-8x16.png" class="small bl"/>
+    <image src="colors-8x16.png" class="small tl"/>
+    <image src="colors-8x16.png" class="small br"/>
+    <image src="colors-8x16.png" class="small tc"/>
+    <image src="colors-8x16.png" class="small cr"/>
+    <image src="colors-8x16.png" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html
copy to layout/reftests/xul/object-fit-fill-svg-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html
+++ b/layout/reftests/xul/object-fit-fill-svg-001-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8.svg");
+        background-image: url("colors-16x8.svg");
         background-size: 100% 100%;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html
copy to layout/reftests/xul/object-fit-fill-svg-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html
+++ b/layout/reftests/xul/object-fit-fill-svg-001.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-fill-svg-001-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: fill;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8.svg" class="bigWide tr">
-    <img src="support/colors-16x8.svg" class="bigWide bl">
-    <img src="support/colors-16x8.svg" class="bigWide tl">
-    <img src="support/colors-16x8.svg" class="bigWide br">
-    <img src="support/colors-16x8.svg" class="bigWide tc">
-    <img src="support/colors-16x8.svg" class="bigWide cr">
-    <img src="support/colors-16x8.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8.svg" class="bigWide tr"/>
+    <image src="colors-16x8.svg" class="bigWide bl"/>
+    <image src="colors-16x8.svg" class="bigWide tl"/>
+    <image src="colors-16x8.svg" class="bigWide br"/>
+    <image src="colors-16x8.svg" class="bigWide tc"/>
+    <image src="colors-16x8.svg" class="bigWide cr"/>
+    <image src="colors-16x8.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8.svg" class="bigTall tr">
-    <img src="support/colors-16x8.svg" class="bigTall bl">
-    <img src="support/colors-16x8.svg" class="bigTall tl">
-    <img src="support/colors-16x8.svg" class="bigTall br">
-    <img src="support/colors-16x8.svg" class="bigTall tc">
-    <img src="support/colors-16x8.svg" class="bigTall cr">
-    <img src="support/colors-16x8.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8.svg" class="bigTall tr"/>
+    <image src="colors-16x8.svg" class="bigTall bl"/>
+    <image src="colors-16x8.svg" class="bigTall tl"/>
+    <image src="colors-16x8.svg" class="bigTall br"/>
+    <image src="colors-16x8.svg" class="bigTall tc"/>
+    <image src="colors-16x8.svg" class="bigTall cr"/>
+    <image src="colors-16x8.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8.svg" class="small tr">
-    <img src="support/colors-16x8.svg" class="small bl">
-    <img src="support/colors-16x8.svg" class="small tl">
-    <img src="support/colors-16x8.svg" class="small br">
-    <img src="support/colors-16x8.svg" class="small tc">
-    <img src="support/colors-16x8.svg" class="small cr">
-    <img src="support/colors-16x8.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8.svg" class="small tr"/>
+    <image src="colors-16x8.svg" class="small bl"/>
+    <image src="colors-16x8.svg" class="small tl"/>
+    <image src="colors-16x8.svg" class="small br"/>
+    <image src="colors-16x8.svg" class="small tc"/>
+    <image src="colors-16x8.svg" class="small cr"/>
+    <image src="colors-16x8.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html
copy to layout/reftests/xul/object-fit-fill-svg-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html
+++ b/layout/reftests/xul/object-fit-fill-svg-002-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16.svg");
+        background-image: url("colors-8x16.svg");
         background-size: 100% 100%;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html
copy to layout/reftests/xul/object-fit-fill-svg-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html
+++ b/layout/reftests/xul/object-fit-fill-svg-002.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-fill-svg-002-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: fill;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16.svg" class="bigWide tr">
-    <img src="support/colors-8x16.svg" class="bigWide bl">
-    <img src="support/colors-8x16.svg" class="bigWide tl">
-    <img src="support/colors-8x16.svg" class="bigWide br">
-    <img src="support/colors-8x16.svg" class="bigWide tc">
-    <img src="support/colors-8x16.svg" class="bigWide cr">
-    <img src="support/colors-8x16.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16.svg" class="bigWide tr"/>
+    <image src="colors-8x16.svg" class="bigWide bl"/>
+    <image src="colors-8x16.svg" class="bigWide tl"/>
+    <image src="colors-8x16.svg" class="bigWide br"/>
+    <image src="colors-8x16.svg" class="bigWide tc"/>
+    <image src="colors-8x16.svg" class="bigWide cr"/>
+    <image src="colors-8x16.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16.svg" class="bigTall tr">
-    <img src="support/colors-8x16.svg" class="bigTall bl">
-    <img src="support/colors-8x16.svg" class="bigTall tl">
-    <img src="support/colors-8x16.svg" class="bigTall br">
-    <img src="support/colors-8x16.svg" class="bigTall tc">
-    <img src="support/colors-8x16.svg" class="bigTall cr">
-    <img src="support/colors-8x16.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16.svg" class="bigTall tr"/>
+    <image src="colors-8x16.svg" class="bigTall bl"/>
+    <image src="colors-8x16.svg" class="bigTall tl"/>
+    <image src="colors-8x16.svg" class="bigTall br"/>
+    <image src="colors-8x16.svg" class="bigTall tc"/>
+    <image src="colors-8x16.svg" class="bigTall cr"/>
+    <image src="colors-8x16.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16.svg" class="small tr">
-    <img src="support/colors-8x16.svg" class="small bl">
-    <img src="support/colors-8x16.svg" class="small tl">
-    <img src="support/colors-8x16.svg" class="small br">
-    <img src="support/colors-8x16.svg" class="small tc">
-    <img src="support/colors-8x16.svg" class="small cr">
-    <img src="support/colors-8x16.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16.svg" class="small tr"/>
+    <image src="colors-8x16.svg" class="small bl"/>
+    <image src="colors-8x16.svg" class="small tl"/>
+    <image src="colors-8x16.svg" class="small br"/>
+    <image src="colors-8x16.svg" class="small tc"/>
+    <image src="colors-8x16.svg" class="small cr"/>
+    <image src="colors-8x16.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html
copy to layout/reftests/xul/object-fit-fill-svg-003-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html
+++ b/layout/reftests/xul/object-fit-fill-svg-003-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8-noSize.svg");
+        background-image: url("colors-16x8-noSize.svg");
         background-size: 100% 100%;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html
copy to layout/reftests/xul/object-fit-fill-svg-003.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html
+++ b/layout/reftests/xul/object-fit-fill-svg-003.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-fill-svg-003-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: fill;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide br"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8-noSize.svg" class="small tr">
-    <img src="support/colors-16x8-noSize.svg" class="small bl">
-    <img src="support/colors-16x8-noSize.svg" class="small tl">
-    <img src="support/colors-16x8-noSize.svg" class="small br">
-    <img src="support/colors-16x8-noSize.svg" class="small tc">
-    <img src="support/colors-16x8-noSize.svg" class="small cr">
-    <img src="support/colors-16x8-noSize.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8-noSize.svg" class="small tr"/>
+    <image src="colors-16x8-noSize.svg" class="small bl"/>
+    <image src="colors-16x8-noSize.svg" class="small tl"/>
+    <image src="colors-16x8-noSize.svg" class="small br"/>
+    <image src="colors-16x8-noSize.svg" class="small tc"/>
+    <image src="colors-16x8-noSize.svg" class="small cr"/>
+    <image src="colors-16x8-noSize.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html
copy to layout/reftests/xul/object-fit-fill-svg-004-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html
+++ b/layout/reftests/xul/object-fit-fill-svg-004-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16-noSize.svg");
+        background-image: url("colors-8x16-noSize.svg");
         background-size: 100% 100%;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html
copy to layout/reftests/xul/object-fit-fill-svg-004.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html
+++ b/layout/reftests/xul/object-fit-fill-svg-004.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-fill-svg-004-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: fill;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide br"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16-noSize.svg" class="small tr">
-    <img src="support/colors-8x16-noSize.svg" class="small bl">
-    <img src="support/colors-8x16-noSize.svg" class="small tl">
-    <img src="support/colors-8x16-noSize.svg" class="small br">
-    <img src="support/colors-8x16-noSize.svg" class="small tc">
-    <img src="support/colors-8x16-noSize.svg" class="small cr">
-    <img src="support/colors-8x16-noSize.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16-noSize.svg" class="small tr"/>
+    <image src="colors-8x16-noSize.svg" class="small bl"/>
+    <image src="colors-8x16-noSize.svg" class="small tl"/>
+    <image src="colors-8x16-noSize.svg" class="small br"/>
+    <image src="colors-8x16-noSize.svg" class="small tc"/>
+    <image src="colors-8x16-noSize.svg" class="small cr"/>
+    <image src="colors-8x16-noSize.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html
copy to layout/reftests/xul/object-fit-fill-svg-005-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html
+++ b/layout/reftests/xul/object-fit-fill-svg-005-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8-parDefault.svg");
+        background-image: url("colors-16x8-parDefault.svg");
         background-size: 100% 100%;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html
copy to layout/reftests/xul/object-fit-fill-svg-005.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html
+++ b/layout/reftests/xul/object-fit-fill-svg-005.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-fill-svg-005-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: fill;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8-parDefault.svg" class="small tr">
-    <img src="support/colors-16x8-parDefault.svg" class="small bl">
-    <img src="support/colors-16x8-parDefault.svg" class="small tl">
-    <img src="support/colors-16x8-parDefault.svg" class="small br">
-    <img src="support/colors-16x8-parDefault.svg" class="small tc">
-    <img src="support/colors-16x8-parDefault.svg" class="small cr">
-    <img src="support/colors-16x8-parDefault.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8-parDefault.svg" class="small tr"/>
+    <image src="colors-16x8-parDefault.svg" class="small bl"/>
+    <image src="colors-16x8-parDefault.svg" class="small tl"/>
+    <image src="colors-16x8-parDefault.svg" class="small br"/>
+    <image src="colors-16x8-parDefault.svg" class="small tc"/>
+    <image src="colors-16x8-parDefault.svg" class="small cr"/>
+    <image src="colors-16x8-parDefault.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html
copy to layout/reftests/xul/object-fit-fill-svg-006-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html
+++ b/layout/reftests/xul/object-fit-fill-svg-006-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16-parDefault.svg");
+        background-image: url("colors-8x16-parDefault.svg");
         background-size: 100% 100%;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html
copy to layout/reftests/xul/object-fit-fill-svg-006.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html
+++ b/layout/reftests/xul/object-fit-fill-svg-006.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-fill-svg-006-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: fill;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16-parDefault.svg" class="small tr">
-    <img src="support/colors-8x16-parDefault.svg" class="small bl">
-    <img src="support/colors-8x16-parDefault.svg" class="small tl">
-    <img src="support/colors-8x16-parDefault.svg" class="small br">
-    <img src="support/colors-8x16-parDefault.svg" class="small tc">
-    <img src="support/colors-8x16-parDefault.svg" class="small cr">
-    <img src="support/colors-8x16-parDefault.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16-parDefault.svg" class="small tr"/>
+    <image src="colors-8x16-parDefault.svg" class="small bl"/>
+    <image src="colors-8x16-parDefault.svg" class="small tl"/>
+    <image src="colors-8x16-parDefault.svg" class="small br"/>
+    <image src="colors-8x16-parDefault.svg" class="small tc"/>
+    <image src="colors-8x16-parDefault.svg" class="small cr"/>
+    <image src="colors-8x16-parDefault.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html
copy to layout/reftests/xul/object-fit-none-png-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html
+++ b/layout/reftests/xul/object-fit-none-png-001-ref.html
@@ -10,17 +10,17 @@
     <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-image: url("colors-16x8.png");
         background-size: auto auto;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html
copy to layout/reftests/xul/object-fit-none-png-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html
+++ b/layout/reftests/xul/object-fit-none-png-001.xul
@@ -1,77 +1,70 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright 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 {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: none;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- 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>
+    <image src="colors-16x8.png" class="bigWide tr"/>
+    <image src="colors-16x8.png" class="bigWide bl"/>
+    <image src="colors-16x8.png" class="bigWide tl"/>
+    <image src="colors-16x8.png" class="bigWide br"/>
+    <image src="colors-16x8.png" class="bigWide tc"/>
+    <image src="colors-16x8.png" class="bigWide cr"/>
+    <image src="colors-16x8.png" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <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>
+    <image src="colors-16x8.png" class="bigTall tr"/>
+    <image src="colors-16x8.png" class="bigTall bl"/>
+    <image src="colors-16x8.png" class="bigTall tl"/>
+    <image src="colors-16x8.png" class="bigTall br"/>
+    <image src="colors-16x8.png" class="bigTall tc"/>
+    <image src="colors-16x8.png" class="bigTall cr"/>
+    <image src="colors-16x8.png" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <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>
+    <image src="colors-16x8.png" class="small tr"/>
+    <image src="colors-16x8.png" class="small bl"/>
+    <image src="colors-16x8.png" class="small tl"/>
+    <image src="colors-16x8.png" class="small br"/>
+    <image src="colors-16x8.png" class="small tc"/>
+    <image src="colors-16x8.png" class="small cr"/>
+    <image src="colors-16x8.png" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html
copy to layout/reftests/xul/object-fit-none-png-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html
+++ b/layout/reftests/xul/object-fit-none-png-002-ref.html
@@ -10,17 +10,17 @@
     <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-image: url("colors-8x16.png");
         background-size: auto auto;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html
copy to layout/reftests/xul/object-fit-none-png-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html
+++ b/layout/reftests/xul/object-fit-none-png-002.xul
@@ -1,77 +1,70 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright 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 {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: none;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- 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>
+    <image src="colors-8x16.png" class="bigWide tr"/>
+    <image src="colors-8x16.png" class="bigWide bl"/>
+    <image src="colors-8x16.png" class="bigWide tl"/>
+    <image src="colors-8x16.png" class="bigWide br"/>
+    <image src="colors-8x16.png" class="bigWide tc"/>
+    <image src="colors-8x16.png" class="bigWide cr"/>
+    <image src="colors-8x16.png" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <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>
+    <image src="colors-8x16.png" class="bigTall tr"/>
+    <image src="colors-8x16.png" class="bigTall bl"/>
+    <image src="colors-8x16.png" class="bigTall tl"/>
+    <image src="colors-8x16.png" class="bigTall br"/>
+    <image src="colors-8x16.png" class="bigTall tc"/>
+    <image src="colors-8x16.png" class="bigTall cr"/>
+    <image src="colors-8x16.png" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <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>
+    <image src="colors-8x16.png" class="small tr"/>
+    <image src="colors-8x16.png" class="small bl"/>
+    <image src="colors-8x16.png" class="small tl"/>
+    <image src="colors-8x16.png" class="small br"/>
+    <image src="colors-8x16.png" class="small tc"/>
+    <image src="colors-8x16.png" class="small cr"/>
+    <image src="colors-8x16.png" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html
copy to layout/reftests/xul/object-fit-none-svg-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html
+++ b/layout/reftests/xul/object-fit-none-svg-001-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8.svg");
+        background-image: url("colors-16x8.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html
copy to layout/reftests/xul/object-fit-none-svg-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html
+++ b/layout/reftests/xul/object-fit-none-svg-001.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-none-svg-001-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: none;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8.svg" class="bigWide tr">
-    <img src="support/colors-16x8.svg" class="bigWide bl">
-    <img src="support/colors-16x8.svg" class="bigWide tl">
-    <img src="support/colors-16x8.svg" class="bigWide br">
-    <img src="support/colors-16x8.svg" class="bigWide tc">
-    <img src="support/colors-16x8.svg" class="bigWide cr">
-    <img src="support/colors-16x8.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8.svg" class="bigWide tr"/>
+    <image src="colors-16x8.svg" class="bigWide bl"/>
+    <image src="colors-16x8.svg" class="bigWide tl"/>
+    <image src="colors-16x8.svg" class="bigWide br"/>
+    <image src="colors-16x8.svg" class="bigWide tc"/>
+    <image src="colors-16x8.svg" class="bigWide cr"/>
+    <image src="colors-16x8.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8.svg" class="bigTall tr">
-    <img src="support/colors-16x8.svg" class="bigTall bl">
-    <img src="support/colors-16x8.svg" class="bigTall tl">
-    <img src="support/colors-16x8.svg" class="bigTall br">
-    <img src="support/colors-16x8.svg" class="bigTall tc">
-    <img src="support/colors-16x8.svg" class="bigTall cr">
-    <img src="support/colors-16x8.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8.svg" class="bigTall tr"/>
+    <image src="colors-16x8.svg" class="bigTall bl"/>
+    <image src="colors-16x8.svg" class="bigTall tl"/>
+    <image src="colors-16x8.svg" class="bigTall br"/>
+    <image src="colors-16x8.svg" class="bigTall tc"/>
+    <image src="colors-16x8.svg" class="bigTall cr"/>
+    <image src="colors-16x8.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8.svg" class="small tr">
-    <img src="support/colors-16x8.svg" class="small bl">
-    <img src="support/colors-16x8.svg" class="small tl">
-    <img src="support/colors-16x8.svg" class="small br">
-    <img src="support/colors-16x8.svg" class="small tc">
-    <img src="support/colors-16x8.svg" class="small cr">
-    <img src="support/colors-16x8.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8.svg" class="small tr"/>
+    <image src="colors-16x8.svg" class="small bl"/>
+    <image src="colors-16x8.svg" class="small tl"/>
+    <image src="colors-16x8.svg" class="small br"/>
+    <image src="colors-16x8.svg" class="small tc"/>
+    <image src="colors-16x8.svg" class="small cr"/>
+    <image src="colors-16x8.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html
copy to layout/reftests/xul/object-fit-none-svg-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html
+++ b/layout/reftests/xul/object-fit-none-svg-002-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16.svg");
+        background-image: url("colors-8x16.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html
copy to layout/reftests/xul/object-fit-none-svg-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html
+++ b/layout/reftests/xul/object-fit-none-svg-002.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-none-svg-002-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: none;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16.svg" class="bigWide tr">
-    <img src="support/colors-8x16.svg" class="bigWide bl">
-    <img src="support/colors-8x16.svg" class="bigWide tl">
-    <img src="support/colors-8x16.svg" class="bigWide br">
-    <img src="support/colors-8x16.svg" class="bigWide tc">
-    <img src="support/colors-8x16.svg" class="bigWide cr">
-    <img src="support/colors-8x16.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16.svg" class="bigWide tr"/>
+    <image src="colors-8x16.svg" class="bigWide bl"/>
+    <image src="colors-8x16.svg" class="bigWide tl"/>
+    <image src="colors-8x16.svg" class="bigWide br"/>
+    <image src="colors-8x16.svg" class="bigWide tc"/>
+    <image src="colors-8x16.svg" class="bigWide cr"/>
+    <image src="colors-8x16.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16.svg" class="bigTall tr">
-    <img src="support/colors-8x16.svg" class="bigTall bl">
-    <img src="support/colors-8x16.svg" class="bigTall tl">
-    <img src="support/colors-8x16.svg" class="bigTall br">
-    <img src="support/colors-8x16.svg" class="bigTall tc">
-    <img src="support/colors-8x16.svg" class="bigTall cr">
-    <img src="support/colors-8x16.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16.svg" class="bigTall tr"/>
+    <image src="colors-8x16.svg" class="bigTall bl"/>
+    <image src="colors-8x16.svg" class="bigTall tl"/>
+    <image src="colors-8x16.svg" class="bigTall br"/>
+    <image src="colors-8x16.svg" class="bigTall tc"/>
+    <image src="colors-8x16.svg" class="bigTall cr"/>
+    <image src="colors-8x16.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16.svg" class="small tr">
-    <img src="support/colors-8x16.svg" class="small bl">
-    <img src="support/colors-8x16.svg" class="small tl">
-    <img src="support/colors-8x16.svg" class="small br">
-    <img src="support/colors-8x16.svg" class="small tc">
-    <img src="support/colors-8x16.svg" class="small cr">
-    <img src="support/colors-8x16.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16.svg" class="small tr"/>
+    <image src="colors-8x16.svg" class="small bl"/>
+    <image src="colors-8x16.svg" class="small tl"/>
+    <image src="colors-8x16.svg" class="small br"/>
+    <image src="colors-8x16.svg" class="small tc"/>
+    <image src="colors-8x16.svg" class="small cr"/>
+    <image src="colors-8x16.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html
copy to layout/reftests/xul/object-fit-none-svg-003-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html
+++ b/layout/reftests/xul/object-fit-none-svg-003-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8-noSize.svg");
+        background-image: url("colors-16x8-noSize.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html
copy to layout/reftests/xul/object-fit-none-svg-003.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html
+++ b/layout/reftests/xul/object-fit-none-svg-003.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-none-svg-003-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: none;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide br"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8-noSize.svg" class="small tr">
-    <img src="support/colors-16x8-noSize.svg" class="small bl">
-    <img src="support/colors-16x8-noSize.svg" class="small tl">
-    <img src="support/colors-16x8-noSize.svg" class="small br">
-    <img src="support/colors-16x8-noSize.svg" class="small tc">
-    <img src="support/colors-16x8-noSize.svg" class="small cr">
-    <img src="support/colors-16x8-noSize.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8-noSize.svg" class="small tr"/>
+    <image src="colors-16x8-noSize.svg" class="small bl"/>
+    <image src="colors-16x8-noSize.svg" class="small tl"/>
+    <image src="colors-16x8-noSize.svg" class="small br"/>
+    <image src="colors-16x8-noSize.svg" class="small tc"/>
+    <image src="colors-16x8-noSize.svg" class="small cr"/>
+    <image src="colors-16x8-noSize.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html
copy to layout/reftests/xul/object-fit-none-svg-004-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html
+++ b/layout/reftests/xul/object-fit-none-svg-004-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16-noSize.svg");
+        background-image: url("colors-8x16-noSize.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html
copy to layout/reftests/xul/object-fit-none-svg-004.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html
+++ b/layout/reftests/xul/object-fit-none-svg-004.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-none-svg-004-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: none;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide br"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16-noSize.svg" class="small tr">
-    <img src="support/colors-8x16-noSize.svg" class="small bl">
-    <img src="support/colors-8x16-noSize.svg" class="small tl">
-    <img src="support/colors-8x16-noSize.svg" class="small br">
-    <img src="support/colors-8x16-noSize.svg" class="small tc">
-    <img src="support/colors-8x16-noSize.svg" class="small cr">
-    <img src="support/colors-8x16-noSize.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16-noSize.svg" class="small tr"/>
+    <image src="colors-8x16-noSize.svg" class="small bl"/>
+    <image src="colors-8x16-noSize.svg" class="small tl"/>
+    <image src="colors-8x16-noSize.svg" class="small br"/>
+    <image src="colors-8x16-noSize.svg" class="small tc"/>
+    <image src="colors-8x16-noSize.svg" class="small cr"/>
+    <image src="colors-8x16-noSize.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html
copy to layout/reftests/xul/object-fit-none-svg-005-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html
+++ b/layout/reftests/xul/object-fit-none-svg-005-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8-parDefault.svg");
+        background-image: url("colors-16x8-parDefault.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html
copy to layout/reftests/xul/object-fit-none-svg-005.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html
+++ b/layout/reftests/xul/object-fit-none-svg-005.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-none-svg-005-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: none;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8-parDefault.svg" class="small tr">
-    <img src="support/colors-16x8-parDefault.svg" class="small bl">
-    <img src="support/colors-16x8-parDefault.svg" class="small tl">
-    <img src="support/colors-16x8-parDefault.svg" class="small br">
-    <img src="support/colors-16x8-parDefault.svg" class="small tc">
-    <img src="support/colors-16x8-parDefault.svg" class="small cr">
-    <img src="support/colors-16x8-parDefault.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8-parDefault.svg" class="small tr"/>
+    <image src="colors-16x8-parDefault.svg" class="small bl"/>
+    <image src="colors-16x8-parDefault.svg" class="small tl"/>
+    <image src="colors-16x8-parDefault.svg" class="small br"/>
+    <image src="colors-16x8-parDefault.svg" class="small tc"/>
+    <image src="colors-16x8-parDefault.svg" class="small cr"/>
+    <image src="colors-16x8-parDefault.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html
copy to layout/reftests/xul/object-fit-none-svg-006-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html
+++ b/layout/reftests/xul/object-fit-none-svg-006-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16-parDefault.svg");
+        background-image: url("colors-8x16-parDefault.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .bigWide {
         width: 48px;
         height: 32px;
       }
       .bigTall {
copy from layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html
copy to layout/reftests/xul/object-fit-none-svg-006.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html
+++ b/layout/reftests/xul/object-fit-none-svg-006.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-none-svg-006-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: none;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16-parDefault.svg" class="small tr">
-    <img src="support/colors-8x16-parDefault.svg" class="small bl">
-    <img src="support/colors-8x16-parDefault.svg" class="small tl">
-    <img src="support/colors-8x16-parDefault.svg" class="small br">
-    <img src="support/colors-8x16-parDefault.svg" class="small tc">
-    <img src="support/colors-8x16-parDefault.svg" class="small cr">
-    <img src="support/colors-8x16-parDefault.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16-parDefault.svg" class="small tr"/>
+    <image src="colors-8x16-parDefault.svg" class="small bl"/>
+    <image src="colors-8x16-parDefault.svg" class="small tl"/>
+    <image src="colors-8x16-parDefault.svg" class="small br"/>
+    <image src="colors-8x16-parDefault.svg" class="small tc"/>
+    <image src="colors-8x16-parDefault.svg" class="small cr"/>
+    <image src="colors-8x16-parDefault.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html
copy to layout/reftests/xul/object-fit-scale-down-png-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html
+++ b/layout/reftests/xul/object-fit-scale-down-png-001-ref.html
@@ -10,17 +10,17 @@
     <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-image: url("colors-16x8.png");
         background-size: auto auto;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .objectOuter > .small { background-size: contain; }
       .bigWide {
         width: 48px;
         height: 32px;
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html
copy to layout/reftests/xul/object-fit-scale-down-png-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html
+++ b/layout/reftests/xul/object-fit-scale-down-png-001.xul
@@ -1,77 +1,70 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright 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 {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: scale-down;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- 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>
+    <image src="colors-16x8.png" class="bigWide tr"/>
+    <image src="colors-16x8.png" class="bigWide bl"/>
+    <image src="colors-16x8.png" class="bigWide tl"/>
+    <image src="colors-16x8.png" class="bigWide br"/>
+    <image src="colors-16x8.png" class="bigWide tc"/>
+    <image src="colors-16x8.png" class="bigWide cr"/>
+    <image src="colors-16x8.png" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <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>
+    <image src="colors-16x8.png" class="bigTall tr"/>
+    <image src="colors-16x8.png" class="bigTall bl"/>
+    <image src="colors-16x8.png" class="bigTall tl"/>
+    <image src="colors-16x8.png" class="bigTall br"/>
+    <image src="colors-16x8.png" class="bigTall tc"/>
+    <image src="colors-16x8.png" class="bigTall cr"/>
+    <image src="colors-16x8.png" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <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>
+    <image src="colors-16x8.png" class="small tr"/>
+    <image src="colors-16x8.png" class="small bl"/>
+    <image src="colors-16x8.png" class="small tl"/>
+    <image src="colors-16x8.png" class="small br"/>
+    <image src="colors-16x8.png" class="small tc"/>
+    <image src="colors-16x8.png" class="small cr"/>
+    <image src="colors-16x8.png" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html
copy to layout/reftests/xul/object-fit-scale-down-png-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html
+++ b/layout/reftests/xul/object-fit-scale-down-png-002-ref.html
@@ -10,17 +10,17 @@
     <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-image: url("colors-8x16.png");
         background-size: auto auto;
         background-repeat: no-repeat;
         image-rendering: -moz-crisp-edges;
       }
       .objectOuter > .small { background-size: contain; }
       .bigWide {
         width: 48px;
         height: 32px;
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html
copy to layout/reftests/xul/object-fit-scale-down-png-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html
+++ b/layout/reftests/xul/object-fit-scale-down-png-002.xul
@@ -1,77 +1,70 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright 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 {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: scale-down;
         image-rendering: -moz-crisp-edges;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- 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>
+    <image src="colors-8x16.png" class="bigWide tr"/>
+    <image src="colors-8x16.png" class="bigWide bl"/>
+    <image src="colors-8x16.png" class="bigWide tl"/>
+    <image src="colors-8x16.png" class="bigWide br"/>
+    <image src="colors-8x16.png" class="bigWide tc"/>
+    <image src="colors-8x16.png" class="bigWide cr"/>
+    <image src="colors-8x16.png" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <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>
+    <image src="colors-8x16.png" class="bigTall tr"/>
+    <image src="colors-8x16.png" class="bigTall bl"/>
+    <image src="colors-8x16.png" class="bigTall tl"/>
+    <image src="colors-8x16.png" class="bigTall br"/>
+    <image src="colors-8x16.png" class="bigTall tc"/>
+    <image src="colors-8x16.png" class="bigTall cr"/>
+    <image src="colors-8x16.png" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <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>
+    <image src="colors-8x16.png" class="small tr"/>
+    <image src="colors-8x16.png" class="small bl"/>
+    <image src="colors-8x16.png" class="small tl"/>
+    <image src="colors-8x16.png" class="small br"/>
+    <image src="colors-8x16.png" class="small tc"/>
+    <image src="colors-8x16.png" class="small cr"/>
+    <image src="colors-8x16.png" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html
copy to layout/reftests/xul/object-fit-scale-down-svg-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-001-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8.svg");
+        background-image: url("colors-16x8.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .objectOuter > .small { background-size: contain; }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html
copy to layout/reftests/xul/object-fit-scale-down-svg-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-001.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: scale-down;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8.svg" class="bigWide tr">
-    <img src="support/colors-16x8.svg" class="bigWide bl">
-    <img src="support/colors-16x8.svg" class="bigWide tl">
-    <img src="support/colors-16x8.svg" class="bigWide br">
-    <img src="support/colors-16x8.svg" class="bigWide tc">
-    <img src="support/colors-16x8.svg" class="bigWide cr">
-    <img src="support/colors-16x8.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8.svg" class="bigWide tr"/>
+    <image src="colors-16x8.svg" class="bigWide bl"/>
+    <image src="colors-16x8.svg" class="bigWide tl"/>
+    <image src="colors-16x8.svg" class="bigWide br"/>
+    <image src="colors-16x8.svg" class="bigWide tc"/>
+    <image src="colors-16x8.svg" class="bigWide cr"/>
+    <image src="colors-16x8.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8.svg" class="bigTall tr">
-    <img src="support/colors-16x8.svg" class="bigTall bl">
-    <img src="support/colors-16x8.svg" class="bigTall tl">
-    <img src="support/colors-16x8.svg" class="bigTall br">
-    <img src="support/colors-16x8.svg" class="bigTall tc">
-    <img src="support/colors-16x8.svg" class="bigTall cr">
-    <img src="support/colors-16x8.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8.svg" class="bigTall tr"/>
+    <image src="colors-16x8.svg" class="bigTall bl"/>
+    <image src="colors-16x8.svg" class="bigTall tl"/>
+    <image src="colors-16x8.svg" class="bigTall br"/>
+    <image src="colors-16x8.svg" class="bigTall tc"/>
+    <image src="colors-16x8.svg" class="bigTall cr"/>
+    <image src="colors-16x8.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8.svg" class="small tr">
-    <img src="support/colors-16x8.svg" class="small bl">
-    <img src="support/colors-16x8.svg" class="small tl">
-    <img src="support/colors-16x8.svg" class="small br">
-    <img src="support/colors-16x8.svg" class="small tc">
-    <img src="support/colors-16x8.svg" class="small cr">
-    <img src="support/colors-16x8.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8.svg" class="small tr"/>
+    <image src="colors-16x8.svg" class="small bl"/>
+    <image src="colors-16x8.svg" class="small tl"/>
+    <image src="colors-16x8.svg" class="small br"/>
+    <image src="colors-16x8.svg" class="small tc"/>
+    <image src="colors-16x8.svg" class="small cr"/>
+    <image src="colors-16x8.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html
copy to layout/reftests/xul/object-fit-scale-down-svg-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-002-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16.svg");
+        background-image: url("colors-8x16.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .objectOuter > .small { background-size: contain; }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html
copy to layout/reftests/xul/object-fit-scale-down-svg-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-002.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: scale-down;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16.svg" class="bigWide tr">
-    <img src="support/colors-8x16.svg" class="bigWide bl">
-    <img src="support/colors-8x16.svg" class="bigWide tl">
-    <img src="support/colors-8x16.svg" class="bigWide br">
-    <img src="support/colors-8x16.svg" class="bigWide tc">
-    <img src="support/colors-8x16.svg" class="bigWide cr">
-    <img src="support/colors-8x16.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16.svg" class="bigWide tr"/>
+    <image src="colors-8x16.svg" class="bigWide bl"/>
+    <image src="colors-8x16.svg" class="bigWide tl"/>
+    <image src="colors-8x16.svg" class="bigWide br"/>
+    <image src="colors-8x16.svg" class="bigWide tc"/>
+    <image src="colors-8x16.svg" class="bigWide cr"/>
+    <image src="colors-8x16.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16.svg" class="bigTall tr">
-    <img src="support/colors-8x16.svg" class="bigTall bl">
-    <img src="support/colors-8x16.svg" class="bigTall tl">
-    <img src="support/colors-8x16.svg" class="bigTall br">
-    <img src="support/colors-8x16.svg" class="bigTall tc">
-    <img src="support/colors-8x16.svg" class="bigTall cr">
-    <img src="support/colors-8x16.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16.svg" class="bigTall tr"/>
+    <image src="colors-8x16.svg" class="bigTall bl"/>
+    <image src="colors-8x16.svg" class="bigTall tl"/>
+    <image src="colors-8x16.svg" class="bigTall br"/>
+    <image src="colors-8x16.svg" class="bigTall tc"/>
+    <image src="colors-8x16.svg" class="bigTall cr"/>
+    <image src="colors-8x16.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16.svg" class="small tr">
-    <img src="support/colors-8x16.svg" class="small bl">
-    <img src="support/colors-8x16.svg" class="small tl">
-    <img src="support/colors-8x16.svg" class="small br">
-    <img src="support/colors-8x16.svg" class="small tc">
-    <img src="support/colors-8x16.svg" class="small cr">
-    <img src="support/colors-8x16.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16.svg" class="small tr"/>
+    <image src="colors-8x16.svg" class="small bl"/>
+    <image src="colors-8x16.svg" class="small tl"/>
+    <image src="colors-8x16.svg" class="small br"/>
+    <image src="colors-8x16.svg" class="small tc"/>
+    <image src="colors-8x16.svg" class="small cr"/>
+    <image src="colors-8x16.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html
copy to layout/reftests/xul/object-fit-scale-down-svg-003-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-003-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8-noSize.svg");
+        background-image: url("colors-16x8-noSize.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .objectOuter > .small { background-size: contain; }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html
copy to layout/reftests/xul/object-fit-scale-down-svg-003.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-003.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: scale-down;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
-    <img src="support/colors-16x8-noSize.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8-noSize.svg" class="bigWide tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide br"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
-    <img src="support/colors-16x8-noSize.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8-noSize.svg" class="bigTall tr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall bl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tl"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall br"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall tc"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall cr"/>
+    <image src="colors-16x8-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8-noSize.svg" class="small tr">
-    <img src="support/colors-16x8-noSize.svg" class="small bl">
-    <img src="support/colors-16x8-noSize.svg" class="small tl">
-    <img src="support/colors-16x8-noSize.svg" class="small br">
-    <img src="support/colors-16x8-noSize.svg" class="small tc">
-    <img src="support/colors-16x8-noSize.svg" class="small cr">
-    <img src="support/colors-16x8-noSize.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8-noSize.svg" class="small tr"/>
+    <image src="colors-16x8-noSize.svg" class="small bl"/>
+    <image src="colors-16x8-noSize.svg" class="small tl"/>
+    <image src="colors-16x8-noSize.svg" class="small br"/>
+    <image src="colors-16x8-noSize.svg" class="small tc"/>
+    <image src="colors-16x8-noSize.svg" class="small cr"/>
+    <image src="colors-16x8-noSize.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html
copy to layout/reftests/xul/object-fit-scale-down-svg-004-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-004-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16-noSize.svg");
+        background-image: url("colors-8x16-noSize.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .objectOuter > .small { background-size: contain; }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html
copy to layout/reftests/xul/object-fit-scale-down-svg-004.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-004.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: scale-down;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
-    <img src="support/colors-8x16-noSize.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16-noSize.svg" class="bigWide tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide br"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
-    <img src="support/colors-8x16-noSize.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16-noSize.svg" class="bigTall tr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall bl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tl"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall br"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall tc"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall cr"/>
+    <image src="colors-8x16-noSize.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16-noSize.svg" class="small tr">
-    <img src="support/colors-8x16-noSize.svg" class="small bl">
-    <img src="support/colors-8x16-noSize.svg" class="small tl">
-    <img src="support/colors-8x16-noSize.svg" class="small br">
-    <img src="support/colors-8x16-noSize.svg" class="small tc">
-    <img src="support/colors-8x16-noSize.svg" class="small cr">
-    <img src="support/colors-8x16-noSize.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16-noSize.svg" class="small tr"/>
+    <image src="colors-8x16-noSize.svg" class="small bl"/>
+    <image src="colors-8x16-noSize.svg" class="small tl"/>
+    <image src="colors-8x16-noSize.svg" class="small br"/>
+    <image src="colors-8x16-noSize.svg" class="small tc"/>
+    <image src="colors-8x16-noSize.svg" class="small cr"/>
+    <image src="colors-8x16-noSize.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html
copy to layout/reftests/xul/object-fit-scale-down-svg-005-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-005-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-16x8-parDefault.svg");
+        background-image: url("colors-16x8-parDefault.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .objectOuter > .small { background-size: contain; }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html
copy to layout/reftests/xul/object-fit-scale-down-svg-005.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-005.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: scale-down;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
-    <br>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
-    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
-    <br>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall br"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-16x8-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-16x8-parDefault.svg" class="small tr">
-    <img src="support/colors-16x8-parDefault.svg" class="small bl">
-    <img src="support/colors-16x8-parDefault.svg" class="small tl">
-    <img src="support/colors-16x8-parDefault.svg" class="small br">
-    <img src="support/colors-16x8-parDefault.svg" class="small tc">
-    <img src="support/colors-16x8-parDefault.svg" class="small cr">
-    <img src="support/colors-16x8-parDefault.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-16x8-parDefault.svg" class="small tr"/>
+    <image src="colors-16x8-parDefault.svg" class="small bl"/>
+    <image src="colors-16x8-parDefault.svg" class="small tl"/>
+    <image src="colors-16x8-parDefault.svg" class="small br"/>
+    <image src="colors-16x8-parDefault.svg" class="small tc"/>
+    <image src="colors-16x8-parDefault.svg" class="small cr"/>
+    <image src="colors-16x8-parDefault.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html
copy to layout/reftests/xul/object-fit-scale-down-svg-006-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-006-ref.html
@@ -10,17 +10,17 @@
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       .objectOuter {
         border: 1px dashed gray;
         padding: 1px;
         float: left;
       }
       .objectOuter > * {
-        background-image: url("support/colors-8x16-parDefault.svg");
+        background-image: url("colors-8x16-parDefault.svg");
         background-size: auto auto;
         background-repeat: no-repeat;
       }
       .objectOuter > .small { background-size: contain; }
       .bigWide {
         width: 48px;
         height: 32px;
       }
copy from layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html
copy to layout/reftests/xul/object-fit-scale-down-svg-006.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html
+++ b/layout/reftests/xul/object-fit-scale-down-svg-006.xul
@@ -1,76 +1,69 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         border: 1px dashed gray;
         padding: 1px;
         object-fit: scale-down;
         float: left;
       }
 
       .bigWide {
-        width: 48px;
-        height: 32px;
+        width: 52px;
+        height: 36px;
       }
       .bigTall {
-        width: 32px;
-        height: 48px;
+        width: 36px;
+        height: 52px;
       }
       .small {
-        width: 8px;
-        height: 8px;
+        width: 12px;
+        height: 12px;
       }
 
       br { clear: both; }
 
       .tr { object-position: top right }
       .bl { object-position: bottom left }
       .tl { object-position: top 25% left 25% }
       .br { object-position: bottom 1px right 2px }
 
       .tc { object-position: top 3px center }
       .cr { object-position: center right 25% }
-    </style>
-  </head>
-  <body>
+  ]]></style>
+  <hbox>
     <!-- big/wide: -->
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
-    <br>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigWide"/>
+  </hbox>
+  <hbox>
     <!-- big/tall: -->
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
-    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
-    <br>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall bl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tl"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall br"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall tc"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall cr"/>
+    <image src="colors-8x16-parDefault.svg" class="bigTall"/>
+  </hbox>
+  <hbox>
     <!-- small: -->
-    <img src="support/colors-8x16-parDefault.svg" class="small tr">
-    <img src="support/colors-8x16-parDefault.svg" class="small bl">
-    <img src="support/colors-8x16-parDefault.svg" class="small tl">
-    <img src="support/colors-8x16-parDefault.svg" class="small br">
-    <img src="support/colors-8x16-parDefault.svg" class="small tc">
-    <img src="support/colors-8x16-parDefault.svg" class="small cr">
-    <img src="support/colors-8x16-parDefault.svg" class="small">
-    <br>
-  </body>
-</html>
+    <image src="colors-8x16-parDefault.svg" class="small tr"/>
+    <image src="colors-8x16-parDefault.svg" class="small bl"/>
+    <image src="colors-8x16-parDefault.svg" class="small tl"/>
+    <image src="colors-8x16-parDefault.svg" class="small br"/>
+    <image src="colors-8x16-parDefault.svg" class="small tc"/>
+    <image src="colors-8x16-parDefault.svg" class="small cr"/>
+    <image src="colors-8x16-parDefault.svg" class="small"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html
copy to layout/reftests/xul/object-position-png-001-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html
+++ b/layout/reftests/xul/object-position-png-001-ref.html
@@ -7,17 +7,17 @@
   <head>
     <meta charset="utf-8">
     <title>CSS Reftest Reference</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       div {
         background: lightgray;
         margin-right: 2px;
-        background-image: url("support/colors-16x8.png");
+        background-image: url("colors-16x8.png");
         background-size: contain;
         background-repeat: no-repeat;
         float: left;
         width: 20px;
         height: 20px;
       }
 
       .op_y-7  { background-position: 50%  -7% }
copy from layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html
copy to layout/reftests/xul/object-position-png-001.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html
+++ b/layout/reftests/xul/object-position-png-001.xul
@@ -1,44 +1,36 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-position-png-001-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         background: lightgray;
         margin-right: 2px;
         object-fit: contain;
         float: left;
         width: 20px;
         height: 20px;
       }
 
       .op_y-7  { object-position: 50%  -7% }
       .op_y13  { object-position: 50%  13% }
       .op_y23  { object-position: 50%  23% }
       .op_y50  { object-position: 50%  50% }
       .op_y75  { object-position: 50%  75% }
       .op_y88  { object-position: 50%  88% }
       .op_y111 { object-position: 50% 111% }
 
-    </style>
-  </head>
-  <body>
-    <img src="support/colors-16x8.png" class="op_y-7">
-    <img src="support/colors-16x8.png" class="op_y13">
-    <img src="support/colors-16x8.png" class="op_y23">
-    <img src="support/colors-16x8.png" class="op_y50">
-    <img src="support/colors-16x8.png" class="op_y75">
-    <img src="support/colors-16x8.png" class="op_y88">
-    <img src="support/colors-16x8.png" class="op_y111">
-  </body>
-</html>
+  ]]></style>
+  <hbox>
+    <image src="colors-16x8.png" class="op_y-7"/>
+    <image src="colors-16x8.png" class="op_y13"/>
+    <image src="colors-16x8.png" class="op_y23"/>
+    <image src="colors-16x8.png" class="op_y50"/>
+    <image src="colors-16x8.png" class="op_y75"/>
+    <image src="colors-16x8.png" class="op_y88"/>
+    <image src="colors-16x8.png" class="op_y111"/>
+  </hbox>
+</window>
copy from layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html
copy to layout/reftests/xul/object-position-png-002-ref.html
--- a/layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html
+++ b/layout/reftests/xul/object-position-png-002-ref.html
@@ -7,17 +7,17 @@
   <head>
     <meta charset="utf-8">
     <title>CSS Reftest Reference</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <style type="text/css">
       div {
         background: lightgray;
         margin-right: 2px;
-        background-image: url("support/colors-8x16.png");
+        background-image: url("colors-8x16.png");
         background-size: contain;
         background-repeat: no-repeat;
         float: left;
         width: 20px;
         height: 20px;
       }
 
       .op_x-7  { background-position:  -7% 50% }
copy from layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html
copy to layout/reftests/xul/object-position-png-002.xul
--- a/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html
+++ b/layout/reftests/xul/object-position-png-002.xul
@@ -1,44 +1,36 @@
-<!DOCTYPE html>
+<?xml version="1.0"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="object-position-png-002-ref.html">
-    <style type="text/css">
-      img {
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[
+      window { padding: 8px; }
+      image {
         background: lightgray;
         margin-right: 2px;
         object-fit: contain;
         float: left;
         width: 20px;
         height: 20px;
       }
 
       .op_x-7  { object-position: -7%  50% }
       .op_x13  { object-position: 13%  50% }
       .op_x23  { object-position: 23%  50% }
       .op_x50  { object-position: 50%  50% }
       .op_x75  { object-position: 75%  50% }
       .op_x88  { object-position: 88%  50% }
       .op_x111 { object-position: 111% 50% }
 
-    </style>
-  </head>
-  <body>
-    <img src="support/colors-8x16.png" class="op_x-7">
-    <img src="support/colors-8x16.png" class="op_x13">
-    <img src="support/colors-8x16.png" class="op_x23">
-    <img src="support/colors-8x16.png" class="op_x50">
-    <img src="support/colors-8x16.png" class="op_x75">
-    <img src="support/colors-8x16.png" class="op_x88">
-    <img src="support/colors-8x16.png" class="op_x111">
-  </body>
-</html>
+  ]]></style>
+  <hbox>
+    <image src="colors-8x16.png" class="op_x-7"/>
+    <image src="colors-8x16.png" class="op_x13"/>
+    <image src="colors-8x16.png" class="op_x23"/>
+    <image src="colors-8x16.png" class="op_x50"/>
+    <image src="colors-8x16.png" class="op_x75"/>
+    <image src="colors-8x16.png" class="op_x88"/>
+    <image src="colors-8x16.png" class="op_x111"/>
+  </hbox>
+</window>
--- a/layout/reftests/xul/reftest.list
+++ b/layout/reftests/xul/reftest.list
@@ -3,8 +3,56 @@ skip-if((B2G&&browserIsRemote)||Mulet) =
 random-if(Android||B2G) skip-if((B2G&&browserIsRemote)||Mulet) == menulist-shrinkwrap-1.xul menulist-shrinkwrap-1-ref.xul # Initial mulet triage: parity with B2G/B2G Desktop
 random-if(Android||B2G) fails-if(winWidget) skip-if((B2G&&browserIsRemote)||Mulet) == menulist-shrinkwrap-2.xul menulist-shrinkwrap-2-ref.xul # Initial mulet triage: parity with B2G/B2G Desktop
 skip-if((B2G&&browserIsRemote)||Mulet) == textbox-overflow-1.xul textbox-overflow-1-ref.xul # for bug 749658 # Initial mulet triage: parity with B2G/B2G Desktop
 # accesskeys are not normally displayed on Mac, so skip this test
 skip-if(cocoaWidget) skip-if((B2G&&browserIsRemote)||Mulet) == accesskey.xul accesskey-ref.xul # Initial mulet triage: parity with B2G/B2G Desktop
 fails-if(cocoaWidget) skip-if((B2G&&browserIsRemote)||Mulet) == tree-row-outline-1.xul tree-row-outline-1-ref.xul # Initial mulet triage: parity with B2G/B2G Desktop
 skip-if((B2G&&browserIsRemote)||Mulet) != tree-row-outline-1.xul tree-row-outline-1-notref.xul # Initial mulet triage: parity with B2G/B2G Desktop
 skip-if((B2G&&browserIsRemote)||Mulet) == text-small-caps-1.xul text-small-caps-1-ref.xul # Initial mulet triage: parity with B2G/B2G Desktop
+
+# Tests for XUL <image> with 'object-fit' & 'object-position':
+# These tests should be very similar to tests in our w3c-css/submitted/images3
+# reftest directory. They live here because they use XUL, and it
+# wouldn't be fair of us to make a W3C testsuite implicitly depend on XUL.
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+== object-fit-contain-png-001.xul object-fit-contain-png-001-ref.html
+== object-fit-contain-png-002.xul object-fit-contain-png-002-ref.html
+== object-fit-contain-svg-001.xul object-fit-contain-svg-001-ref.html
+== object-fit-contain-svg-002.xul object-fit-contain-svg-002-ref.html
+== object-fit-contain-svg-003.xul object-fit-contain-svg-003-ref.html
+== object-fit-contain-svg-004.xul object-fit-contain-svg-004-ref.html
+== object-fit-contain-svg-005.xul object-fit-contain-svg-005-ref.html
+== object-fit-contain-svg-006.xul object-fit-contain-svg-006-ref.html
+== object-fit-cover-png-001.xul object-fit-cover-png-001-ref.html
+== object-fit-cover-png-002.xul object-fit-cover-png-002-ref.html
+== object-fit-cover-svg-001.xul object-fit-cover-svg-001-ref.html
+== object-fit-cover-svg-002.xul object-fit-cover-svg-002-ref.html
+== object-fit-cover-svg-003.xul object-fit-cover-svg-003-ref.html
+== object-fit-cover-svg-004.xul object-fit-cover-svg-004-ref.html
+== object-fit-cover-svg-005.xul object-fit-cover-svg-005-ref.html
+== object-fit-cover-svg-006.xul object-fit-cover-svg-006-ref.html
+== object-fit-fill-png-001.xul object-fit-fill-png-001-ref.html
+== object-fit-fill-png-002.xul object-fit-fill-png-002-ref.html
+== object-fit-fill-svg-001.xul object-fit-fill-svg-001-ref.html
+== object-fit-fill-svg-002.xul object-fit-fill-svg-002-ref.html
+== object-fit-fill-svg-003.xul object-fit-fill-svg-003-ref.html
+== object-fit-fill-svg-004.xul object-fit-fill-svg-004-ref.html
+fails == object-fit-fill-svg-005.xul object-fit-fill-svg-005-ref.html # bug 1092436
+fails == object-fit-fill-svg-006.xul object-fit-fill-svg-006-ref.html # bug 1092436
+== object-fit-none-png-001.xul object-fit-none-png-001-ref.html
+== object-fit-none-png-002.xul object-fit-none-png-002-ref.html
+== object-fit-none-svg-001.xul object-fit-none-svg-001-ref.html
+== object-fit-none-svg-002.xul object-fit-none-svg-002-ref.html
+== object-fit-none-svg-003.xul object-fit-none-svg-003-ref.html
+== object-fit-none-svg-004.xul object-fit-none-svg-004-ref.html
+== object-fit-none-svg-005.xul object-fit-none-svg-005-ref.html
+== object-fit-none-svg-006.xul object-fit-none-svg-006-ref.html
+== object-fit-scale-down-png-001.xul object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-002.xul object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-svg-001.xul object-fit-scale-down-svg-001-ref.html
+== object-fit-scale-down-svg-002.xul object-fit-scale-down-svg-002-ref.html
+== object-fit-scale-down-svg-003.xul object-fit-scale-down-svg-003-ref.html
+== object-fit-scale-down-svg-004.xul object-fit-scale-down-svg-004-ref.html
+== object-fit-scale-down-svg-005.xul object-fit-scale-down-svg-005-ref.html
+== object-fit-scale-down-svg-006.xul object-fit-scale-down-svg-006-ref.html
+== object-position-png-001.xul object-position-png-001-ref.html
+== object-position-png-002.xul object-position-png-002-ref.html