<!DOCTYPE html>
<head>
<title>Canvas test: slow font loading</title>
<style>
@font-face {
  font-family: Ahem;
  src: url("../webfont/slow-ahem-loading.cgi");
}
</style>
</head>
<body>

<canvas id="c" width="100" height="50"><p>FAIL (fallback content)</p></canvas>

<script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

// Ahem font loading is slow so it will not be ready
// in time for drawing the text. As a consequence, the
// fallback font should be used and the result should
// be 2 green 'X' on a red background.
ctx.font = '67px Ahem, Arial';
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.fillText('XX', 0, 50);
</script>