blob: 8f6d0e92fe49e877da70e0adda7ca15ecbde10c8 [file] [log] [blame]
<!DOCTYPE html>
<body>
<p>On success, the square should have the bottom left portion of the base of the green I and red otherwise.</p>
<canvas id="c" class="output" width="100" height="100"><p class="fallback">FAIL (fallback content)</p></canvas>
<div id="console"></div>
<script>
function drawCanvas(ctx) {
ctx.fillStyle = '#f00';
ctx.fillRect(0,0,100,100);
var gradient = ctx.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0, '#0f0');
gradient.addColorStop(1, '#0f0');
ctx.fillStyle = gradient;
ctx.font = "500px Times";
ctx.fillText("I", -5, 100);
}
if (window.testRunner)
testRunner.dumpAsText();
var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
drawCanvas(ctx);
// Check that the letter rendered appropriately
var renderedCorrectly = true;
// Check for a green pixel from the text
var imageData = ctx.getImageData(75,75,1,1);
if (imageData.data[0] != 0) renderedCorrectly = false;
if (imageData.data[1] != 255) renderedCorrectly = false;
if (imageData.data[2] != 0) renderedCorrectly = false;
if (imageData.data[3] != 255) renderedCorrectly = false;
// Check the red pixel outside of text wasn't touched
var imageData = ctx.getImageData(25,25,1,1);
if (imageData.data[0] != 255) renderedCorrectly = false;
if (imageData.data[1] != 0) renderedCorrectly = false;
if (imageData.data[2] != 0) renderedCorrectly = false;
if (imageData.data[3] != 255) renderedCorrectly = false;
if (renderedCorrectly)
document.getElementById("console").innerHTML = "TEST PASSED";
else
document.getElementById("console").innerHTML = "TEST FAILED";
</script>
</body>
</html>