<!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>