<!DOCTYPE html>
JPEG image RGB pixels should render without color corruption and in strict<br>
order, regardless of the underlying machine pixel buffer endianess.<br><br>
<img src="resources/rgb-jpeg-red.jpg" onload="test(this, [255,0,0,255])">
<img src="resources/rgb-jpeg-green.jpg" onload="test(this, [0,255,0,255])">
<img src="resources/rgb-jpeg-blue.jpg" onload="test(this, [0,0,255,255])">
<pre id="log">PASS</pre>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
window.testRunner.dumpAsText();
}
function log(message)
{
document.getElementById("log").textContent += '\n' + message;
}
function averagePixelComponents(data, size)
{
var r = 0, g = 0, b = 0, a = 0;
for (var i = 0, total = size * 4; i < total; i += 4) {
r += data[i + 0];
g += data[i + 1];
b += data[i + 2];
a += data[i + 3];
}
return [r / size, g / size, b / size, a / size];
}
function averagePixelShouldBe(pixel, expect, tolerance)
{
var delta = 0;
pixel.forEach(function(component, i) {
delta = Math.max(Math.abs(pixel[i] - expect[i]), delta);
});
if (delta > tolerance)
log('FAIL: [' + pixel + '] expected [' + expect + '] +/- ' + tolerance);
}
function testImage(image, expect)
{
// Create a canvas, load the given image in it.
var canvas = document.createElement("canvas");
canvas.width = canvas.height = 64;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
// Compare the canvas pixel component averages.
var pixels = context.getImageData(0, 0, 64, 64).data;
var result = averagePixelComponents(pixels, 64 * 64);
var pixelTolerance = 3;
averagePixelShouldBe(result, expect, pixelTolerance);
}
function test(image, expect)
{
try {
loadedImages = window.loadedImages || 0;
testImage(image, expect);
if (++loadedImages < 3)
return;
} catch (e) {
log('FAIL: ' + e.message);
}
if (window.testRunner)
window.testRunner.notifyDone();
}
</script>