| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| canvas { padding: 3px; padding-bottom: 0px;} |
| </style> |
| |
| <script> |
| var autoTest = false; |
| |
| if (window.testRunner) { |
| window.testRunner.dumpAsTextWithPixelResults(); |
| window.testRunner.waitUntilDone(); |
| autoTest = true; |
| } |
| |
| function logMessage(message) |
| { |
| document.getElementById('log').textContent += '\n' + message; |
| } |
| |
| function logPixel(canvasContext, x, y) |
| { |
| var p = canvasContext.getImageData(x, y, 1, 1).data; |
| logMessage('rgba(' + [p[0], p[1], p[2], p[3]] + ')'); |
| } |
| |
| function appendNewCanvasElementTo(parentId, canvasId) |
| { |
| var canvas = document.createElement('canvas'); |
| canvas.width = canvas.height = 64; |
| document.getElementById(parentId).appendChild(canvas); |
| canvas.id = canvasId; |
| return canvas; |
| } |
| |
| function canvasTest(item, mimeType) |
| { |
| var previousCanvas = document.getElementById('c' + (item - 1)); |
| |
| var img = new Image(); |
| img.onload = function() { |
| var canvas = appendNewCanvasElementTo('list', 'c' + item); |
| var context = canvas.getContext('2d'); |
| context.drawImage(this, 0, 0); |
| if (!window.testRunner) |
| logPixel(context, 25, 25); |
| if (autoTest) |
| setTimeout(test, 0); |
| }; |
| |
| img.src = previousCanvas.toDataURL(mimeType); |
| } |
| |
| function load() |
| { |
| var list = document.getElementById('list'); |
| var log = document.getElementById('log'); |
| list.innerHTML = log.innerHTML = ''; |
| |
| var select = document.getElementById('alpha'); |
| var alpha = Number(select.value).toFixed(3); |
| select.onchange = function() { load(); }; |
| |
| var canvas = appendNewCanvasElementTo('list', 'c0'); |
| var context = canvas.getContext('2d'); |
| context.fillStyle = 'rgba(0, 64, 0, ' + alpha + ')'; |
| context.fillRect(0, 0, 64, 64); |
| canvas.style.display = 'none'; |
| |
| if (window.testRunner) { |
| document.getElementById('instructions').style.display = 'none'; |
| } else { |
| logMessage('alpha ' + alpha); |
| } |
| |
| nextItem = 1; |
| if (autoTest) |
| test(); |
| } |
| |
| function test() |
| { |
| if (autoTest && nextItem > 70) { |
| if (window.testRunner) |
| window.testRunner.notifyDone(); |
| return; |
| } |
| |
| canvasTest(nextItem, 'image/png'); |
| ++nextItem; |
| } |
| </script> |
| </head> |
| |
| <body onload='load()'> |
| <p id='instructions'> |
| Back-to-back canvas alpha image/png encode decode <button onclick='test()'>Test</button> alpha |
| <input id='alpha' type='text' value='0.5'> |
| </p> |
| <ul id='list'></ul> |
| <pre id='log'></pre> |
| </body> |
| |
| </html> |
