<!DOCTYPE html>
<style>
canvas {
  position: absolute;
  width: 600px;
  height: 500px;
  top: 50px;
  left: 50px;
  /* object-fit and object-position make the content of the canvas not affected
     by the resize in repaintTest(). */  
  object-fit: contain;
  object-position: 0 0;
  background-color: #030;
}
</style>
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.
<canvas id="canvas" width="500" height="500"></canvas>

<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementById('canvas').style.width = '500px';
}
onload = runRepaintAndPixelTest;

var ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.arc(250, 250, 250, 0, 2 * Math.PI);
ctx.fillStyle = 'green';
ctx.fill();
</script>