third_party/WebKit/LayoutTests/fast/canvas/canvas-text-baseline.html

   1 <html>
   2 <body>
   3 <canvas id="canvas" width=600 height=300 style="border:5px solid black">
   4 <script>
   5 if (window.testRunner)
   6   testRunner.dumpAsTextWithPixelResults();
   7
   8 var ctx = document.getElementById('canvas').getContext('2d');
   9
  10 var x = 10;
  11 var y = 150;
  12
  13 ctx.lineWidth = 1;
  14 ctx.beginPath();
  15 ctx.moveTo(0, 150);
  16 ctx.lineTo(600, 150);
  17 ctx.closePath();
  18 ctx.stroke();
  19
  20 ctx.font = "32px 'Times New Roman'";
  21
  22 var text = "Baseline";
  23 var w = ctx.measureText(text).width;
  24 ctx.fillText(text, x, y);
  25 x += w + 10;
  26
  27 text = "Top";
  28 ctx.textBaseline = "top";
  29 w = ctx.measureText(text).width;
  30 ctx.fillText(text, x, y);
  31 x += w + 10;
  32
  33 text = "Bottom";
  34 ctx.textBaseline = "bottom";
  35 w = ctx.measureText(text).width;
  36 ctx.fillText(text, x, y);
  37 x += w + 10;
  38
  39 text = "Middle";
  40 ctx.textBaseline = "middle";
  41 w = ctx.measureText(text).width;
  42 ctx.fillText(text, x, y);
  43 x += w + 10;
  44
  45 </script>