third_party/WebKit/LayoutTests/fast/canvas/canvas-shadow-source-in.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Check shadow rendering rect and image with source-in.</title>
   5 <style type="text/css">
   6   canvas { border: 1px solid #999; }
   7   #source-canvas { display: none; }
   8 </style>
   9 </head>
  10 <body>
  11 <div>Test Rect</div>
  12 <canvas id="canvas-for-color" width="200" height="200"></canvas>
  13 <div>Test Image</div>
  14 <canvas id="canvas-for-image" width="200" height="200"></canvas>
  15 <canvas id="source-canvas" width="100" height="100"></canvas>
  16 <script>
  17   var canvas_color = document.getElementById("canvas-for-color");
  18   var ctx_color = canvas_color.getContext("2d");
  19   setupContext(ctx_color);
  20   ctx_color.fillStyle = 'teal';
  21   ctx_color.fillRect(100, 100, 100, 100);
  22
  23   var source_canvas = document.getElementById('source-canvas');
  24   var source_ctx = source_canvas.getContext('2d');
  25   source_ctx.fillStyle = 'teal';
  26   source_ctx.fillRect(0, 0, 100, 100);
  27
  28   var canvas_image = document.getElementById("canvas-for-image");
  29   var ctx_image = canvas_image.getContext("2d");
  30   setupContext(ctx_image);
  31   ctx_image.drawImage(source_canvas, 100, 100, 100, 100);
  32
  33   function setupContext(ctx) {
  34     ctx.globalCompositeOperation = 'source-over';
  35     ctx.fillStyle = 'black';
  36     ctx.fillRect(50, 50, 200, 100);
  37     ctx.globalCompositeOperation = 'source-in';
  38     ctx.shadowColor = 'blue';
  39     ctx.shadowBlur = 10;
  40     ctx.shadowOffsetX = -10;
  41     ctx.shadowOffsetY = -10;
  42   }
  43 </script>
  44 </body>
  45 </html>