LayoutTests/fast/canvas/2d.text.draw.fill.maxWidth.negative.html

<!DOCTYPE html>
<head>
<style>
@font-face {
  font-family: Ahem;
  src: url('../../resources/Ahem.ttf');
}
</style>
</head>
<body>
<p>On success, there should only be a green rectangle.</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 = '#0f0';
  ctx.fillRect(0,0,100,100);
  ctx.fillStyle = '#f00';
  ctx.fillText("X", 0, 100, -5);
}

function doDeferredTest(ctx) {
  drawCanvas(ctx);

  // Check that the letter rendered appropriately
  var renderedCorrectly = true;

  // Check that there is only a green rectangle
  var imageData = ctx.getImageData(50,50,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;

  if (renderedCorrectly)
    document.getElementById("console").innerHTML = "TEST PASSED";
  else
    document.getElementById("console").innerHTML = "TEST FAILED";

  if (window.testRunner)
    testRunner.notifyDone();
}

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

addEventListener("load", async () => {
  const font = "200px Ahem"
  await document.fonts.load(font);

  var canvas = document.getElementById('c');
  var ctx = canvas.getContext("2d");
  ctx.font = font;

  doDeferredTest(ctx);
}, () => {
  if (window.testRunner)
    testRunner.notifyDone();
});
</script>
</body>
</html>