| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <style> | |
| 3 canvas { | |
| 4 width: 100px; | |
| 5 height: 100px; | |
| 6 image-rendering: pixelated; | |
| 7 } | |
| 8 img { | |
| 9 width: 100px; | |
| 10 height: 100px; | |
| 11 image-rendering: pixelated; | |
| 12 } | |
| 13 svg { | |
| 14 width: 100px; | |
| 15 height: 100px; | |
| 16 } | |
| 17 image { | |
| 18 image-rendering: pixelated; | |
| 19 } | |
| 20 </style> | |
| 21 <body> | |
| 22 <!-- Since all images are being downscaled, this should look the same with a
nd without "image-rendering: pixelated" --> | |
| 23 <canvas width="512" height="512"></canvas> | |
| 24 <img onload="drawImageToCanvas()" src="resources/radial-lines.png"> | |
| 25 <svg><image width="100" height="100" xlink:href="resources/radial-lines.png"
/></svg> | |
| 26 </body> | |
| 27 <script> | |
| 28 // Ignore the render tree. | |
| 29 if (window.testRunner) | |
| 30 window.testRunner.dumpAsTextWithPixelResults(); | |
| 31 | |
| 32 function drawImageToCanvas() { | |
| 33 var image = document.getElementsByTagName("img")[0]; | |
| 34 var canvas = document.getElementsByTagName("canvas")[0].getContext("2d")
; | |
| 35 canvas.drawImage(image, 0, 0); | |
| 36 } | |
| 37 </script> | |
| OLD | NEW |