| <!DOCTYPE html> |
| <style> |
| canvas { |
| width: 10px; |
| height: 10px; |
| image-rendering: pixelated; |
| } |
| img { |
| width: 10px; |
| height: 10px; |
| image-rendering: pixelated; |
| } |
| svg { |
| width: 10px; |
| height: 10px; |
| } |
| image { |
| image-rendering: pixelated; |
| } |
| </style> |
| <body> |
| <!-- The output should be checkerboards all 20x20 with sharp 2x2 blocks and no blurring. --> |
| <!-- FIXME: this test is a little too small to visually inspect for blurring. Should we make the test larger and more accessible? --> |
| <canvas width="10" height="10"></canvas> |
| <img src="resources/pixelated-hdpi.png"> |
| <svg><image width="10" height="10" xlink:href="resources/pixelated-hdpi.png"/></svg> |
| </body> |
| <script> |
| function drawImageToCanvas() { |
| var image = document.getElementsByTagName("img")[0]; |
| var canvas = document.getElementsByTagName("canvas")[0].getContext("2d"); |
| canvas.drawImage(image, 0, 0); |
| } |
| |
| function runTest() { |
| if (!window.testRunner) |
| return; |
| |
| testRunner.waitUntilDone(); |
| testRunner.setBackingScaleFactor(2, function () { |
| drawImageToCanvas(); |
| testRunner.notifyDone(); |
| }); |
| } |
| |
| window.onload = runTest; |
| </script> |
