dom/canvas/test/test_canvas_font_setter.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=
   5 -->
   6 <head>
   7   <title>Test for Bug </title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  10 </head>
  11 <body>
  12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
  13 <canvas id="display" height="200" width="200"></canvas>
  14 <pre id="test">
  15 <script type="application/javascript">
  16
  17 var canvas = document.getElementById("display");
  18 var cx = canvas.getContext("2d");
  19
  20 is(cx.font, "10px sans-serif", "initial font of canvas context");
  21
  22 cx.font = "italic 16px sans-serif";
  23 is(cx.font, "italic 16px sans-serif", "valid font should round-trip");
  24 cx.font = "bold 12px serif; background: green";
  25 is(cx.font, "italic 16px sans-serif", "invalid font should be ignored");
  26
  27 cx.font = "bold 12px/3.0 serif";
  28 is(cx.font, "bold 12px serif", "line-height should be dropped");
  29 cx.font = "inherit";
  30 is(cx.font, "bold 12px serif", "inherit should be ignored");
  31 cx.font = "boold 18px sans-serif";
  32 is(cx.font, "bold 12px serif", "syntax error should be ignored");
  33
  34 // FIXME(emilio): This disagrees with the WPT test: 2dcontext/text-styles/2d.text.font.parse.system.html
  35 cx.font = "menu";
  36 is(cx.font, "menu", "system fonts should work");
  37
  38 function textmeas() {
  39   return cx.measureText("hello").width;
  40 }
  41
  42 cx.font = "66px serif";
  43 var w_at_66 = textmeas();
  44 cx.font = "20px serif";
  45 var w_at_20 = textmeas();
  46 ok(w_at_66 > w_at_20, "text should be wider at 66px than at 20px");
  47
  48 canvas.style.fontSize = "33px";
  49 cx.font = "2em serif";
  50 is(cx.font, "66px serif", "font size set using em units serializes to px");
  51 is(textmeas(), w_at_66, "em should be relative to canvas font size");
  52 canvas.style.fontSize = "16px";
  53 is(cx.font, "66px serif", "font size set using em units serializes to px");
  54 is(textmeas(), w_at_66,
  55    "em should be relative to canvas font size at time of setting");
  56 document.body.removeChild(canvas);
  57 is(cx.font, "66px serif", "font size set using em units serializes to px");
  58 is(textmeas(), w_at_66,
  59    "em should be relative to canvas font size at time of setting");
  60 canvas.style.fontSize = "33px";
  61 cx.font = "2em serif";
  62 is(cx.font, "20px serif", "font size set using em units serializes to px");
  63 is(textmeas(), w_at_20,
  64    "em should be relative to 10px when canvas not in document");
  65 document.body.appendChild(canvas);
  66
  67 </script>
  68 </pre>
  69 </body>
  70 </html>