third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-blend-solid.js

   1 description("Series of tests to ensure correct results on applying different blend modes.");
   2
   3 var tmpimg = document.createElement('canvas');
   4 tmpimg.width = 200;
   5 tmpimg.height = 200;
   6 ctx = tmpimg.getContext('2d');
   7
   8 // Create the image for blending test with images.
   9 var img = document.createElement('canvas');
  10 img.width = 200;
  11 img.height = 200;
  12 var imgCtx = img.getContext('2d');
  13 imgCtx.fillStyle = "red";
  14 imgCtx.fillRect(0,0,100,100);
  15 imgCtx.fillStyle = "yellow";
  16 imgCtx.fillRect(100,0,100,100);
  17 imgCtx.fillStyle = "green";
  18 imgCtx.fillRect(100,100,100,100);
  19 imgCtx.fillStyle = "blue";
  20 imgCtx.fillRect(0,100,100,100);
  21
  22
  23 // Create expected results.
  24 var blendModes =
  25 // [blendMode, expectations solid on solid, expectations solid on alpha, expectations alpha on solid, expectations alpha on alpha]
  26 [
  27   ['source-over',
  28          [[255, 0, 0, 255],[255, 255, 0, 255],[0, 128, 0, 255],[0, 0, 255, 255]],
  29          [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255]],
  30          [[255, 0, 0, 255],[255, 255, 0, 255],[0, 128, 0, 255],[0, 0, 255, 255]],
  31          [[171, 0, 84, 191],[171, 171, 84, 191],[0, 85, 84, 191],[0, 0, 255, 191]]
  32   ],
  33   ['multiply',
  34          [[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 255, 255]],
  35          [[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 255, 255]],
  36          [[128, 0, 0, 255],[128, 128, 0, 255],[0, 64, 0, 255],[0, 0, 255, 255]],
  37          [[85, 0, 84, 191],[85, 85, 84, 191],[0, 43, 84, 191],[0, 0, 255, 191]]
  38   ],
  39   ['screen',
  40          [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 255, 255]],
  41          [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 255, 255]],
  42          [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 255, 255]],
  43          [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 255, 191]]
  44   ],
  45   ['overlay',
  46          [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
  47          [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
  48          [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255]],
  49          [[85, 0, 170, 191],[85, 85, 170, 191],[0, 43, 170, 191],[0, 0, 255, 191]]
  50   ],
  51   ['darken',
  52          [[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 0, 255],[0, 0, 255, 255]],
  53          [[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 127, 255],[0, 0, 255, 255]],
  54          [[128, 0, 0, 255],[128, 128, 0, 255],[0, 64, 0, 255],[0, 0, 255, 255]],
  55          [[85, 0, 84, 191],[85, 85, 84, 191],[0, 43, 84, 191],[0, 0, 255, 191]]
  56   ],
  57   ['lighten',
  58          [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 255, 255]],
  59          [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 255, 255]],
  60          [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 255, 255]],
  61          [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 255, 191]]
  62   ],
  63   ['color-dodge',
  64          [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
  65          [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
  66          [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255]],
  67          [[85, 0, 170, 191],[85, 85, 170, 191],[0, 43, 170, 191],[0, 0, 255, 191]]
  68   ],
  69   ['color-burn',
  70          [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
  71          [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
  72          [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255]],
  73          [[85, 0, 170, 191],[85, 85, 170, 191],[0, 42, 170, 191],[0, 0, 255, 191]]
  74
  75   ],
  76   ['hard-light',
  77          [[255, 0, 0, 255],[255, 255, 0, 255],[0, 1, 0, 255],[0, 0, 255, 255]],
  78          [[128, 0, 127, 255],[128, 128, 127, 255],[0, 0, 127, 255],[0, 0, 255, 255]],
  79          [[255, 0, 0, 255],[255, 255, 0, 255],[0, 65, 0, 255],[0, 0, 255, 255]],
  80          [[171, 0, 84, 191],[171, 171, 84, 191],[0, 43, 84, 191],[0, 0, 255, 191]]
  81   ],
  82   ['soft-light',
  83          [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
  84          [[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255],[0, 0, 255, 255]],
  85          [[128, 0, 127, 255],[128, 128, 127, 255],[0, 64, 127, 255],[0, 0, 255, 255]],
  86          [[85, 0, 170, 191],[85, 85, 170, 191],[0, 43, 170, 191],[0, 0, 255, 191]]
  87   ],
  88   ['difference',
  89          [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 0, 255]],
  90          [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 127, 255]],
  91          [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 128, 255]],
  92          [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 171, 191]]
  93   ],
  94   ['exclusion',
  95          [[255, 0, 255, 255],[255, 255, 255, 255],[0, 128, 255, 255],[0, 0, 0, 255]],
  96          [[128, 0, 255, 255],[128, 128, 255, 255],[0, 64, 255, 255],[0, 0, 127, 255]],
  97          [[255, 0, 127, 255],[255, 255, 127, 255],[0, 128, 127, 255],[0, 0, 128, 255]],
  98          [[171, 0, 170, 191],[171, 171, 170, 191],[0, 85, 170, 191],[0, 0, 171, 191]]
  99   ],
 100   ['hue',
 101          [[93, 0, 0, 255],[31, 31, 0, 255],[0, 46, 0, 255],[0, 0, 255, 255]],
 102          [[49, 0, 127, 255],[16, 16, 127, 255],[0, 25, 127, 255],[0, 0, 255, 255]],
 103          [[175, 0, 0, 255],[144, 144, 0, 255],[0, 88, 0, 255],[0, 0, 255, 255]],
 104          [[116, 0, 84, 191],[96, 96, 84, 191],[0, 58, 84, 191],[0, 0, 255, 191]]
 105   ],
 106   ['saturation',
 107          [[0, 0, 255, 255],[0, 0, 255, 255],[14, 14, 142, 255],[0, 0, 255, 255]],
 108          [[0, 0, 255, 255],[0, 0, 255, 255],[7, 7, 198, 255],[0, 0, 255, 255]],
 109          [[128, 0, 127, 255],[128, 128, 127, 255],[7, 71, 70, 255],[0, 0, 255, 255]],
 110          [[85, 0, 167, 191],[85, 85, 167, 191],[0, 48, 130, 191],[0, 0, 255, 191]]
 111   ],
 112   ['color',
 113          [[93, 0, 0, 255],[31, 31, 0, 255],[0, 47, 0, 255],[0, 0, 255, 255]],
 114          [[49, 0, 127, 255],[16, 16, 127, 255],[0, 24, 127, 255],[0, 0, 255, 255]],
 115          [[175, 0, 0, 255],[144, 144, 0, 255],[0, 88, 0, 255],[0, 0, 255, 255]],
 116          [[116, 0, 84, 191],[96, 96, 84, 191],[0, 58, 84, 191],[0, 0, 255, 191]]
 117   ],
 118   ['luminosity',
 119          [[55, 55, 255, 255],[224, 224, 255, 255],[54, 54, 255, 255],[0, 0, 255, 255]],
 120          [[28, 28, 255, 255],[112, 112, 255, 255],[27, 27, 255, 255],[0, 0, 255, 255]],
 121          [[155, 27, 127, 255],[239, 239, 127, 255],[26, 90, 127, 255],[0, 0, 255, 255]],
 122          [[104, 19, 167, 191],[158, 158, 167, 191],[16, 58, 167, 191],[0, 0, 255, 191]]
 123   ]];
 124
 125 // [Scenario, alpha on background, alpha on foreground]
 126 var testScenario = [
 127   ['solid on solid', 1, 1],
 128   ['solid on alpha', 1, 0.5],
 129   ['alpha on solid', 0.5, 1],
 130   ['alpha on alpha', 0.5, 0.5]
 131 ];
 132
 133 testPoints = [{x: 50, y: 50}, {x: 150, y: 50}, {x: 150, y: 150}, {x: 50, y: 150}];
 134
 135 function pixelDataAtPoint(i, blend)
 136 {
 137   return ctx.getImageData(testPoints[i].x, testPoints[i].y , 1, 1).data;
 138 }
 139
 140 function checkBlendModeResult(blendMode, testScenario, expectedColors, sigma) {
 141   debug(testScenario);
 142   for (var i = 0; i < testPoints.length; i++) {
 143     var resultColor = "pixelDataAtPoint(" + i + ")";
 144     shouldBeCloseTo(resultColor +"[0]", expectedColors[i][0], sigma);
 145     shouldBeCloseTo(resultColor +"[1]", expectedColors[i][1], sigma);
 146     shouldBeCloseTo(resultColor +"[2]", expectedColors[i][2], sigma);
 147     shouldBeCloseTo(resultColor +"[3]", expectedColors[i][3], sigma);
 148     }
 149 }
 150
 151 // Execute test.
 152 function prepareTestScenario(sigma) {
 153   // Check each blend mode individually.
 154   for (var i = 0; i < blendModes.length; i++) {
 155         debug('Testing blend mode "' + blendModes[i][0] + '"');
 156         for (var j = 0; j < testScenario.length; j++) {
 157           ctx.globalCompositeOperation = 'clear';
 158           ctx.fillRect(0,0,200,200);
 159           ctx.globalCompositeOperation = 'source-over';
 160           ctx.save();
 161
 162           // Draw backdrop.
 163           ctx.fillStyle = 'rgba(0, 0, 255, ' + testScenario[j][1] + ')';
 164           ctx.fillRect(0,0,200,200);
 165
 166           // Apply blend mode.
 167           ctx.globalCompositeOperation = blendModes[i][0];
 168           ctx.globalAlpha = testScenario[j][2];
 169           ctx.fillStyle = "red";
 170           ctx.fillRect(0,0,100,100);
 171           ctx.fillStyle = "yellow";
 172           ctx.fillRect(100,0,100,100);
 173           ctx.fillStyle = "green";
 174           ctx.fillRect(100,100,100,100);
 175           ctx.fillStyle = "blue";
 176           ctx.fillRect(0,100,100,100);
 177           ctx.restore();
 178
 179           checkBlendModeResult(blendModes[i][0], testScenario[j][0], blendModes[i][j+1], sigma);
 180           ctx.restore();
 181           }
 182         debug('');
 183   }
 184 }
 185
 186 // Run test and allow variation of results.
 187 prepareTestScenario(5);