blob: 4b7f6c1019b97378fba22fb9fb48ed9472a1fe29 [file] [log] [blame]
<!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>&lt;button&gt;</td><td>(offsetH,W) (clientH,W)</td>' +
'<td>&lt;input type=button&gt;</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>