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

   1 <html>
   2   <head>
   3     <title>A canvas globalCompositeOperation test with alpha blending</title>
   4     <!-- This test was inspired by http://canvex.lazyilluminati.com/misc/compositex.html -->
   5     <script type="application/x-javascript">
   6       if (window.testRunner) {
   7           testRunner.dumpAsText();
   8           testRunner.waitUntilDone();
   9       }
  10
  11       var compositeTypes = [
  12           'source-over','source-in','source-out','source-atop',
  13           'destination-over','destination-in','destination-out','destination-atop',
  14           'lighter','copy','xor'
  15       ];
  16       var inputColors = [
  17           { source: [255, 0, 0, 255], destination: [0, 255, 0, 255] },
  18           { source: [255, 0, 0, 255], destination: [0, 255, 0, 0] },
  19           { source: [255, 0, 0, 255], destination: [0, 255, 0, 1] },
  20           { source: [0, 255, 0, 0], destination: [255, 0, 0, 255] },
  21           { source: [0, 255, 0, 1], destination: [255, 0, 0, 255] },
  22           { source: [255, 0, 0, 0], destination: [0, 255, 0, 255] },
  23           { source: [255, 0, 0, 127], destination: [0, 255, 0, 127] },
  24           { source: [255, 0, 0, 255], destination: [0, 255, 0, 127] },
  25           { source: [255, 0, 0, 127], destination: [0, 255, 0, 255] },
  26           { source: [127, 0, 0, 255], destination: [0, 127, 0, 127] },
  27           { source: [127, 0, 0, 127], destination: [0, 127, 0, 255] },
  28           { source: [255, 0, 0, 127], destination: [255, 0, 0, 63] },
  29           { source: [255, 127, 0, 32], destination: [255, 63, 0, 63] },
  30           { source: [255, 0, 0, 191], destination: [0, 255, 0, 127] },
  31           { source: [255, 0, 255, 191], destination: [0, 255, 255, 127] }
  32       ];
  33       var expectedColors = [
  34           [
  35               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 255, 0, 255] },
  36               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
  37               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 255, 0, 1] },
  38               { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
  39               { source: [0, 255, 0, 1], composition: [254, 1, 0, 255], destination: [255, 0, 0, 255] },
  40               { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
  41               { source: [255, 0, 0, 127], composition: [170, 84, 0, 190], destination: [0, 255, 0, 127] },
  42               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 255, 0, 127] },
  43               { source: [255, 0, 0, 127], composition: [127, 128, 0, 255], destination: [0, 255, 0, 255] },
  44               { source: [127, 0, 0, 255], composition: [127, 0, 0, 255], destination: [0, 126, 0, 127] },
  45               { source: [126, 0, 0, 127], composition: [63, 63, 0, 255], destination: [0, 127, 0, 255] },
  46               { source: [255, 0, 0, 127], composition: [255, 0, 0, 158], destination: [255, 0, 0, 63] },
  47               { source: [255, 127, 0, 32], composition: [255, 85, 0, 87], destination: [255, 64, 0, 63] },
  48               { source: [255, 0, 0, 191], composition: [219, 35, 0, 222], destination: [0, 255, 0, 127] },
  49               { source: [255, 0, 255, 191], composition: [219, 35, 255, 222], destination: [0, 255, 255, 127] }
  50           ],
  51           [
  52               { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
  53               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  54               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  55               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  56               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  57               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  58               { source: [0, 0, 0, 0], composition: [255, 0, 0, 64], destination: [0, 0, 0, 0] },
  59               { source: [0, 0, 0, 0], composition: [255, 0, 0, 127], destination: [0, 0, 0, 0] },
  60               { source: [0, 0, 0, 0], composition: [255, 0, 0, 127], destination: [0, 0, 0, 0] },
  61               { source: [0, 0, 0, 0], composition: [128, 0, 0, 127], destination: [0, 0, 0, 0] },
  62               { source: [0, 0, 0, 0], composition: [126, 0, 0, 127], destination: [0, 0, 0, 0] },
  63               { source: [0, 0, 0, 0], composition: [255, 0, 0, 32], destination: [0, 0, 0, 0] },
  64               { source: [0, 0, 0, 0], composition: [255, 127, 0, 8], destination: [0, 0, 0, 0] },
  65               { source: [0, 0, 0, 0], composition: [255, 0, 0, 96], destination: [0, 0, 0, 0] },
  66               { source: [0, 0, 0, 0], composition: [255, 0, 255, 96], destination: [0, 0, 0, 0] }
  67           ],
  68           [
  69               { source: [255, 0, 0, 255], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  70               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
  71               { source: [255, 0, 0, 255], composition: [255, 0, 0, 254], destination: [0, 0, 0, 0] },
  72               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  73               { source: [0, 255, 0, 1], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  74               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  75               { source: [255, 0, 0, 127], composition: [255, 0, 0, 64], destination: [0, 0, 0, 0] },
  76               { source: [255, 0, 0, 255], composition: [255, 0, 0, 128], destination: [0, 0, 0, 0] },
  77               { source: [255, 0, 0, 127], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  78               { source: [127, 0, 0, 255], composition: [127, 0, 0, 128], destination: [0, 0, 0, 0] },
  79               { source: [126, 0, 0, 127], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  80               { source: [255, 0, 0, 127], composition: [255, 0, 0, 96], destination: [0, 0, 0, 0] },
  81               { source: [255, 127, 0, 32], composition: [255, 132, 0, 25], destination: [0, 0, 0, 0] },
  82               { source: [255, 0, 0, 191], composition: [255, 0, 0, 96], destination: [0, 0, 0, 0] },
  83               { source: [255, 0, 255, 191], composition: [255, 0, 255, 96], destination: [0, 0, 0, 0] }
  84           ],
  85           [
  86               { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [0, 255, 0, 255] },
  87               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
  88               { source: [0, 0, 0, 0], composition: [255, 0, 0, 1], destination: [0, 255, 0, 1] },
  89               { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
  90               { source: [0, 0, 0, 0], composition: [254, 1, 0, 255], destination: [255, 0, 0, 255] },
  91               { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
  92               { source: [0, 0, 0, 0], composition: [126, 126, 0, 127], destination: [0, 255, 0, 127] },
  93               { source: [0, 0, 0, 0], composition: [255, 0, 0, 127], destination: [0, 255, 0, 127] },
  94               { source: [0, 0, 0, 0], composition: [127, 128, 0, 255], destination: [0, 255, 0, 255] },
  95               { source: [0, 0, 0, 0], composition: [128, 0, 0, 127], destination: [0, 126, 0, 127] },
  96               { source: [0, 0, 0, 0], composition: [63, 63, 0, 255], destination: [0, 127, 0, 255] },
  97               { source: [0, 0, 0, 0], composition: [255, 0, 0, 63], destination: [255, 0, 0, 63] },
  98               { source: [0, 0, 0, 0], composition: [255, 68, 0, 63], destination: [255, 64, 0, 63] },
  99               { source: [0, 0, 0, 0], composition: [190, 62, 0, 127], destination: [0, 255, 0, 127] },
 100               { source: [0, 0, 0, 0], composition: [190, 62, 255, 127], destination: [0, 255, 255, 127] }
 101           ],
 102           [
 103               { source: [255, 0, 0, 255], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
 104               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
 105               { source: [255, 0, 0, 255], composition: [254, 1, 0, 255], destination: [0, 255, 0, 1] },
 106               { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
 107               { source: [0, 255, 0, 1], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
 108               { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
 109               { source: [255, 0, 0, 127], composition: [84, 170, 0, 190], destination: [0, 255, 0, 127] },
 110               { source: [255, 0, 0, 255], composition: [128, 127, 0, 255], destination: [0, 255, 0, 127] },
 111               { source: [255, 0, 0, 127], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
 112               { source: [127, 0, 0, 255], composition: [63, 63, 0, 255], destination: [0, 126, 0, 127] },
 113               { source: [126, 0, 0, 127], composition: [0, 127, 0, 255], destination: [0, 127, 0, 255] },
 114               { source: [255, 0, 0, 127], composition: [255, 0, 0, 158], destination: [255, 0, 0, 63] },
 115               { source: [255, 127, 0, 32], composition: [255, 82, 0, 87], destination: [255, 64, 0, 63] },
 116               { source: [255, 0, 0, 191], composition: [109, 145, 0, 222], destination: [0, 255, 0, 127] },
 117               { source: [255, 0, 255, 191], composition: [109, 145, 255, 222], destination: [0, 255, 255, 127] }
 118           ],
 119           [
 120               { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 0, 0, 0] },
 121               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
 122               { source: [0, 0, 0, 0], composition: [0, 255, 0, 1], destination: [0, 0, 0, 0] },
 123               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
 124               { source: [0, 0, 0, 0], composition: [255, 0, 0, 1], destination: [0, 0, 0, 0] },
 125               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
 126               { source: [0, 0, 0, 0], composition: [0, 255, 0, 64], destination: [0, 0, 0, 0] },
 127               { source: [0, 0, 0, 0], composition: [0, 255, 0, 127], destination: [0, 0, 0, 0] },
 128               { source: [0, 0, 0, 0], composition: [0, 255, 0, 127], destination: [0, 0, 0, 0] },
 129               { source: [0, 0, 0, 0], composition: [0, 126, 0, 127], destination: [0, 0, 0, 0] },
 130               { source: [0, 0, 0, 0], composition: [0, 128, 0, 127], destination: [0, 0, 0, 0] },
 131               { source: [0, 0, 0, 0], composition: [255, 0, 0, 32], destination: [0, 0, 0, 0] },
 132               { source: [0, 0, 0, 0], composition: [255, 95, 0, 8], destination: [0, 0, 0, 0] },
 133               { source: [0, 0, 0, 0], composition: [0, 255, 0, 96], destination: [0, 0, 0, 0] },
 134               { source: [0, 0, 0, 0], composition: [0, 255, 255, 96], destination: [0, 0, 0, 0] }
 135           ],
 136           [
 137               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 255, 0, 255] },
 138               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
 139               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 255, 0, 1] },
 140               { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
 141               { source: [0, 0, 0, 0], composition: [255, 0, 0, 254], destination: [255, 0, 0, 255] },
 142               { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
 143               { source: [0, 0, 0, 0], composition: [0, 255, 0, 64], destination: [0, 255, 0, 127] },
 144               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 255, 0, 127] },
 145               { source: [0, 0, 0, 0], composition: [0, 255, 0, 128], destination: [0, 255, 0, 255] },
 146               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 126, 0, 127] },
 147               { source: [0, 0, 0, 0], composition: [0, 127, 0, 128], destination: [0, 127, 0, 255] },
 148               { source: [0, 0, 0, 0], composition: [255, 0, 0, 32], destination: [255, 0, 0, 63] },
 149               { source: [0, 0, 0, 0], composition: [255, 63, 0, 56], destination: [255, 64, 0, 63] },
 150               { source: [0, 0, 0, 0], composition: [0, 255, 0, 32], destination: [0, 255, 0, 127] },
 151               { source: [0, 0, 0, 0], composition: [0, 255, 255, 32], destination: [0, 255, 255, 127] }
 152           ],
 153           [
 154               { source: [255, 0, 0, 255], composition: [0, 255, 0, 255], destination: [0,0,0,0] },
 155               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
 156               { source: [255, 0, 0, 255], composition: [254, 1, 0, 255], destination: [0,0,0,0] },
 157               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0,0,0,0] },
 158               { source: [0, 255, 0, 1], composition: [255, 0, 0, 1], destination: [0,0,0,0] },
 159               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0,0,0,0] },
 160               { source: [255, 0, 0, 127], composition: [126, 126, 0, 127], destination: [0,0,0,0] },
 161               { source: [255, 0, 0, 255], composition: [128, 127, 0, 255], destination: [0,0,0,0] },
 162               { source: [255, 0, 0, 127], composition: [0, 255, 0, 127], destination: [0,0,0,0] },
 163               { source: [127, 0, 0, 255], composition: [63, 63, 0, 255], destination: [0,0,0,0] },
 164               { source: [126, 0, 0, 127], composition: [0, 126, 0, 127], destination: [0,0,0,0] },
 165               { source: [255, 0, 0, 127], composition: [255, 0, 0, 127], destination: [0,0,0,0] },
 166               { source: [255, 127, 0, 32], composition: [255, 111, 0, 32], destination: [0,0,0,0] },
 167               { source: [255, 0, 0, 191], composition: [126, 126, 0, 191], destination: [0,0,0,0] },
 168               { source: [255, 0, 255, 191], composition: [126, 126, 255, 191], destination: [0,0,0,0] }
 169           ],
 170           [
 171               { source: [255, 0, 0, 255], composition: [255, 255, 0, 255], destination: [0, 255, 0, 255] },
 172               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
 173               { source: [255, 0, 0, 255], composition: [255, 1, 0, 255], destination: [0, 255, 0, 1] },
 174               { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
 175               { source: [0, 255, 0, 1], composition: [255, 1, 0, 255], destination: [255, 0, 0, 255] },
 176               { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
 177               { source: [255, 0, 0, 127], composition: [127, 127, 0, 254], destination: [0, 255, 0, 127] },
 178               { source: [255, 0, 0, 255], composition: [255, 127, 0, 255], destination: [0, 255, 0, 127] },
 179               { source: [255, 0, 0, 127], composition: [127, 255, 0, 255], destination: [0, 255, 0, 255] },
 180               { source: [127, 0, 0, 255], composition: [127, 63, 0, 255], destination: [0, 126, 0, 127] },
 181               { source: [126, 0, 0, 127], composition: [63, 127, 0, 255], destination: [0, 127, 0, 255] },
 182               { source: [255, 0, 0, 127], composition: [255, 0, 0, 190], destination: [255, 0, 0, 63] },
 183               { source: [255, 127, 0, 32], composition: [255, 85, 0, 95], destination: [255, 64, 0, 63] },
 184               { source: [255, 0, 0, 191], composition: [191, 127, 0, 255], destination: [0, 255, 0, 127] },
 185               { source: [255, 0, 255, 191], composition: [191, 127, 255, 255], destination: [0, 255, 255, 127] }
 186           ],
 187           [
 188               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
 189               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
 190               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
 191               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
 192               { source: [0, 255, 0, 1], composition: [0, 255, 0, 1], destination: [0, 0, 0, 0] },
 193               { source: [0, 0, 0, 0], composition: [0, 0, 0, 0], destination: [0, 0, 0, 0] },
 194               { source: [255, 0, 0, 127], composition: [255, 0, 0, 127], destination: [0, 0, 0, 0] },
 195               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
 196               { source: [255, 0, 0, 127], composition: [255, 0, 0, 127], destination: [0, 0, 0, 0] },
 197               { source: [127, 0, 0, 255], composition: [127, 0, 0, 255], destination: [0, 0, 0, 0] },
 198               { source: [126, 0, 0, 127], composition: [126, 0, 0, 127], destination: [0, 0, 0, 0] },
 199               { source: [255, 0, 0, 127], composition: [255, 0, 0, 127], destination: [0, 0, 0, 0] },
 200               { source: [255, 127, 0, 32], composition: [255, 127, 0, 32], destination: [0, 0, 0, 0] },
 201               { source: [255, 0, 0, 191], composition: [255, 0, 0, 191], destination: [0, 0, 0, 0] },
 202               { source: [255, 0, 255, 191], composition: [255, 0, 255, 191], destination: [0, 0, 0, 0] }
 203           ],
 204           [
 205               { source: [255, 0, 0, 255], composition: [0, 0, 0, 0], destination: [0, 255, 0, 255] },
 206               { source: [255, 0, 0, 255], composition: [255, 0, 0, 255], destination: [0, 0, 0, 0] },
 207               { source: [255, 0, 0, 255], composition: [255, 0, 0, 254], destination: [0, 255, 0, 1] },
 208               { source: [0, 0, 0, 0], composition: [255, 0, 0, 255], destination: [255, 0, 0, 255] },
 209               { source: [0, 255, 0, 1], composition: [255, 0, 0, 254], destination: [255, 0, 0, 255] },
 210               { source: [0, 0, 0, 0], composition: [0, 255, 0, 255], destination: [0, 255, 0, 255] },
 211               { source: [255, 0, 0, 127], composition: [126, 126, 0, 127], destination: [0, 255, 0, 127] },
 212               { source: [255, 0, 0, 255], composition: [255, 0, 0, 128], destination: [0, 255, 0, 127] },
 213               { source: [255, 0, 0, 127], composition: [0, 255, 0, 128], destination: [0, 255, 0, 255] },
 214               { source: [127, 0, 0, 255], composition: [127, 0, 0, 128], destination: [0, 126, 0, 127] },
 215               { source: [126, 0, 0, 127], composition: [0, 125, 0, 128], destination: [0, 127, 0, 255] },
 216               { source: [255, 0, 0, 127], composition: [255, 0, 0, 127], destination: [255, 0, 0, 63] },
 217               { source: [255, 127, 0, 32], composition: [255, 83, 0, 79], destination: [255, 64, 0, 63] },
 218               { source: [255, 0, 0, 191], composition: [190, 62, 0, 127], destination: [0, 255, 0, 127] },
 219               { source: [255, 0, 255, 191], composition: [190, 62, 255, 127], destination: [0, 255, 255, 127] }
 220           ]
 221       ];
 222
 223       // Compare two colors with a few margin.
 224       function isDifferentColor(actualColor, expectedColor)
 225       {
 226           var actualAlpha = actualColor[3];
 227           var expectedAlpha = expectedColor[3];
 228           if (Math.abs(actualColor - expectedColor) > 3) return true;
 229           // For the value of RGB, we compare the values the users actually see.
 230           if (Math.abs(actualColor[0] * actualAlpha / 256 - expectedColor[0] * expectedAlpha / 256) > 3) return true;
 231           if (Math.abs(actualColor[1] * actualAlpha / 256 - expectedColor[1] * expectedAlpha / 256) > 3) return true;
 232           if (Math.abs(actualColor[2] * actualAlpha / 256 - expectedColor[2] * expectedAlpha / 256) > 3) return true;
 233           return false;
 234       }
 235
 236       function getRGBAString(a)
 237       {
 238           return "rgba(" + [a[0], a[1], a[2], a[3] / 255.0].join(",") + ")";
 239       }
 240
 241       function drawTable(drawPolicy)
 242       {
 243           var tableElement = document.createElement("table");
 244
 245           // Create a header for source color.
 246           var trElement = document.createElement("tr");
 247           tableElement.appendChild(trElement);
 248           trElement.appendChild(document.createElement("th"));
 249           for (var column = 0; column < inputColors.length; column++) {
 250               var inputColor = inputColors[column];
 251               var thElement = document.createElement("th");
 252               thElement.setAttribute("colspan", "2");
 253               thElement.textContent = "src " + inputColor.source.join(", ");
 254               trElement.appendChild(thElement);
 255           }
 256
 257           // Create a header for destination color.
 258           trElement = document.createElement("tr");
 259           tableElement.appendChild(trElement);
 260           trElement.appendChild(document.createElement("th"));
 261           for (var column = 0; column < inputColors.length; column++) {
 262               var inputColor = inputColors[column];
 263               var thElement = document.createElement("th");
 264               thElement.setAttribute("colspan", "2");
 265               thElement.textContent = "dst " + inputColor.destination.join(", ");
 266               trElement.appendChild(thElement);
 267           }
 268
 269           var resultsElement = document.getElementById("results");
 270           var titleElement = document.createElement("h1");
 271           titleElement.textContent = "Tests for " + drawPolicy.name;
 272           resultsElement.appendChild(titleElement);
 273           resultsElement.appendChild(tableElement);
 274
 275           for (var row = 0; row < compositeTypes.length; row++){
 276               var type = compositeTypes[row];
 277
 278               var trCanvasElement = document.createElement("tr");
 279               var thElement = document.createElement("th");
 280               thElement.setAttribute("rowspan", "2");
 281               thElement.textContent = type;
 282               trCanvasElement.appendChild(thElement);
 283               var trMessageElement = document.createElement("tr");
 284               tableElement.appendChild(trCanvasElement);
 285               tableElement.appendChild(trMessageElement);
 286
 287               for (var column = 0; column < inputColors.length; column++) {
 288                   var test = type + "-" + column;
 289                   var inputColor = inputColors[column];
 290                   var expectedColor = expectedColors[row][column];
 291
 292                   // Create canvas element for actual color.
 293                   var actualCanvasElement = document.createElement("canvas");
 294                   actualCanvasElement.setAttribute("width", "25");
 295                   actualCanvasElement.setAttribute("height", "25");
 296                   tdElement = document.createElement("td");
 297                   tdElement.appendChild(actualCanvasElement);
 298                   trCanvasElement.appendChild(tdElement);
 299
 300                   // Create canvas element for expected color.
 301                   var expectedCanvasElement = document.createElement("canvas");
 302                   expectedCanvasElement.setAttribute("width", "25");
 303                   expectedCanvasElement.setAttribute("height", "25");
 304                   var tdElement = document.createElement("td");
 305                   tdElement.appendChild(expectedCanvasElement);
 306                   trCanvasElement.appendChild(tdElement);
 307
 308                   // Create div element for pass/fail messages.
 309                   var messageElement = document.createElement("div");
 310                   tdElement = document.createElement("td");
 311                   tdElement.setAttribute("colspan", "2");
 312                   tdElement.appendChild(messageElement);
 313                   trMessageElement.appendChild(tdElement);
 314
 315                   var ctx = expectedCanvasElement.getContext("2d");
 316                   ctx.lineWidth = 10;
 317                   // Draw expected image.
 318                   ctx.globalCompositeOperation = "copy";
 319                   ctx.fillStyle = getRGBAString(expectedColor.destination);
 320                   ctx.strokeStyle = getRGBAString(expectedColor.destination);
 321                   drawPolicy.drawDestination(ctx);
 322                   ctx.fillStyle = getRGBAString(expectedColor.source);
 323                   ctx.strokeStyle = getRGBAString(expectedColor.source);
 324                   drawPolicy.drawSource(ctx);
 325                   ctx.fillStyle = getRGBAString(expectedColor.composition);
 326                   ctx.strokeStyle = getRGBAString(expectedColor.composition);
 327                   drawPolicy.drawComposition(ctx);
 328
 329                   ctx = actualCanvasElement.getContext("2d");
 330                   ctx.lineWidth = 10;
 331
 332                   // Draw destination rectangle.
 333                   ctx.globalCompositeOperation = "copy";
 334                   ctx.fillStyle = getRGBAString(inputColor.destination);
 335                   ctx.strokeStyle = getRGBAString(inputColor.destination);
 336                   drawPolicy.drawDestination(ctx);
 337
 338                   // Draw source rectangle.
 339                   ctx.globalCompositeOperation = type;
 340                   ctx.fillStyle = getRGBAString(inputColor.source);
 341                   ctx.strokeStyle = getRGBAString(inputColor.source);
 342                   drawPolicy.drawSource(ctx);
 343
 344                   // Let's check if the results are expected or not.
 345                   var errorSuffix = ", composite type: " + type + ", source: " + inputColor.source + ", destination: " + inputColor.destination + "<br>";
 346
 347                   var results = "";
 348                   // Note that (0, 0) may be affected by anti-alias.
 349                   var img = ctx.getImageData(1, 1, 1, 1).data;
 350                   var actualColor = [img[0], img[1], img[2], img[3]];
 351                   if (isDifferentColor(actualColor, expectedColor.source)) {
 352                       results += "Unexpected source! expected: " + expectedColor.source + " actual: " + actualColor + errorSuffix;
 353                   }
 354                   // Note that (24, 24) may be affected by anti-alias.
 355                   img = ctx.getImageData(23, 23, 1, 1).data;
 356                   actualColor = [img[0], img[1], img[2], img[3]];
 357                   if (isDifferentColor(actualColor, expectedColor.destination)) {
 358                       results += "Unexpected destination! expected: " + expectedColor.destination + " actual: " + actualColor + errorSuffix;
 359                   }
 360                   img = ctx.getImageData(12, 12, 1, 1).data;
 361                   actualColor = [img[0], img[1], img[2], img[3]];
 362                   if (isDifferentColor(actualColor, expectedColor.composition)) {
 363                       results += "Unexpected composition! expected: " + expectedColor.composition + " actual: " + actualColor + errorSuffix;
 364                   }
 365
 366                   if (results == "") {
 367                       messageElement.style.backgroundColor = "green";
 368                       messageElement.innerHTML = results = "PASS";
 369                   } else {
 370                       messageElement.style.backgroundColor = "red";
 371                       messageElement.innerHTML = results;
 372                   }
 373
 374                   // Dump colors into text area for debugging purpose.
 375                   var debugText = document.getElementById("debug");
 376                   img = ctx.getImageData(0, 0, 1, 1).data;
 377                   debugText.value += img[0] + "," + img[1] + "," + img[2] + "," + img[3] + "\n";
 378                   img = ctx.getImageData(12, 12, 1, 1).data;
 379                   debugText.value += img[0] + "," + img[1] + "," + img[2] + "," + img[3] + "\n";
 380                   img = ctx.getImageData(24, 24, 1, 1).data;
 381                   debugText.value += img[0] + "," + img[1] + "," + img[2] + "," + img[3] + "\n";
 382               }
 383           }
 384       }
 385
 386       var useStrokeRect = {
 387           drawSource: function(ctx) {
 388               ctx.strokeRect(5, 5, 10, 10);
 389           },
 390
 391           drawDestination: function(ctx) {
 392               ctx.fillRect(5, 5, 20, 20);
 393           },
 394
 395           drawComposition: function(ctx) {
 396               ctx.fillRect(5, 5, 15, 15);
 397           },
 398
 399           name: "stroke rect"
 400       };
 401
 402       var usePathAndStroke = {
 403           drawSource: function(ctx) {
 404               ctx.beginPath();
 405               ctx.moveTo(5, 5);
 406               ctx.lineTo(15, 5);
 407               ctx.lineTo(15, 15);
 408               ctx.lineTo(5, 15);
 409               ctx.closePath();
 410               ctx.stroke();
 411           },
 412
 413           drawDestination: function(ctx) {
 414               ctx.fillRect(5, 5, 20, 20);
 415           },
 416
 417           drawComposition: function(ctx) {
 418               ctx.fillRect(5, 5, 15, 15);
 419           },
 420
 421           name: "path and stroke"
 422       };
 423
 424       function draw()
 425       {
 426           drawTable(useStrokeRect);
 427           drawTable(usePathAndStroke);
 428           if (window.testRunner)
 429               testRunner.notifyDone();
 430       }
 431     </script>
 432     <style type="text/css">
 433       body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
 434       h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
 435       canvas { border: 2px solid #000; margin-bottom: 5px; }
 436       table { background: #00f; }
 437       th { font-size: 70%; padding: 0; }
 438       td { font-size: 70%; padding: 0; }
 439       pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
 440     </style>
 441   </head>
 442   <body onload="draw();">
 443     <p>This test exercises a bunch of alpha composition checks with stroking. The top-left rectangles are the source images and bottom-right rectangles are the destination images.</p>
 444     <div id="results">
 445     </div>
 446     <textarea id="debug"></textarea>
 447   </body>
 448 </html>