| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #img { |
| image-rendering: -webkit-crisp-edges; |
| } |
| </style> |
| </head> |
| <body> |
| <pre id=console></pre> |
| <!-- The resulting image should be 100x100, consisting of 4 50x50 blocks of solid color, with no blurring of edges --> |
| <image id=img height=100 width=100 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII="></image> |
| <script> |
| var img = document.getElementById('img'); |
| var console = document.getElementById('console'); |
| var imageRendering = window.getComputedStyle(img).getPropertyValue('image-rendering'); |
| console.innerText = 'image-rendering: ' + imageRendering; |
| </script> |
| </body> |
| </html> |
