Bug 863658. Replace mozilla-banner image use in reftest for bug 28811 with a plain blue image. r=jmuizelaar

Different timing of image decodes finishing means we paint them into surfaces of different sizes (the surface sizes are based on what part of the page we need to repaint). This means that small fractional pixel differences in cairo can result in a different image when bilinearly resizing it.

layout/reftests/bugs/28811-1-inner.html

@@ -9,19 +9,19 @@
 
 <div><span style="margin-right: 10%">text</span></div>
 <div><span style="margin-left: 10%">text</span></div>
-<div><img src="mozilla-banner.gif" height="10" style="margin-top: 2%"></div>
-<div><img src="mozilla-banner.gif" height="10" style="margin-right: 10%"></div>
-<div><img src="mozilla-banner.gif" height="10" style="margin-bottom: 2%"></div>
-<div><img src="mozilla-banner.gif" height="10" style="margin-left: 10%"></div>
+<div><img src="blue-600x58.png" height="10" style="margin-top: 2%"></div>
+<div><img src="blue-600x58.png" height="10" style="margin-right: 10%"></div>
+<div><img src="blue-600x58.png" height="10" style="margin-bottom: 2%"></div>
+<div><img src="blue-600x58.png" height="10" style="margin-left: 10%"></div>
 
 <div><span style="background:yellow; padding-top: 2%">text</span></div>
 <div><span style="background:yellow; padding-right: 10%">text</span></div>
 <div><span style="background:yellow; padding-bottom: 2%">text</span></div>
 <div><span style="background:yellow; padding-left: 10%">text</span></div>
 
-<div><img src="mozilla-banner.gif" height="10" style="width: 10%"></div>
-<div><img src="mozilla-banner.gif" height="2" style="min-width: 50%"></div>
-<div><img src="mozilla-banner.gif" height="10" style="max-width: 1%"></div>
+<div><img src="blue-600x58.png" height="10" style="width: 10%"></div>
+<div><img src="blue-600x58.png" height="2" style="min-width: 50%"></div>
+<div><img src="blue-600x58.png" height="10" style="max-width: 1%"></div>
 
 <div><span style="display:inline-block">This is an inline-block that contains enough text that its shrink-wrap width will be based on the available size in its container.  Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span></div>
 <div><button>This is a button that contains enough text that its shrink-wrap width will be based on the available size in its container.  Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</button></div>

layout/reftests/bugs/28811-2-inner.html

@@ -9,19 +9,19 @@
 
 <div><span><span style="margin-right: 10%">text</span></span></div>
 <div><span><span style="margin-left: 10%">text</span></span></div>
-<div><span><img src="mozilla-banner.gif" height="10" style="margin-top: 2%"></span></div>
-<div><span><img src="mozilla-banner.gif" height="10" style="margin-right: 10%"></span></div>
-<div><span><img src="mozilla-banner.gif" height="10" style="margin-bottom: 2%"></span></div>
-<div><span><img src="mozilla-banner.gif" height="10" style="margin-left: 10%"></span></div>
+<div><span><img src="blue-600x58.png" height="10" style="margin-top: 2%"></span></div>
+<div><span><img src="blue-600x58.png" height="10" style="margin-right: 10%"></span></div>
+<div><span><img src="blue-600x58.png" height="10" style="margin-bottom: 2%"></span></div>
+<div><span><img src="blue-600x58.png" height="10" style="margin-left: 10%"></span></div>
 
 <div><span><span style="background:yellow; padding-top: 2%">text</span></span></div>
 <div><span><span style="background:yellow; padding-right: 10%">text</span></span></div>
 <div><span><span style="background:yellow; padding-bottom: 2%">text</span></span></div>
 <div><span><span style="background:yellow; padding-left: 10%">text</span></span></div>
 
-<div><span><img src="mozilla-banner.gif" height="10" style="width: 10%"></span></div>
-<div><span><img src="mozilla-banner.gif" height="2" style="min-width: 50%"></span></div>
-<div><span><img src="mozilla-banner.gif" height="10" style="max-width: 1%"></span></div>
+<div><span><img src="blue-600x58.png" height="10" style="width: 10%"></span></div>
+<div><span><img src="blue-600x58.png" height="2" style="min-width: 50%"></span></div>
+<div><span><img src="blue-600x58.png" height="10" style="max-width: 1%"></span></div>
 
 <div><span><span style="display:inline-block">This is an inline-block that contains enough text that its shrink-wrap width will be based on the available size in its container.  Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span></span></div>
 <div><span><button>This is a button that contains enough text that its shrink-wrap width will be based on the available size in its container.  Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</button></span></div>