third_party/WebKit/LayoutTests/fast/forms/basic-buttons.html

   1 <!DocType html><html>
   2 <body>
   3
   4 Tests for basic button rendering. Creates a table with seven columns and seven rows. <BR>
   5 Creates two different types of buttons, one with an image (a red dot) and another <BR>
   6 with text ("foo") and then uses six different paddings to make sure each of the buttons render properly.
   7 <BR><BR>
   8
   9 <script>
  10 var fooImage = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />';
  11
  12 function getRowHtml(style)
  13 {
  14      return '<tr><td>' + (style || '(default)') + '</td>' +
  15          '<td><button ' + (style ? 'style="' + style + '"' : '') + '>' + fooImage + '</button></td>' +
  16          '<td></td>' +
  17          '<td><input type="button" value="foo" style="' + style + '"></td>' +
  18          '<td></td></tr>';
  19 }
  20
  21 document.body.innerHTML += '<table cellspacing=0><tbody>' +
  22      '<tr><td>styling</td><td>&lt;button&gt;</td><td>(offsetH,W) (clientH,W)</td>' +
  23      '<td>&lt;input type=button&gt;</td><td>(offsetH,W) (clientH, -W)</td>' +
  24      '</tr>' +
  25      getRowHtml('') +
  26      getRowHtml('padding: 0') +
  27      getRowHtml('padding: 10%') +
  28      getRowHtml('padding: 2px') +
  29      getRowHtml('padding: 2px 6px 3px 6px') +
  30      getRowHtml('padding: 3px 7px') +
  31      getRowHtml('padding: 20px') +
  32      '</tbody></table>';
  33
  34 function printSize(tagname, cell)
  35 {
  36     var buttons = document.getElementsByTagName(tagname);
  37     for (var i = 0; i < buttons.length; i++) {
  38         var button = buttons[i];
  39
  40         var table = document.getElementsByTagName('table')[0];
  41         var rows = table.rows;
  42         var thisCell = button.parentNode;
  43         var thisRow = thisCell.parentNode;
  44
  45         button.parentNode.nextSibling.innerHTML =
  46             "(" + button.offsetHeight + ", " + button.offsetWidth + ") " +
  47             "(" + button.clientHeight + ", " + button.clientWidth + ")";
  48     }
  49 }
  50
  51 printSize('button');
  52 printSize('input');
  53 </script>
  54
  55 </body>
  56 </html>