golden/modules/multi-zoom-sk/test_data.js

// The three base64-encoded png images here were created with the following code snippets. It was
// designed to have some pixels with nothing different, some pixels that differed just in alpha
// and some pixels that differed in all channels. This is robust enough for testing the navigation
// controls of the multi-zoom-sk element.

// Assumes canvas is an html element that is 16x16.
//   const ctx = canvas.getContext('2d');
//   ctx.imageSmoothingEnabled = false;
//   ctx.clearRect(0, 0, 16, 16);
//   ctx.lineWidth = 3;
//   ctx.strokeStyle = 'black';
//   ctx.beginPath();
//   ctx.moveTo(3, 1);
//   ctx.lineTo(4, 15);
//   ctx.stroke();
//
//   ctx.fillStyle = 'rgba(255, 10, 10, 0.5)';
//   ctx.fillRect(12, 0, 5, 5);
//
//   console.log(canvas.toDataURL());

export const left16x16 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA10lEQVQ4T5XTt02EQRBA4e9CfohIMR1gOsB0gOkA08GJEC6EEjAdYDrAdIDpAJMScRCCBs0hOHHSzUQ75j1pd7Qtf2ME43jpq/+kn02z97vXymQHuwjBASL/NwYJtnCYxAk2q4I1nCZ0gdWqYAmXCd1gsSqYw21CD5gdJOiv9x5xCo/ZjA1MVgWjeEvoA01VEPPvucY4j6E7jKR3hZh9xkRC03iqCu4xk9A87qqCaywktIyrquAcKwmt46wqOMZGQts4qgriE7URa+xgvyqIDbymYBj2e+YL11gn8FDepQMAAAAASUVORK5CYII=';

//   ctx.clearRect(0, 0, 16, 16);
//   ctx.lineWidth = 3;
//   ctx.strokeStyle = 'black';
//   ctx.beginPath();
//   ctx.moveTo(3, 1);
//   ctx.lineTo(4, 15);
//   ctx.stroke();
//
//   ctx.fillStyle = 'rgba(255, 10, 10, 0.8)'; // only alpha differs
//   ctx.fillRect(12, 0, 5, 5);
//
//   ctx.fillStyle = 'rgba(255, 10, 10, 0.8)'; // all channels differ from transparent black
//   ctx.fillRect(12, 13, 5, 5);
//
//   console.log(canvas.toDataURL());

export const right16x16 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA3UlEQVQ4T5XTt01FQRBA0fNDHkSkmA4wHWA6wHSA6QARIkIoAdMBpgNMToDpAJMSYULQSPMRPP0nMRvtzM69mt3R9vxdQxjFSyv/E341zc3vs14G29hBCPYR8cDVJdjAQRLHWK8KVnCS0DmWq4IFXCR0jfmqYAa3CT1gukvQzvcfcQKPeRgTGK8KhvGW0CeaqiDqP3KMsR/B+38k/StE7TPGEprEU1Vwj6mEZnFXFVxhLqFFXFYFZ1hKaBWnVcER1hLaxOEgQddfiNr4RFuIMe5iryqICbymoLP7dgffkIAvCZYHkAAAAAAASUVORK5CYII=';

// Manually draw the diff ourselves. The diff is just drawn, it isn't used for calculating which
// pixels are different; that's done directly from the inputs.

//   ctx.clearRect(0, 0, 16, 16);
//   ctx.fillStyle = '#2171b5'; // this blue color means just alpha differs
//   ctx.fillRect(12, 0, 5, 5);
//
//   ctx.fillStyle = '#7f2704'; // this dark orange means multiple channels differ by a lot.
//   ctx.fillRect(12, 13, 5, 5);
//
//   console.log(canvas.toDataURL());

export const diff16x16 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2NkIBEoFm79j6yFkUT9DKMGYIYYyYGIbsSoAQwMQzAM6tVZKMtMVDcAANW2EGoA8ciVAAAAAElFTkSuQmCC';