third_party/WebKit/LayoutTests/fast/canvas/toDataURL-alpha-stability.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5   canvas { padding: 3px; padding-bottom: 0px;}
   6 </style>
   7
   8 <script>
   9 var autoTest = false;
  10
  11 if (window.testRunner) {
  12     window.testRunner.dumpAsTextWithPixelResults();
  13     window.testRunner.waitUntilDone();
  14     autoTest = true;
  15 }
  16
  17 function logMessage(message)
  18 {
  19     document.getElementById('log').textContent += '\n' + message;
  20 }
  21
  22 function logPixel(canvasContext, x, y)
  23 {
  24     var p = canvasContext.getImageData(x, y, 1, 1).data;
  25     logMessage('rgba(' + [p[0], p[1], p[2], p[3]] + ')');
  26 }
  27
  28 function appendNewCanvasElementTo(parentId, canvasId)
  29 {
  30     var canvas = document.createElement('canvas');
  31     canvas.width = canvas.height = 64;
  32     document.getElementById(parentId).appendChild(canvas);
  33     canvas.id = canvasId;
  34     return canvas;
  35 }
  36
  37 function canvasTest(item, mimeType)
  38 {
  39     var previousCanvas = document.getElementById('c' + (item - 1));
  40
  41     var img = new Image();
  42     img.onload = function() {
  43         var canvas = appendNewCanvasElementTo('list', 'c' + item);
  44         var context = canvas.getContext('2d');
  45         context.drawImage(this, 0, 0);
  46         if (!window.testRunner)
  47             logPixel(context, 25, 25);
  48         if (autoTest)
  49             setTimeout(test, 0);
  50     };
  51
  52     img.src = previousCanvas.toDataURL(mimeType);
  53 }
  54
  55 function load()
  56 {
  57     var list = document.getElementById('list');
  58     var log = document.getElementById('log');
  59     list.innerHTML = log.innerHTML = '';
  60
  61     var select = document.getElementById('alpha');
  62     var alpha = Number(select.value).toFixed(3);
  63     select.onchange = function() { load(); };
  64
  65     var canvas = appendNewCanvasElementTo('list', 'c0');
  66     var context = canvas.getContext('2d');
  67     context.fillStyle = 'rgba(0, 64, 0, ' + alpha + ')';
  68     context.fillRect(0, 0, 64, 64);
  69     canvas.style.display = 'none';
  70
  71     if (window.testRunner) {
  72         document.getElementById('instructions').style.display = 'none';
  73     } else {
  74         logMessage('alpha ' + alpha);
  75     }
  76
  77     nextItem = 1;
  78     if (autoTest)
  79         test();
  80 }
  81
  82 function test()
  83 {
  84     if (autoTest && nextItem > 70) {
  85         if (window.testRunner)
  86             window.testRunner.notifyDone();
  87         return;
  88     }
  89
  90     canvasTest(nextItem, 'image/png');
  91     ++nextItem;
  92 }
  93 </script>
  94 </head>
  95
  96 <body onload='load()'>
  97  <p id='instructions'>
  98   Back-to-back canvas alpha image/png encode decode <button onclick='test()'>Test</button> alpha
  99   <input id='alpha' type='text' value='0.5'>
 100  </p>
 101  <ul id='list'></ul>
 102  <pre id='log'></pre>
 103 </body>
 104
 105 </html>