<html>
  <head>
    <title>A canvas globalCompositeOperation test with alpha blending</title>
    <!-- This test was inspired by http://canvex.lazyilluminati.com/misc/compositex.html -->
    <script type="application/x-javascript">
      if (window.testRunner) {
          testRunner.dumpAsText();
          testRunner.waitUntilDone();
      }

      var compositeTypes = [
          'source-over','source-in','source-out','source-atop',
          'destination-over','destination-in','destination-out','destination-atop',
          'lighter','copy','xor'
      ];
      var inputColors = [
          { source: [255, 0, 0, 255], destination: [0, 255, 0, 255] },
          { source: [255, 0, 0, 255], destination: [0, 255, 0, 0] },
          { source: [255, 0, 0, 255], destination: [0, 255, 0, 1] },
          { source: [0, 255, 0, 0], destination: [255, 0, 0, 255] },
          { source: [0, 255, 0, 1], destination: [255, 0, 0, 255] },
          { source: [255, 0, 0, 0], destination: [0, 255, 0, 255] },
          { source: [255, 0, 0, 127], destination: [0, 255, 0, 127] },
          { source: [255, 0, 0, 255], destination: [0, 255, 0, 127] },
          { source: [255, 0, 0, 127], destination: [0, 255, 0, 255] },
          { source: [127, 0, 0, 255], destination: [0, 127, 0, 127] },
          { source: [127, 0, 0, 127], destination: [0, 127, 0, 255] },
          { source: [255, 0, 0, 127], destination: [255, 0, 0, 63] },
          { source: [255, 127, 0, 32], destination: [255, 63, 0, 63] },
          { source: [255, 0, 0, 191], destination: [0, 255, 0, 127] },
          { source: [255, 0, 255, 191], destination: [0, 255, 255, 127] }
      ];
      var expectedColors = [
          [
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 255, 0, 255] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 255, 0, 1] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
              { source: [0, 255, 0, 1], composition: [254, 1, 0, 255], destination: [255, 0, 0, 255] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
              { source: [255, 0, 0, 127], composition: [170, 84, 0, 190], destination: [0, 255, 0, 127] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 255, 0, 127] },
              { source: [255, 0, 0, 127], composition: [127, 128, 0, 255], destination: [0, 255, 0, 255] },
              { source: [127, 0, 0, 255], composition: [127, 0, 0, 255], destination: [0, 126, 0, 127] },
              { source: [126, 0, 0, 127], composition: [63, 63, 0, 255], destination: [0, 127, 0, 255] },
              { source: [255, 0, 0, 127], composition: [255, 0, 0, 158], destination: [255, 0, 0, 63] },
              { source: [255, 127, 0, 32], composition: [255, 85, 0, 87], destination: [255, 64, 0, 63] },
              { source: [255, 0, 0, 191], composition: [219, 35, 0, 222], destination: [0, 255, 0, 127] },
              { source: [255, 0, 255, 191], composition: [219, 35, 255, 222], destination: [0, 255, 255, 127] }
          ],
          [
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 64], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 127], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 127], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [128, 0, 0, 127], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [126, 0, 0, 127], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 32], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 127, 0, 8], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 96], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 0, 255, 96], destination: [0, 0, 0, 0] }
          ],
          [
              { source: [255, 0, 0, 255], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 254], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 255, 0, 1], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 127], composition: [255, 0, 0, 64], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 128], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 127], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [127, 0, 0, 255], composition: [127, 0, 0, 128], destination: [0, 0, 0, 0] },
              { source: [126, 0, 0, 127], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 127], composition: [255, 0, 0, 96], destination: [0, 0, 0, 0] },
              { source: [255, 127, 0, 32], composition: [255, 132, 0, 25], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 191], composition: [255, 0, 0, 96], destination: [0, 0, 0, 0] },
              { source: [255, 0, 255, 191], composition: [255, 0, 255, 96], destination: [0, 0, 0, 0] }
          ],
          [
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [0, 255, 0, 255] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 1], destination: [0, 255, 0, 1] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
              { source: [0, 0, 0, 0], composition: [254, 1, 0, 255], destination: [255, 0, 0, 255] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
              { source: [0, 0, 0, 0], composition: [126, 126, 0, 127], destination: [0, 255, 0, 127] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 127], destination: [0, 255, 0, 127] },
              { source: [0, 0, 0, 0], composition: [127, 128, 0, 255], destination: [0, 255, 0, 255] },
              { source: [0, 0, 0, 0], composition: [128, 0, 0, 127], destination: [0, 126, 0, 127] },
              { source: [0, 0, 0, 0], composition: [63, 63, 0, 255], destination: [0, 127, 0, 255] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 63], destination: [255, 0, 0, 63] },
              { source: [0, 0, 0, 0], composition: [255, 68, 0, 63], destination: [255, 64, 0, 63] },
              { source: [0, 0, 0, 0], composition: [190, 62, 0, 127], destination: [0, 255, 0, 127] },
              { source: [0, 0, 0, 0], composition: [190, 62, 255, 127], destination: [0, 255, 255, 127] }
          ],
          [
              { source: [255, 0, 0, 255], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [254, 1, 0, 255], destination: [0, 255, 0, 1] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
              { source: [0, 255, 0, 1], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
              { source: [255, 0, 0, 127], composition: [84, 170, 0, 190], destination: [0, 255, 0, 127] },
              { source: [255, 0, 0, 255], composition: [128, 127, 0, 255], destination: [0, 255, 0, 127] },
              { source: [255, 0, 0, 127], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
              { source: [127, 0, 0, 255], composition: [63, 63, 0, 255], destination: [0, 126, 0, 127] },
              { source: [126, 0, 0, 127], composition: [0, 127, 0, 255], destination: [0, 127, 0, 255] },
              { source: [255, 0, 0, 127], composition: [255, 0, 0, 158], destination: [255, 0, 0, 63] },
              { source: [255, 127, 0, 32], composition: [255, 82, 0, 87], destination: [255, 64, 0, 63] },
              { source: [255, 0, 0, 191], composition: [109, 145, 0, 222], destination: [0, 255, 0, 127] },
              { source: [255, 0, 255, 191], composition: [109, 145, 255, 222], destination: [0, 255, 255, 127] }
          ],
          [
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 1], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 1], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 64], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 127], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 127], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 126, 0, 127], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 128, 0, 127], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 32], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [255, 95, 0, 8], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 96], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 255, 255, 96], destination: [0, 0, 0, 0] }
          ],
          [
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 255, 0, 255] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 255, 0, 1] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 254], destination: [255, 0, 0, 255] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 64], destination: [0, 255, 0, 127] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 255, 0, 127] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 128], destination: [0, 255, 0, 255] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 126, 0, 127] },
              { source: [0, 0, 0, 0], composition: [0, 127, 0, 128], destination: [0, 127, 0, 255] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 32], destination: [255, 0, 0, 63] },
              { source: [0, 0, 0, 0], composition: [255, 63, 0, 56], destination: [255, 64, 0, 63] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 32], destination: [0, 255, 0, 127] },
              { source: [0, 0, 0, 0], composition: [0, 255, 255, 32], destination: [0, 255, 255, 127] }
          ],
          [
              { source: [255, 0, 0, 255], composition: [0, 255, 0, 255], destination: [0,0,0,0] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [254, 1, 0, 255], destination: [0,0,0,0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0,0,0,0] },
              { source: [0, 255, 0, 1], composition: [255, 0, 0, 1], destination: [0,0,0,0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0,0,0,0] },
              { source: [255, 0, 0, 127], composition: [126, 126, 0, 127], destination: [0,0,0,0] },
              { source: [255, 0, 0, 255], composition: [128, 127, 0, 255], destination: [0,0,0,0] },
              { source: [255, 0, 0, 127], composition: [0, 255, 0, 127], destination: [0,0,0,0] },
              { source: [127, 0, 0, 255], composition: [63, 63, 0, 255], destination: [0,0,0,0] },
              { source: [126, 0, 0, 127], composition: [0, 126, 0, 127], destination: [0,0,0,0] },
              { source: [255, 0, 0, 127], composition: [255, 0, 0, 127], destination: [0,0,0,0] },
              { source: [255, 127, 0, 32], composition: [255, 111, 0, 32], destination: [0,0,0,0] },
              { source: [255, 0, 0, 191], composition: [126, 126, 0, 191], destination: [0,0,0,0] },
              { source: [255, 0, 255, 191], composition: [126, 126, 255, 191], destination: [0,0,0,0] }
          ],
          [
              { source: [255, 0, 0, 255], composition: [255, 255, 0, 255], destination: [0, 255, 0, 255] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [255, 1, 0, 255], destination: [0, 255, 0, 1] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
              { source: [0, 255, 0, 1], composition: [255, 1, 0, 255], destination: [255, 0, 0, 255] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
              { source: [255, 0, 0, 127], composition: [127, 127, 0, 254], destination: [0, 255, 0, 127] },
              { source: [255, 0, 0, 255], composition: [255, 127, 0, 255], destination: [0, 255, 0, 127] },
              { source: [255, 0, 0, 127], composition: [127, 255, 0, 255], destination: [0, 255, 0, 255] },
              { source: [127, 0, 0, 255], composition: [127, 63, 0, 255], destination: [0, 126, 0, 127] },
              { source: [126, 0, 0, 127], composition: [63, 127, 0, 255], destination: [0, 127, 0, 255] },
              { source: [255, 0, 0, 127], composition: [255, 0, 0, 190], destination: [255, 0, 0, 63] },
              { source: [255, 127, 0, 32], composition: [255, 85, 0, 95], destination: [255, 64, 0, 63] },
              { source: [255, 0, 0, 191], composition: [191, 127, 0, 255], destination: [0, 255, 0, 127] },
              { source: [255, 0, 255, 191], composition: [191, 127, 255, 255], destination: [0, 255, 255, 127] }
          ],
          [
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [0, 255, 0, 1], composition: [0, 255, 0, 1], destination: [0, 0, 0, 0] },
              { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 127], composition: [255, 0, 0, 127], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 127], composition: [255, 0, 0, 127], destination: [0, 0, 0, 0] },
              { source: [127, 0, 0, 255], composition: [127, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [126, 0, 0, 127], composition: [126, 0, 0, 127], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 127], composition: [255, 0, 0, 127], destination: [0, 0, 0, 0] },
              { source: [255, 127, 0, 32], composition: [255, 127, 0, 32], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 191], composition: [255, 0, 0, 191], destination: [0, 0, 0, 0] },
              { source: [255, 0, 255, 191], composition: [255, 0, 255, 191], destination: [0, 0, 0, 0] }
          ],
          [
              { source: [255, 0, 0, 255], composition: [0, 0, 0, 0], destination: [0, 255, 0, 255] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 254], destination: [0, 255, 0, 1] },
              { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
              { source: [0, 255, 0, 1], composition: [255, 0, 0, 254], destination: [255, 0, 0, 255] },
              { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
              { source: [255, 0, 0, 127], composition: [126, 126, 0, 127], destination: [0, 255, 0, 127] },
              { source: [255, 0, 0, 255], composition: [255, 0, 0, 128], destination: [0, 255, 0, 127] },
              { source: [255, 0, 0, 127], composition: [0, 255, 0, 128], destination: [0, 255, 0, 255] },
              { source: [127, 0, 0, 255], composition: [127, 0, 0, 128], destination: [0, 126, 0, 127] },
              { source: [126, 0, 0, 127], composition: [0, 125, 0, 128], destination: [0, 127, 0, 255] },
              { source: [255, 0, 0, 127], composition: [255, 0, 0, 127], destination: [255, 0, 0, 63] },
              { source: [255, 127, 0, 32], composition: [255, 83, 0, 79], destination: [255, 64, 0, 63] },
              { source: [255, 0, 0, 191], composition: [190, 62, 0, 127], destination: [0, 255, 0, 127] },
              { source: [255, 0, 255, 191], composition: [190, 62, 255, 127], destination: [0, 255, 255, 127] }
          ]
      ];

      // Compare two colors with a few margin.
      function isDifferentColor(actualColor, expectedColor)
      {
          var actualAlpha = actualColor[3];
          var expectedAlpha = expectedColor[3];
          if (Math.abs(actualColor - expectedColor) > 3) return true;
          // For the value of RGB, we compare the values the users actually see.
          if (Math.abs(actualColor[0] * actualAlpha / 256 - expectedColor[0] * expectedAlpha / 256) > 3) return true;
          if (Math.abs(actualColor[1] * actualAlpha / 256 - expectedColor[1] * expectedAlpha / 256) > 3) return true;
          if (Math.abs(actualColor[2] * actualAlpha / 256 - expectedColor[2] * expectedAlpha / 256) > 3) return true;
          return false;
      }

      function getRGBAString(a)
      {
          return "rgba(" + [a[0], a[1], a[2], a[3] / 255.0].join(",") + ")";
      }

      function drawTable(drawPolicy)
      {
          var tableElement = document.createElement("table");

          // Create a header for source color.
          var trElement = document.createElement("tr");
          tableElement.appendChild(trElement);
          trElement.appendChild(document.createElement("th"));
          for (var column = 0; column < inputColors.length; column++) {
              var inputColor = inputColors[column];
              var thElement = document.createElement("th");
              thElement.setAttribute("colspan", "2");
              thElement.textContent = "src " + inputColor.source.join(", ");
              trElement.appendChild(thElement);
          }

          // Create a header for destination color.
          trElement = document.createElement("tr");
          tableElement.appendChild(trElement);
          trElement.appendChild(document.createElement("th"));
          for (var column = 0; column < inputColors.length; column++) {
              var inputColor = inputColors[column];
              var thElement = document.createElement("th");
              thElement.setAttribute("colspan", "2");
              thElement.textContent = "dst " + inputColor.destination.join(", ");
              trElement.appendChild(thElement);
          }

          var resultsElement = document.getElementById("results");
          var titleElement = document.createElement("h1");
          titleElement.textContent = "Tests for " + drawPolicy.name;
          resultsElement.appendChild(titleElement);
          resultsElement.appendChild(tableElement);

          for (var row = 0; row < compositeTypes.length; row++){
              var type = compositeTypes[row];

              var trCanvasElement = document.createElement("tr");
              var thElement = document.createElement("th");
              thElement.setAttribute("rowspan", "2");
              thElement.textContent = type;
              trCanvasElement.appendChild(thElement);
              var trMessageElement = document.createElement("tr");
              tableElement.appendChild(trCanvasElement);
              tableElement.appendChild(trMessageElement);

              for (var column = 0; column < inputColors.length; column++) {
                  var test = type + "-" + column;
                  var inputColor = inputColors[column];
                  var expectedColor = expectedColors[row][column];

                  // Create canvas element for actual color.
                  var actualCanvasElement = document.createElement("canvas");
                  actualCanvasElement.setAttribute("width", "25");
                  actualCanvasElement.setAttribute("height", "25");
                  tdElement = document.createElement("td");
                  tdElement.appendChild(actualCanvasElement);
                  trCanvasElement.appendChild(tdElement);

                  // Create canvas element for expected color.
                  var expectedCanvasElement = document.createElement("canvas");
                  expectedCanvasElement.setAttribute("width", "25");
                  expectedCanvasElement.setAttribute("height", "25");
                  var tdElement = document.createElement("td");
                  tdElement.appendChild(expectedCanvasElement);
                  trCanvasElement.appendChild(tdElement);

                  // Create div element for pass/fail messages.
                  var messageElement = document.createElement("div");
                  tdElement = document.createElement("td");
                  tdElement.setAttribute("colspan", "2");
                  tdElement.appendChild(messageElement);
                  trMessageElement.appendChild(tdElement);

                  var ctx = expectedCanvasElement.getContext("2d");
                  // Draw expected image.
                  ctx.globalCompositeOperation = "copy";
                  ctx.fillStyle = getRGBAString(expectedColor.destination);
                  ctx.strokeStyle = getRGBAString(expectedColor.destination);
                  drawPolicy.drawDestination(ctx);
                  ctx.fillStyle = getRGBAString(expectedColor.source);
                  ctx.strokeStyle = getRGBAString(expectedColor.source);
                  drawPolicy.drawSource(ctx);
                  ctx.fillStyle = getRGBAString(expectedColor.composition);
                  ctx.strokeStyle = getRGBAString(expectedColor.composition);
                  drawPolicy.drawComposition(ctx);

                  ctx = actualCanvasElement.getContext("2d");

                  // Draw destination rectangle.
                  ctx.globalCompositeOperation = "copy";
                  ctx.fillStyle = getRGBAString(inputColor.destination);
                  ctx.strokeStyle = getRGBAString(inputColor.destination);
                  drawPolicy.drawDestination(ctx);

                  // Draw source rectangle.
                  ctx.globalCompositeOperation = type;
                  ctx.fillStyle = getRGBAString(inputColor.source);
                  ctx.strokeStyle = getRGBAString(inputColor.source);
                  drawPolicy.drawSource(ctx);

                  // Let's check if the results are expected or not.
                  var errorSuffix = ", composite type: " + type + ", source: " + inputColor.source + ", destination: " + inputColor.destination + "<br>";

                  var results = "";
                  // Note that (0, 0) may be affected by anti-alias.
                  var img = ctx.getImageData(1, 1, 1, 1).data;
                  var actualColor = [img[0], img[1], img[2], img[3]];
                  if (isDifferentColor(actualColor, expectedColor.source)) {
                      results += "Unexpected source! expected: " + expectedColor.source + " actual: " + actualColor + errorSuffix;
                  }
                  // Note that (24, 24) may be affected by anti-alias.
                  img = ctx.getImageData(23, 23, 1, 1).data;
                  actualColor = [img[0], img[1], img[2], img[3]];
                  if (isDifferentColor(actualColor, expectedColor.destination)) {
                      results += "Unexpected destination! expected: " + expectedColor.destination + " actual: " + actualColor + errorSuffix;
                  }
                  img = ctx.getImageData(12, 12, 1, 1).data;
                  actualColor = [img[0], img[1], img[2], img[3]];
                  if (isDifferentColor(actualColor, expectedColor.composition)) {
                      results += "Unexpected composition! expected: " + expectedColor.composition + " actual: " + actualColor + errorSuffix;
                  }

                  if (results == "") {
                      messageElement.style.backgroundColor = "green";
                      messageElement.innerHTML = results = "PASS";
                  } else {
                      messageElement.style.backgroundColor = "red";
                      messageElement.innerHTML = results;
                  }

                  // Dump colors into text area for debugging purpose.
                  var debugText = document.getElementById("debug");
                  img = ctx.getImageData(0, 0, 1, 1).data;
                  debugText.value += img[0] + "," + img[1] + "," + img[2] + "," + img[3] + "\n";
                  img = ctx.getImageData(12, 12, 1, 1).data;
                  debugText.value += img[0] + "," + img[1] + "," + img[2] + "," + img[3] + "\n";
                  img = ctx.getImageData(24, 24, 1, 1).data;
                  debugText.value += img[0] + "," + img[1] + "," + img[2] + "," + img[3] + "\n";
              }
          }
      }

      var useFillRect = {
          drawSource: function(ctx) {
              ctx.fillRect(0, 0, 20, 20);
          },

          drawDestination: function(ctx) {
              ctx.fillRect(5, 5, 20, 20);
          },

          drawComposition: function(ctx) {
              ctx.fillRect(5, 5, 15, 15);
          },

          name: "fill rect"
      };

      var usePathAndFill = {
          drawSource: function(ctx) {
              ctx.beginPath();
              ctx.moveTo(0, 0);
              ctx.lineTo(15, 0);
              ctx.lineTo(15, 15);
              ctx.lineTo(5, 15);
              ctx.closePath();
              ctx.fill();
          },

          drawDestination: function(ctx) {
              ctx.beginPath();
              ctx.moveTo(25, 25);
              ctx.lineTo(10, 25);
              ctx.lineTo(10, 10);
              ctx.lineTo(20, 10);
              ctx.closePath();
              ctx.fill();
          },

          drawComposition: function(ctx) {
              ctx.fillRect(10, 10, 5, 5);

              ctx.beginPath();
              ctx.closePath();
              ctx.fill();
          },

          name: "path and fill"
      };

      function draw()
      {
          drawTable(useFillRect);
          drawTable(usePathAndFill);
          if (window.testRunner)
              testRunner.notifyDone();
      }
    </script>
    <style type="text/css">
      body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
      canvas { border: 2px solid #000; margin-bottom: 5px; }
      table { background: #00f; }
      th { font-size: 70%; padding: 0; }
      td { font-size: 70%; padding: 0; }
      pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
    </style>
  </head>
  <body onload="draw();">
    <p>This test exercises a bunch of color composition with alpha blending. The top-left rectangles are the source images and bottom-right rectangles are the destination images.</p>
    <div id="results">
    </div>
    <textarea id="debug"></textarea>
  </body>
</html>