src/third_party/WebKit/LayoutTests/fast/canvas/canvas-composite-canvas.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Test drawImage(canvas) with canvas with different composite modes.</title>
   5     <script src="resources/canvas-composite-image-common.js"></script>
   6     <script type="application/x-javascript">
   7       function drawImage(context, compositeIndex, alpha) {
   8         context.globalCompositeOperation = compositeTypes[compositeIndex];
   9         if (alpha)
  10           context.globalAlpha = 0.5;
  11         var sourceElement = document.getElementById('source-canvas');
  12         context.drawImage(sourceElement, 10, 10);
  13       }
  14
  15       function setupTest() {
  16         var imageElement = document.getElementById('image');
  17         var canvas = document.getElementById('source-canvas');
  18         canvas.width = imageElement.width;
  19         canvas.height = imageElement.height;
  20         var context = canvas.getContext('2d');
  21         context.drawImage(imageElement, 0, 0);
  22       }
  23
  24     </script>
  25     <style type="text/css">
  26       body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff; }
  27       canvas { border: 1px solid #999; }
  28       canvas#source-canvas { border: none; }
  29       div { margin: 10px; }
  30       #output h1 { font-size: medium; font-weight: normal; }
  31       #output h2 { font-size: small; font-weight: normal; }
  32       #output div { font-size: small; margin: 0px; }
  33       #output .pass { color: green; }
  34       #output .fail { color: rgb(255, 0, 0); }
  35       #output .error { color: rgb(255, 0, 64); }
  36       td { padding: 2px 5px; }
  37       table { border-collapse: collapse; }
  38     </style>
  39   </head>
  40   <body onload='runTest("dumpAsText");'>
  41     <div>Test Results</div>
  42     <div><table id='outputtable'></table></div>
  43     <div>Test Image</div>
  44     <div><img id = "image" src="data:image/png;base64,
  45       iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwY
  46       AAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeB
  47       DhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2w
  48       FiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRC
  49       iFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5E
  50       rkJggg==
  51     "></div>
  52     <div>Source Canvas</div>
  53     <div><canvas id = "source-canvas"></canvas></div>
  54     <div>Test Output</div>
  55     <div id='output'></div>
  56   </body>
  57 </html>