56 lines
1.6 KiB
HTML
56 lines
1.6 KiB
HTML
<!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>
|