git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojo/tests/_base/html.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <!--
   4         we use a strict-mode DTD to ensure that the box model is the same for these
   5         basic tests
   6 -->
   7 <html>
   8         <head>
   9                 <title>testing Core HTML/DOM/CSS/Style utils</title>
  10                 <style type="text/css">
  11                         @import "../../resources/dojo.css";
  12                 </style>
  13                 <script type="text/javascript"
  14                         src="../../dojo.js"
  15                         djConfig="isDebug: true"></script>
  16                 <script type="text/javascript">
  17                         dojo.require("doh.runner");
  18
  19                         function getIframeDocument(/*DOMNode*/iframeNode){
  20                                 //summary: Returns the document object associated with the iframe DOM Node argument.
  21                                 var doc = iframeNode.contentDocument || // W3
  22                                         (
  23                                                 (iframeNode.contentWindow)&&(iframeNode.contentWindow.document)
  24                                         ) ||  // IE
  25                                         (
  26                                                 (iframeNode.name)&&(documendoh.frames[iframeNode.name])&&
  27                                                 (documendoh.frames[iframeNode.name].document)
  28                                         ) || null;
  29                                 return doc;
  30                         }
  31
  32                         dojo.addOnLoad(function(){
  33                                 doh.register("t",
  34                                         [
  35                                                 "doh.is(100, dojo.marginBox('sq100').w);",
  36                                                 "doh.is(100, dojo.marginBox('sq100').h);",
  37
  38                                                 "doh.is(120, dojo.marginBox('sq100margin10').w);",
  39                                                 "doh.is(120, dojo.marginBox('sq100margin10').h);",
  40                                                 "doh.is(100, dojo.contentBox('sq100margin10').w);",
  41                                                 "doh.is(100, dojo.contentBox('sq100margin10').h);",
  42
  43                                                 "doh.is(140, dojo.marginBox('sq100margin10pad10').w);",
  44                                                 "doh.is(140, dojo.marginBox('sq100margin10pad10').h);",
  45
  46                                                 "doh.is(120, dojo.marginBox('sq100pad10').w);",
  47                                                 "doh.is(120, dojo.marginBox('sq100pad10').h);",
  48
  49                                                 "doh.is(110, dojo.marginBox('sq100ltpad10').w);",
  50                                                 "doh.is(110, dojo.marginBox('sq100ltpad10').h);",
  51                                                 "doh.is(100, dojo.contentBox('sq100ltpad10').w);",
  52                                                 "doh.is(100, dojo.contentBox('sq100ltpad10').h);",
  53
  54                                                 "doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);",
  55                                                 "doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);",
  56
  57                                                 "doh.is(120, dojo.marginBox('sq100border10').w);",
  58                                                 "doh.is(120, dojo.marginBox('sq100border10').h);",
  59                                                 "doh.is(100, dojo.contentBox('sq100border10').w);",
  60                                                 "doh.is(100, dojo.contentBox('sq100border10').h);",
  61
  62                                                 "doh.is(140, dojo.marginBox('sq100border10margin10').w);",
  63                                                 "doh.is(140, dojo.marginBox('sq100border10margin10').h);",
  64                                                 "doh.is(100, dojo.contentBox('sq100border10margin10').w);",
  65                                                 "doh.is(100, dojo.contentBox('sq100border10margin10').h);",
  66
  67                                                 "doh.is(160, dojo.marginBox('sq100border10margin10pad10').w);",
  68                                                 "doh.is(160, dojo.marginBox('sq100border10margin10pad10').h);",
  69                                                 "doh.is(100, dojo.contentBox('sq100border10margin10pad10').w);",
  70                                                 "doh.is(100, dojo.contentBox('sq100border10margin10pad10').h);",
  71
  72                                                 // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
  73                                                 // "doh.is(100, dojo.marginBox('sq100nopos').w);",
  74                                                 "doh.is(100, dojo.marginBox('sq100nopos').h);",
  75
  76                                                 "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).l);",
  77                                                 "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).t);",
  78                                                 "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).w);",
  79                                                 "doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).h);",
  80
  81                                                 "doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).l);",
  82                                                 "doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).t);",
  83                                                 "doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).w);",
  84                                                 "doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).h);",
  85
  86                                                 "doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).l);",
  87                                                 "doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).t);",
  88                                                 "doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).w);",
  89                                                 "doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).h);",
  90
  91                                                 "doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).l);",
  92                                                 "doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).t);",
  93                                                 "doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).w);",
  94                                                 "doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).h);",
  95
  96                                                 function coordsBasic(t){
  97                                                         var pos = dojo.coords("sq100", false);
  98                                                         // console.debug(pos);
  99                                                         doh.is(100, pos.x);
 100                                                         doh.is(100, pos.y);
 101                                                         doh.is(100, pos.w);
 102                                                         doh.is(100, pos.h);
 103                                                 },
 104                                                 function coordsMargin(t){
 105                                                         // coords is getting us the margin-box location, is
 106                                                         // this right?
 107                                                         var pos = dojo.coords("sq100margin10", false);
 108                                                         doh.is(260, pos.x);
 109                                                         doh.is(110, pos.y);
 110                                                         doh.is(120, pos.w);
 111                                                         doh.is(120, pos.h);
 112                                                 },
 113                                                 function coordsBorder(t){
 114                                                         var pos = dojo.coords("sq100border10", false);
 115                                                         doh.is(100, pos.x);
 116                                                         doh.is(400, pos.y);
 117                                                 },
 118                                                 function sq100nopos(t){
 119                                                         var pos = dojo.coords("sq100nopos", false);
 120                                                         // console.debug(pos);
 121                                                         doh.is(0, pos.x);
 122                                                         doh.t(pos.y > 0);
 123                                                         // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
 124                                                         // doh.is(100, pos.w);
 125                                                         doh.is(100, pos.h);
 126                                                 },
 127                                                 function coordsScrolled(t) {
 128                                                         var s = document.createElement('div');
 129                                                         var c = document.createElement('div');
 130                                                         document.body.appendChild(s);
 131                                                         s.appendChild(c);
 132                                                         var x=257, y= 285;
 133                                                         with (s.style) {
 134                                                                 position = 'absolute';
 135                                                                 overflow = 'scroll';
 136                                                                 border = "10px solid black";
 137                                                         }
 138                                                         dojo._setMarginBox(s, x, y, 100, 100);
 139                                                         dojo._setMarginBox(c, 0, 0, 500, 500);
 140                                                         s.scrollTop = 200;
 141                                                         var pos = dojo.coords(s, true);
 142                                                         doh.is(x, pos.x);
 143                                                         doh.is(y, pos.y);
 144                                                 },
 145                                                 "doh.is(1, dojo.style('sq100nopos', 'opacity'));",
 146                                                 "doh.is(0.1, dojo.style('sq100nopos', 'opacity', 0.1));",
 147                                                 "doh.is(0.8, dojo.style('sq100nopos', 'opacity', 0.8));",
 148                                                 function styleObject(){
 149                                                         dojo.style('sq100nopos', { 'opacity': 0.1 });
 150                                                         doh.is(0.1, dojo.style('sq100nopos', 'opacity'));
 151                                                         dojo.style('sq100nopos', { 'opacity': 0.8 });
 152                                                         doh.is(0.8, dojo.style('sq100nopos', 'opacity'));
 153                                                 },
 154                                                 "doh.is('static', dojo.style('sq100nopos', 'position'));",
 155                                                 function getBgcolor(t){
 156                                                         var bgc = dojo.style('sq100nopos', 'backgroundColor');
 157                                                         doh.t((bgc == "rgb(0, 0, 0)")||(bgc == "black")||(bgc == "#000000"));
 158                                                 },
 159                                                 function isDescendant(t){
 160                                                         doh.t(dojo.isDescendant("sq100", dojo.body()));
 161                                                         doh.t(dojo.isDescendant("sq100", dojo.doc));
 162                                                         doh.t(dojo.isDescendant("sq100", "sq100"));
 163                                                         doh.t(dojo.isDescendant(dojo.byId("sq100"), "sq100"));
 164                                                         doh.f(dojo.isDescendant("sq100", dojo.byId("sq100").firstChild));
 165                                                         doh.t(dojo.isDescendant(dojo.byId("sq100").firstChild, "sq100"));
 166                                                 },
 167                                                 function isDescendantIframe(t){
 168                                                         var bif = dojo.byId("blah");
 169                                                         getIframeDocument(bif).write("<html><body><div id='subDiv'></div></body></html>");
 170                                                         getIframeDocument(bif).close();
 171                                                         // this test barely makes sense. disabling it for now.
 172                                                         // doh.t(dojo.isDescendant(bif.contentDocument.getElementById("subDiv"), bif.parentNode));
 173                                                         var subDiv = getIframeDocument(bif).getElementById("subDiv");
 174                                                         doh.t(dojo.isDescendant(subDiv, subDiv));
 175                                                         doh.t(dojo.isDescendant(subDiv, subDiv.parentNode));
 176                                                         doh.f(dojo.isDescendant(subDiv.parentNode, subDiv));
 177
 178                                                 },
 179                                                 function testClassFunctions(t){
 180                                                         var node = dojo.byId("sq100");
 181                                                         dojo.addClass(node, "a");
 182                                                         doh.is("a", node.className);
 183                                                         dojo.removeClass(node, "c");
 184                                                         doh.is("a", node.className);
 185                                                         t.assertTrue(dojo.hasClass(node, "a"));
 186                                                         t.assertFalse(dojo.hasClass(node, "b"));
 187                                                         dojo.addClass(node, "b");
 188                                                         doh.is("a b", node.className);
 189                                                         t.assertTrue(dojo.hasClass(node, "a"));
 190                                                         t.assertTrue(dojo.hasClass(node, "b"));
 191                                                         dojo.removeClass(node, "a");
 192                                                         doh.is("b", node.className);
 193                                                         t.assertFalse(dojo.hasClass(node, "a"));
 194                                                         t.assertTrue(dojo.hasClass(node, "b"));
 195                                                         dojo.toggleClass(node, "a");
 196                                                         doh.is("b a", node.className);
 197                                                         t.assertTrue(dojo.hasClass(node, "a"));
 198                                                         t.assertTrue(dojo.hasClass(node, "b"));
 199                                                         dojo.toggleClass(node, "a");
 200                                                         doh.is("b", node.className);
 201                                                         t.assertFalse(dojo.hasClass(node, "a"));
 202                                                         t.assertTrue(dojo.hasClass(node, "b"));
 203                                                         dojo.toggleClass(node, "b");
 204                                                         doh.is("", node.className);
 205                                                         t.assertFalse(dojo.hasClass(node, "a"));
 206                                                         t.assertFalse(dojo.hasClass(node, "b"));
 207                                                         dojo.removeClass(node, "c");
 208                                                         t.assertTrue(!node.className);
 209                                                 },
 210                                                 function getTypeInput(t){
 211                                                         doh.f(dojo.hasAttr(dojo.byId("input-no-type"), "type"));
 212                                                         doh.is("text", dojo.attr(dojo.byId("input-no-type"), "type"));
 213                                                         doh.t(dojo.hasAttr(dojo.byId("input-with-type"), "type"));
 214                                                         doh.is("checkbox", dojo.attr(dojo.byId("input-with-type"), "type"));
 215                                                 },
 216                                                 function getWithString(t){
 217                                                         doh.f(dojo.hasAttr("input-no-type", "type"));
 218                                                         doh.is("text", dojo.attr("input-no-type", "type"));
 219                                                         doh.t(dojo.hasAttr("input-with-type", "type"));
 220                                                         doh.is("checkbox", dojo.attr("input-with-type", "type"));
 221                                                 },
 222                                                 function attrId(t){
 223                                                         doh.t(dojo.hasAttr("div-no-tabindex", "id"));
 224                                                         doh.is("div-no-tabindex", dojo.attr("div-no-tabindex", "id"));
 225                                                         var div = document.createElement("div");
 226                                                         doh.f(dojo.hasAttr(div, "id"));
 227                                                         doh.is(null, dojo.attr(div, "id"));
 228                                                         dojo.attr(div, "id", "attrId1");
 229                                                         doh.t(dojo.hasAttr(div, "id"));
 230                                                         doh.is("attrId1", dojo.attr(div, "id"));
 231                                                         dojo.removeAttr(div, "id");
 232                                                         doh.f(dojo.hasAttr(div, "id"));
 233                                                         doh.is(null, dojo.attr(div, "id"));
 234                                                 },
 235                                                 function getTabindexDiv(t){
 236                                                         doh.f(dojo.hasAttr("div-no-tabindex", "tabindex"));
 237                                                         doh.is(null, dojo.attr("div-no-tabindex", "tabindex"));
 238                                                         doh.t(dojo.hasAttr("div-tabindex-minus-1", "tabindex"));
 239                                                         if(!dojo.isOpera){
 240                                                                 // Opera (at least <= 9) does not support tabindex="-1"
 241                                                                 doh.is(-1, dojo.attr("div-tabindex-minus-1", "tabindex"));
 242                                                         }
 243                                                         doh.t(dojo.hasAttr("div-tabindex-0", "tabindex"));
 244                                                         doh.is(0, dojo.attr("div-tabindex-0", "tabindex"));
 245                                                         doh.is(1, dojo.attr("div-tabindex-1", "tabindex"));
 246                                                 },
 247                                                 function getTabindexInput(t){
 248                                                         doh.f(dojo.hasAttr("input-no-tabindex", "tabindex"));
 249                                                         doh.is(null, dojo.attr("input-no-tabindex", "tabindex"));
 250                                                         doh.t(dojo.hasAttr("input-tabindex-minus-1", "tabindex"));
 251                                                         if(!dojo.isOpera){
 252                                                                 // Opera (at least <= 9) does not support tabindex="-1"
 253                                                                 doh.is(-1, dojo.attr("input-tabindex-minus-1", "tabindex"));
 254                                                         }
 255                                                         doh.t(dojo.hasAttr("input-tabindex-0", "tabindex"));
 256                                                         doh.is(0, dojo.attr("input-tabindex-0", "tabindex"));
 257                                                         doh.is(1, dojo.attr("input-tabindex-1", "tabindex"));
 258                                                 },
 259                                                 function setTabindexDiv(t){
 260                                                         var div = document.createElement("div");
 261                                                         doh.is(null, dojo.attr(div, "tabindex"));
 262                                                         dojo.attr(div, "tabindex", -1);
 263                                                         if(!dojo.isOpera){
 264                                                                 // Opera (at least <= 9) does not support tabindex="-1"
 265                                                                 doh.is(-1, dojo.attr(div, "tabindex"));
 266                                                         }
 267                                                         dojo.attr(div, "tabindex", 0);
 268                                                         doh.is(0, dojo.attr(div, "tabindex"));
 269                                                         dojo.attr(div, "tabindex", 1);
 270                                                         doh.is(1, dojo.attr(div, "tabindex"));
 271                                                 },
 272                                                 function setTabindexInput(t){
 273                                                         var input = document.createElement("input");
 274                                                         doh.is(null, dojo.attr(input, "tabindex"));
 275                                                         dojo.attr(input, "tabindex", -1);
 276                                                         if(!dojo.isOpera){
 277                                                                 // Opera (at least <= 9) does not support tabindex="-1"
 278                                                                 doh.is(-1, dojo.attr(input, "tabindex"));
 279                                                         }
 280                                                         dojo.attr(input, "tabindex", 0);
 281                                                         doh.is(0, dojo.attr(input, "tabindex"));
 282                                                         dojo.attr(input, "tabindex", 1);
 283                                                         doh.is(1, dojo.attr(input, "tabindex"));
 284                                                 },
 285                                                 function removeTabindexFromDiv(t){
 286                                                         var div = document.createElement("div");
 287                                                         dojo.attr(div, "tabindex", 1);
 288                                                         doh.is(1, dojo.attr(div, "tabindex"));
 289                                                         dojo.removeAttr(div, "tabindex");
 290                                                         doh.is(null, dojo.attr(div, "tabindex"));
 291                                                 },
 292                                                 function removeTabindexFromInput(t){
 293                                                         var input = document.createElement("input");
 294                                                         dojo.attr(input, "tabindex", 1);
 295                                                         doh.is(1, dojo.attr(input, "tabindex"));
 296                                                         dojo.removeAttr(input, "tabindex");
 297                                                         doh.is(null, dojo.attr(input, "tabindex"));
 298                                                 },
 299                                                 function attr_map(t){
 300                                                         var input = document.createElement("input");
 301                                                         var ctr= 0;
 302                                                         dojo.attr(input, {
 303                                                                 "tabindex": 1,
 304                                                                 "type": "text",
 305                                                                 "onfocus": function(e){
 306                                                                         ctr++;
 307                                                                 }
 308                                                         });
 309                                                         dojo.body().appendChild(input);
 310                                                         doh.is(1, dojo.attr(input, "tabindex"));
 311                                                         doh.is("text", dojo.attr(input, "type"));
 312                                                         doh.is(0, ctr);
 313                                                         var def = new doh.Deferred();
 314                                                         input.focus();
 315                                                         setTimeout(function(){
 316                                                                 doh.is(1, ctr);
 317                                                                 input.blur();
 318                                                                 input.focus();
 319                                                                 setTimeout(function(){
 320                                                                         doh.is(2, ctr);
 321                                                                         def.callback(true);
 322                                                                 }, 10);
 323                                                         }, 10);
 324                                                         return def;
 325                                                 },
 326                                                 function attr_reconnect(t){
 327                                                         var input = document.createElement("input");
 328                                                         var ctr = 0;
 329                                                         dojo.attr(input, "type", "text");
 330                                                         dojo.attr(input, "onfocus", function(e){ ctr++; });
 331                                                         dojo.attr(input, "onfocus", function(e){ ctr++; });
 332                                                         dojo.attr(input, "onfocus", function(e){ ctr++; });
 333                                                         dojo.body().appendChild(input);
 334                                                         doh.is("text", dojo.attr(input, "type"));
 335                                                         doh.is(0, ctr);
 336                                                         var def = new doh.Deferred();
 337                                                         input.focus();
 338                                                         setTimeout(function(){
 339                                                                 doh.is(1, ctr);
 340                                                                 input.blur();
 341                                                                 input.focus();
 342                                                                 setTimeout(function(){
 343                                                                         doh.is(2, ctr);
 344                                                                         def.callback(true);
 345                                                                 }, 10);
 346                                                         }, 10);
 347                                                         return def;
 348                                                 }
 349                                         ]
 350                                 );
 351                                 doh.run();
 352                         });
 353                 </script>
 354                 <style type="text/css">
 355                         html, body {
 356                                 padding: 0px;
 357                                 margin: 0px;
 358                                 border: 0px;
 359                         }
 360
 361                         #sq100 {
 362                                 background-color: black;
 363                                 color: white;
 364                                 position: absolute;
 365                                 left: 100px;
 366                                 top: 100px;
 367                                 width: 100px;
 368                                 height: 100px;
 369                                 border: 0px;
 370                                 padding: 0px;
 371                                 margin: 0px;
 372                                 overflow: hidden;
 373                         }
 374
 375                         #sq100margin10 {
 376                                 background-color: black;
 377                                 color: white;
 378                                 position: absolute;
 379                                 left: 250px;
 380                                 top: 100px;
 381                                 width: 100px;
 382                                 height: 100px;
 383                                 border: 0px;
 384                                 padding: 0px;
 385                                 margin: 10px;
 386                                 overflow: hidden;
 387                         }
 388
 389                         #sq100margin10pad10 {
 390                                 background-color: black;
 391                                 color: white;
 392                                 position: absolute;
 393                                 left: 400px;
 394                                 top: 100px;
 395                                 width: 100px;
 396                                 height: 100px;
 397                                 border: 0px;
 398                                 padding: 10px;
 399                                 margin: 10px;
 400                                 overflow: hidden;
 401                         }
 402
 403                         #sq100pad10 {
 404                                 background-color: black;
 405                                 color: white;
 406                                 position: absolute;
 407                                 left: 100px;
 408                                 top: 250px;
 409                                 width: 100px;
 410                                 height: 100px;
 411                                 border: 0px;
 412                                 padding: 10px;
 413                                 margin: 0px;
 414                                 overflow: hidden;
 415                         }
 416
 417                         #sq100ltpad10 {
 418                                 background-color: black;
 419                                 color: white;
 420                                 position: absolute;
 421                                 left: 250px;
 422                                 top: 250px;
 423                                 width: 100px;
 424                                 height: 100px;
 425                                 border: 0px;
 426                                 padding-left: 10px;
 427                                 padding-top: 10px;
 428                                 padding-right: 0px;
 429                                 padding-bottom: 0px;
 430                                 margin: 0px;
 431                                 overflow: hidden;
 432                         }
 433
 434                         #sq100ltpad10rbmargin10 {
 435                                 background-color: black;
 436                                 color: white;
 437                                 position: absolute;
 438                                 left: 400px;
 439                                 top: 250px;
 440                                 width: 100px;
 441                                 height: 100px;
 442                                 border: 0px;
 443                                 padding-left: 10px;
 444                                 padding-top: 10px;
 445                                 padding-right: 0px;
 446                                 padding-bottom: 0px;
 447                                 margin-left: 0px;
 448                                 margin-top: 0px;
 449                                 margin-right: 10px;
 450                                 margin-bottom: 10px;
 451                                 overflow: hidden;
 452                         }
 453
 454                         #sq100border10 {
 455                                 background-color: black;
 456                                 color: white;
 457                                 position: absolute;
 458                                 left: 100px;
 459                                 top: 400px;
 460                                 width: 100px;
 461                                 height: 100px;
 462                                 border: 10px solid yellow;
 463                                 padding: 0px;
 464                                 margin: 0px;
 465                                 overflow: hidden;
 466                         }
 467
 468                         #sq100border10margin10 {
 469                                 background-color: black;
 470                                 color: white;
 471                                 position: absolute;
 472                                 left: 250px;
 473                                 top: 400px;
 474                                 width: 100px;
 475                                 height: 100px;
 476                                 border: 10px solid yellow;
 477                                 padding: 0px;
 478                                 margin: 10px;
 479                                 overflow: hidden;
 480                         }
 481
 482                         #sq100border10margin10pad10 {
 483                                 background-color: black;
 484                                 color: white;
 485                                 position: absolute;
 486                                 left: 400px;
 487                                 top: 400px;
 488                                 width: 100px;
 489                                 height: 100px;
 490                                 border: 10px solid yellow;
 491                                 padding: 10px;
 492                                 margin: 10px;
 493                                 overflow: hidden;
 494                         }
 495
 496                         #sq100nopos {
 497                                 background-color: black;
 498                                 color: white;
 499                                 width: 100px;
 500                                 height: 100px;
 501                                 padding: 0px;
 502                                 margin: 0px;
 503                         }
 504
 505                 </style>
 506         </head>
 507         <body>
 508                 <h1>testing Core HTML/DOM/CSS/Style utils</h1>
 509                 <div id="sq100">
 510                         100px square, abs
 511                 </div>
 512                 <div id="sq100margin10">
 513                         100px square, abs, 10px margin
 514                 </div>
 515                 <div id="sq100margin10pad10">
 516                         100px square, abs, 10px margin, 10px padding
 517                 </div>
 518                 <div id="sq100pad10">
 519                         100px square, abs, 10px padding
 520                 </div>
 521                 <div id="sq100ltpad10">
 522                         100px square, abs, 10px left and top padding
 523                 </div>
 524                 <div id="sq100ltpad10rbmargin10">
 525                         100px square, abs, 10px left and top padding, 10px bottom and right margin
 526                 </div>
 527                 <div id="sq100border10">
 528                         100px square, abs, 10px yellow border
 529                 </div>
 530                 <div id="sq100border10margin10">
 531                         100px square, abs, 10px yellow border, 10px margin
 532                 </div>
 533                 <div id="sq100border10margin10pad10">
 534                         100px square, abs, 10px yellow border, 10px margin, 10px padding
 535                 </div>
 536                 <div id="sq100nopos">
 537                         100px square, no positioning
 538                 </div>
 539                 <iframe id="blah"></iframe>
 540
 541                 <div id="div-no-tabindex"></div>
 542                 <div id="div-tabindex-minus-1" tabindex="-1"></div>
 543                 <div id="div-tabindex-0" tabindex="0"></div>
 544                 <div id="div-tabindex-1" tabindex="1"></div>
 545
 546                 <div>
 547                         <input id="input-no-type">
 548                         <input id="input-with-type" type="checkbox">
 549                         <input id="input-no-tabindex">
 550                         <input id="input-tabindex-minus-1" tabindex="-1">
 551                         <input id="input-tabindex-0" tabindex="0">
 552                         <input id="input-tabindex-1" tabindex="1">
 553                 </div>
 554         </body>
 555 </html>
 556