third_party/WebKit/LayoutTests/fast/repaint/canvas-resize-no-full-invalidation.html

   1 <!DOCTYPE html>
   2 <style>
   3 canvas {
   4   position: absolute;
   5   width: 600px;
   6   height: 500px;
   7   top: 50px;
   8   left: 50px;
   9   /* object-fit and object-position make the content of the canvas not affected
  10      by the resize in repaintTest(). */
  11   object-fit: contain;
  12   object-position: 0 0;
  13   background-color: #030;
  14 }
  15 </style>
  16 Tests paint invalidation of canvas when it's resized which doesn't affect its contents. Passes if there is only incremental invalidation for the resized background.
  17 <canvas id="canvas" width="500" height="500"></canvas>
  18
  19 <script src="resources/text-based-repaint.js"></script>
  20 <script>
  21 function repaintTest() {
  22   document.getElementById('canvas').style.width = '500px';
  23 }
  24 onload = runRepaintTest;
  25
  26 var ctx = document.getElementById('canvas').getContext('2d');
  27 ctx.beginPath();
  28 ctx.arc(250, 250, 250, 0, 2 * Math.PI);
  29 ctx.fillStyle = 'green';
  30 ctx.fill();
  31 </script>