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.
10 var fooImage
= '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />';
12 function getRowHtml(style
)
14 return '<tr><td>' + (style
|| '(default)') + '</td>' +
15 '<td><button ' + (style
? 'style="' + style
+ '"' : '') + '>' + fooImage
+ '</button></td>' +
17 '<td><input type="button" value="foo" style="' + style
+ '"></td>' +
21 document
.body
.innerHTML
+= '<table cellspacing=0><tbody>' +
22 '<tr><td>styling</td><td><button></td><td>(offsetH,W) (clientH,W)</td>' +
23 '<td><input type=button></td><td>(offsetH,W) (clientH, -W)</td>' +
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') +
34 function printSize(tagname
, cell
)
36 var buttons
= document
.getElementsByTagName(tagname
);
37 for (var i
= 0; i
< buttons
.length
; i
++) {
38 var button
= buttons
[i
];
40 var table
= document
.getElementsByTagName('table')[0];
41 var rows
= table
.rows
;
42 var thisCell
= button
.parentNode
;
43 var thisRow
= thisCell
.parentNode
;
45 button
.parentNode
.nextSibling
.innerHTML
=
46 "(" + button
.offsetHeight
+ ", " + button
.offsetWidth
+ ") " +
47 "(" + button
.clientHeight
+ ", " + button
.clientWidth
+ ")";