canvas-strokeRect-pattern-shadowBlur.html

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

  // Do not start at (0, 0)
  // otherwise half of the stroke on top left will be hidden
  var POSITION = 20;
  var SIDE_LENGTH = 100;

  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.strokeStyle = pattern;
    ctx.lineWidth = STROKE_WIDTH;
    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 = (POSITION + SIDE_LENGTH + STROKE_WIDTH / 2 - 3) +
                         SHADOW_OFFSET + 1.5 * ctx.shadowBlur;
    var imgDataBefore = [];
    for (var i = 25; i < squareBorder; i += 10)
      imgDataBefore.push(ctx.getImageData(squareBorder, i, 1, 1).data)

    ctx.strokeRect(POSITION, POSITION, SIDE_LENGTH, SIDE_LENGTH);

    var imgDataAfter = [];
    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 a rect is stroked with a pattern.');

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