<!DOCTYPE html>
<link rel="match" href="canvas-filter-shadow-and-properties-expected.html"/>
<body>
  <canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
  /*
  The expected behavior when both shadow properties and filters are used at the
  same time is that the filter is applied to the elements drawn and the shadow
  properties create another shadow that includes even shadows of the
   filter-generated shadows.
  */
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.shadowColor = 'cyan';
  ctx.shadowOffsetX = 20;
  ctx.shadowOffsetY = 20;
  ctx.filter = 'drop-shadow(10px 10px 0 red)';
  ctx.fillRect(10, 10, 50, 50);
</script>
