Add automated test to test page

This commit is contained in:
Luke Page 2015-08-02 17:19:55 +01:00
parent 86a114be2f
commit 51365543ae
2 changed files with 637 additions and 166 deletions

409
test/imagediff.js Normal file
View file

@ -0,0 +1,409 @@
// js-imagediff 1.0.3
// (c) 2011-2012 Carl Sutherland, Humble Software
// Distributed under the MIT License
// For original source and documentation visit:
// http://www.github.com/HumbleSoftware/js-imagediff
(function (name, definition) {
var root = this;
if (typeof module !== 'undefined') {
try {
var Canvas = require('canvas');
} catch (e) {
throw new Error(
e.message + '\n' +
'Please see https://github.com/HumbleSoftware/js-imagediff#cannot-find-module-canvas\n'
);
}
module.exports = definition(root, name, Canvas);
} else if (typeof define === 'function' && typeof define.amd === 'object') {
define(definition);
} else {
root[name] = definition(root, name);
}
})('imagediff', function (root, name, Canvas) {
var
TYPE_ARRAY = /\[object Array\]/i,
TYPE_CANVAS = /\[object (Canvas|HTMLCanvasElement)\]/i,
TYPE_CONTEXT = /\[object CanvasRenderingContext2D\]/i,
TYPE_IMAGE = /\[object (Image|HTMLImageElement)\]/i,
TYPE_IMAGE_DATA = /\[object ImageData\]/i,
UNDEFINED = 'undefined',
canvas = getCanvas(),
context = canvas.getContext('2d'),
previous = root[name],
imagediff, jasmine;
// Creation
function getCanvas (width, height) {
var
canvas = Canvas ?
new Canvas() :
document.createElement('canvas');
if (width) canvas.width = width;
if (height) canvas.height = height;
return canvas;
}
function getImageData (width, height) {
canvas.width = width;
canvas.height = height;
context.clearRect(0, 0, width, height);
return context.createImageData(width, height);
}
// expost canvas module
function getCanvasRef() {
return Canvas;
}
// Type Checking
function isImage (object) {
return isType(object, TYPE_IMAGE);
}
function isCanvas (object) {
return isType(object, TYPE_CANVAS);
}
function isContext (object) {
return isType(object, TYPE_CONTEXT);
}
function isImageData (object) {
return !!(object &&
isType(object, TYPE_IMAGE_DATA) &&
typeof(object.width) !== UNDEFINED &&
typeof(object.height) !== UNDEFINED &&
typeof(object.data) !== UNDEFINED);
}
function isImageType (object) {
return (
isImage(object) ||
isCanvas(object) ||
isContext(object) ||
isImageData(object)
);
}
function isType (object, type) {
return typeof (object) === 'object' && !!Object.prototype.toString.apply(object).match(type);
}
// Type Conversion
function copyImageData (imageData) {
var
height = imageData.height,
width = imageData.width,
data = imageData.data,
newImageData, newData, i;
canvas.width = width;
canvas.height = height;
newImageData = context.getImageData(0, 0, width, height);
newData = newImageData.data;
for (i = imageData.data.length; i--;) {
newData[i] = data[i];
}
return newImageData;
}
function toImageData (object) {
if (isImage(object)) { return toImageDataFromImage(object); }
if (isCanvas(object)) { return toImageDataFromCanvas(object); }
if (isContext(object)) { return toImageDataFromContext(object); }
if (isImageData(object)) { return object; }
}
function toImageDataFromImage (image) {
var
height = image.height,
width = image.width;
canvas.width = width;
canvas.height = height;
context.clearRect(0, 0, width, height);
context.drawImage(image, 0, 0);
return context.getImageData(0, 0, width, height);
}
function toImageDataFromCanvas (canvas) {
var
height = canvas.height,
width = canvas.width,
context = canvas.getContext('2d');
return context.getImageData(0, 0, width, height);
}
function toImageDataFromContext (context) {
var
canvas = context.canvas,
height = canvas.height,
width = canvas.width;
return context.getImageData(0, 0, width, height);
}
function toCanvas (object) {
var
data = toImageData(object),
canvas = getCanvas(data.width, data.height),
context = canvas.getContext('2d');
context.putImageData(data, 0, 0);
return canvas;
}
// ImageData Equality Operators
function equalWidth (a, b) {
return a.width === b.width;
}
function equalHeight (a, b) {
return a.height === b.height;
}
function equalDimensions (a, b) {
return equalHeight(a, b) && equalWidth(a, b);
}
function equal (a, b, tolerance) {
var
aData = a.data,
bData = b.data,
length = aData.length,
i;
tolerance = tolerance || 0;
if (!equalDimensions(a, b)) return false;
for (i = length; i--;) {
if (aData[i] !== bData[i] && Math.abs(aData[i] - bData[i]) > tolerance) {
var x = i % (a.width * 4);
var y = (i - x) / (a.width * 4);
var color = x % 4;
x = (x - color) / 4;
console.log("Difference x", x, "y", y, ["R", "G", "B", "A"][color], " - ", aData[i], " !== ", bData[i]);
return false;
}
}
return true;
}
// Diff
function diff (a, b, options) {
return (equalDimensions(a, b) ? diffEqual : diffUnequal)(a, b, options);
}
function diffEqual (a, b, options) {
var
height = a.height,
width = a.width,
c = getImageData(width, height), // c = a - b
aData = a.data,
bData = b.data,
cData = c.data,
length = cData.length,
row, column,
i, j, k, v;
for (i = 0; i < length; i += 4) {
cData[i] = Math.abs(aData[i] - bData[i]);
cData[i+1] = Math.abs(aData[i+1] - bData[i+1]);
cData[i+2] = Math.abs(aData[i+2] - bData[i+2]);
cData[i+3] = Math.abs(255 - Math.abs(aData[i+3] - bData[i+3]));
}
return c;
}
function diffUnequal (a, b, options) {
var
height = Math.max(a.height, b.height),
width = Math.max(a.width, b.width),
c = getImageData(width, height), // c = a - b
aData = a.data,
bData = b.data,
cData = c.data,
align = options && options.align,
rowOffset,
columnOffset,
row, column,
i, j, k, v;
for (i = cData.length - 1; i > 0; i = i - 4) {
cData[i] = 255;
}
// Add First Image
offsets(a);
for (row = a.height; row--;){
for (column = a.width; column--;) {
i = 4 * ((row + rowOffset) * width + (column + columnOffset));
j = 4 * (row * a.width + column);
cData[i+0] = aData[j+0]; // r
cData[i+1] = aData[j+1]; // g
cData[i+2] = aData[j+2]; // b
// cData[i+3] = aData[j+3]; // a
}
}
// Subtract Second Image
offsets(b);
for (row = b.height; row--;){
for (column = b.width; column--;) {
i = 4 * ((row + rowOffset) * width + (column + columnOffset));
j = 4 * (row * b.width + column);
cData[i+0] = Math.abs(cData[i+0] - bData[j+0]); // r
cData[i+1] = Math.abs(cData[i+1] - bData[j+1]); // g
cData[i+2] = Math.abs(cData[i+2] - bData[j+2]); // b
}
}
// Helpers
function offsets (imageData) {
if (align === 'top') {
rowOffset = 0;
columnOffset = 0;
} else {
rowOffset = Math.floor((height - imageData.height) / 2);
columnOffset = Math.floor((width - imageData.width) / 2);
}
}
return c;
}
// Validation
function checkType () {
var i;
for (i = 0; i < arguments.length; i++) {
if (!isImageType(arguments[i])) {
throw {
name : 'ImageTypeError',
message : 'Submitted object was not an image.'
};
}
}
}
// Jasmine Matchers
function get (element, content) {
element = document.createElement(element);
if (element && content) {
element.innerHTML = content;
}
return element;
}
jasmine = {
toBeImageData : function () {
return imagediff.isImageData(this.actual);
},
toImageDiffEqual : function (expected, tolerance) {
if (typeof (document) !== UNDEFINED) {
this.message = function () {
var
div = get('div'),
a = get('div', '<div>Actual:</div>'),
b = get('div', '<div>Expected:</div>'),
c = get('div', '<div>Diff:</div>'),
diff = imagediff.diff(this.actual, expected),
canvas = getCanvas(),
context;
canvas.height = diff.height;
canvas.width = diff.width;
div.style.overflow = 'hidden';
a.style.float = 'left';
b.style.float = 'left';
c.style.float = 'left';
context = canvas.getContext('2d');
context.putImageData(diff, 0, 0);
a.appendChild(toCanvas(this.actual));
b.appendChild(toCanvas(expected));
c.appendChild(canvas);
div.appendChild(a);
div.appendChild(b);
div.appendChild(c);
return [
div,
"Expected not to be equal."
];
};
}
return imagediff.equal(this.actual, expected, tolerance);
}
};
// Image Output
function imageDataToPNG (imageData, outputFile, callback) {
var
canvas = toCanvas(imageData),
base64Data,
decodedImage;
callback = callback || Function;
base64Data = canvas.toDataURL().replace(/^data:image\/\w+;base64,/,"");
decodedImage = new Buffer(base64Data, 'base64');
require('fs').writeFile(outputFile, decodedImage, callback);
}
// Definition
imagediff = {
createCanvas : getCanvas,
createImageData : getImageData,
getCanvasRef: getCanvasRef,
isImage : isImage,
isCanvas : isCanvas,
isContext : isContext,
isImageData : isImageData,
isImageType : isImageType,
toImageData : function (object) {
checkType(object);
if (isImageData(object)) { return copyImageData(object); }
return toImageData(object);
},
equal : function (a, b, tolerance) {
checkType(a, b);
a = toImageData(a);
b = toImageData(b);
return equal(a, b, tolerance);
},
diff : function (a, b, options) {
checkType(a, b);
a = toImageData(a);
b = toImageData(b);
return diff(a, b, options);
},
jasmine : jasmine,
// Compatibility
noConflict : function () {
root[name] = previous;
return imagediff;
}
};
if (typeof module !== 'undefined') {
imagediff.imageDataToPNG = imageDataToPNG;
}
return imagediff;
});

View file

@ -6,181 +6,243 @@
body { background: #eee; font: 12px Arial; margin: 10px; }
img { margin: 2px; background: url(bg.png); }
h3 { margin: 10px 0; }
.success {
background: green;
}
.failure {
background: red;
}
</style>
</head>
<body>
<h3>Filtering</h3>
<img src="in/f99n0g04.png"> <img src="out/f99n0g04.png"> <img src="outsync/f99n0g04.png"> filter changing per scanline, grayscale, 4 bit <br />
<img src="in/f04n2c08.png"> <img src="out/f04n2c08.png"> <img src="outsync/f04n2c08.png"> no filtering, colour, 8 bit <br />
<img src="in/f04n0g08.png"> <img src="out/f04n0g08.png"> <img src="outsync/f04n0g08.png"> no filtering, grayscale, 8 bit<br />
<img src="in/f03n2c08.png"> <img src="out/f03n2c08.png"> <img src="outsync/f03n2c08.png"> filter 3, colour, 8 bit <br />
<img src="in/f03n0g08.png"> <img src="out/f03n0g08.png"> <img src="outsync/f03n0g08.png"> filter 3, grayscale, 8 bit<br />
<img src="in/f02n2c08.png"> <img src="out/f02n2c08.png"> <img src="outsync/f02n2c08.png"> filter 2, colour, 8 bit <br />
<img src="in/f02n0g08.png"> <img src="out/f02n0g08.png"> <img src="outsync/f02n0g08.png"> filter 2, grayscale, 8 bit<br />
<img src="in/f01n2c08.png"> <img src="out/f01n2c08.png"> <img src="outsync/f01n2c08.png"> filter 1, colour, 8 bit <br />
<img src="in/f01n0g08.png"> <img src="out/f01n0g08.png"> <img src="outsync/f01n0g08.png"> filter 1, grayscale, 8 bit<br />
<img src="in/f00n2c08.png"> <img src="out/f00n2c08.png"> <img src="outsync/f00n2c08.png"> filter 0, colour, 8 bit <br />
<img src="in/f00n0g08.png"> <img src="out/f00n0g08.png"> <img src="outsync/f00n0g08.png"> filter 0, grayscale, 8 bit<br />
<p class="testline"><img class="inimage" src="in/f99n0g04.png"> <img class="asyncimage" src="out/f99n0g04.png"> <img class="syncimage" src="outsync/f99n0g04.png"> filter changing per scanline, grayscale, 4 bit </p>
<p class="testline"><img class="inimage" src="in/f04n2c08.png"> <img class="asyncimage" src="out/f04n2c08.png"> <img class="syncimage" src="outsync/f04n2c08.png"> no filtering, colour, 8 bit </p>
<p class="testline"><img class="inimage" src="in/f04n0g08.png"> <img class="asyncimage" src="out/f04n0g08.png"> <img class="syncimage" src="outsync/f04n0g08.png"> no filtering, grayscale, 8 bit</p>
<p class="testline"><img class="inimage" src="in/f03n2c08.png"> <img class="asyncimage" src="out/f03n2c08.png"> <img class="syncimage" src="outsync/f03n2c08.png"> filter 3, colour, 8 bit </p>
<p class="testline"><img class="inimage" src="in/f03n0g08.png"> <img class="asyncimage" src="out/f03n0g08.png"> <img class="syncimage" src="outsync/f03n0g08.png"> filter 3, grayscale, 8 bit</p>
<p class="testline"><img class="inimage" src="in/f02n2c08.png"> <img class="asyncimage" src="out/f02n2c08.png"> <img class="syncimage" src="outsync/f02n2c08.png"> filter 2, colour, 8 bit </p>
<p class="testline"><img class="inimage" src="in/f02n0g08.png"> <img class="asyncimage" src="out/f02n0g08.png"> <img class="syncimage" src="outsync/f02n0g08.png"> filter 2, grayscale, 8 bit</p>
<p class="testline"><img class="inimage" src="in/f01n2c08.png"> <img class="asyncimage" src="out/f01n2c08.png"> <img class="syncimage" src="outsync/f01n2c08.png"> filter 1, colour, 8 bit </p>
<p class="testline"><img class="inimage" src="in/f01n0g08.png"> <img class="asyncimage" src="out/f01n0g08.png"> <img class="syncimage" src="outsync/f01n0g08.png"> filter 1, grayscale, 8 bit</p>
<p class="testline"><img class="inimage" src="in/f00n2c08.png"> <img class="asyncimage" src="out/f00n2c08.png"> <img class="syncimage" src="outsync/f00n2c08.png"> filter 0, colour, 8 bit </p>
<p class="testline"><img class="inimage" src="in/f00n0g08.png"> <img class="asyncimage" src="out/f00n0g08.png"> <img class="syncimage" src="outsync/f00n0g08.png"> filter 0, grayscale, 8 bit</p>
<h3>Ancilary chunks</h3>
<img src="in/ctzn0g04.png"> <img src="out/ctzn0g04.png"> <img src="outsync/ctzn0g04.png"> <br />
<img src="in/ctjn0g04.png"> <img src="out/ctjn0g04.png"> <img src="outsync/ctjn0g04.png"> <br />
<img src="in/cthn0g04.png"> <img src="out/cthn0g04.png"> <img src="outsync/cthn0g04.png"> <br />
<img src="in/ctgn0g04.png"> <img src="out/ctgn0g04.png"> <img src="outsync/ctgn0g04.png"> <br />
<img src="in/ctfn0g04.png"> <img src="out/ctfn0g04.png"> <img src="outsync/ctfn0g04.png"> <br />
<img src="in/cten0g04.png"> <img src="out/cten0g04.png"> <img src="outsync/cten0g04.png"> <br />
<img src="in/ct1n0g04.png"> <img src="out/ct1n0g04.png"> <img src="outsync/ct1n0g04.png"> <br />
<img src="in/ct0n0g04.png"> <img src="out/ct0n0g04.png"> <img src="outsync/ct0n0g04.png"> <br />
<img src="in/cs8n3p08.png"> <img src="out/cs8n3p08.png"> <img src="outsync/cs8n3p08.png"> <br />
<img src="in/cs8n2c08.png"> <img src="out/cs8n2c08.png"> <img src="outsync/cs8n2c08.png"> <br />
<img src="in/cs5n3p08.png"> <img src="out/cs5n3p08.png"> <img src="outsync/cs5n3p08.png"> <br />
<img src="in/cs5n2c08.png"> <img src="out/cs5n2c08.png"> <img src="outsync/cs5n2c08.png"> <br />
<img src="in/cs3n3p08.png"> <img src="out/cs3n3p08.png"> <img src="outsync/cs3n3p08.png"> <br />
<img src="in/cs3n2c16.png"> <img src="out/cs3n2c16.png"> <img src="outsync/cs3n2c16.png"> <br />
<img src="in/cm9n0g04.png"> <img src="out/cm9n0g04.png"> <img src="outsync/cm9n0g04.png"> <br />
<img src="in/cm7n0g04.png"> <img src="out/cm7n0g04.png"> <img src="outsync/cm7n0g04.png"> <br />
<img src="in/cm0n0g04.png"> <img src="out/cm0n0g04.png"> <img src="outsync/cm0n0g04.png"> <br />
<img src="in/ch2n3p08.png"> <img src="out/ch2n3p08.png"> <img src="outsync/ch2n3p08.png"> <br />
<img src="in/ch1n3p04.png"> <img src="out/ch1n3p04.png"> <img src="outsync/ch1n3p04.png"> <br />
<img src="in/cdun2c08.png"> <img src="out/cdun2c08.png"> <img src="outsync/cdun2c08.png"> <br />
<img src="in/cdsn2c08.png"> <img src="out/cdsn2c08.png"> <img src="outsync/cdsn2c08.png"> <br />
<img src="in/cdhn2c08.png"> <img src="out/cdhn2c08.png"> <img src="outsync/cdhn2c08.png"> <br />
<img src="in/cdfn2c08.png"> <img src="out/cdfn2c08.png"> <img src="outsync/cdfn2c08.png"> <br />
<img src="in/ccwn3p08.png"> <img src="out/ccwn3p08.png"> <img src="outsync/ccwn3p08.png"> <br />
<img src="in/ccwn2c08.png"> <img src="out/ccwn2c08.png"> <img src="outsync/ccwn2c08.png"> <br />
<p class="testline"><img class="inimage" src="in/ctzn0g04.png"> <img class="asyncimage" src="out/ctzn0g04.png"> <img class="syncimage" src="outsync/ctzn0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/ctjn0g04.png"> <img class="asyncimage" src="out/ctjn0g04.png"> <img class="syncimage" src="outsync/ctjn0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/cthn0g04.png"> <img class="asyncimage" src="out/cthn0g04.png"> <img class="syncimage" src="outsync/cthn0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/ctgn0g04.png"> <img class="asyncimage" src="out/ctgn0g04.png"> <img class="syncimage" src="outsync/ctgn0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/ctfn0g04.png"> <img class="asyncimage" src="out/ctfn0g04.png"> <img class="syncimage" src="outsync/ctfn0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/cten0g04.png"> <img class="asyncimage" src="out/cten0g04.png"> <img class="syncimage" src="outsync/cten0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/ct1n0g04.png"> <img class="asyncimage" src="out/ct1n0g04.png"> <img class="syncimage" src="outsync/ct1n0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/ct0n0g04.png"> <img class="asyncimage" src="out/ct0n0g04.png"> <img class="syncimage" src="outsync/ct0n0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/cs8n3p08.png"> <img class="asyncimage" src="out/cs8n3p08.png"> <img class="syncimage" src="outsync/cs8n3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/cs8n2c08.png"> <img class="asyncimage" src="out/cs8n2c08.png"> <img class="syncimage" src="outsync/cs8n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/cs5n3p08.png"> <img class="asyncimage" src="out/cs5n3p08.png"> <img class="syncimage" src="outsync/cs5n3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/cs5n2c08.png"> <img class="asyncimage" src="out/cs5n2c08.png"> <img class="syncimage" src="outsync/cs5n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/cs3n3p08.png"> <img class="asyncimage" src="out/cs3n3p08.png"> <img class="syncimage" src="outsync/cs3n3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/cs3n2c16.png"> <img class="asyncimage" src="out/cs3n2c16.png"> <img class="syncimage" src="outsync/cs3n2c16.png"> </p>
<p class="testline"><img class="inimage" src="in/cm9n0g04.png"> <img class="asyncimage" src="out/cm9n0g04.png"> <img class="syncimage" src="outsync/cm9n0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/cm7n0g04.png"> <img class="asyncimage" src="out/cm7n0g04.png"> <img class="syncimage" src="outsync/cm7n0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/cm0n0g04.png"> <img class="asyncimage" src="out/cm0n0g04.png"> <img class="syncimage" src="outsync/cm0n0g04.png"> </p>
<p class="testline"><img class="inimage" src="in/ch2n3p08.png"> <img class="asyncimage" src="out/ch2n3p08.png"> <img class="syncimage" src="outsync/ch2n3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/ch1n3p04.png"> <img class="asyncimage" src="out/ch1n3p04.png"> <img class="syncimage" src="outsync/ch1n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/cdun2c08.png"> <img class="asyncimage" src="out/cdun2c08.png"> <img class="syncimage" src="outsync/cdun2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/cdsn2c08.png"> <img class="asyncimage" src="out/cdsn2c08.png"> <img class="syncimage" src="outsync/cdsn2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/cdhn2c08.png"> <img class="asyncimage" src="out/cdhn2c08.png"> <img class="syncimage" src="outsync/cdhn2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/cdfn2c08.png"> <img class="asyncimage" src="out/cdfn2c08.png"> <img class="syncimage" src="outsync/cdfn2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/ccwn3p08.png"> <img class="asyncimage" src="out/ccwn3p08.png"> <img class="syncimage" src="outsync/ccwn3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/ccwn2c08.png"> <img class="asyncimage" src="out/ccwn2c08.png"> <img class="syncimage" src="outsync/ccwn2c08.png"> </p>
<h3>Basic</h3>
<img src="in/basi0g08.png"> <img src="out/basi0g08.png"> <img src="outsync/basi0g08.png"> <br />
<img src="in/basi0g04.png"> <img src="out/basi0g04.png"> <img src="outsync/basi0g04.png"> <br />
<img src="in/basi0g02.png"> <img src="out/basi0g02.png"> <img src="outsync/basi0g02.png"> <br />
<img src="in/basi0g01.png"> <img src="out/basi0g01.png"> <img src="outsync/basi0g01.png"> <br />
<img src="in/bgyn6a16.png"> <img src="out/bgyn6a16.png"> <img src="outsync/bgyn6a16.png"> <br />
<img src="in/bgwn6a08.png"> <img src="out/bgwn6a08.png"> <img src="outsync/bgwn6a08.png"> <br />
<img src="in/bggn4a16.png"> <img src="out/bggn4a16.png"> <img src="outsync/bggn4a16.png"> <br />
<img src="in/bgbn4a08.png"> <img src="out/bgbn4a08.png"> <img src="outsync/bgbn4a08.png"> <br />
<img src="in/bgan6a16.png"> <img src="out/bgan6a16.png"> <img src="outsync/bgan6a16.png"> <br />
<img src="in/bgan6a08.png"> <img src="out/bgan6a08.png"> <img src="outsync/bgan6a08.png"> <br />
<img src="in/bgai4a16.png"> <img src="out/bgai4a16.png"> <img src="outsync/bgai4a16.png"> <br />
<img src="in/bgai4a08.png"> <img src="out/bgai4a08.png"> <img src="outsync/bgai4a08.png"> <br />
<img src="in/basn6a16.png"> <img src="out/basn6a16.png"> <img src="outsync/basn6a16.png"> <br />
<img src="in/basn6a08.png"> <img src="out/basn6a08.png"> <img src="outsync/basn6a08.png"> <br />
<img src="in/basn4a16.png"> <img src="out/basn4a16.png"> <img src="outsync/basn4a16.png"> <br />
<img src="in/basn4a08.png"> <img src="out/basn4a08.png"> <img src="outsync/basn4a08.png"> <br />
<img src="in/basn3p08.png"> <img src="out/basn3p08.png"> <img src="outsync/basn3p08.png"> <br />
<img src="in/basn3p04.png"> <img src="out/basn3p04.png"> <img src="outsync/basn3p04.png"> <br />
<img src="in/basn3p02.png"> <img src="out/basn3p02.png"> <img src="outsync/basn3p02.png"> <br />
<img src="in/basn3p01.png"> <img src="out/basn3p01.png"> <img src="outsync/basn3p01.png"> <br />
<img src="in/basn2c16.png"> <img src="out/basn2c16.png"> <img src="outsync/basn2c16.png"> <br />
<img src="in/basn2c08.png"> <img src="out/basn2c08.png"> <img src="outsync/basn2c08.png"> <br />
<img src="in/basn0g16.png"> <img src="out/basn0g16.png"> <img src="outsync/basn0g16.png"> <br />
<img src="in/basn0g08.png"> <img src="out/basn0g08.png"> <img src="outsync/basn0g08.png"> <br />
<img src="in/basn0g04.png"> <img src="out/basn0g04.png"> <img src="outsync/basn0g04.png"> <br />
<img src="in/basn0g02.png"> <img src="out/basn0g02.png"> <img src="outsync/basn0g02.png"> <br />
<img src="in/basn0g01.png"> <img src="out/basn0g01.png"> <img src="outsync/basn0g01.png"> <br />
<img src="in/basi6a16.png"> <img src="out/basi6a16.png"> <img src="outsync/basi6a16.png"> <br />
<img src="in/basi6a08.png"> <img src="out/basi6a08.png"> <img src="outsync/basi6a08.png"> <br />
<img src="in/basi4a16.png"> <img src="out/basi4a16.png"> <img src="outsync/basi4a16.png"> <br />
<img src="in/basi4a08.png"> <img src="out/basi4a08.png"> <img src="outsync/basi4a08.png"> <br />
<img src="in/basi3p08.png"> <img src="out/basi3p08.png"> <img src="outsync/basi3p08.png"> <br />
<img src="in/basi3p04.png"> <img src="out/basi3p04.png"> <img src="outsync/basi3p04.png"> <br />
<img src="in/basi3p02.png"> <img src="out/basi3p02.png"> <img src="outsync/basi3p02.png"> <br />
<img src="in/basi3p01.png"> <img src="out/basi3p01.png"> <img src="outsync/basi3p01.png"> <br />
<img src="in/basi2c16.png"> <img src="out/basi2c16.png"> <img src="outsync/basi2c16.png"> <br />
<img src="in/basi2c08.png"> <img src="out/basi2c08.png"> <img src="outsync/basi2c08.png"> <br />
<img src="in/basi0g16.png"> <img src="out/basi0g16.png"> <img src="outsync/basi0g16.png"> <br />
<h3>ZLib</h3>
<img src="in/z09n2c08.png"> <img src="out/z09n2c08.png"> <img src="outsync/z09n2c08.png"> <br />
<img src="in/z06n2c08.png"> <img src="out/z06n2c08.png"> <img src="outsync/z06n2c08.png"> <br />
<img src="in/z03n2c08.png"> <img src="out/z03n2c08.png"> <img src="outsync/z03n2c08.png"> <br />
<img src="in/z00n2c08.png"> <img src="out/z00n2c08.png"> <img src="outsync/z00n2c08.png"> <br />
<h3>Transparency</h3>
<img src="in/tp1n3p08.png"> <img src="out/tp1n3p08.png"> <img src="outsync/tp1n3p08.png"> <br />
<img src="in/tp0n3p08.png"> <img src="out/tp0n3p08.png"> <img src="outsync/tp0n3p08.png"> <br />
<img src="in/tp0n2c08.png"> <img src="out/tp0n2c08.png"> <img src="outsync/tp0n2c08.png"> <br />
<img src="in/tp0n0g08.png"> <img src="out/tp0n0g08.png"> <img src="outsync/tp0n0g08.png"> <br />
<img src="in/tm3n3p02.png"> <img src="out/tm3n3p02.png"> <img src="outsync/tm3n3p02.png"> <br />
<img src="in/tbyn3p08.png"> <img src="out/tbyn3p08.png"> <img src="outsync/tbyn3p08.png"> <br />
<img src="in/tbwn3p08.png"> <img src="out/tbwn3p08.png"> <img src="outsync/tbwn3p08.png"> <br />
<img src="in/tbwn0g16.png"> <img src="out/tbwn0g16.png"> <img src="outsync/tbwn0g16.png"> <br />
<img src="in/tbrn2c08.png"> <img src="out/tbrn2c08.png"> <img src="outsync/tbrn2c08.png"> <br />
<img src="in/tbgn3p08.png"> <img src="out/tbgn3p08.png"> <img src="outsync/tbgn3p08.png"> <br />
<img src="in/tbgn2c16.png"> <img src="out/tbgn2c16.png"> <img src="outsync/tbgn2c16.png"> <br />
<img src="in/tbbn3p08.png"> <img src="out/tbbn3p08.png"> <img src="outsync/tbbn3p08.png"> <br />
<img src="in/tbbn2c16.png"> <img src="out/tbbn2c16.png"> <img src="outsync/tbbn2c16.png"> <br />
<img src="in/tbbn0g04.png"> <img src="out/tbbn0g04.png"> <img src="outsync/tbbn0g04.png"> <br />
<h3>Sizing</h3>
<img src="in/s40n3p04.png"> <img src="out/s40n3p04.png"> <img src="outsync/s40n3p04.png"> <br />
<img src="in/s40i3p04.png"> <img src="out/s40i3p04.png"> <img src="outsync/s40i3p04.png"> <br />
<img src="in/s39n3p04.png"> <img src="out/s39n3p04.png"> <img src="outsync/s39n3p04.png"> <br />
<img src="in/s39i3p04.png"> <img src="out/s39i3p04.png"> <img src="outsync/s39i3p04.png"> <br />
<img src="in/s38n3p04.png"> <img src="out/s38n3p04.png"> <img src="outsync/s38n3p04.png"> <br />
<img src="in/s38i3p04.png"> <img src="out/s38i3p04.png"> <img src="outsync/s38i3p04.png"> <br />
<img src="in/s37n3p04.png"> <img src="out/s37n3p04.png"> <img src="outsync/s37n3p04.png"> <br />
<img src="in/s37i3p04.png"> <img src="out/s37i3p04.png"> <img src="outsync/s37i3p04.png"> <br />
<img src="in/s36n3p04.png"> <img src="out/s36n3p04.png"> <img src="outsync/s36n3p04.png"> <br />
<img src="in/s36i3p04.png"> <img src="out/s36i3p04.png"> <img src="outsync/s36i3p04.png"> <br />
<img src="in/s35n3p04.png"> <img src="out/s35n3p04.png"> <img src="outsync/s35n3p04.png"> <br />
<img src="in/s35i3p04.png"> <img src="out/s35i3p04.png"> <img src="outsync/s35i3p04.png"> <br />
<img src="in/s34n3p04.png"> <img src="out/s34n3p04.png"> <img src="outsync/s34n3p04.png"> <br />
<img src="in/s34i3p04.png"> <img src="out/s34i3p04.png"> <img src="outsync/s34i3p04.png"> <br />
<img src="in/s33n3p04.png"> <img src="out/s33n3p04.png"> <img src="outsync/s33n3p04.png"> <br />
<img src="in/s33i3p04.png"> <img src="out/s33i3p04.png"> <img src="outsync/s33i3p04.png"> <br />
<img src="in/s32n3p04.png"> <img src="out/s32n3p04.png"> <img src="outsync/s32n3p04.png"> <br />
<img src="in/s32i3p04.png"> <img src="out/s32i3p04.png"> <img src="outsync/s32i3p04.png"> <br />
<img src="in/s09n3p02.png"> <img src="out/s09n3p02.png"> <img src="outsync/s09n3p02.png"> <br />
<img src="in/s09i3p02.png"> <img src="out/s09i3p02.png"> <img src="outsync/s09i3p02.png"> <br />
<img src="in/s08n3p02.png"> <img src="out/s08n3p02.png"> <img src="outsync/s08n3p02.png"> <br />
<img src="in/s08i3p02.png"> <img src="out/s08i3p02.png"> <img src="outsync/s08i3p02.png"> <br />
<img src="in/s07n3p02.png"> <img src="out/s07n3p02.png"> <img src="outsync/s07n3p02.png"> <br />
<img src="in/s07i3p02.png"> <img src="out/s07i3p02.png"> <img src="outsync/s07i3p02.png"> <br />
<img src="in/s06n3p02.png"> <img src="out/s06n3p02.png"> <img src="outsync/s06n3p02.png"> <br />
<img src="in/s06i3p02.png"> <img src="out/s06i3p02.png"> <img src="outsync/s06i3p02.png"> <br />
<img src="in/s05n3p02.png"> <img src="out/s05n3p02.png"> <img src="outsync/s05n3p02.png"> <br />
<img src="in/s05i3p02.png"> <img src="out/s05i3p02.png"> <img src="outsync/s05i3p02.png"> <br />
<img src="in/s04n3p01.png"> <img src="out/s04n3p01.png"> <img src="outsync/s04n3p01.png"> <br />
<img src="in/s04i3p01.png"> <img src="out/s04i3p01.png"> <img src="outsync/s04i3p01.png"> <br />
<img src="in/s03n3p01.png"> <img src="out/s03n3p01.png"> <img src="outsync/s03n3p01.png"> <br />
<img src="in/s03i3p01.png"> <img src="out/s03i3p01.png"> <img src="outsync/s03i3p01.png"> <br />
<img src="in/s02n3p01.png"> <img src="out/s02n3p01.png"> <img src="outsync/s02n3p01.png"> <br />
<img src="in/s02i3p01.png"> <img src="out/s02i3p01.png"> <img src="outsync/s02i3p01.png"> <br />
<img src="in/s01n3p01.png"> <img src="out/s01n3p01.png"> <img src="outsync/s01n3p01.png"> <br />
<img src="in/s01i3p01.png"> <img src="out/s01i3p01.png"> <img src="outsync/s01i3p01.png"> <br />
<h3>Pallettes</h3>
<img src="in/ps2n2c16.png"> <img src="out/ps2n2c16.png"> <img src="outsync/ps2n2c16.png"> <br />
<img src="in/ps2n0g08.png"> <img src="out/ps2n0g08.png"> <img src="outsync/ps2n0g08.png"> <br />
<img src="in/ps1n2c16.png"> <img src="out/ps1n2c16.png"> <img src="outsync/ps1n2c16.png"> <br />
<img src="in/ps1n0g08.png"> <img src="out/ps1n0g08.png"> <img src="outsync/ps1n0g08.png"> <br />
<img src="in/pp0n6a08.png"> <img src="out/pp0n6a08.png"> <img src="outsync/pp0n6a08.png"> <br />
<img src="in/pp0n2c16.png"> <img src="out/pp0n2c16.png"> <img src="outsync/pp0n2c16.png"> <br />
<h3>Chunk Ordering</h3>
<img src="in/oi9n2c16.png"> <img src="out/oi9n2c16.png"> <img src="outsync/oi9n2c16.png"> <br />
<img src="in/oi9n0g16.png"> <img src="out/oi9n0g16.png"> <img src="outsync/oi9n0g16.png"> <br />
<img src="in/oi4n2c16.png"> <img src="out/oi4n2c16.png"> <img src="outsync/oi4n2c16.png"> <br />
<img src="in/oi4n0g16.png"> <img src="out/oi4n0g16.png"> <img src="outsync/oi4n0g16.png"> <br />
<img src="in/oi2n2c16.png"> <img src="out/oi2n2c16.png"> <img src="outsync/oi2n2c16.png"> <br />
<img src="in/oi2n0g16.png"> <img src="out/oi2n0g16.png"> <img src="outsync/oi2n0g16.png"> <br />
<img src="in/oi1n2c16.png"> <img src="out/oi1n2c16.png"> <img src="outsync/oi1n2c16.png"> <br />
<img src="in/oi1n0g16.png"> <img src="out/oi1n0g16.png"> <img src="outsync/oi1n0g16.png"> <br />
<h3>Gamma</h3>
<img src="in/g25n3p04.png"> <img src="out/g25n3p04.png"> <img src="outsync/g25n3p04.png"> <br />
<img src="in/g25n2c08.png"> <img src="out/g25n2c08.png"> <img src="outsync/g25n2c08.png"> <br />
<img src="in/g25n0g16.png"> <img src="out/g25n0g16.png"> <img src="outsync/g25n0g16.png"> <br />
<img src="in/g10n3p04.png"> <img src="out/g10n3p04.png"> <img src="outsync/g10n3p04.png"> <br />
<img src="in/g10n2c08.png"> <img src="out/g10n2c08.png"> <img src="outsync/g10n2c08.png"> <br />
<img src="in/g10n0g16.png"> <img src="out/g10n0g16.png"> <img src="outsync/g10n0g16.png"> <br />
<img src="in/g07n3p04.png"> <img src="out/g07n3p04.png"> <img src="outsync/g07n3p04.png"> <br />
<img src="in/g07n2c08.png"> <img src="out/g07n2c08.png"> <img src="outsync/g07n2c08.png"> <br />
<img src="in/g07n0g16.png"> <img src="out/g07n0g16.png"> <img src="outsync/g07n0g16.png"> <br />
<img src="in/g05n3p04.png"> <img src="out/g05n3p04.png"> <img src="outsync/g05n3p04.png"> <br />
<img src="in/g05n2c08.png"> <img src="out/g05n2c08.png"> <img src="outsync/g05n2c08.png"> <br />
<img src="in/g05n0g16.png"> <img src="out/g05n0g16.png"> <img src="outsync/g05n0g16.png"> <br />
<img src="in/g04n3p04.png"> <img src="out/g04n3p04.png"> <img src="outsync/g04n3p04.png"> <br />
<img src="in/g04n2c08.png"> <img src="out/g04n2c08.png"> <img src="outsync/g04n2c08.png"> <br />
<img src="in/g04n0g16.png"> <img src="out/g04n0g16.png"> <img src="outsync/g04n0g16.png"> <br />
<img src="in/g03n3p04.png"> <img src="out/g03n3p04.png"> <img src="outsync/g03n3p04.png"> <br />
<img src="in/g03n2c08.png"> <img src="out/g03n2c08.png"> <img src="outsync/g03n2c08.png"> <br />
<img src="in/g03n0g16.png"> <img src="out/g03n0g16.png"> <img src="outsync/g03n0g16.png"> <br />
<p class="testline"><img class="inimage" src="in/basn0g01.png"> <img class="asyncimage" src="out/basn0g01.png"> <img class="syncimage" src="outsync/basn0g01.png"> basn0g01 - black & white</p>
<p class="testline"><img class="inimage" src="in/basn0g02.png"> <img class="asyncimage" src="out/basn0g02.png"> <img class="syncimage" src="outsync/basn0g02.png">basn0g02 - 2 bit (4 level) grayscale </p>
<p class="testline"><img class="inimage" src="in/basn0g04.png"> <img class="asyncimage" src="out/basn0g04.png"> <img class="syncimage" src="outsync/basn0g04.png">basn0g04 - 4 bit (16 level) grayscale </p>
<p class="testline"><img class="inimage" src="in/basn0g08.png"> <img class="asyncimage" src="out/basn0g08.png"> <img class="syncimage" src="outsync/basn0g08.png">basn0g08 - 8 bit (256 level) grayscale </p>
<p class="testline"><img class="inimage" src="in/basn0g16.png"> <img class="asyncimage" src="out/basn0g16.png"> <img class="syncimage" src="outsync/basn0g16.png">basn0g16 - 16 bit (64k level) grayscale</p>
<p class="testline"><img class="inimage" src="in/basn2c08.png"> <img class="asyncimage" src="out/basn2c08.png"> <img class="syncimage" src="outsync/basn2c08.png">basn2c08 - 3x8 bits rgb color</p>
<p class="testline"><img class="inimage" src="in/basn2c16.png"> <img class="asyncimage" src="out/basn2c16.png"> <img class="syncimage" src="outsync/basn2c16.png">basn2c16 - 3x16 bits rgb color </p>
<p class="testline"><img class="inimage" src="in/basn3p01.png"> <img class="asyncimage" src="out/basn3p01.png"> <img class="syncimage" src="outsync/basn3p01.png">basn3p01 - 1 bit (2 color) paletted </p>
<p class="testline"><img class="inimage" src="in/basn3p02.png"> <img class="asyncimage" src="out/basn3p02.png"> <img class="syncimage" src="outsync/basn3p02.png">basn3p02 - 2 bit (4 color) paletted </p>
<p class="testline"><img class="inimage" src="in/basn3p04.png"> <img class="asyncimage" src="out/basn3p04.png"> <img class="syncimage" src="outsync/basn3p04.png">basn3p04 - 4 bit (16 color) paletted </p>
<p class="testline"><img class="inimage" src="in/basn3p08.png"> <img class="asyncimage" src="out/basn3p08.png"> <img class="syncimage" src="outsync/basn3p08.png">basn3p08 - 8 bit (256 color) paletted </p>
<p class="testline"><img class="inimage" src="in/basn4a08.png"> <img class="asyncimage" src="out/basn4a08.png"> <img class="syncimage" src="outsync/basn4a08.png">basn4a08 - 8 bit grayscale + 8 bit alpha-channel</p>
<p class="testline"><img class="inimage" src="in/basn4a16.png"> <img class="asyncimage" src="out/basn4a16.png"> <img class="syncimage" src="outsync/basn4a16.png">basn4a16 - 16 bit grayscale + 16 bit alpha-channel </p>
<p class="testline"><img class="inimage" src="in/basn6a08.png"> <img class="asyncimage" src="out/basn6a08.png"> <img class="syncimage" src="outsync/basn6a08.png">basn6a08 - 3x8 bits rgb color + 8 bit alpha-channel </p>
<p class="testline"><img class="inimage" src="in/basn6a16.png"> <img class="asyncimage" src="out/basn6a16.png"> <img class="syncimage" src="outsync/basn6a16.png">basn6a16 - 3x16 bits rgb color + 16 bit alpha-channel </p>
<h3>Interlace</h3>
<p class="testline"><img class="inimage" src="in/basi0g01.png"> <img class="asyncimage" src="out/basi0g01.png"> <img class="syncimage" src="outsync/basi0g01.png">basi0g01 - black & white </p>
<p class="testline"><img class="inimage" src="in/basi0g02.png"> <img class="asyncimage" src="out/basi0g02.png"> <img class="syncimage" src="outsync/basi0g02.png">basi0g02 - 2 bit (4 level) grayscale </p>
<p class="testline"><img class="inimage" src="in/basi0g04.png"> <img class="asyncimage" src="out/basi0g04.png"> <img class="syncimage" src="outsync/basi0g04.png">basi0g04 - 4 bit (16 level) grayscale </p>
<p class="testline"><img class="inimage" src="in/basi0g08.png"> <img class="asyncimage" src="out/basi0g08.png"> <img class="syncimage" src="outsync/basi0g08.png">basi0g08 - 8 bit (256 level) grayscale </p>
<p class="testline"><img class="inimage" src="in/basi0g16.png"> <img class="asyncimage" src="out/basi0g16.png"> <img class="syncimage" src="outsync/basi0g16.png">basi0g16 - 16 bit (64k level) grayscale </p>
<p class="testline"><img class="inimage" src="in/basi2c08.png"> <img class="asyncimage" src="out/basi2c08.png"> <img class="syncimage" src="outsync/basi2c08.png">basi2c08 - 3x8 bits rgb color </p>
<p class="testline"><img class="inimage" src="in/basi2c16.png"> <img class="asyncimage" src="out/basi2c16.png"> <img class="syncimage" src="outsync/basi2c16.png">basi2c16 - 3x16 bits rgb color </p>
<p class="testline"><img class="inimage" src="in/basi3p01.png"> <img class="asyncimage" src="out/basi3p01.png"> <img class="syncimage" src="outsync/basi3p01.png">basi3p01 - 1 bit (2 color) paletted </p>
<p class="testline"><img class="inimage" src="in/basi3p02.png"> <img class="asyncimage" src="out/basi3p02.png"> <img class="syncimage" src="outsync/basi3p02.png">basi3p02 - 2 bit (4 color) paletted </p>
<p class="testline"><img class="inimage" src="in/basi3p04.png"> <img class="asyncimage" src="out/basi3p04.png"> <img class="syncimage" src="outsync/basi3p04.png">basi3p04 - 4 bit (16 color) paletted </p>
<p class="testline"><img class="inimage" src="in/basi3p08.png"> <img class="asyncimage" src="out/basi3p08.png"> <img class="syncimage" src="outsync/basi3p08.png">basi3p08 - 8 bit (256 color) paletted </p>
<p class="testline"><img class="inimage" src="in/basi4a08.png"> <img class="asyncimage" src="out/basi4a08.png"> <img class="syncimage" src="outsync/basi4a08.png">basi4a08 - 8 bit grayscale + 8 bit alpha-channel </p>
<p class="testline"><img class="inimage" src="in/basi4a16.png"> <img class="asyncimage" src="out/basi4a16.png"> <img class="syncimage" src="outsync/basi4a16.png">basi4a16 - 16 bit grayscale + 16 bit alpha-channel </p>
<p class="testline"><img class="inimage" src="in/basi6a08.png"> <img class="asyncimage" src="out/basi6a08.png"> <img class="syncimage" src="outsync/basi6a08.png">basi6a08 - 3x8 bits rgb color + 8 bit alpha-channel </p>
<p class="testline"><img class="inimage" src="in/basi6a16.png"> <img class="asyncimage" src="out/basi6a16.png"> <img class="syncimage" src="outsync/basi6a16.png">basi6a16 - 3x16 bits rgb color + 16 bit alpha-channel </p>
<h3>Background</h3>
<p class="testline"><img class="inimage" src="in/bgyn6a16.png"> <img class="asyncimage" src="out/bgyn6a16.png"> <img class="syncimage" src="outsync/bgyn6a16.png">bgyn6a16 - 3x16 bits rgb color, alpha, yellow background chunk </p>
<p class="testline"><img class="inimage" src="in/bgwn6a08.png"> <img class="asyncimage" src="out/bgwn6a08.png"> <img class="syncimage" src="outsync/bgwn6a08.png">bgwn6a08 - 3x8 bits rgb color, alpha, white background chunk </p>
<p class="testline"><img class="inimage" src="in/bggn4a16.png"> <img class="asyncimage" src="out/bggn4a16.png"> <img class="syncimage" src="outsync/bggn4a16.png">bggn4a16 - 16 bit grayscale, alpha, gray background chunk </p>
<p class="testline"><img class="inimage" src="in/bgbn4a08.png"> <img class="asyncimage" src="out/bgbn4a08.png"> <img class="syncimage" src="outsync/bgbn4a08.png">bgbn4a08 - 8 bit grayscale, alpha, black background chunk </p>
<p class="testline"><img class="inimage" src="in/bgan6a16.png"> <img class="asyncimage" src="out/bgan6a16.png"> <img class="syncimage" src="outsync/bgan6a16.png">bgan6a16 - 3x16 bits rgb color, alpha, no background chunk </p>
<p class="testline"><img class="inimage" src="in/bgan6a08.png"> <img class="asyncimage" src="out/bgan6a08.png"> <img class="syncimage" src="outsync/bgan6a08.png">bgan6a08 - 3x8 bits rgb color, alpha, no background chunk </p>
<p class="testline"><img class="inimage" src="in/bgai4a16.png"> <img class="asyncimage" src="out/bgai4a16.png"> <img class="syncimage" src="outsync/bgai4a16.png">bgai4a16 - 16 bit grayscale, alpha, no background chunk, interlaced </p>
<p class="testline"><img class="inimage" src="in/bgai4a08.png"> <img class="asyncimage" src="out/bgai4a08.png"> <img class="syncimage" src="outsync/bgai4a08.png">bgai4a08 - 8 bit grayscale, alpha, no background chunk, interlaced </p>
<h3>ZLib</h3>
<p class="testline"><img class="inimage" src="in/z09n2c08.png"> <img class="asyncimage" src="out/z09n2c08.png"> <img class="syncimage" src="outsync/z09n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/z06n2c08.png"> <img class="asyncimage" src="out/z06n2c08.png"> <img class="syncimage" src="outsync/z06n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/z03n2c08.png"> <img class="asyncimage" src="out/z03n2c08.png"> <img class="syncimage" src="outsync/z03n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/z00n2c08.png"> <img class="asyncimage" src="out/z00n2c08.png"> <img class="syncimage" src="outsync/z00n2c08.png"> </p>
<h3>Transparency</h3>
<p class="testline"><img class="inimage" src="in/tp1n3p08.png"> <img class="asyncimage" src="out/tp1n3p08.png"> <img class="syncimage" src="outsync/tp1n3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/tp0n3p08.png"> <img class="asyncimage" src="out/tp0n3p08.png"> <img class="syncimage" src="outsync/tp0n3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/tp0n2c08.png"> <img class="asyncimage" src="out/tp0n2c08.png"> <img class="syncimage" src="outsync/tp0n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/tp0n0g08.png"> <img class="asyncimage" src="out/tp0n0g08.png"> <img class="syncimage" src="outsync/tp0n0g08.png"> </p>
<p class="testline"><img class="inimage" src="in/tm3n3p02.png"> <img class="asyncimage" src="out/tm3n3p02.png"> <img class="syncimage" src="outsync/tm3n3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/tbyn3p08.png"> <img class="asyncimage" src="out/tbyn3p08.png"> <img class="syncimage" src="outsync/tbyn3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/tbwn3p08.png"> <img class="asyncimage" src="out/tbwn3p08.png"> <img class="syncimage" src="outsync/tbwn3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/tbwn0g16.png"> <img class="asyncimage" src="out/tbwn0g16.png"> <img class="syncimage" src="outsync/tbwn0g16.png"> </p>
<p class="testline"><img class="inimage" src="in/tbrn2c08.png"> <img class="asyncimage" src="out/tbrn2c08.png"> <img class="syncimage" src="outsync/tbrn2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/tbgn3p08.png"> <img class="asyncimage" src="out/tbgn3p08.png"> <img class="syncimage" src="outsync/tbgn3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/tbgn2c16.png"> <img class="asyncimage" src="out/tbgn2c16.png"> <img class="syncimage" src="outsync/tbgn2c16.png"> </p>
<p class="testline"><img class="inimage" src="in/tbbn3p08.png"> <img class="asyncimage" src="out/tbbn3p08.png"> <img class="syncimage" src="outsync/tbbn3p08.png"> </p>
<p class="testline"><img class="inimage" src="in/tbbn2c16.png"> <img class="asyncimage" src="out/tbbn2c16.png"> <img class="syncimage" src="outsync/tbbn2c16.png"> </p>
<p class="testline"><img class="inimage" src="in/tbbn0g04.png"> <img class="asyncimage" src="out/tbbn0g04.png"> <img class="syncimage" src="outsync/tbbn0g04.png"> </p>
<h3>Sizing</h3>
<p class="testline"><img class="inimage" src="in/s40n3p04.png"> <img class="asyncimage" src="out/s40n3p04.png"> <img class="syncimage" src="outsync/s40n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s40i3p04.png"> <img class="asyncimage" src="out/s40i3p04.png"> <img class="syncimage" src="outsync/s40i3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s39n3p04.png"> <img class="asyncimage" src="out/s39n3p04.png"> <img class="syncimage" src="outsync/s39n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s39i3p04.png"> <img class="asyncimage" src="out/s39i3p04.png"> <img class="syncimage" src="outsync/s39i3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s38n3p04.png"> <img class="asyncimage" src="out/s38n3p04.png"> <img class="syncimage" src="outsync/s38n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s38i3p04.png"> <img class="asyncimage" src="out/s38i3p04.png"> <img class="syncimage" src="outsync/s38i3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s37n3p04.png"> <img class="asyncimage" src="out/s37n3p04.png"> <img class="syncimage" src="outsync/s37n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s37i3p04.png"> <img class="asyncimage" src="out/s37i3p04.png"> <img class="syncimage" src="outsync/s37i3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s36n3p04.png"> <img class="asyncimage" src="out/s36n3p04.png"> <img class="syncimage" src="outsync/s36n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s36i3p04.png"> <img class="asyncimage" src="out/s36i3p04.png"> <img class="syncimage" src="outsync/s36i3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s35n3p04.png"> <img class="asyncimage" src="out/s35n3p04.png"> <img class="syncimage" src="outsync/s35n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s35i3p04.png"> <img class="asyncimage" src="out/s35i3p04.png"> <img class="syncimage" src="outsync/s35i3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s34n3p04.png"> <img class="asyncimage" src="out/s34n3p04.png"> <img class="syncimage" src="outsync/s34n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s34i3p04.png"> <img class="asyncimage" src="out/s34i3p04.png"> <img class="syncimage" src="outsync/s34i3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s33n3p04.png"> <img class="asyncimage" src="out/s33n3p04.png"> <img class="syncimage" src="outsync/s33n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s33i3p04.png"> <img class="asyncimage" src="out/s33i3p04.png"> <img class="syncimage" src="outsync/s33i3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s32n3p04.png"> <img class="asyncimage" src="out/s32n3p04.png"> <img class="syncimage" src="outsync/s32n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s32i3p04.png"> <img class="asyncimage" src="out/s32i3p04.png"> <img class="syncimage" src="outsync/s32i3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/s09n3p02.png"> <img class="asyncimage" src="out/s09n3p02.png"> <img class="syncimage" src="outsync/s09n3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/s09i3p02.png"> <img class="asyncimage" src="out/s09i3p02.png"> <img class="syncimage" src="outsync/s09i3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/s08n3p02.png"> <img class="asyncimage" src="out/s08n3p02.png"> <img class="syncimage" src="outsync/s08n3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/s08i3p02.png"> <img class="asyncimage" src="out/s08i3p02.png"> <img class="syncimage" src="outsync/s08i3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/s07n3p02.png"> <img class="asyncimage" src="out/s07n3p02.png"> <img class="syncimage" src="outsync/s07n3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/s07i3p02.png"> <img class="asyncimage" src="out/s07i3p02.png"> <img class="syncimage" src="outsync/s07i3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/s06n3p02.png"> <img class="asyncimage" src="out/s06n3p02.png"> <img class="syncimage" src="outsync/s06n3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/s06i3p02.png"> <img class="asyncimage" src="out/s06i3p02.png"> <img class="syncimage" src="outsync/s06i3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/s05n3p02.png"> <img class="asyncimage" src="out/s05n3p02.png"> <img class="syncimage" src="outsync/s05n3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/s05i3p02.png"> <img class="asyncimage" src="out/s05i3p02.png"> <img class="syncimage" src="outsync/s05i3p02.png"> </p>
<p class="testline"><img class="inimage" src="in/s04n3p01.png"> <img class="asyncimage" src="out/s04n3p01.png"> <img class="syncimage" src="outsync/s04n3p01.png"> </p>
<p class="testline"><img class="inimage" src="in/s04i3p01.png"> <img class="asyncimage" src="out/s04i3p01.png"> <img class="syncimage" src="outsync/s04i3p01.png"> </p>
<p class="testline"><img class="inimage" src="in/s03n3p01.png"> <img class="asyncimage" src="out/s03n3p01.png"> <img class="syncimage" src="outsync/s03n3p01.png"> </p>
<p class="testline"><img class="inimage" src="in/s03i3p01.png"> <img class="asyncimage" src="out/s03i3p01.png"> <img class="syncimage" src="outsync/s03i3p01.png"> </p>
<p class="testline"><img class="inimage" src="in/s02n3p01.png"> <img class="asyncimage" src="out/s02n3p01.png"> <img class="syncimage" src="outsync/s02n3p01.png"> </p>
<p class="testline"><img class="inimage" src="in/s02i3p01.png"> <img class="asyncimage" src="out/s02i3p01.png"> <img class="syncimage" src="outsync/s02i3p01.png"> </p>
<p class="testline"><img class="inimage" src="in/s01n3p01.png"> <img class="asyncimage" src="out/s01n3p01.png"> <img class="syncimage" src="outsync/s01n3p01.png"> </p>
<p class="testline"><img class="inimage" src="in/s01i3p01.png"> <img class="asyncimage" src="out/s01i3p01.png"> <img class="syncimage" src="outsync/s01i3p01.png"> </p>
<h3>Pallettes</h3>
<p class="testline"><img class="inimage" src="in/ps2n2c16.png"> <img class="asyncimage" src="out/ps2n2c16.png"> <img class="syncimage" src="outsync/ps2n2c16.png"> </p>
<p class="testline"><img class="inimage" src="in/ps2n0g08.png"> <img class="asyncimage" src="out/ps2n0g08.png"> <img class="syncimage" src="outsync/ps2n0g08.png"> </p>
<p class="testline"><img class="inimage" src="in/ps1n2c16.png"> <img class="asyncimage" src="out/ps1n2c16.png"> <img class="syncimage" src="outsync/ps1n2c16.png"> </p>
<p class="testline"><img class="inimage" src="in/ps1n0g08.png"> <img class="asyncimage" src="out/ps1n0g08.png"> <img class="syncimage" src="outsync/ps1n0g08.png"> </p>
<p class="testline"><img class="inimage" src="in/pp0n6a08.png"> <img class="asyncimage" src="out/pp0n6a08.png"> <img class="syncimage" src="outsync/pp0n6a08.png"> </p>
<p class="testline"><img class="inimage" src="in/pp0n2c16.png"> <img class="asyncimage" src="out/pp0n2c16.png"> <img class="syncimage" src="outsync/pp0n2c16.png"> </p>
<h3>Chunk Ordering</h3>
<p class="testline"><img class="inimage" src="in/oi9n2c16.png"> <img class="asyncimage" src="out/oi9n2c16.png"> <img class="syncimage" src="outsync/oi9n2c16.png"> </p>
<p class="testline"><img class="inimage" src="in/oi9n0g16.png"> <img class="asyncimage" src="out/oi9n0g16.png"> <img class="syncimage" src="outsync/oi9n0g16.png"> </p>
<p class="testline"><img class="inimage" src="in/oi4n2c16.png"> <img class="asyncimage" src="out/oi4n2c16.png"> <img class="syncimage" src="outsync/oi4n2c16.png"> </p>
<p class="testline"><img class="inimage" src="in/oi4n0g16.png"> <img class="asyncimage" src="out/oi4n0g16.png"> <img class="syncimage" src="outsync/oi4n0g16.png"> </p>
<p class="testline"><img class="inimage" src="in/oi2n2c16.png"> <img class="asyncimage" src="out/oi2n2c16.png"> <img class="syncimage" src="outsync/oi2n2c16.png"> </p>
<p class="testline"><img class="inimage" src="in/oi2n0g16.png"> <img class="asyncimage" src="out/oi2n0g16.png"> <img class="syncimage" src="outsync/oi2n0g16.png"> </p>
<p class="testline"><img class="inimage" src="in/oi1n2c16.png"> <img class="asyncimage" src="out/oi1n2c16.png"> <img class="syncimage" src="outsync/oi1n2c16.png"> </p>
<p class="testline"><img class="inimage" src="in/oi1n0g16.png"> <img class="asyncimage" src="out/oi1n0g16.png"> <img class="syncimage" src="outsync/oi1n0g16.png"> </p>
<h3>Gamma</h3>
<p class="testline"><img class="inimage" src="in/g25n3p04.png"> <img class="asyncimage" src="out/g25n3p04.png"> <img class="syncimage" src="outsync/g25n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/g25n2c08.png"> <img class="asyncimage" src="out/g25n2c08.png"> <img class="syncimage" src="outsync/g25n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/g25n0g16.png"> <img class="asyncimage" src="out/g25n0g16.png"> <img class="syncimage" src="outsync/g25n0g16.png"> </p>
<p class="testline"><img class="inimage" src="in/g10n3p04.png"> <img class="asyncimage" src="out/g10n3p04.png"> <img class="syncimage" src="outsync/g10n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/g10n2c08.png"> <img class="asyncimage" src="out/g10n2c08.png"> <img class="syncimage" src="outsync/g10n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/g10n0g16.png"> <img class="asyncimage" src="out/g10n0g16.png"> <img class="syncimage" src="outsync/g10n0g16.png"> </p>
<p class="testline"><img class="inimage" src="in/g07n3p04.png"> <img class="asyncimage" src="out/g07n3p04.png"> <img class="syncimage" src="outsync/g07n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/g07n2c08.png"> <img class="asyncimage" src="out/g07n2c08.png"> <img class="syncimage" src="outsync/g07n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/g07n0g16.png"> <img class="asyncimage" src="out/g07n0g16.png"> <img class="syncimage" src="outsync/g07n0g16.png"> </p>
<p class="testline"><img class="inimage" src="in/g05n3p04.png"> <img class="asyncimage" src="out/g05n3p04.png"> <img class="syncimage" src="outsync/g05n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/g05n2c08.png"> <img class="asyncimage" src="out/g05n2c08.png"> <img class="syncimage" src="outsync/g05n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/g05n0g16.png"> <img class="asyncimage" src="out/g05n0g16.png"> <img class="syncimage" src="outsync/g05n0g16.png"> </p>
<p class="testline"><img class="inimage" src="in/g04n3p04.png"> <img class="asyncimage" src="out/g04n3p04.png"> <img class="syncimage" src="outsync/g04n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/g04n2c08.png"> <img class="asyncimage" src="out/g04n2c08.png"> <img class="syncimage" src="outsync/g04n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/g04n0g16.png"> <img class="asyncimage" src="out/g04n0g16.png"> <img class="syncimage" src="outsync/g04n0g16.png"> </p>
<p class="testline"><img class="inimage" src="in/g03n3p04.png"> <img class="asyncimage" src="out/g03n3p04.png"> <img class="syncimage" src="outsync/g03n3p04.png"> </p>
<p class="testline"><img class="inimage" src="in/g03n2c08.png"> <img class="asyncimage" src="out/g03n2c08.png"> <img class="syncimage" src="outsync/g03n2c08.png"> </p>
<p class="testline"><img class="inimage" src="in/g03n0g16.png"> <img class="asyncimage" src="out/g03n0g16.png"> <img class="syncimage" src="outsync/g03n0g16.png"> </p>
<script src="imagediff.js"></script>
<script>
function waitForImages(images, fnCallback) {
setTimeout(function() {
for(var i = 0; i < images.length; i++) {
if (!images[i].complete) {
waitForImages(images, fnCallback);
return;
}
}
fnCallback();
}, 10);
}
var testLines = document.getElementsByClassName("testline");
for(var i = 0; i < testLines.length; i++) {
var testLine = testLines[i];
var inImage = testLine.getElementsByClassName("inimage")[0];
var asyncImage = testLine.getElementsByClassName("asyncimage")[0];
var syncImage = testLine.getElementsByClassName("syncimage")[0];
waitForImages([inImage, asyncImage, syncImage], function(inImage, asyncImage, syncImage, testLine) {
var success = true;
console.log("testing " + inImage.src);
if (asyncImage.height === 0 || syncImage.height === 0) {
success = false;
} else {
var equal = imagediff.equal(inImage, asyncImage, 2);
if (!equal) {
success = false;
}
equal = imagediff.equal(inImage, syncImage, 2);
if (!equal) {
success = false;
}
}
if (!success) {
testLine.className = testLine.className + " failure";
} else {
testLine.className = testLine.className + " success";
}
}.bind(null, inImage, asyncImage, syncImage, testLine));
}
</script>
</body>
</html>