canvas-fillPath-pattern-shadowBlur.html

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>
test(function(t) {
  const SHADOW_OFFSET = 15;
  const ALPHA_APPROX = 5;

  var image = new Image();
  image.src = "resources/html5.png";
  image.onload = function() {
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.setAttribute('width', '1000');
    canvas.setAttribute('height', '1000');
    var ctx = canvas.getContext('2d');

    var pattern = ctx.createPattern(image, 'repeat');
    ctx.beginPath();
    ctx.fillStyle = pattern;
    ctx.shadowColor = 'rgba(0,0,0,0.5)';
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = SHADOW_OFFSET;
    ctx.shadowOffsetY = SHADOW_OFFSET;
    ctx.rect(0, 0, image.width, image.height);

    // colored pixels of html5.png starts at 3 pixels inset from the border of
    // the image, they must be taken into account since the shadow is applied
    // to the colored pixels. The blur affects up to 3*sigma, where sigma is
    // 1/2*ctx.shadowBlur. The drop shadow should not affect pixels outside of
    // a square sized to `squareBorder` placed at the origin.
    const squareBorder = (image.width - 3) +
                         SHADOW_OFFSET + 1.5 * ctx.shadowBlur;
    var imgDataBefore = [];
    imgDataBefore.push(ctx.getImageData(25, squareBorder, 1, 1).data)
    for (var i = 25; i < squareBorder; i += 10)
      imgDataBefore.push(ctx.getImageData(squareBorder, i, 1, 1).data)

    ctx.fill();

    var imgDataAfter = [];
    imgDataAfter.push(ctx.getImageData(25, squareBorder, 1, 1).data)
    for (var i = 25; i < squareBorder; i += 10)
      imgDataAfter.push(ctx.getImageData(squareBorder, i, 1, 1).data)

    for (var i = 0; i < imgDataAfter.length; i++) {
      for (var j = 0; j < 3; j++)
        assert_equals(imgDataAfter[i][j], imgDataBefore[i][j]);
      assert_approx_equals(imgDataAfter[i][3], imgDataBefore[i][3], ALPHA_APPROX);
    }
  };
}, 'Test that the drop shadow properly falls off when a rect is drawn by filling with a pattern.');

</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/canvas-fillPath-pattern-shadowBlur.html
