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

   1 <html>
   2         <!--
   3                 we use a quirks-mode DTD on purpose to ensure that things go tilt. Wheee!!
   4         -->
   5         <head>
   6                 <title>testing Core HTML/DOM/CSS/Style utils in quirks mode</title>
   7                 <style type="text/css">
   8                         @import "../../resources/dojo.css";
   9                 </style>
  10                 <script type="text/javascript"
  11                         src="../../dojo.js"
  12                         djConfig="isDebug: true"></script>
  13                 <script type="text/javascript">
  14                         dojo.require("doh.runner");
  15                         dojo.addOnLoad(function(){
  16                                 doh.register("t",
  17                                         [
  18                                                 "t.is(100, dojo.marginBox('sq100').w);",
  19                                                 "t.is(100, dojo.marginBox('sq100').h);",
  20
  21                                                 "t.is(120, dojo.marginBox('sq100margin10').w);",
  22                                                 "t.is(120, dojo.marginBox('sq100margin10').h);",
  23                                                 "t.is(100, dojo.contentBox('sq100margin10').w);",
  24                                                 "t.is(100, dojo.contentBox('sq100margin10').h);",
  25
  26                                                 // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
  27                                                 //"t.is(100, dojo.marginBox('sq100nopos').w);",
  28                                                 "t.is(100, dojo.marginBox('sq100nopos').h);",
  29
  30                                                 function coordsBasic(t){
  31                                                         var pos = dojo.coords("sq100", false);
  32                                                         // console.debug(pos);
  33                                                         t.is(100, pos.x);
  34                                                         t.is(100, pos.y);
  35                                                         t.is(100, pos.w);
  36                                                         t.is(100, pos.h);
  37                                                 },
  38                                                 function coordsMargin(t){
  39                                                         // coords is getting us the margin-box location, is
  40                                                         // this right?
  41                                                         var pos = dojo.coords("sq100margin10", false);
  42                                                         t.is(260, pos.x);
  43                                                         t.is(110, pos.y);
  44                                                         t.is(120, pos.w);
  45                                                         t.is(120, pos.h);
  46                                                 },
  47                                                 function coordsBorder(t){
  48                                                         var pos = dojo.coords("sq100border10", false);
  49                                                         t.is(100, pos.x);
  50                                                         t.is(400, pos.y);
  51                                                 },
  52                                                 function sq100nopos(t){
  53                                                         var pos = dojo.coords("sq100nopos", false);
  54                                                         // console.debug(pos);
  55                                                         t.is(0, pos.x);
  56                                                         t.t(pos.y > 0);
  57                                                         // FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge
  58                                                         //t.is(100, pos.w);
  59                                                         t.is(100, pos.h);
  60                                                 }
  61                                         ]
  62                                 );
  63                                 if(dojo.isIE){
  64                                         // IE collapses padding in quirks mode. We just report on it.
  65                                         doh.register("t",
  66                                                 [
  67                                                         "t.is(120, dojo.marginBox('sq100margin10pad10').w);",
  68                                                         "t.is(120, dojo.marginBox('sq100margin10pad10').h);",
  69
  70                                                         "t.is(100, dojo.marginBox('sq100pad10').w);",
  71                                                         "t.is(100, dojo.marginBox('sq100pad10').h);",
  72
  73                                                         "t.is(100, dojo.marginBox('sq100ltpad10').w);",
  74                                                         "t.is(100, dojo.marginBox('sq100ltpad10').h);",
  75                                                         "t.is(90, dojo.contentBox('sq100ltpad10').w);",
  76                                                         "t.is(90, dojo.contentBox('sq100ltpad10').h);",
  77
  78                                                         "t.is(110, dojo.marginBox('sq100ltpad10rbmargin10').w);",
  79                                                         "t.is(110, dojo.marginBox('sq100ltpad10rbmargin10').h);",
  80
  81                                                         "t.is(100, dojo.marginBox('sq100border10').w);",
  82                                                         "t.is(100, dojo.marginBox('sq100border10').h);",
  83                                                         "t.is(80, dojo.contentBox('sq100border10').w);",
  84                                                         "t.is(80, dojo.contentBox('sq100border10').h);",
  85
  86                                                         "t.is(120, dojo.marginBox('sq100border10margin10').w);",
  87                                                         "t.is(120, dojo.marginBox('sq100border10margin10').h);",
  88                                                         "t.is(80, dojo.contentBox('sq100border10margin10').w);",
  89                                                         "t.is(80, dojo.contentBox('sq100border10margin10').h);",
  90
  91                                                         "t.is(120, dojo.marginBox('sq100border10margin10pad10').w);",
  92                                                         "t.is(120, dojo.marginBox('sq100border10margin10pad10').h);",
  93                                                         "t.is(60, dojo.contentBox('sq100border10margin10pad10').w);",
  94                                                         "t.is(60, dojo.contentBox('sq100border10margin10pad10').h);"
  95                                                 ]
  96                                         );
  97                                 }else{
  98                                         doh.register("t",
  99                                                 [
 100                                                         "t.is(140, dojo.marginBox('sq100margin10pad10').w);",
 101                                                         "t.is(140, dojo.marginBox('sq100margin10pad10').h);",
 102
 103                                                         "t.is(120, dojo.marginBox('sq100pad10').w);",
 104                                                         "t.is(120, dojo.marginBox('sq100pad10').h);",
 105
 106                                                         "t.is(110, dojo.marginBox('sq100ltpad10').w);",
 107                                                         "t.is(110, dojo.marginBox('sq100ltpad10').h);",
 108                                                         "t.is(100, dojo.contentBox('sq100ltpad10').w);",
 109                                                         "t.is(100, dojo.contentBox('sq100ltpad10').h);",
 110
 111                                                         "t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);",
 112                                                         "t.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);",
 113
 114                                                         "t.is(120, dojo.marginBox('sq100border10').w);",
 115                                                         "t.is(120, dojo.marginBox('sq100border10').h);",
 116                                                         "t.is(100, dojo.contentBox('sq100border10').w);",
 117                                                         "t.is(100, dojo.contentBox('sq100border10').h);",
 118
 119                                                         "t.is(140, dojo.marginBox('sq100border10margin10').w);",
 120                                                         "t.is(140, dojo.marginBox('sq100border10margin10').h);",
 121                                                         "t.is(100, dojo.contentBox('sq100border10margin10').w);",
 122                                                         "t.is(100, dojo.contentBox('sq100border10margin10').h);",
 123
 124                                                         "t.is(160, dojo.marginBox('sq100border10margin10pad10').w);",
 125                                                         "t.is(160, dojo.marginBox('sq100border10margin10pad10').h);",
 126                                                         "t.is(100, dojo.contentBox('sq100border10margin10pad10').w);",
 127                                                         "t.is(100, dojo.contentBox('sq100border10margin10pad10').h);"
 128                                                 ]
 129                                         );
 130                                 }
 131
 132                                 doh.run();
 133                         });
 134                 </script>
 135                 <style type="text/css">
 136                         html, body {
 137                                 padding: 0px;
 138                                 margin: 0px;
 139                                 border: 0px;
 140                         }
 141
 142                         #sq100 {
 143                                 background-color: black;
 144                                 color: white;
 145                                 position: absolute;
 146                                 left: 100px;
 147                                 top: 100px;
 148                                 width: 100px;
 149                                 height: 100px;
 150                                 border: 0px;
 151                                 padding: 0px;
 152                                 margin: 0px;
 153                                 overflow: hidden;
 154                         }
 155
 156                         #sq100margin10 {
 157                                 background-color: black;
 158                                 color: white;
 159                                 position: absolute;
 160                                 left: 250px;
 161                                 top: 100px;
 162                                 width: 100px;
 163                                 height: 100px;
 164                                 border: 0px;
 165                                 padding: 0px;
 166                                 margin: 10px;
 167                                 overflow: hidden;
 168                         }
 169
 170                         #sq100margin10pad10 {
 171                                 background-color: black;
 172                                 color: white;
 173                                 position: absolute;
 174                                 left: 400px;
 175                                 top: 100px;
 176                                 width: 100px;
 177                                 height: 100px;
 178                                 border: 0px;
 179                                 padding: 10px;
 180                                 margin: 10px;
 181                                 overflow: hidden;
 182                         }
 183
 184                         #sq100pad10 {
 185                                 background-color: black;
 186                                 color: white;
 187                                 position: absolute;
 188                                 left: 100px;
 189                                 top: 250px;
 190                                 width: 100px;
 191                                 height: 100px;
 192                                 border: 0px;
 193                                 padding: 10px;
 194                                 margin: 0px;
 195                                 overflow: hidden;
 196                         }
 197
 198                         #sq100ltpad10 {
 199                                 background-color: black;
 200                                 color: white;
 201                                 position: absolute;
 202                                 left: 250px;
 203                                 top: 250px;
 204                                 width: 100px;
 205                                 height: 100px;
 206                                 border: 0px;
 207                                 padding-left: 10px;
 208                                 padding-top: 10px;
 209                                 padding-right: 0px;
 210                                 padding-bottom: 0px;
 211                                 margin: 0px;
 212                                 overflow: hidden;
 213                         }
 214
 215                         #sq100ltpad10rbmargin10 {
 216                                 background-color: black;
 217                                 color: white;
 218                                 position: absolute;
 219                                 left: 400px;
 220                                 top: 250px;
 221                                 width: 100px;
 222                                 height: 100px;
 223                                 border: 0px;
 224                                 padding-left: 10px;
 225                                 padding-top: 10px;
 226                                 padding-right: 0px;
 227                                 padding-bottom: 0px;
 228                                 margin-left: 0px;
 229                                 margin-top: 0px;
 230                                 margin-right: 10px;
 231                                 margin-bottom: 10px;
 232                                 overflow: hidden;
 233                         }
 234
 235                         #sq100border10 {
 236                                 background-color: black;
 237                                 color: white;
 238                                 position: absolute;
 239                                 left: 100px;
 240                                 top: 400px;
 241                                 width: 100px;
 242                                 height: 100px;
 243                                 border: 10px solid yellow;
 244                                 padding: 0px;
 245                                 margin: 0px;
 246                                 overflow: hidden;
 247                         }
 248
 249                         #sq100border10margin10 {
 250                                 background-color: black;
 251                                 color: white;
 252                                 position: absolute;
 253                                 left: 250px;
 254                                 top: 400px;
 255                                 width: 100px;
 256                                 height: 100px;
 257                                 border: 10px solid yellow;
 258                                 padding: 0px;
 259                                 margin: 10px;
 260                                 overflow: hidden;
 261                         }
 262
 263                         #sq100border10margin10pad10 {
 264                                 background-color: black;
 265                                 color: white;
 266                                 position: absolute;
 267                                 left: 400px;
 268                                 top: 400px;
 269                                 width: 100px;
 270                                 height: 100px;
 271                                 border: 10px solid yellow;
 272                                 padding: 10px;
 273                                 margin: 10px;
 274                                 overflow: hidden;
 275                         }
 276
 277                         #sq100nopos {
 278                                 background-color: black;
 279                                 color: white;
 280                                 width: 100px;
 281                                 height: 100px;
 282                                 padding: 0px;
 283                                 margin: 0px;
 284                         }
 285
 286                 </style>
 287         </head>
 288         <body>
 289                 <h1>testing Core HTML/DOM/CSS/Style utils</h1>
 290                 <div id="sq100">
 291                         100px square, abs
 292                 </div>
 293                 <div id="sq100margin10">
 294                         100px square, abs, 10px margin
 295                 </div>
 296                 <div id="sq100margin10pad10">
 297                         100px square, abs, 10px margin, 10px padding
 298                 </div>
 299                 <div id="sq100pad10">
 300                         100px square, abs, 10px padding
 301                 </div>
 302                 <div id="sq100ltpad10">
 303                         100px square, abs, 10px left and top padding
 304                 </div>
 305                 <div id="sq100ltpad10rbmargin10">
 306                         100px square, abs, 10px left and top padding, 10px bottom and right margin
 307                 </div>
 308                 <div id="sq100border10">
 309                         100px square, abs, 10px yellow border
 310                 </div>
 311                 <div id="sq100border10margin10">
 312                         100px square, abs, 10px yellow border, 10px margin
 313                 </div>
 314                 <div id="sq100border10margin10pad10">
 315                         100px square, abs, 10px yellow border, 10px margin, 10px padding
 316                 </div>
 317                 <div id="sq100nopos">
 318                         100px square, no positioning
 319                 </div>
 320         </body>
 321 </html>
 322