canvas-2d-clip-anti-aliasing.html | Explore in Territory

<!DOCTYPE html>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;"></canvas>

<script>

test(function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  ctx.beginPath();
  ctx.moveTo(120, 20);
  ctx.lineTo(220, 120);
  ctx.lineTo(120, 220);
  ctx.lineTo(20, 120);
  ctx.lineTo(120, 20);
  ctx.closePath();
  ctx.clip();

  ctx.lineWidth = 1;
  ctx.strokeStyle="#FF0000";
  ctx.stroke();

  // Verifies that a stroke inside a clip of the same path displays correctly. 
  // Some sides of the shape may be clipped-out if stroking is anti-aliased 
  // but not clipping, or if clipping it is not properly aligned.
  // We check pixels located on the vertices and in the middle of each edge.
  var pixels = [ [120, 20], [170, 70], [220, 120], [170, 170],
                 [120, 220], [70, 170], [20, 120], [70, 70] ];

  // There can be false alarms if we look at the exact points (specially the
  // vertices) as the anti-aliasing algorithm may find it enough to draw some
  // surrounding points. Therefore, we look at a 3x3 rectangle surrounding
  // each point.
  for(i = 0; i < 8; i++) {
    var pixelDrawn = false;
    for(j = -1; j <=1; j++) {
      for(k = -1; k <=1; k++) { 
        var colorData = ctx.getImageData(pixels[i][0] + j, pixels[i][1] + k, 1, 1).data;
        if(colorData[0] == 255 && colorData[3] > 0) {
          pixelDrawn = true;
        }
      }
    }

    assert_equals(pixelDrawn, true);
  }

}, 'This test verifies that stroke inside a clip of the same path displays correctly.');

</script>
chromium/third_party/blink/web_tests/fast/canvas/canvas-2d-clip-anti-aliasing.html
