<!doctype html>
<html>
  <head>
    <title>Test drawImage(canvas) with canvas with different composite modes.</title>
    <script src="resources/canvas-composite-image-common.js"></script>
    <script type="application/x-javascript">
      function drawImage(context, compositeIndex, alpha) {
        context.globalCompositeOperation = compositeTypes[compositeIndex];
        if (alpha)
          context.globalAlpha = 0.5;
        var sourceElement = document.getElementById('source-canvas');
        context.drawImage(sourceElement, 10, 10);
      }
      
      function setupTest() {
        var imageElement = document.getElementById('image');
        var canvas = document.getElementById('source-canvas');
        canvas.width = imageElement.width;
        canvas.height = imageElement.height;
        var context = canvas.getContext('2d');
        context.drawImage(imageElement, 0, 0);
      }

    </script>
    <style type="text/css">
      body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff; }
      canvas { border: 1px solid #999; }
      canvas#source-canvas { border: none; }
      div { margin: 10px; }
      #output h1 { font-size: medium; font-weight: normal; }
      #output h2 { font-size: small; font-weight: normal; }
      #output div { font-size: small; margin: 0px; }
      #output .pass { color: green; }
      #output .fail { color: rgb(255, 0, 0); }
      #output .error { color: rgb(255, 0, 64); }
      td { padding: 2px 5px; }
      table { border-collapse: collapse; }
    </style>
  </head>
  <body onload="runTest();">
    <div>Test Results</div>
    <div><table id='outputtable'></table></div>
    <div>Test Image</div>
    <div><img id = "image" src="data:image/png;base64,
      iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwY
      AAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeB
      DhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2w
      FiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRC
      iFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5E
      rkJggg==
    "></div>
    <div>Source Canvas</div>
    <div><canvas id = "source-canvas"></canvas></div>
    <div>Test Output</div>
    <div id='output'></div>
  </body>
</html>