<canvas id="c1" width="100" height="100"></canvas>
<canvas id="c2" width="100" height="100"></canvas>
<script>
// This test should show two side-by-side thin circle outlines
// with good visual quality, i.e. no aliasing from image downsampling.
// Both circles should look identical.

if (window.testRunner) {
	testRunner.dumpAsTextWithPixelResults();
	testRunner.waitUntilDone();
}

var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 500;
offscreenCanvas.height = 500;
var offscreenContext = offscreenCanvas.getContext('2d');
offscreenContext.beginPath()
offscreenContext.arc(250, 250, 200, 0, 2 * Math.PI, false);
offscreenContext.lineWidth = 3;
offscreenContext.stroke();

var dstCtx = document.getElementById('c1').getContext('2d');
dstCtx.drawImage(offscreenCanvas, 0, 0, 500, 500, 0, 0, 100, 100);

var srcImage = new Image();
srcImage.src = offscreenCanvas.toDataURL();
srcImage.onload = function() {
	dstCtx = document.getElementById('c2').getContext('2d');
	dstCtx.drawImage(srcImage, 0, 0, 500, 500, 0, 0, 100, 100);
	testRunner.notifyDone();
}
</script>