third_party/WebKit/LayoutTests/fast/forms/text-control-intrinsic-widths.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <p id="description"></p>
   8 <div id="console"></div>
   9 <script>
  10 description("This test measures the width of textareas and text inputs for different fonts.");
  11
  12 var sizes = [1, 2, 3, 4, 5, 10, 20, 50, 100, 500, 1000];
  13 // This list was grabbed from Wikipedia
  14 // http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  15 // Impact was removed from the list as not all versions seem to have the same metrics
  16 var ms_web_fonts = ['Andale Mono', 'Arial', 'Comic Sans MS', 'Courier New', 'Georgia',
  17                     'Times New Roman', 'Trebuchet MS', 'Verdana', 'Webdings'];
  18
  19 // These are fonts we expect to see installed on all systems.
  20 var fonts = ['Lucida Grande', 'Courier', 'Helvetica', 'Monaco', 'Times'].concat(ms_web_fonts);
  21
  22 function printElementWidth(tagname, font) {
  23     debug('<b>' + tagname + '</b>');
  24     var node = document.createElement(tagname);
  25     node.style.fontFamily = font;
  26     document.body.appendChild(node);
  27     var sizeProperty = tagname == 'input' ? 'size' : 'cols';
  28     for (var i = 0; i < sizes.length; i++) {
  29         node[sizeProperty] = sizes[i];
  30         debug(sizeProperty + '=' + sizes[i] + ' clientWidth=' + node.clientWidth);
  31     }
  32     document.body.removeChild(node);
  33 }
  34
  35 for (var j = 0; j < fonts.length; j++) {
  36     debug('<b>' + fonts[j] + '</b>');
  37     printElementWidth('input', fonts[j]);
  38     debug('')
  39     printElementWidth('textarea', fonts[j]);
  40     debug('');
  41 }
  42 </script>
  43 </body>
  44 </html>