canvas-resize-no-full-invalidation.html 893 B

12345678910111213141516171819202122232425262728293031
  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. <script src="resources/text-based-repaint.js"></script>
  19. <script>
  20. function repaintTest() {
  21. document.getElementById('canvas').style.width = '500px';
  22. }
  23. onload = runRepaintAndPixelTest;
  24. var ctx = document.getElementById('canvas').getContext('2d');
  25. ctx.beginPath();
  26. ctx.arc(250, 250, 250, 0, 2 * Math.PI);
  27. ctx.fillStyle = 'green';
  28. ctx.fill();
  29. </script>