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

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