| <!DocType html> |
| <html> |
| <body> |
| |
| Tests for basic button rendering. Creates a table with seven columns and seven rows.<BR> |
| Creates two different types of buttons, one with an image (a red dot) and another<BR> |
| with text ("foo") and then uses six different paddings to make sure each of the buttons render properly.<BR><BR> |
| |
| <script> |
| var fooImage = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />'; |
| |
| function getRowHtml(style) |
| { |
| return '<tr><td>' + (style || '(default)') + '</td>' + |
| '<td><button ' + (style ? 'style="' + style + '"' : '') + '>' + fooImage + '</button></td>' + |
| '<td></td>' + |
| '<td><input type="button" value="foo" style="' + style + '"></td>' + |
| '<td></td></tr>'; |
| } |
| |
| document.body.innerHTML += '<table cellspacing=0><tbody>' + |
| '<tr><td>styling</td><td><button></td><td>(offsetH,W) (clientH,W)</td>' + |
| '<td><input type=button></td><td>(offsetH,W) (clientH, -W)</td>' + |
| '</tr>' + |
| getRowHtml('') + |
| getRowHtml('padding: 0') + |
| getRowHtml('padding: 10%') + |
| getRowHtml('padding: 2px') + |
| getRowHtml('padding: 2px 6px 3px 6px') + |
| getRowHtml('padding: 3px 7px') + |
| getRowHtml('padding: 20px') + |
| '</tbody></table>'; |
| |
| function printSize(tagname) |
| { |
| var buttons = document.getElementsByTagName(tagname); |
| for (var i = 0; i < buttons.length; i++) { |
| var button = buttons[i]; |
| |
| var table = document.getElementsByTagName('table')[0]; |
| var rows = table.rows; |
| var thisCell = button.parentNode; |
| var thisRow = thisCell.parentNode; |
| |
| button.parentNode.nextSibling.innerHTML = |
| "(" + Math.round(button.offsetHeight) + ", " + Math.round(button.offsetWidth) + ") " + |
| "(" + Math.round(button.clientHeight) + ", " + Math.round(button.clientWidth) + ")"; |
| } |
| } |
| |
| function testOnLoad() |
| { |
| printSize('button'); |
| printSize('input'); |
| } |
| |
| window.addEventListener('load', testOnLoad, false); |
| |
| </script> |
| |
| </body> |
| </html> |
