3 <p>On success, the square should have the bottom left portion of the base of the green I and red otherwise.</p>
4 <canvas id="c" class="output" width="100" height="100"><p class="fallback">FAIL (fallback content)</p></canvas>
5 <div id="console"></div>
9 function drawCanvas(ctx) {
11 ctx.fillStyle = '#f00';
12 ctx.fillRect(0,0,100,100);
14 var gradient = ctx.createLinearGradient(0, 0, 100, 100);
15 gradient.addColorStop(0, '#0f0');
16 gradient.addColorStop(1, '#0f0');
18 ctx.fillStyle = gradient;
19 ctx.font = "500px Times";
21 ctx.fillText("I", -5, 100);
24 if (window.layoutTestController)
25 layoutTestController.dumpAsText();
27 var canvas = document.getElementById('c');
28 var ctx = canvas.getContext("2d");
31 // Check that the letter rendered appropriately
32 var renderedCorrectly = true;
34 // Check for a green pixel from the text
35 var imageData = ctx.getImageData(75,75,1,1);
36 if (imageData.data[0] != 0) renderedCorrectly = false;
37 if (imageData.data[1] != 255) renderedCorrectly = false;
38 if (imageData.data[2] != 0) renderedCorrectly = false;
39 if (imageData.data[3] != 255) renderedCorrectly = false;
41 // Check the red pixel outside of text wasn't touched
42 var imageData = ctx.getImageData(25,25,1,1);
43 if (imageData.data[0] != 255) renderedCorrectly = false;
44 if (imageData.data[1] != 0) renderedCorrectly = false;
45 if (imageData.data[2] != 0) renderedCorrectly = false;
46 if (imageData.data[3] != 255) renderedCorrectly = false;
48 if (renderedCorrectly)
49 document.getElementById("console").innerHTML = "TEST PASSED";
51 document.getElementById("console").innerHTML = "TEST FAILED";