Bug 376997 - Images should be rendered against a neutral background. r=bz ui-r=limi
authorCarlo Alberto Ferraris <bugzilla@cafxx.strayorange.com>
Wed, 14 Dec 2011 23:20:47 -0800
changeset 82891 6a47e6a308fb
parent 82858 d4aad9645f77
child 82892 2a0b56de8e9e
push id21710
push usermbrubeck@mozilla.com
push dateSun, 18 Dec 2011 20:45:49 +0000
treeherdermozilla-central@364f7f0cb300 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz, limi
bugs376997
milestone11.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 376997 - Images should be rendered against a neutral background. r=bz ui-r=limi
content/html/document/test/test_bug369370.html
image/test/reftest/ImageDocument.css
image/test/reftest/encoders-lossless/ImageDocument.css
image/test/reftest/encoders-lossless/encoder.html
image/test/reftest/gif/ImageDocument.css
image/test/reftest/gif/test_bug641198.html
image/test/reftest/gif/webcam.html
image/test/reftest/icon/win/ImageDocument.css
image/test/reftest/icon/win/bug415761.sjs
image/test/reftest/pngsuite-ancillary/ccwn2c08.html
image/test/reftest/pngsuite-ancillary/ccwn3p08.html
image/test/reftest/pngsuite-ancillary/cdfn2c08.html
image/test/reftest/pngsuite-ancillary/cdhn2c08.html
image/test/reftest/pngsuite-ancillary/cdsn2c08.html
image/test/reftest/pngsuite-ancillary/cdun2c08.html
image/test/reftest/pngsuite-ancillary/ch1n3p04.html
image/test/reftest/pngsuite-ancillary/ch2n3p08.html
image/test/reftest/pngsuite-ancillary/cm0n0g04.html
image/test/reftest/pngsuite-ancillary/cm7n0g04.html
image/test/reftest/pngsuite-ancillary/cm9n0g04.html
image/test/reftest/pngsuite-ancillary/cs3n2c16.html
image/test/reftest/pngsuite-ancillary/cs3n3p08.html
image/test/reftest/pngsuite-ancillary/cs5n2c08.html
image/test/reftest/pngsuite-ancillary/cs5n3p08.html
image/test/reftest/pngsuite-ancillary/cs8n2c08.html
image/test/reftest/pngsuite-ancillary/cs8n3p08.html
image/test/reftest/pngsuite-ancillary/ct0n0g04.html
image/test/reftest/pngsuite-ancillary/ct1n0g04.html
image/test/reftest/pngsuite-ancillary/ctzn0g04.html
image/test/reftest/pngsuite-basic-i/basi0g01.html
image/test/reftest/pngsuite-basic-i/basi0g02.html
image/test/reftest/pngsuite-basic-i/basi0g04.html
image/test/reftest/pngsuite-basic-i/basi0g08.html
image/test/reftest/pngsuite-basic-i/basi0g16.html
image/test/reftest/pngsuite-basic-i/basi2c08.html
image/test/reftest/pngsuite-basic-i/basi2c16.html
image/test/reftest/pngsuite-basic-i/basi3p01.html
image/test/reftest/pngsuite-basic-i/basi3p02.html
image/test/reftest/pngsuite-basic-i/basi3p04.html
image/test/reftest/pngsuite-basic-i/basi3p08.html
image/test/reftest/pngsuite-basic-n/basn0g01.html
image/test/reftest/pngsuite-basic-n/basn0g02.html
image/test/reftest/pngsuite-basic-n/basn0g04.html
image/test/reftest/pngsuite-basic-n/basn0g08.html
image/test/reftest/pngsuite-basic-n/basn0g16.html
image/test/reftest/pngsuite-basic-n/basn2c08.html
image/test/reftest/pngsuite-basic-n/basn2c16.html
image/test/reftest/pngsuite-basic-n/basn3p01.html
image/test/reftest/pngsuite-basic-n/basn3p02.html
image/test/reftest/pngsuite-basic-n/basn3p04.html
image/test/reftest/pngsuite-basic-n/basn3p08.html
image/test/reftest/pngsuite-chunkorder/color.html
image/test/reftest/pngsuite-chunkorder/grayscale.html
image/test/reftest/pngsuite-filtering/f00n0g08.html
image/test/reftest/pngsuite-filtering/f00n2c08.html
image/test/reftest/pngsuite-filtering/f01n0g08.html
image/test/reftest/pngsuite-filtering/f01n2c08.html
image/test/reftest/pngsuite-filtering/f02n0g08.html
image/test/reftest/pngsuite-filtering/f02n2c08.html
image/test/reftest/pngsuite-filtering/f03n0g08.html
image/test/reftest/pngsuite-filtering/f03n2c08.html
image/test/reftest/pngsuite-filtering/f04n0g08.html
image/test/reftest/pngsuite-filtering/f04n2c08.html
image/test/reftest/pngsuite-gamma/g03n0g16.html
image/test/reftest/pngsuite-gamma/g03n2c08.html
image/test/reftest/pngsuite-gamma/g03n3p04.html
image/test/reftest/pngsuite-gamma/g04n0g16.html
image/test/reftest/pngsuite-gamma/g04n2c08.html
image/test/reftest/pngsuite-gamma/g04n3p04.html
image/test/reftest/pngsuite-gamma/g05n0g16.html
image/test/reftest/pngsuite-gamma/g05n2c08.html
image/test/reftest/pngsuite-gamma/g05n3p04.html
image/test/reftest/pngsuite-gamma/g07n0g16.html
image/test/reftest/pngsuite-gamma/g07n2c08.html
image/test/reftest/pngsuite-gamma/g07n3p04.html
image/test/reftest/pngsuite-gamma/g10n0g16.html
image/test/reftest/pngsuite-gamma/g10n2c08.html
image/test/reftest/pngsuite-gamma/g10n3p04.html
image/test/reftest/pngsuite-gamma/g25n0g16.html
image/test/reftest/pngsuite-gamma/g25n2c08.html
image/test/reftest/pngsuite-gamma/g25n3p04.html
image/test/reftest/pngsuite-oddsizes/s01_3p01.html
image/test/reftest/pngsuite-oddsizes/s02_3p01.html
image/test/reftest/pngsuite-oddsizes/s03_3p01.html
image/test/reftest/pngsuite-oddsizes/s04_3p01.html
image/test/reftest/pngsuite-oddsizes/s05_3p02.html
image/test/reftest/pngsuite-oddsizes/s06_3p02.html
image/test/reftest/pngsuite-oddsizes/s07_3p02.html
image/test/reftest/pngsuite-oddsizes/s08_3p02.html
image/test/reftest/pngsuite-oddsizes/s09_3p02.html
image/test/reftest/pngsuite-oddsizes/s32_3p04.html
image/test/reftest/pngsuite-oddsizes/s33_3p04.html
image/test/reftest/pngsuite-oddsizes/s34_3p04.html
image/test/reftest/pngsuite-oddsizes/s35_3p04.html
image/test/reftest/pngsuite-oddsizes/s36_3p04.html
image/test/reftest/pngsuite-oddsizes/s37_3p04.html
image/test/reftest/pngsuite-oddsizes/s38_3p04.html
image/test/reftest/pngsuite-oddsizes/s39_3p04.html
image/test/reftest/pngsuite-oddsizes/s40_3p04.html
image/test/reftest/pngsuite-palettes/pp0n2c16.html
image/test/reftest/pngsuite-palettes/ps1n0g08.html
image/test/reftest/pngsuite-palettes/ps1n2c16.html
image/test/reftest/pngsuite-palettes/ps2n0g08.html
image/test/reftest/pngsuite-palettes/ps2n2c16.html
image/test/reftest/pngsuite-zlib/z00n2c08.html
image/test/reftest/pngsuite-zlib/z03n2c08.html
image/test/reftest/pngsuite-zlib/z06n2c08.html
image/test/reftest/pngsuite-zlib/z09n2c08.html
layout/style/TopLevelImageDocument.css
--- a/content/html/document/test/test_bug369370.html
+++ b/content/html/document/test/test_bug369370.html
@@ -27,18 +27,21 @@ https://bugzilla.mozilla.org/show_bug.cg
     function childLoaded() {
         kidDoc = kidWin.document;
         ok(true, "Child window loaded");
 
         var elements = kidDoc.getElementsByTagName("img");
         is(elements.length, 1, "looking for imagedoc img");
         var img = elements[0];
 
-        is(kidDoc.documentElement.clientWidth,  400, "Checking doc width");
-        is(kidDoc.documentElement.clientHeight, 300, "Checking doc height");
+        // Need to use innerWidth/innerHeight of the window
+        // since the containing image is absolutely positioned,
+        // causing clientHeight to be zero.
+        is(kidWin.innerWidth, 400, "Checking doc width");
+        is(kidWin.innerHeight, 300, "Checking doc height");
 
         // Image just loaded and is scaled to window size.
         is(img.width,  378, "image width");
         is(img.height, 284, "image height");
         is(kidDoc.body.scrollLeft,  0, "Checking scrollLeft");
         is(kidDoc.body.scrollTop,   0, "Checking scrollTop");
 
         // ========== test 1 ==========
@@ -66,18 +69,18 @@ https://bugzilla.mozilla.org/show_bug.cg
         // ========== test 3 ==========
         // Click in the lower right to zoom in
         event = makeClickFor(350, 250);
         img.dispatchEvent(event);
         ok(true, "----- click 3 -----");
 
         is(img.width,  800, "image width");
         is(img.height, 600, "image height");
-        is(kidDoc.body.scrollLeft,  408, "Checking scrollLeft");
-        is(kidDoc.body.scrollTop,   316, "Checking scrollTop");
+        is(kidDoc.body.scrollLeft,  400, "Checking scrollLeft");
+        is(kidDoc.body.scrollTop,   300, "Checking scrollTop");
 
         // ========== test 4 ==========
         // Click there again to zoom out
         event = makeClickFor(350, 250);
         img.dispatchEvent(event);
         ok(true, "----- click 4 -----");
 
         is(img.width,  378, "image width");
new file mode 100644
--- /dev/null
+++ b/image/test/reftest/ImageDocument.css
@@ -0,0 +1,14 @@
+body {
+  background-color: #222;
+  margin: 0;
+}
+
+body > :first-child {
+  display: block;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
new file mode 100644
--- /dev/null
+++ b/image/test/reftest/encoders-lossless/ImageDocument.css
@@ -0,0 +1,14 @@
+body {
+  background-color: #222;
+  margin: 0;
+}
+
+img {
+  display: block;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
--- a/image/test/reftest/encoders-lossless/encoder.html
+++ b/image/test/reftest/encoders-lossless/encoder.html
@@ -1,11 +1,12 @@
 <html class="reftest-wait">
 <head>
-<title>Image reftest wrapper</title>
+  <title>Image reftest wrapper</title>
+  <link rel="stylesheet" href="ImageDocument.css">
   <style type="text/css">
     #image_from_encoder { background-color: rgb(10, 100, 250); }
   </style>
 
   <script>
   // Parse out the URL command line params
   // Valid options are:
   // - img=<reference image to use>
new file mode 100644
--- /dev/null
+++ b/image/test/reftest/gif/ImageDocument.css
@@ -0,0 +1,14 @@
+body {
+  background-color: #222;
+  margin: 0;
+}
+
+body > :first-child {
+  display: block;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
--- a/image/test/reftest/gif/test_bug641198.html
+++ b/image/test/reftest/gif/test_bug641198.html
@@ -1,29 +1,30 @@
 <!DOCTYPE HTML>
 <html class="reftest-wait">
 <head>
 <title>Test for bug 641198</title>
+<link rel="stylesheet" href="ImageDocument.css">
 <style type="text/css" media=screen>
    a.animated1 {
       display: block;
-      width: 212px;
-      height: 237px;
+      width: 40px;
+      height: 40px;
       background: url("animation1a.gif") no-repeat 0 0;
    }
 
    a.animated1 span {
       position: absolute;
       top: -999em;
    }
 
    a.animated2 {
       display: block;
-      width: 212px;
-      height: 237px;
+      width: 40px;
+      height: 40px;
       background: url("animation2a.gif") no-repeat 0 0;
    }
 
    a.animated2 span {
       position: absolute;
       top: -999em;
    }
 </style>
--- a/image/test/reftest/gif/webcam.html
+++ b/image/test/reftest/gif/webcam.html
@@ -1,1 +1,5 @@
+<html>
+<head><link rel="stylesheet" href="ImageDocument.css"></head>
+<body>
 <img src="webcam-simulacrum.mgif">
+</body></html>
new file mode 100644
--- /dev/null
+++ b/image/test/reftest/icon/win/ImageDocument.css
@@ -0,0 +1,14 @@
+body {
+  background-color: #222;
+  margin: 0;
+}
+
+body > :first-child {
+  display: block;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
--- a/image/test/reftest/icon/win/bug415761.sjs
+++ b/image/test/reftest/icon/win/bug415761.sjs
@@ -11,10 +11,11 @@ function handleRequest(request, response
   src.append("bug415761.ico");
   src.copyTo(null, dest.leafName);
   var uri = Components.classes["@mozilla.org/network/io-service;1"]
                       .getService(Components.interfaces.nsIIOService)
                       .newFileURI(dest).spec;
   response.setStatusLine(request.httpVersion, 200, "OK");
   response.setHeader("Content-Type", "text/html");
   response.setHeader("Cache-Control", "no-cache");
+  response.write("<link rel=\"stylesheet\" href=\"ImageDocument.css\">");
   response.write("<img src=\"moz-icon:" + uri + "\">");
 }
--- a/image/test/reftest/pngsuite-ancillary/ccwn2c08.html
+++ b/image/test/reftest/pngsuite-ancillary/ccwn2c08.html
@@ -1,10 +1,11 @@
 <html>
 <head>
+<link rel="stylesheet" href="../ImageDocument.css">
 <script src="qcms-asm-check.js" type="application/ecmascript"></script>
 <!-- generated with:
 import png
 import sys
 print """<html>
 <head>
 <script src="qcms-asm-check.js" type="application/ecmascript"></script>
 <!-""" + """- generated with:"""
--- a/image/test/reftest/pngsuite-ancillary/ccwn3p08.html
+++ b/image/test/reftest/pngsuite-ancillary/ccwn3p08.html
@@ -1,10 +1,11 @@
 <html>
 <head>
+<link rel="stylesheet" href="../ImageDocument.css">
 <script src="qcms-asm-check.js" type="application/ecmascript"></script>
 <!-- generated with:
 import png
 import sys
 print """<html>
 <head>
 <script src="qcms-asm-check.js" type="application/ecmascript"></script>
 <!-""" + """- generated with:"""
--- a/image/test/reftest/pngsuite-ancillary/cdfn2c08.html
+++ b/image/test/reftest/pngsuite-ancillary/cdfn2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='8' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,74,0,1)'></td>
   <td width='1' style='background-color: rgba(255,155,0,1)'></td>
   <td width='1' style='background-color: rgba(255,140,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cdhn2c08.html
+++ b/image/test/reftest/pngsuite-ancillary/cdhn2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='8'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cdsn2c08.html
+++ b/image/test/reftest/pngsuite-ancillary/cdsn2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='8' height='8'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,74,0,1)'></td>
   <td width='1' style='background-color: rgba(255,155,0,1)'></td>
   <td width='1' style='background-color: rgba(255,180,0,1)'></td>
   <td width='1' style='background-color: rgba(255,168,0,1)'></td>
   <td width='1' style='background-color: rgba(255,140,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cdun2c08.html
+++ b/image/test/reftest/pngsuite-ancillary/cdun2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/ch1n3p04.html
+++ b/image/test/reftest/pngsuite-ancillary/ch1n3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,168,0,1)'></td>
   <td width='1' style='background-color: rgba(255,168,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/ch2n3p08.html
+++ b/image/test/reftest/pngsuite-ancillary/ch2n3p08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,28,0,1)'></td>
   <td width='1' style='background-color: rgba(21,28,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cm0n0g04.html
+++ b/image/test/reftest/pngsuite-ancillary/cm0n0g04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cm7n0g04.html
+++ b/image/test/reftest/pngsuite-ancillary/cm7n0g04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cm9n0g04.html
+++ b/image/test/reftest/pngsuite-ancillary/cm9n0g04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cs3n2c16.html
+++ b/image/test/reftest/pngsuite-ancillary/cs3n2c16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cs3n3p08.html
+++ b/image/test/reftest/pngsuite-ancillary/cs3n3p08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cs5n2c08.html
+++ b/image/test/reftest/pngsuite-ancillary/cs5n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cs5n3p08.html
+++ b/image/test/reftest/pngsuite-ancillary/cs5n3p08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cs8n2c08.html
+++ b/image/test/reftest/pngsuite-ancillary/cs8n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/cs8n3p08.html
+++ b/image/test/reftest/pngsuite-ancillary/cs8n3p08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/ct0n0g04.html
+++ b/image/test/reftest/pngsuite-ancillary/ct0n0g04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/ct1n0g04.html
+++ b/image/test/reftest/pngsuite-ancillary/ct1n0g04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-ancillary/ctzn0g04.html
+++ b/image/test/reftest/pngsuite-ancillary/ctzn0g04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi0g01.html
+++ b/image/test/reftest/pngsuite-basic-i/basi0g01.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi0g02.html
+++ b/image/test/reftest/pngsuite-basic-i/basi0g02.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(155,155,155,1)'></td>
   <td width='1' style='background-color: rgba(155,155,155,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi0g04.html
+++ b/image/test/reftest/pngsuite-basic-i/basi0g04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(74,74,74,1)'></td>
   <td width='1' style='background-color: rgba(74,74,74,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi0g08.html
+++ b/image/test/reftest/pngsuite-basic-i/basi0g08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,21,21,1)'></td>
   <td width='1' style='background-color: rgba(28,28,28,1)'></td>
   <td width='1' style='background-color: rgba(34,34,34,1)'></td>
   <td width='1' style='background-color: rgba(39,39,39,1)'></td>
   <td width='1' style='background-color: rgba(43,43,43,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi0g16.html
+++ b/image/test/reftest/pngsuite-basic-i/basi0g16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(56,56,56,1)'></td>
   <td width='1' style='background-color: rgba(77,77,77,1)'></td>
   <td width='1' style='background-color: rgba(92,92,92,1)'></td>
   <td width='1' style='background-color: rgba(105,105,105,1)'></td>
   <td width='1' style='background-color: rgba(116,116,116,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi2c08.html
+++ b/image/test/reftest/pngsuite-basic-i/basi2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,254,1)'></td>
   <td width='1' style='background-color: rgba(255,255,254,1)'></td>
   <td width='1' style='background-color: rgba(255,255,253,1)'></td>
   <td width='1' style='background-color: rgba(255,255,253,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi2c16.html
+++ b/image/test/reftest/pngsuite-basic-i/basi2c16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(252,255,0,1)'></td>
   <td width='1' style='background-color: rgba(248,255,0,1)'></td>
   <td width='1' style='background-color: rgba(244,255,0,1)'></td>
   <td width='1' style='background-color: rgba(240,255,0,1)'></td>
   <td width='1' style='background-color: rgba(236,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi3p01.html
+++ b/image/test/reftest/pngsuite-basic-i/basi3p01.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(247,255,102,1)'></td>
   <td width='1' style='background-color: rgba(247,255,102,1)'></td>
   <td width='1' style='background-color: rgba(247,255,102,1)'></td>
   <td width='1' style='background-color: rgba(247,255,102,1)'></td>
   <td width='1' style='background-color: rgba(102,168,255,1)'></td>
   <td width='1' style='background-color: rgba(102,168,255,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi3p02.html
+++ b/image/test/reftest/pngsuite-basic-i/basi3p02.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi3p04.html
+++ b/image/test/reftest/pngsuite-basic-i/basi3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,168,0,1)'></td>
   <td width='1' style='background-color: rgba(255,168,0,1)'></td>
--- a/image/test/reftest/pngsuite-basic-i/basi3p08.html
+++ b/image/test/reftest/pngsuite-basic-i/basi3p08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,28,0,1)'></td>
   <td width='1' style='background-color: rgba(21,28,0,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn0g01.html
+++ b/image/test/reftest/pngsuite-basic-n/basn0g01.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn0g02.html
+++ b/image/test/reftest/pngsuite-basic-n/basn0g02.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(155,155,155,1)'></td>
   <td width='1' style='background-color: rgba(155,155,155,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn0g04.html
+++ b/image/test/reftest/pngsuite-basic-n/basn0g04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(74,74,74,1)'></td>
   <td width='1' style='background-color: rgba(74,74,74,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn0g08.html
+++ b/image/test/reftest/pngsuite-basic-n/basn0g08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,21,21,1)'></td>
   <td width='1' style='background-color: rgba(28,28,28,1)'></td>
   <td width='1' style='background-color: rgba(34,34,34,1)'></td>
   <td width='1' style='background-color: rgba(39,39,39,1)'></td>
   <td width='1' style='background-color: rgba(43,43,43,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn0g16.html
+++ b/image/test/reftest/pngsuite-basic-n/basn0g16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(56,56,56,1)'></td>
   <td width='1' style='background-color: rgba(77,77,77,1)'></td>
   <td width='1' style='background-color: rgba(92,92,92,1)'></td>
   <td width='1' style='background-color: rgba(105,105,105,1)'></td>
   <td width='1' style='background-color: rgba(116,116,116,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn2c08.html
+++ b/image/test/reftest/pngsuite-basic-n/basn2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,254,1)'></td>
   <td width='1' style='background-color: rgba(255,255,254,1)'></td>
   <td width='1' style='background-color: rgba(255,255,253,1)'></td>
   <td width='1' style='background-color: rgba(255,255,253,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn2c16.html
+++ b/image/test/reftest/pngsuite-basic-n/basn2c16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(252,255,0,1)'></td>
   <td width='1' style='background-color: rgba(248,255,0,1)'></td>
   <td width='1' style='background-color: rgba(244,255,0,1)'></td>
   <td width='1' style='background-color: rgba(240,255,0,1)'></td>
   <td width='1' style='background-color: rgba(236,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn3p01.html
+++ b/image/test/reftest/pngsuite-basic-n/basn3p01.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(247,255,102,1)'></td>
   <td width='1' style='background-color: rgba(247,255,102,1)'></td>
   <td width='1' style='background-color: rgba(247,255,102,1)'></td>
   <td width='1' style='background-color: rgba(247,255,102,1)'></td>
   <td width='1' style='background-color: rgba(102,168,255,1)'></td>
   <td width='1' style='background-color: rgba(102,168,255,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn3p02.html
+++ b/image/test/reftest/pngsuite-basic-n/basn3p02.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn3p04.html
+++ b/image/test/reftest/pngsuite-basic-n/basn3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,168,0,1)'></td>
   <td width='1' style='background-color: rgba(255,168,0,1)'></td>
--- a/image/test/reftest/pngsuite-basic-n/basn3p08.html
+++ b/image/test/reftest/pngsuite-basic-n/basn3p08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,28,0,1)'></td>
   <td width='1' style='background-color: rgba(21,28,0,1)'></td>
--- a/image/test/reftest/pngsuite-chunkorder/color.html
+++ b/image/test/reftest/pngsuite-chunkorder/color.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(252,255,0,1)'></td>
   <td width='1' style='background-color: rgba(248,255,0,1)'></td>
   <td width='1' style='background-color: rgba(244,255,0,1)'></td>
   <td width='1' style='background-color: rgba(240,255,0,1)'></td>
   <td width='1' style='background-color: rgba(236,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-chunkorder/grayscale.html
+++ b/image/test/reftest/pngsuite-chunkorder/grayscale.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(56,56,56,1)'></td>
   <td width='1' style='background-color: rgba(77,77,77,1)'></td>
   <td width='1' style='background-color: rgba(92,92,92,1)'></td>
   <td width='1' style='background-color: rgba(105,105,105,1)'></td>
   <td width='1' style='background-color: rgba(116,116,116,1)'></td>
--- a/image/test/reftest/pngsuite-filtering/f00n0g08.html
+++ b/image/test/reftest/pngsuite-filtering/f00n0g08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(127,127,127,1)'></td>
   <td width='1' style='background-color: rgba(135,135,135,1)'></td>
   <td width='1' style='background-color: rgba(142,142,142,1)'></td>
   <td width='1' style='background-color: rgba(150,150,150,1)'></td>
   <td width='1' style='background-color: rgba(157,157,157,1)'></td>
   <td width='1' style='background-color: rgba(164,164,164,1)'></td>
--- a/image/test/reftest/pngsuite-filtering/f00n2c08.html
+++ b/image/test/reftest/pngsuite-filtering/f00n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,8,1)'></td>
   <td width='1' style='background-color: rgba(255,8,15,1)'></td>
   <td width='1' style='background-color: rgba(255,16,23,1)'></td>
   <td width='1' style='background-color: rgba(255,24,31,1)'></td>
   <td width='1' style='background-color: rgba(255,32,39,1)'></td>
   <td width='1' style='background-color: rgba(255,41,47,1)'></td>
--- a/image/test/reftest/pngsuite-filtering/f01n0g08.html
+++ b/image/test/reftest/pngsuite-filtering/f01n0g08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(127,127,127,1)'></td>
   <td width='1' style='background-color: rgba(135,135,135,1)'></td>
   <td width='1' style='background-color: rgba(142,142,142,1)'></td>
   <td width='1' style='background-color: rgba(150,150,150,1)'></td>
   <td width='1' style='background-color: rgba(157,157,157,1)'></td>
   <td width='1' style='background-color: rgba(164,164,164,1)'></td>
--- a/image/test/reftest/pngsuite-filtering/f01n2c08.html
+++ b/image/test/reftest/pngsuite-filtering/f01n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,8,1)'></td>
   <td width='1' style='background-color: rgba(255,8,15,1)'></td>
   <td width='1' style='background-color: rgba(255,16,23,1)'></td>
   <td width='1' style='background-color: rgba(255,24,31,1)'></td>
   <td width='1' style='background-color: rgba(255,32,39,1)'></td>
   <td width='1' style='background-color: rgba(255,41,47,1)'></td>
--- a/image/test/reftest/pngsuite-filtering/f02n0g08.html
+++ b/image/test/reftest/pngsuite-filtering/f02n0g08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(127,127,127,1)'></td>
   <td width='1' style='background-color: rgba(135,135,135,1)'></td>
   <td width='1' style='background-color: rgba(142,142,142,1)'></td>
   <td width='1' style='background-color: rgba(150,150,150,1)'></td>
   <td width='1' style='background-color: rgba(157,157,157,1)'></td>
   <td width='1' style='background-color: rgba(164,164,164,1)'></td>
--- a/image/test/reftest/pngsuite-filtering/f02n2c08.html
+++ b/image/test/reftest/pngsuite-filtering/f02n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,8,1)'></td>
   <td width='1' style='background-color: rgba(255,8,15,1)'></td>
   <td width='1' style='background-color: rgba(255,16,23,1)'></td>
   <td width='1' style='background-color: rgba(255,24,31,1)'></td>
   <td width='1' style='background-color: rgba(255,32,39,1)'></td>
   <td width='1' style='background-color: rgba(255,41,47,1)'></td>
--- a/image/test/reftest/pngsuite-filtering/f03n0g08.html
+++ b/image/test/reftest/pngsuite-filtering/f03n0g08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(127,127,127,1)'></td>
   <td width='1' style='background-color: rgba(135,135,135,1)'></td>
   <td width='1' style='background-color: rgba(142,142,142,1)'></td>
   <td width='1' style='background-color: rgba(150,150,150,1)'></td>
   <td width='1' style='background-color: rgba(157,157,157,1)'></td>
   <td width='1' style='background-color: rgba(164,164,164,1)'></td>
--- a/image/test/reftest/pngsuite-filtering/f03n2c08.html
+++ b/image/test/reftest/pngsuite-filtering/f03n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,8,1)'></td>
   <td width='1' style='background-color: rgba(255,8,15,1)'></td>
   <td width='1' style='background-color: rgba(255,16,23,1)'></td>
   <td width='1' style='background-color: rgba(255,24,31,1)'></td>
   <td width='1' style='background-color: rgba(255,32,39,1)'></td>
   <td width='1' style='background-color: rgba(255,41,47,1)'></td>
--- a/image/test/reftest/pngsuite-filtering/f04n0g08.html
+++ b/image/test/reftest/pngsuite-filtering/f04n0g08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(127,127,127,1)'></td>
   <td width='1' style='background-color: rgba(135,135,135,1)'></td>
   <td width='1' style='background-color: rgba(142,142,142,1)'></td>
   <td width='1' style='background-color: rgba(150,150,150,1)'></td>
   <td width='1' style='background-color: rgba(157,157,157,1)'></td>
   <td width='1' style='background-color: rgba(164,164,164,1)'></td>
--- a/image/test/reftest/pngsuite-filtering/f04n2c08.html
+++ b/image/test/reftest/pngsuite-filtering/f04n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,8,1)'></td>
   <td width='1' style='background-color: rgba(255,8,15,1)'></td>
   <td width='1' style='background-color: rgba(255,16,23,1)'></td>
   <td width='1' style='background-color: rgba(255,24,31,1)'></td>
   <td width='1' style='background-color: rgba(255,32,39,1)'></td>
   <td width='1' style='background-color: rgba(255,41,47,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g03n0g16.html
+++ b/image/test/reftest/pngsuite-gamma/g03n0g16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g03n2c08.html
+++ b/image/test/reftest/pngsuite-gamma/g03n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g03n3p04.html
+++ b/image/test/reftest/pngsuite-gamma/g03n3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g04n0g16.html
+++ b/image/test/reftest/pngsuite-gamma/g04n0g16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g04n2c08.html
+++ b/image/test/reftest/pngsuite-gamma/g04n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g04n3p04.html
+++ b/image/test/reftest/pngsuite-gamma/g04n3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g05n0g16.html
+++ b/image/test/reftest/pngsuite-gamma/g05n0g16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g05n2c08.html
+++ b/image/test/reftest/pngsuite-gamma/g05n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g05n3p04.html
+++ b/image/test/reftest/pngsuite-gamma/g05n3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g07n0g16.html
+++ b/image/test/reftest/pngsuite-gamma/g07n0g16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g07n2c08.html
+++ b/image/test/reftest/pngsuite-gamma/g07n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g07n3p04.html
+++ b/image/test/reftest/pngsuite-gamma/g07n3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g10n0g16.html
+++ b/image/test/reftest/pngsuite-gamma/g10n0g16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g10n2c08.html
+++ b/image/test/reftest/pngsuite-gamma/g10n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g10n3p04.html
+++ b/image/test/reftest/pngsuite-gamma/g10n3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g25n0g16.html
+++ b/image/test/reftest/pngsuite-gamma/g25n0g16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
   <td width='1' style='background-color: rgba(255,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g25n2c08.html
+++ b/image/test/reftest/pngsuite-gamma/g25n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-gamma/g25n3p04.html
+++ b/image/test/reftest/pngsuite-gamma/g25n3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s01_3p01.html
+++ b/image/test/reftest/pngsuite-oddsizes/s01_3p01.html
@@ -1,7 +1,9 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='1' height='1'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
 </tr>
 </table>
 </body></html>
--- a/image/test/reftest/pngsuite-oddsizes/s02_3p01.html
+++ b/image/test/reftest/pngsuite-oddsizes/s02_3p01.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='2' height='2'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,255,255,1)'></td>
   <td width='1' style='background-color: rgba(0,255,255,1)'></td>
 </tr>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,255,255,1)'></td>
   <td width='1' style='background-color: rgba(0,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s03_3p01.html
+++ b/image/test/reftest/pngsuite-oddsizes/s03_3p01.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='3' height='3'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,255,0,1)'></td>
   <td width='1' style='background-color: rgba(0,255,0,1)'></td>
   <td width='1' style='background-color: rgba(0,255,0,1)'></td>
 </tr>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s04_3p01.html
+++ b/image/test/reftest/pngsuite-oddsizes/s04_3p01.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='4' height='4'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
 </tr>
 <tr height='1'>
--- a/image/test/reftest/pngsuite-oddsizes/s05_3p02.html
+++ b/image/test/reftest/pngsuite-oddsizes/s05_3p02.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='5' height='5'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
 </tr>
--- a/image/test/reftest/pngsuite-oddsizes/s06_3p02.html
+++ b/image/test/reftest/pngsuite-oddsizes/s06_3p02.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='6' height='6'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,255,1)'></td>
   <td width='1' style='background-color: rgba(255,0,255,1)'></td>
   <td width='1' style='background-color: rgba(255,0,255,1)'></td>
   <td width='1' style='background-color: rgba(255,0,255,1)'></td>
   <td width='1' style='background-color: rgba(255,0,255,1)'></td>
   <td width='1' style='background-color: rgba(255,0,255,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s07_3p02.html
+++ b/image/test/reftest/pngsuite-oddsizes/s07_3p02.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='7' height='7'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
   <td width='1' style='background-color: rgba(0,0,255,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s08_3p02.html
+++ b/image/test/reftest/pngsuite-oddsizes/s08_3p02.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='8' height='8'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,255,255,1)'></td>
   <td width='1' style='background-color: rgba(0,255,255,1)'></td>
   <td width='1' style='background-color: rgba(0,255,255,1)'></td>
   <td width='1' style='background-color: rgba(0,255,255,1)'></td>
   <td width='1' style='background-color: rgba(0,255,255,1)'></td>
   <td width='1' style='background-color: rgba(0,255,255,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s09_3p02.html
+++ b/image/test/reftest/pngsuite-oddsizes/s09_3p02.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='9' height='9'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,255,0,1)'></td>
   <td width='1' style='background-color: rgba(0,255,0,1)'></td>
   <td width='1' style='background-color: rgba(0,255,0,1)'></td>
   <td width='1' style='background-color: rgba(0,255,0,1)'></td>
   <td width='1' style='background-color: rgba(0,255,0,1)'></td>
   <td width='1' style='background-color: rgba(0,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s32_3p04.html
+++ b/image/test/reftest/pngsuite-oddsizes/s32_3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s33_3p04.html
+++ b/image/test/reftest/pngsuite-oddsizes/s33_3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='33' height='33'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s34_3p04.html
+++ b/image/test/reftest/pngsuite-oddsizes/s34_3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='34' height='34'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s35_3p04.html
+++ b/image/test/reftest/pngsuite-oddsizes/s35_3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='35' height='35'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s36_3p04.html
+++ b/image/test/reftest/pngsuite-oddsizes/s36_3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='36' height='36'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s37_3p04.html
+++ b/image/test/reftest/pngsuite-oddsizes/s37_3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='37' height='37'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s38_3p04.html
+++ b/image/test/reftest/pngsuite-oddsizes/s38_3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='38' height='38'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s39_3p04.html
+++ b/image/test/reftest/pngsuite-oddsizes/s39_3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='39' height='39'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-oddsizes/s40_3p04.html
+++ b/image/test/reftest/pngsuite-oddsizes/s40_3p04.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='40' height='40'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,0,0,1)'></td>
   <td width='1' style='background-color: rgba(255,180,0,1)'></td>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(180,255,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
--- a/image/test/reftest/pngsuite-palettes/pp0n2c16.html
+++ b/image/test/reftest/pngsuite-palettes/pp0n2c16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(252,255,0,1)'></td>
   <td width='1' style='background-color: rgba(248,255,0,1)'></td>
   <td width='1' style='background-color: rgba(244,255,0,1)'></td>
   <td width='1' style='background-color: rgba(240,255,0,1)'></td>
   <td width='1' style='background-color: rgba(236,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-palettes/ps1n0g08.html
+++ b/image/test/reftest/pngsuite-palettes/ps1n0g08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,21,21,1)'></td>
   <td width='1' style='background-color: rgba(28,28,28,1)'></td>
   <td width='1' style='background-color: rgba(34,34,34,1)'></td>
   <td width='1' style='background-color: rgba(39,39,39,1)'></td>
   <td width='1' style='background-color: rgba(43,43,43,1)'></td>
--- a/image/test/reftest/pngsuite-palettes/ps1n2c16.html
+++ b/image/test/reftest/pngsuite-palettes/ps1n2c16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(252,255,0,1)'></td>
   <td width='1' style='background-color: rgba(248,255,0,1)'></td>
   <td width='1' style='background-color: rgba(244,255,0,1)'></td>
   <td width='1' style='background-color: rgba(240,255,0,1)'></td>
   <td width='1' style='background-color: rgba(236,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-palettes/ps2n0g08.html
+++ b/image/test/reftest/pngsuite-palettes/ps2n0g08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(0,0,0,1)'></td>
   <td width='1' style='background-color: rgba(21,21,21,1)'></td>
   <td width='1' style='background-color: rgba(28,28,28,1)'></td>
   <td width='1' style='background-color: rgba(34,34,34,1)'></td>
   <td width='1' style='background-color: rgba(39,39,39,1)'></td>
   <td width='1' style='background-color: rgba(43,43,43,1)'></td>
--- a/image/test/reftest/pngsuite-palettes/ps2n2c16.html
+++ b/image/test/reftest/pngsuite-palettes/ps2n2c16.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(252,255,0,1)'></td>
   <td width='1' style='background-color: rgba(248,255,0,1)'></td>
   <td width='1' style='background-color: rgba(244,255,0,1)'></td>
   <td width='1' style='background-color: rgba(240,255,0,1)'></td>
   <td width='1' style='background-color: rgba(236,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-zlib/z00n2c08.html
+++ b/image/test/reftest/pngsuite-zlib/z00n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(247,255,0,1)'></td>
   <td width='1' style='background-color: rgba(239,255,0,1)'></td>
   <td width='1' style='background-color: rgba(230,255,0,1)'></td>
   <td width='1' style='background-color: rgba(222,255,0,1)'></td>
   <td width='1' style='background-color: rgba(214,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-zlib/z03n2c08.html
+++ b/image/test/reftest/pngsuite-zlib/z03n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(247,255,0,1)'></td>
   <td width='1' style='background-color: rgba(239,255,0,1)'></td>
   <td width='1' style='background-color: rgba(230,255,0,1)'></td>
   <td width='1' style='background-color: rgba(222,255,0,1)'></td>
   <td width='1' style='background-color: rgba(214,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-zlib/z06n2c08.html
+++ b/image/test/reftest/pngsuite-zlib/z06n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(247,255,0,1)'></td>
   <td width='1' style='background-color: rgba(239,255,0,1)'></td>
   <td width='1' style='background-color: rgba(230,255,0,1)'></td>
   <td width='1' style='background-color: rgba(222,255,0,1)'></td>
   <td width='1' style='background-color: rgba(214,255,0,1)'></td>
--- a/image/test/reftest/pngsuite-zlib/z09n2c08.html
+++ b/image/test/reftest/pngsuite-zlib/z09n2c08.html
@@ -1,9 +1,11 @@
-<html><body>
+<html>
+<head><link rel="stylesheet" href="../ImageDocument.css"></head>
+<body>
 <table cellpadding='0' cellspacing='0' width='32' height='32'>
 <tr height='1'>
   <td width='1' style='background-color: rgba(255,255,0,1)'></td>
   <td width='1' style='background-color: rgba(247,255,0,1)'></td>
   <td width='1' style='background-color: rgba(239,255,0,1)'></td>
   <td width='1' style='background-color: rgba(230,255,0,1)'></td>
   <td width='1' style='background-color: rgba(222,255,0,1)'></td>
   <td width='1' style='background-color: rgba(214,255,0,1)'></td>
--- a/layout/style/TopLevelImageDocument.css
+++ b/layout/style/TopLevelImageDocument.css
@@ -32,17 +32,28 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
 /*
   This CSS stylesheet defines the rules to be applied to ImageDocuments that
   are top level (e.g. not iframes).
 */
 
+body {
+  background-color: #222;
+  margin: 0;
+}
+
 /* We must declare the image as a block element. If we stay as
 an inline element, our parent LineBox will be inline too and
 ignore the available height during reflow.
 This is bad during printing, it means tall image frames won't know
 the size of the paper and cannot break into continuations along
 multiple pages. */
 img {
   display: block;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }