canvas-shadow-source-in.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<title>Check shadow rendering rect and image with source-in.</title>
<style type="text/css">
  canvas { border: 1px solid #999; }
  #source-canvas { display: none; }
</style>
</head>
<body>
<div>Test Rect</div>
<canvas id="canvas-for-color" width="200" height="200"></canvas>
<div>Test Image</div>
<canvas id="canvas-for-image" width="200" height="200"></canvas>
<canvas id="source-canvas" width="100" height="100"></canvas>
<script>
  var canvas_color = document.getElementById("canvas-for-color");
  var ctx_color = canvas_color.getContext("2d");
  setupContext(ctx_color);
  ctx_color.fillStyle = 'teal';
  ctx_color.fillRect(100, 100, 100, 100);

  var source_canvas = document.getElementById('source-canvas');
  var source_ctx = source_canvas.getContext('2d');
  source_ctx.fillStyle = 'teal';
  source_ctx.fillRect(0, 0, 100, 100);

  var canvas_image = document.getElementById("canvas-for-image");
  var ctx_image = canvas_image.getContext("2d");
  setupContext(ctx_image);
  ctx_image.drawImage(source_canvas, 100, 100, 100, 100);

  function setupContext(ctx) {
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'black';
    ctx.fillRect(50, 50, 200, 100);
    ctx.globalCompositeOperation = 'source-in';
    ctx.shadowColor = 'blue';
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = -10;
    ctx.shadowOffsetY = -10;
  }
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/canvas/canvas-shadow-source-in.html
