toDataURL-alpha-stability.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
  canvas { padding: 3px; padding-bottom: 0px;}
</style>

<script>
var autoTest = false;

if (window.testRunner) {
    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)
            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>
chromium/third_party/blink/web_tests/fast/canvas/toDataURL-alpha-stability.html
