src/third_party/WebKit/LayoutTests/fast/canvas/resources/canvas-composite-image-common.js

   1 if (window.testRunner) {
   2     testRunner.dumpAsText();
   3     testRunner.waitUntilDone();
   4 }
   5
   6 // This test should show a table of canvas elements. Onto the background of each a blue
   7 // square is drawn, either fully opaque or with some transparency, and then a clip and
   8 // transformation is applied. The clip only allows drawing in the left two thirds of the
   9 // canvas.
  10
  11 // Once each canvas has been set up, an image is drawn with the composite mode for that row.
  12 // Each row uses a different compositing mode. Different columns are used for when the
  13 // background is or isn't transparent, and when the image is drawn with or without a global
  14 // alpha.
  15
  16 // The image is a green rectangle which gets skewed by transform and cut off by the clip.
  17 // In each row the green rectangle should be drawn with the appropriate compositing
  18 // mode, as per the HTML5 canvas spec. The background on the right should always be left
  19 // untouched due to the clip.
  20
  21 // These map to the rows of the table
  22 var compositeTypes = [
  23   'source-over','source-in','source-out','source-atop',
  24   'destination-over','destination-in','destination-out','destination-atop',
  25   'lighter','copy','xor'
  26 ];
  27
  28 // These map to the columns of the table
  29 var testNames = [
  30   'solid on solid', 'alpha on solid', 'solid on alpha', 'alpha on alpha'
  31 ];
  32
  33 // These are the points where pixel values are checked for correctness
  34 var testPoints = [
  35   // points down the left edge
  36   {x: 10, y: 3}, {x: 10, y: 20}, {x: 10, y: 37},
  37   // points outside the left edge of the image
  38   {x: 33, y: 3}, {x: 28, y: 20}, {x: 38, y: 30}, {x: 49, y: 37},
  39   // points inside the left edge of the image
  40   {x: 39, y: 3}, {x: 34, y: 20}, {x: 48, y: 30}, {x: 57, y: 37},
  41   // points inside the right edge of the image
  42   {x: 56, y: 3}, {x: 65, y: 8}, {x: 77, y: 16}, {x: 77, y: 30}, {x: 77, y: 37},
  43   // points outside the right edge of the image
  44   {x: 65, y: 3}, {x: 74, y: 8},
  45   // points in the region that gets clipped
  46   {x: 83, y: 3}, {x: 83, y: 20}, {x: 83, y: 37}, {x: 120, y: 3}, {x: 120, y: 20}, {x: 120, y: 37},
  47 ];
  48
  49 var expectedColors = [
  50   // source-over
  51   [[[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
  52     [0, 0, 0, 0], [244, 233, 52, 255], [64, 255, 0, 255], [64, 255, 0, 255], [64, 255, 0, 255], [244, 233, 52, 255],
  53     [244, 233, 52, 255], [191, 191, 191, 255], [191, 191, 191, 255], [82, 169, 82, 255], [0, 0, 0, 0], [0, 100, 255, 255],
  54     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
  55    [[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
  56     [0, 0, 0, 0], [243, 233, 51, 128], [32, 178, 127, 255], [32, 178, 127, 255], [63, 255, 0, 128], [243, 233, 51, 128],
  57     [122, 167, 153, 255], [96, 146, 223, 255], [96, 146, 223, 255], [81, 169, 81, 128], [0, 0, 0, 0], [0, 100, 255, 255],
  58     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
  59    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
  60     [0, 0, 0, 0], [244, 233, 52, 255], [64, 255, 0, 255], [64, 255, 0, 255], [64, 255, 0, 255], [244, 233, 52, 255],
  61     [244, 233, 52, 255], [191, 191, 191, 255], [191, 191, 191, 255], [82, 169, 82, 255], [0, 0, 0, 0], [0, 100, 255, 127],
  62     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
  63    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
  64     [0, 0, 0, 0], [243, 233, 51, 128], [42, 204, 84, 191], [42, 204, 84, 191], [63, 255, 0, 128], [243, 233, 51, 128],
  65     [162, 189, 118, 191], [128, 161, 212, 191], [128, 161, 212, 191], [81, 169, 81, 128], [0, 0, 0, 0], [0, 100, 255, 127],
  66     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
  67   // source-in
  68   [[[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  69     [0, 0, 0, 0], [0, 0, 0, 0], [64, 255, 0, 255], [64, 255, 0, 255], [0, 0, 0, 0], [0, 0, 0, 0],
  70     [244, 233, 52, 255], [191, 191, 191, 255], [191, 191, 191, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  71     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
  72    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  73     [0, 0, 0, 0], [0, 0, 0, 0], [63, 255, 0, 128], [63, 255, 0, 128], [0, 0, 0, 0], [0, 0, 0, 0],
  74     [243, 233, 51, 128], [191, 191, 191, 128], [191, 191, 191, 128], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  75     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
  76    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  77     [0, 0, 0, 0], [0, 0, 0, 0], [64, 255, 0, 127], [64, 255, 0, 127], [0, 0, 0, 0], [0, 0, 0, 0],
  78     [244, 232, 52, 127], [190, 190, 190, 127], [190, 190, 190, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  79     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
  80    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  81     [0, 0, 0, 0], [0, 0, 0, 0], [63, 255, 0, 64], [63, 255, 0, 64], [0, 0, 0, 0], [0, 0, 0, 0],
  82     [243, 231, 51, 64], [191, 191, 191, 64], [191, 191, 191, 64], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  83     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
  84   // source-out
  85   [[[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  86     [0, 0, 0, 0], [244, 233, 52, 255], [0, 0, 0, 0], [0, 0, 0, 0], [64, 255, 0, 255], [244, 233, 52, 255],
  87     [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [82, 169, 82, 255], [0, 0, 0, 0], [0, 0, 0, 0],
  88     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
  89    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  90     [0, 0, 0, 0], [243, 233, 51, 128], [0, 0, 0, 0], [0, 0, 0, 0], [63, 255, 0, 128], [243, 233, 51, 128],
  91     [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [81, 169, 81, 128], [0, 0, 0, 0], [0, 0, 0, 0],
  92     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
  93    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  94     [0, 0, 0, 0], [244, 233, 52, 255], [63, 255, 0, 128], [63, 255, 0, 128], [64, 255, 0, 255], [244, 233, 52, 255],
  95     [243, 233, 51, 128], [191, 191, 191, 128], [191, 191, 191, 128], [82, 169, 82, 255], [0, 0, 0, 0], [0, 0, 0, 0],
  96     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
  97    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
  98     [0, 0, 0, 0], [243, 233, 51, 128], [63, 255, 0, 64], [63, 255, 0, 64], [63, 255, 0, 128], [243, 233, 51, 128],
  99     [243, 231, 51, 64], [191, 191, 191, 64], [191, 191, 191, 64], [81, 169, 81, 128], [0, 0, 0, 0], [0, 0, 0, 0],
 100     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
 101   // source-atop
 102   [[[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
 103     [0, 0, 0, 0], [0, 0, 0, 0], [64, 255, 0, 255], [64, 255, 0, 255], [0, 0, 0, 0], [0, 0, 0, 0],
 104     [244, 233, 52, 255], [191, 191, 191, 255], [191, 191, 191, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255],
 105     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 106    [[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
 107     [0, 0, 0, 0], [0, 0, 0, 0], [32, 178, 127, 255], [32, 178, 127, 255], [0, 0, 0, 0], [0, 0, 0, 0],
 108     [122, 167, 153, 255], [96, 146, 223, 255], [96, 146, 223, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255],
 109     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 110    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
 111     [0, 0, 0, 0], [0, 0, 0, 0], [64, 255, 0, 127], [64, 255, 0, 127], [0, 0, 0, 0], [0, 0, 0, 0],
 112     [244, 232, 52, 127], [190, 190, 190, 127], [190, 190, 190, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127],
 113     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
 114    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
 115     [0, 0, 0, 0], [0, 0, 0, 0], [32, 178, 126, 127], [32, 178, 126, 127], [0, 0, 0, 0], [0, 0, 0, 0],
 116     [122, 166, 152, 127], [96, 146, 222, 127], [96, 146, 222, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127],
 117     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
 118   // destination-over
 119   [[[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
 120     [0, 0, 0, 0], [244, 233, 52, 255], [0, 100, 255, 255], [0, 100, 255, 255], [64, 255, 0, 255], [244, 233, 52, 255],
 121     [0, 100, 255, 255], [0, 100, 255, 255], [0, 100, 255, 255], [82, 169, 82, 255], [0, 0, 0, 0], [0, 100, 255, 255],
 122     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 123    [[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
 124     [0, 0, 0, 0], [243, 233, 51, 128], [0, 100, 255, 255], [0, 100, 255, 255], [63, 255, 0, 128], [243, 233, 51, 128],
 125     [0, 100, 255, 255], [0, 100, 255, 255], [0, 100, 255, 255], [81, 169, 81, 128], [0, 0, 0, 0], [0, 100, 255, 255],
 126     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 127    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
 128     [0, 0, 0, 0], [244, 233, 52, 255], [32, 178, 127, 255], [32, 178, 127, 255], [64, 255, 0, 255], [244, 233, 52, 255],
 129     [122, 167, 153, 255], [96, 146, 223, 255], [96, 146, 223, 255], [82, 169, 82, 255], [0, 0, 0, 0], [0, 100, 255, 127],
 130     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
 131    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
 132     [0, 0, 0, 0], [243, 233, 51, 128], [21, 152, 169, 191], [21, 152, 169, 191], [63, 255, 0, 128], [243, 233, 51, 128],
 133     [81, 144, 186, 191], [64, 130, 233, 191], [64, 130, 233, 191], [81, 169, 81, 128], [0, 0, 0, 0], [0, 100, 255, 127],
 134     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
 135   // destination-in
 136   [[[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 137     [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0],
 138     [0, 100, 255, 255], [0, 100, 255, 255], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 139     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 140    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 141     [0, 0, 0, 0], [0, 0, 0, 0], [0, 99, 255, 128], [0, 99, 255, 128], [0, 0, 0, 0], [0, 0, 0, 0],
 142     [0, 99, 255, 128], [0, 99, 255, 128], [0, 99, 255, 128], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 143     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 144    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 145     [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0],
 146     [0, 100, 255, 127], [0, 100, 255, 127], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 147     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
 148    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 149     [0, 0, 0, 0], [0, 0, 0, 0], [0, 101, 255, 63], [0, 101, 255, 63], [0, 0, 0, 0], [0, 0, 0, 0],
 150     [0, 101, 255, 63], [0, 101, 255, 63], [0, 101, 255, 63], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 151     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
 152   // destination-out
 153   [[[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
 154     [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 155     [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255],
 156     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 157    [[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
 158     [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0],
 159     [0, 100, 255, 127], [0, 100, 255, 127], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255],
 160     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 161    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
 162     [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 163     [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127],
 164     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
 165    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
 166     [0, 0, 0, 0], [0, 0, 0, 0], [0, 101, 255, 63], [0, 101, 255, 63], [0, 0, 0, 0], [0, 0, 0, 0],
 167     [0, 101, 255, 63], [0, 101, 255, 63], [0, 101, 255, 63], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127],
 168     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
 169   // destination-atop
 170   [[[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 171     [0, 0, 0, 0], [244, 233, 52, 255], [0, 100, 255, 255], [0, 100, 255, 255], [64, 255, 0, 255], [244, 233, 52, 255],
 172     [0, 100, 255, 255], [0, 100, 255, 255], [0, 100, 255, 255], [82, 169, 82, 255], [0, 0, 0, 0], [0, 0, 0, 0],
 173     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 174    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 175     [0, 0, 0, 0], [243, 233, 51, 128], [0, 99, 255, 128], [0, 99, 255, 128], [63, 255, 0, 128], [243, 233, 51, 128],
 176     [0, 99, 255, 128], [0, 99, 255, 128], [0, 99, 255, 128], [81, 169, 81, 128], [0, 0, 0, 0], [0, 0, 0, 0],
 177     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 178    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 179     [0, 0, 0, 0], [244, 233, 52, 255], [32, 178, 127, 255], [32, 178, 127, 255], [64, 255, 0, 255], [244, 233, 52, 255],
 180     [122, 167, 153, 255], [96, 146, 223, 255], [96, 146, 223, 255], [82, 169, 82, 255], [0, 0, 0, 0], [0, 0, 0, 0],
 181     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
 182    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 183     [0, 0, 0, 0], [243, 233, 51, 128], [31, 177, 127, 128], [31, 177, 127, 128], [63, 255, 0, 128], [243, 233, 51, 128],
 184     [121, 167, 153, 128], [95, 145, 223, 128], [95, 145, 223, 128], [81, 169, 81, 128], [0, 0, 0, 0], [0, 0, 0, 0],
 185     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
 186   // lighter
 187   [[[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
 188     [0, 0, 0, 0], [244, 233, 52, 255], [64, 255, 255, 255], [64, 255, 255, 255], [64, 255, 0, 255], [244, 233, 52, 255],
 189     [244, 255, 255, 255], [191, 255, 255, 255], [191, 255, 255, 255], [82, 169, 82, 255], [0, 0, 0, 0], [0, 100, 255, 255],
 190     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 191    [[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
 192     [0, 0, 0, 0], [243, 233, 51, 128], [32, 228, 255, 255], [32, 228, 255, 255], [63, 255, 0, 128], [243, 233, 51, 128],
 193     [122, 217, 255, 255], [96, 196, 255, 255], [96, 196, 255, 255], [81, 169, 81, 128], [0, 0, 0, 0], [0, 100, 255, 255],
 194     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 195    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
 196     [0, 0, 0, 0], [244, 233, 52, 255], [64, 255, 127, 255], [64, 255, 127, 255], [64, 255, 0, 255], [244, 233, 52, 255],
 197     [244, 255, 179, 255], [191, 241, 255, 255], [191, 241, 255, 255], [82, 169, 82, 255], [0, 0, 0, 0], [0, 100, 255, 127],
 198     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
 199    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
 200     [0, 0, 0, 0], [243, 233, 51, 128], [32, 178, 127, 255], [32, 178, 127, 255], [63, 255, 0, 128], [243, 233, 51, 128],
 201     [122, 167, 153, 255], [96, 146, 223, 255], [96, 146, 223, 255], [81, 169, 81, 128], [0, 0, 0, 0], [0, 100, 255, 127],
 202     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
 203   // copy
 204   [[[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 205     [0, 0, 0, 0], [244, 233, 52, 255], [64, 255, 0, 255], [64, 255, 0, 255], [64, 255, 0, 255], [244, 233, 52, 255],
 206     [244, 233, 52, 255], [191, 191, 191, 255], [191, 191, 191, 255], [82, 169, 82, 255], [0, 0, 0, 0], [0, 0, 0, 0],
 207     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 208    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 209     [0, 0, 0, 0], [243, 233, 51, 128], [63, 255, 0, 128], [63, 255, 0, 128], [63, 255, 0, 128], [243, 233, 51, 128],
 210     [243, 233, 51, 128], [191, 191, 191, 128], [191, 191, 191, 128], [81, 169, 81, 128], [0, 0, 0, 0], [0, 0, 0, 0],
 211     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 212    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 213     [0, 0, 0, 0], [244, 233, 52, 255], [64, 255, 0, 255], [64, 255, 0, 255], [64, 255, 0, 255], [244, 233, 52, 255],
 214     [244, 233, 52, 255], [191, 191, 191, 255], [191, 191, 191, 255], [82, 169, 82, 255], [0, 0, 0, 0], [0, 0, 0, 0],
 215     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
 216    [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0],
 217     [0, 0, 0, 0], [243, 233, 51, 128], [63, 255, 0, 128], [63, 255, 0, 128], [63, 255, 0, 128], [243, 233, 51, 128],
 218     [243, 233, 51, 128], [191, 191, 191, 128], [191, 191, 191, 128], [81, 169, 81, 128], [0, 0, 0, 0], [0, 0, 0, 0],
 219     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
 220   // xor
 221   [[[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
 222     [0, 0, 0, 0], [244, 233, 52, 255], [0, 0, 0, 0], [0, 0, 0, 0], [64, 255, 0, 255], [244, 233, 52, 255],
 223     [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [82, 169, 82, 255], [0, 0, 0, 0], [0, 100, 255, 255],
 224     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 225    [[0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 100, 255, 255],
 226     [0, 0, 0, 0], [243, 233, 51, 128], [0, 100, 255, 127], [0, 100, 255, 127], [63, 255, 0, 128], [243, 233, 51, 128],
 227     [0, 100, 255, 127], [0, 100, 255, 127], [0, 100, 255, 127], [81, 169, 81, 128], [0, 0, 0, 0], [0, 100, 255, 255],
 228     [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 255], [0, 0, 0, 0]],
 229    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
 230     [0, 0, 0, 0], [244, 233, 52, 255], [63, 255, 0, 128], [63, 255, 0, 128], [64, 255, 0, 255], [244, 233, 52, 255],
 231     [243, 233, 51, 128], [191, 191, 191, 128], [191, 191, 191, 128], [82, 169, 82, 255], [0, 0, 0, 0], [0, 100, 255, 127],
 232     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]],
 233    [[0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 100, 255, 127],
 234     [0, 0, 0, 0], [243, 233, 51, 128], [32, 178, 126, 127], [32, 178, 126, 127], [63, 255, 0, 128], [243, 233, 51, 128],
 235     [122, 168, 152, 127], [96, 146, 222, 127], [96, 146, 222, 127], [81, 169, 81, 128], [0, 0, 0, 0], [0, 100, 255, 127],
 236     [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0], [0, 0, 0, 0], [0, 100, 255, 127], [0, 0, 0, 0]]],
 237 ]
 238
 239 function createOutputTable() {
 240   var tableEl = document.getElementById('outputtable');
 241   var row = tableEl.insertRow(-1);
 242   var cell = row.insertCell(-1);
 243   var label;
 244   for (var j = 0; j < testNames.length; j++) {
 245     cell = row.insertCell(-1);
 246     label = document.createTextNode(testNames[j]);
 247     cell.appendChild(label);
 248   }
 249   for (var i = 0; i < compositeTypes.length; i++) {
 250     row = tableEl.insertRow(-1);
 251     cell = row.insertCell(-1);
 252     label = document.createTextNode(compositeTypes[i]);
 253     cell.appendChild(label);
 254     for (var j = 0; j < testNames.length; j++) {
 255       var canvas = document.createElement('canvas');
 256       canvas.width = 130;
 257       canvas.height = 40;
 258       canvas.id = compositeTypes[i] + testNames[j];
 259       cell = row.insertCell(-1);
 260       cell.appendChild(canvas);
 261     }
 262   }
 263 }
 264
 265 function getContext(compositeIndex, testIndex) {
 266   var id = compositeTypes[compositeIndex] + testNames[testIndex];
 267   var context = document.getElementById(id).getContext('2d');
 268   return context;
 269 }
 270
 271 function setupContext(context, alpha) {
 272   if (alpha) {
 273     context.fillStyle = 'rgba(00,100,255,0.5)';
 274   } else {
 275     context.fillStyle = 'rgba(00,100,255,1)';
 276   }
 277   context.fillRect(5, 5, 120, 30);
 278   context.beginPath();
 279   context.moveTo(0, 0);
 280   context.lineTo(0, 45);
 281   context.lineTo(80, 45);
 282   context.lineTo(80, 0);
 283   context.clip();
 284   context.translate(40, -10);
 285   context.scale(0.4, 0.6);
 286   context.rotate(Math.PI / 8);
 287   context.translate(-10, -10);
 288 }
 289
 290 function addOutput(element, style, innerHTML) {
 291   var outputDiv = document.getElementById('output');
 292   var outputEl = document.createElement(element);
 293   if (style)
 294       outputEl.setAttribute('class', style);
 295   outputEl.innerHTML = innerHTML;
 296   outputDiv.appendChild(outputEl);
 297 }
 298
 299 function addExpectedOutput(context, x, y, actualColor, addBreak, addOpening, addClosing) {
 300   var errorString = '[' + actualColor[0] + ', ' + actualColor[1] + ', ' + actualColor[2] + ', ' + actualColor[3] + ']';
 301   if (addOpening)
 302     errorString = '[' + errorString;
 303   if (addClosing)
 304     errorString = errorString + ']';
 305   errorString = errorString + ', ';
 306   if (addBreak)
 307     errorString = errorString + '<br>';
 308   addOutput('span', '', errorString);
 309 }
 310
 311 function rebaseline(context, compositeIndex, testIndex) {
 312   for (var i = 0; i < testPoints.length; i++) {
 313     var img = context.getImageData(testPoints[i].x, testPoints[i].y, 1, 1).data;
 314     var actualColor = [img[0], img[1], img[2], img[3]];
 315     addExpectedOutput(context, testPoints[i].x, testPoints[i].y, actualColor, !((i+1)%6), i == 0, i == 23);
 316   }
 317 }
 318
 319 function isDifferentColor(actualColor, expectedColor) {
 320     var actualAlpha = actualColor[3];
 321     var expectedAlpha = expectedColor[3];
 322     if (Math.abs(actualAlpha - expectedAlpha) > 3) return true;
 323     // For the value of RGB, we compare the values the users actually see.
 324     if (Math.abs(actualColor[0] * actualAlpha / 256 - expectedColor[0] * expectedAlpha / 256) > 3) return true;
 325     if (Math.abs(actualColor[1] * actualAlpha / 256 - expectedColor[1] * expectedAlpha / 256) > 3) return true;
 326     if (Math.abs(actualColor[2] * actualAlpha / 256 - expectedColor[2] * expectedAlpha / 256) > 3) return true;
 327     return false;
 328 }
 329
 330 function addError(context, x, y, actualColor, expectedColor) {
 331   context.fillStyle = 'rgb(255, 0, 0)';
 332   context.fillRect(x, y, 1, 1);
 333   var errorString = 'Error at (' + x + ', ' + y + '): ';
 334   errorString = errorString + 'Actual color [' + actualColor[0] + ', ' + actualColor[1] + ', ' + actualColor[2] + ', ' + actualColor[3] + ']; ';
 335   errorString = errorString + 'Expected color [' + expectedColor[0] + ', ' + expectedColor[1] + ', ' + expectedColor[2] + ', ' + expectedColor[3] + ']; ';
 336   addOutput('div', 'error', errorString);
 337 }
 338
 339 function checkResult(context, compositeIndex, testIndex) {
 340   var errorCount = 0;
 341   for (var i = 0; i < testPoints.length; i++) {
 342     var img = context.getImageData(testPoints[i].x, testPoints[i].y, 1, 1).data;
 343     var actualColor = [img[0], img[1], img[2], img[3]];
 344     var expectedColor = expectedColors[compositeIndex][testIndex][i];
 345     if (isDifferentColor(actualColor, expectedColor)) {
 346       addError(context, testPoints[i].x, testPoints[i].y, actualColor, expectedColor);
 347       errorCount++;
 348     }
 349   }
 350   if (errorCount)
 351     addOutput('div', 'fail', 'FAIL: ' + errorCount + ' errors.');
 352   else
 353     addOutput('div', 'pass', 'PASS');
 354 }
 355
 356 function runTest() {
 357   setupTest();
 358   createOutputTable();
 359   for (var i = 0; i < compositeTypes.length; i++) {
 360     for (var j = 0; j < testNames.length; j++) {
 361       var context = getContext(i, j);
 362       context.save();
 363       setupContext(context, j % 4 > 1);
 364       drawImage(context, i, j % 2);
 365       context.restore();
 366     }
 367   }
 368   for (var i = 0; i < compositeTypes.length; i++) {
 369     addOutput('h1', '', 'Mode: ' + compositeTypes[i]);
 370     for (var j = 0; j < testNames.length; j++) {
 371       addOutput('h2', '', 'Test: ' + testNames[j]);
 372       var context = getContext(i, j);
 373       checkResult(context, i, j);
 374       //rebaseline(context, i, j);
 375     }
 376   }
 377   if (testRunner)
 378       testRunner.notifyDone();
 379 }