third_party/WebKit/LayoutTests/compositing/canvas-with-object-fit-contain-in-composited-layer-expected.html

   1 <!DOCTYPE html>
   2 <style>
   3 canvas {
   4   background-color: gray;
   5   width: 200px;
   6   height: 200px;
   7 }
   8 </style>
   9 <p>Test passes if a green square inside an orange rectanlge is shown up without a distortion.
  10 <div>
  11   <canvas width='200' height='200'></canvas>
  12 </div>
  13 <script>
  14 function paintCanvas(canvas)
  15 {
  16   var ctx = canvas.getContext('2d');
  17   ctx.fillStyle = 'orange';
  18
  19   ctx.save();
  20   ctx.beginPath();
  21   ctx.rect(50, 0, 100, 200);
  22   ctx.clip();
  23   ctx.fillRect(0, 0, 200, 200);
  24   ctx.restore();
  25
  26   ctx.fillStyle = 'green';
  27   ctx.fillRect(75, 75, 50, 50);
  28 }
  29
  30 paintCanvas(document.querySelector('canvas'));
  31 </script>