layout/reftests/writing-mode/1090168-2-ref.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 </head>
   6 <body>
   7 <script type="text/javascript">
   8 var testFont = '40px sans-serif';
   9
  10 function test(x, y, text, style, rotation, baseline) {
  11   var canvas = document.createElement("canvas");
  12   canvas.width = 400;
  13   canvas.height = 400;
  14   canvas.style.cssText = 'position:absolute;' + style;
  15   document.getElementsByTagName('body')[0].appendChild(canvas);
  16   var ctx = canvas.getContext('2d');
  17   ctx.globalAlpha = 0.5;
  18   ctx.beginPath();
  19   ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
  20   ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
  21   ctx.stroke();
  22   ctx.globalAlpha = 1.0;
  23   ctx.font = testFont;
  24   if (rotation != 0) {
  25     ctx.translate(x,y);
  26     ctx.rotate(rotation);
  27     ctx.translate(-x,-y);
  28   }
  29   if (baseline != '') {
  30     ctx.textBaseline = baseline;
  31   }
  32   ctx.fillText(text, x, y);
  33 }
  34
  35 // Testcase: vertical text with orientation:mixed
  36 // test(100,  50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0, '');
  37
  38 // Reference: horizontal text with 90° rotation and textBaseline=middle
  39 test(100,  50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2, 'middle');
  40
  41 </script>