| <!DOCTYPE html> |
| <style> |
| img { |
| display: none; |
| } |
| canvas { |
| width: 100px; |
| height: 100px; |
| image-rendering: pixelated; |
| } |
| </style> |
| <body> |
| <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII="> |
| <!-- Test that drawing a pixelated canvas with another pixelated canvas as source works. --> |
| <!-- Both canvases should be upscaled without blurring. --> |
| <canvas class="canvas0" width="4" height="4"></canvas> |
| <canvas class="canvas1" width="4" height="4"></canvas> |
| </body> |
| <script> |
| // Ignore the render tree. |
| if (window.testRunner) |
| window.testRunner.dumpAsTextWithPixelResults(); |
| |
| function drawToCanvas(canvas) { |
| var ctx = canvas.getContext("2d") |
| ctx.drawImage(document.getElementsByTagName("img")[0], 1, 1); |
| } |
| |
| function draw() { |
| var canvas0 = document.getElementsByTagName("canvas")[0]; |
| var canvas1 = document.getElementsByTagName("canvas")[1]; |
| drawToCanvas(canvas0); |
| canvas1.getContext("2d").drawImage(canvas0, 0, 0); |
| } |
| window.onload = draw; |
| </script> |
