Bug 1170052 part 4: Add reftests for object-fit/object-position on XUL <image> element (as modified copies of existing <img> tests). (test-only)
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 12 Jun 2015 17:31:22 -0700
changeset 266833 f59c0223e6bf707bac8d2bef05022b9a7853b6d1
parent 266832 65b38002bf7cc378d57fe163b2886512e0538946
child 266834 b9eaa0ee5ced104b1d57ca84f96b2bdc0ff8aa1a
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-esr52@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1170052
milestone41.0a1
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