third_party/WebKit/LayoutTests/fast/canvas/2d.text.draw.fill.maxWidth.gradient.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 = '#f00';
  18   ctx.fillRect(0,0,100,100);
  19   var gradient = ctx.createLinearGradient(0, 0, 100, 100);
  20   gradient.addColorStop(0, '#0f0');
  21   gradient.addColorStop(1, '#0f0');
  22   ctx.fillStyle = gradient;
  23   ctx.fillText("X", 0, 80, 200);
  24   ctx.fillStyle = '#f00';
  25   ctx.fillText("X", 0, 80, -10);
  26 }
  27
  28 function doDeferredTest() {
  29   drawCanvas(ctx);
  30
  31   // Check that the letter rendered appropriately
  32   var renderedCorrectly = true;
  33
  34   // Check that there is only a green rectangle
  35   var imageData = ctx.getImageData(50,50,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;
  40
  41   if (renderedCorrectly)
  42     document.getElementById("console").innerHTML = "TEST PASSED";
  43   else
  44     document.getElementById("console").innerHTML = "TEST FAILED";
  45
  46   if (window.testRunner)
  47     testRunner.notifyDone();
  48 }
  49
  50 if (window.testRunner) {
  51   testRunner.dumpAsText();
  52   testRunner.waitUntilDone();
  53 }
  54
  55 var canvas = document.getElementById('c');
  56 var ctx = canvas.getContext("2d");
  57 ctx.font = "100px Ahem";
  58
  59 // Kick off loading of the font
  60 ctx.fillText(" ", 0, 0);
  61
  62 // Wait for the font to load, then run
  63 document.fonts.addEventListener('loadingdone', doDeferredTest);
  64 </script>
  65 </body>
  66 </html>