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

   1 <!DOCTYPE html>
   2 <head>
   3 <style>
   4 @font-face {
   5   font-family: Ahem;
   6   src: url('../../resources/Ahem.ttf');
   7 }
   8 </style>
   9 </head>
  10 <body>
  11 <p>On success, there should only be a green rectangle.</p>
  12 <canvas id="c" class="output" width="100" height="100"><p class="fallback">FAIL (fallback content)</p></canvas>
  13 <div id="console"></div>
  14
  15 <script>
  16 function drawCanvas(ctx) {
  17   ctx.fillStyle = '#0f0';
  18   ctx.fillRect(0,0,100,100);
  19   ctx.fillStyle = '#f00';
  20   ctx.fillText("X", -100, 100, 200);
  21 }
  22
  23 function doDeferredTest() {
  24   drawCanvas(ctx);
  25
  26   // Check that the letter rendered appropriately
  27   var renderedCorrectly = true;
  28
  29   // Check that there is only a green rectangle
  30   var imageData = ctx.getImageData(50,50,1,1);
  31   if (imageData.data[0] != 0) renderedCorrectly = false;
  32   if (imageData.data[1] != 255) renderedCorrectly = false;
  33   if (imageData.data[2] != 0) renderedCorrectly = false;
  34   if (imageData.data[3] != 255) renderedCorrectly = false;
  35
  36   if (renderedCorrectly)
  37     document.getElementById("console").innerHTML = "TEST PASSED";
  38   else
  39     document.getElementById("console").innerHTML = "TEST FAILED";
  40
  41   if (window.layoutTestController)
  42     layoutTestController.notifyDone();
  43 }
  44
  45 if (window.layoutTestController) {
  46   layoutTestController.dumpAsText();
  47   layoutTestController.waitUntilDone();
  48 }
  49
  50 var canvas = document.getElementById('c');
  51 var ctx = canvas.getContext("2d");
  52 ctx.font = "100px Ahem";
  53
  54 // Kick off loading of the font
  55 ctx.fillText(" ", 0, 0);
  56
  57 // Wait for the font to load, then run
  58 setTimeout(function() {
  59   doDeferredTest();
  60 }, 50);
  61 </script>
  62 </body>
  63 </html>