OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 img { |
| 4 display: none; |
| 5 } |
| 6 canvas { |
| 7 width: 100px; |
| 8 height: 100px; |
| 9 image-rendering: pixelated; |
| 10 } |
| 11 </style> |
| 12 <body> |
| 13 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0k
AAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII="> |
| 14 <!-- Test that resizing a pixelated canvas works. --> |
| 15 <!-- The canvas should be upscaled without blurring. --> |
| 16 <canvas width="4" height="4"></canvas> |
| 17 </body> |
| 18 <script> |
| 19 // Ignore the render tree. |
| 20 if (window.testRunner) |
| 21 window.testRunner.dumpAsTextWithPixelResults(); |
| 22 |
| 23 function drawToCanvas(canvas) { |
| 24 var ctx = canvas.getContext("2d") |
| 25 ctx.drawImage(document.getElementsByTagName("img")[0], 1, 1); |
| 26 } |
| 27 |
| 28 function draw() { |
| 29 var canvas = document.getElementsByTagName("canvas")[0]; |
| 30 drawToCanvas(canvas); |
| 31 // Resize so that the image buffer is reset. |
| 32 canvas.width = 5; |
| 33 canvas.style.width = "201px"; |
| 34 drawToCanvas(canvas); |
| 35 } |
| 36 window.onload = draw; |
| 37 </script> |
OLD | NEW |