chromium/src/third_party/blink/web_tests/fast/canvas/canvas-createImageBitmap-colorClamping.html

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>

function checkPixels(ctx, coordinates, color) {
	for (i = 0; i < coordinates.length; i++) {
		var pixel = ctx.getImageData(coordinates[i][0], coordinates[i][1], 1, 1).data;
    var message = "Pixel at " + coordinates[i] + " must be " + color;
		assert_array_equals(pixel, color, message);
	}
}

function checkLines(ctx, lines, areVertical, color) {
  var pixels;
  for (l = 0; l < lines.length; l++) {
    line = lines[l];
    if (areVertical)
      pixels = ctx.getImageData(line[0], line[1], 1, line[2]).data;
    else
      pixels = ctx.getImageData(line[0], line[1], line[2], 1).data;
    for (i = 0; i < line[2]; i++) {
      var pixel = pixels.slice(i * 4, i * 4 + 4);
      var message = "Pixel #" + i + " must be " + color;
      assert_array_equals(pixel, color, message);
    }
  }
}

async_test(function(t) {
  var aCanvas = document.createElement("canvas");
  aCanvas.setAttribute("width", "300");
  aCanvas.setAttribute("height", "300");
  var aCtx = aCanvas.getContext("2d");
  aCtx.fillStyle = 'red';
  aCtx.fillRect(0, 0, 300, 300);
  aCtx.fillStyle = 'green';
  aCtx.fillRect(100, 100, 100, 100);

  var canvas = document.createElement("canvas");
  canvas.setAttribute("width", "350");
  canvas.setAttribute("height", "200");
  var ctx = canvas.getContext("2d");

  var greenPixels = [[10, 10], [10,109], [109,10], [109,109],
                     [150, 10], [150,159], [299,10], [299,159]];
  // x, y, length
  var noBleedingHorizontalLines = [[9, 9, 102], [9, 110, 102],
                                   [149, 9, 152], [149, 160, 152]];
  var noBleedingVerticalLines = [[9, 9, 100], [110, 9, 100],
                                 [149, 9, 152], [300, 9, 152]];

  createImageBitmap(aCanvas, 100, 100, 100, 100).then(t.step_func_done(function(imageBitmap) {
      ctx.drawImage(imageBitmap, 10, 10);
      ctx.drawImage(imageBitmap, 150, 10, 150, 150);
      checkPixels(ctx, greenPixels, [0, 128, 0, 255]);
      checkLines(ctx, noBleedingHorizontalLines, false, [0, 0, 0, 0]);
      checkLines(ctx, noBleedingVerticalLines, true, [0, 0, 0, 0]);
      t.done();
  }));
}, "Two green squares with no color bleeding should be visible.");
</script>