mirror of
https://github.com/danbulant/pngjs
synced 2026-05-19 12:18:51 +00:00
999 lines
38 KiB
HTML
999 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>PNG Test</title>
|
|
<style>
|
|
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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<p class="testline">
|
|
<img class="inimage" src="in/gh-21.png" />
|
|
<img class="asyncimage" src="out/gh-21.png" />
|
|
<img class="syncimage" src="outsync/gh-21.png" />
|
|
</p>
|
|
<script>
|
|
if (!Function.prototype.bind) {
|
|
Function.prototype.bind = function (oThis) {
|
|
if (typeof this !== "function") {
|
|
// closest thing possible to the ECMAScript 5
|
|
// internal IsCallable function
|
|
throw new TypeError(
|
|
"Function.prototype.bind - what is trying to be bound is not callable"
|
|
);
|
|
}
|
|
|
|
var aArgs = Array.prototype.slice.call(arguments, 1),
|
|
fToBind = this,
|
|
fNOP = function () {},
|
|
fBound = function () {
|
|
return fToBind.apply(
|
|
this instanceof fNOP ? this : oThis,
|
|
aArgs.concat(Array.prototype.slice.call(arguments))
|
|
);
|
|
};
|
|
|
|
fNOP.prototype = this.prototype;
|
|
fBound.prototype = new fNOP();
|
|
|
|
return fBound;
|
|
};
|
|
}
|
|
</script>
|
|
<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);
|
|
}
|
|
|
|
window.isFinished = function () {
|
|
return testCount && testsDone === testCount;
|
|
};
|
|
window.results = [];
|
|
|
|
var testLines = document.getElementsByClassName("testline");
|
|
var testCount = testLines.length,
|
|
testsDone = 0;
|
|
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);
|
|
|
|
var tolerance;
|
|
if (inImage.src.match(/16\.png/)) {
|
|
tolerance = 2; // phantomjs uses a different scaling method.
|
|
// In chrome with gamma correction this can be 2.
|
|
} else {
|
|
tolerance = 0;
|
|
}
|
|
|
|
if (asyncImage.height === 0 || syncImage.height === 0) {
|
|
success = false;
|
|
} else {
|
|
var equal = imagediff.equal(inImage, asyncImage, tolerance);
|
|
if (!equal) {
|
|
success = false;
|
|
}
|
|
equal = imagediff.equal(inImage, syncImage, tolerance);
|
|
if (!equal) {
|
|
success = false;
|
|
}
|
|
}
|
|
if (!success) {
|
|
testLine.className = testLine.className + " failure";
|
|
} else {
|
|
testLine.className = testLine.className + " success";
|
|
}
|
|
results.push({
|
|
name: inImage.src.replace(/\.png$/, "").replace(/^.*\//, ""),
|
|
success: success,
|
|
});
|
|
testsDone++;
|
|
}.bind(null, inImage, asyncImage, syncImage, testLine)
|
|
);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|