canvas-fillRect-pattern-shadowBlur.html

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

  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;

    // 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.fillRect(0, 0, image.width, image.height);

    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++)
      assert_array_equals(imgDataAfter[i], imgDataBefore[i]);
  };
}, 'Test that the drop shadow properly falls off when fillRect is drawn with a pattern.');

</script>
</blur>
chromium/third_party/blink/web_tests/fast/canvas/canvas-fillRect-pattern-shadowBlur.html
