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