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

   1 <html>
   2 <body style="overflow:hidden;">
   3 <canvas id="canvas" width=600 height=600 style="border:5px solid black">
   4 <script>
   5 if (window.testRunner)
   6   testRunner.dumpAsTextWithPixelResults();
   7
   8 var ctx = document.getElementById('canvas').getContext('2d');
   9 var lingrad = ctx.createLinearGradient(0,0,600,600);
  10 lingrad.addColorStop(0, '#00ABEB');
  11 lingrad.addColorStop(1.0, '#fff');
  12
  13 var x = 10;
  14 var y = 30;
  15
  16 ctx.font = "32px 'Times New Roman'";
  17 ctx.fillText("Normal Fill Text", x, y);
  18
  19 y += 40;
  20
  21 ctx.lineWidth = 2;
  22 ctx.strokeText("Normal Stroke Text", x, y);
  23
  24 y += 40;
  25
  26 ctx.fillStyle = lingrad;
  27 ctx.fillText("Gradient Fill Text", x, y);
  28
  29 y += 40;
  30
  31 ctx.strokeStyle = lingrad;
  32 ctx.strokeText("Gradient Stroke Text", x, y);
  33
  34 ctx.textAlign = "end";
  35
  36 x = 590;
  37 y += 40;
  38
  39 ctx.fillStyle = 'black';
  40 ctx.fillText("Normal Fill Text", x, y);
  41
  42 y += 40;
  43
  44 ctx.strokeStyle = 'black';
  45 ctx.lineWidth = 2;
  46 ctx.strokeText("Normal Stroke Text", x, y);
  47
  48 y += 40;
  49
  50 ctx.fillStyle = lingrad;
  51 ctx.fillText("Gradient Fill Text", x, y);
  52
  53 y += 40;
  54
  55 ctx.strokeStyle = lingrad;
  56 ctx.strokeText("Gradient Stroke Text", x, y);
  57
  58 y += 40;
  59 x = 300;
  60
  61 ctx.textAlign = "center";
  62
  63 ctx.fillStyle = 'black';
  64 ctx.fillText("Normal Fill Text", x, y);
  65
  66 y += 40;
  67
  68 ctx.strokeStyle = 'black';
  69 ctx.lineWidth = 2;
  70 ctx.strokeText("Normal Stroke Text", x, y);
  71
  72 y += 40;
  73
  74 ctx.fillStyle = lingrad;
  75 ctx.fillText("Gradient Fill Text", x, y);
  76
  77 y += 40;
  78
  79 ctx.strokeStyle = lingrad;
  80 ctx.strokeText("Gradient Stroke Text", x, y);
  81
  82 y += 40;
  83
  84 </script>