jquery/development-bundle/external/bgiframe/test/index.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html debug="true">
   4         <head>
   5                 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   6                 <title>jQuery bgiframe Visual Test</title>
   7
   8                 <!-- load latest build of jquery.js -->
   9                 <script type="text/javascript" src="../../../jquery/dist/jquery.js"></script>
  10
  11                 <!-- load dimensions.js (this is what we're testing! -->
  12                 <script type="text/javascript" src="../jquery.bgiframe.js"></script>
  13
  14                 <!-- load firebug lite
  15                 <script type="text/javascript" src="http://brandon.jquery.com/firebuglite/firebug.js"></script>-->
  16
  17                 <link rel="Stylesheet" media="screen" href="../../../jquery/test/data/testsuite.css" />
  18
  19                 <script type="text/javascript" charset="utf-8">
  20                         $(function() {
  21                                 $('#userAgent').html(navigator.userAgent);
  22                                 $('#box2').bgiframe();
  23                                 $('#box3').bgiframe({top: -5, left: -5});
  24                                 $('#box4').bgiframe({top: -5, left: -5, width: 270, height: 120});
  25                                 $('#box5').bgiframe({top: 0, left: 0, width: 260, height: 110});
  26                                 $('#box6').bgiframe({top: '-5px', left: '-5px', width: '270px', height: '120px'});
  27                                 $('#box7').bgiframe({top: '-.5em', left: '-.5em', width: '17em', height: '12em'});
  28                                 $('#box8').bgiframe({top: '-.5em', left: '-.5em'});
  29                                 $('#box9').bgiframe({opacity:false});
  30                         });
  31                 </script>
  32
  33                 <style type="text/css" media="screen">
  34                         #wrapper { position: relative; width: 100%; font: 12px Arial; }
  35                                 form { position: absolute; top: 0; left: 0; width: 100%; }
  36                                         select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; }
  37
  38                                 .box { position: relative; z-index: 2; float: left; margin: 5px; border: 5px solid #666; padding: 5px; width: 250px; height: 100px; color: #000; background-color: #999; }
  39                                         dl { margin: 0; padding: 0; }
  40                                                 dt { float: left; margin: 0; padding: 0; width: 50px; }
  41                                                 dd { margin: 0; padding: 0; }
  42                                 #box7, #box8 { border-width: .5em; padding: .5em; width: 15em; height: 10em; }
  43                 </style>
  44         </head>
  45         <body>
  46                 <h1 id="banner">jQuery bgiframe - Visual Test</h1>
  47                 <h2 id="userAgent"></h2>
  48                 <div id="wrapper">
  49                         <form action="#" method="get" accept-charset="utf-8">
  50                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  51                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  52                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  53                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  54                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  55                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  56                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  57                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  58                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  59                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  60                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  61                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  62                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  63                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  64                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  65                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  66                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  67                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  68                                 <select name="test"><option>Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing</option></select>
  69                         </form>
  70
  71                         <div id="box1" class="box">nothing</div>
  72                         <div id="box2" class="box">
  73                                 <dl>
  74                                         <dt>top:</dt>
  75                                         <dd>'auto'</dd>
  76
  77                                         <dt>left:</dt>
  78                                         <dd>'auto'</dd>
  79
  80                                         <dt>width:</dt>
  81                                         <dd>'auto'</dd>
  82
  83                                         <dt>height:</dt>
  84                                         <dd>'auto'</dd>
  85                                 </dl>
  86                         </div>
  87                         <div id="box3" class="box">
  88                                 <dl>
  89                                         <dt>top:</dt>
  90                                         <dd>0</dd>
  91
  92                                         <dt>left:</dt>
  93                                         <dd>0</dd>
  94
  95                                         <dt>width:</dt>
  96                                         <dd>'auto'</dd>
  97
  98                                         <dt>height:</dt>
  99                                         <dd>'auto'</dd>
 100                                 </dl>
 101                         </div>
 102                         <div id="box4" class="box">
 103                                 <dl>
 104                                         <dt>top:</dt>
 105                                         <dd>-5</dd>
 106
 107                                         <dt>left:</dt>
 108                                         <dd>-5</dd>
 109
 110                                         <dt>width:</dt>
 111                                         <dd>270</dd>
 112
 113                                         <dt>height:</dt>
 114                                         <dd>120</dd>
 115                                 </dl>
 116                         </div>
 117                         <div id="box5" class="box">
 118                                 <dl>
 119                                         <dt>top:</dt>
 120                                         <dd>0</dd>
 121
 122                                         <dt>left:</dt>
 123                                         <dd>0</dd>
 124
 125                                         <dt>width:</dt>
 126                                         <dd>260</dd>
 127
 128                                         <dt>height:</dt>
 129                                         <dd>110</dd>
 130                                 </dl>
 131                         </div>
 132                         <div id="box6" class="box">
 133                                 <dl>
 134                                         <dt>top:</dt>
 135                                         <dd>'-5px'</dd>
 136
 137                                         <dt>left:</dt>
 138                                         <dd>'-5px'</dd>
 139
 140                                         <dt>width:</dt>
 141                                         <dd>'270px'</dd>
 142
 143                                         <dt>height:</dt>
 144                                         <dd>'120px'</dd>
 145                                 </dl>
 146                         </div>
 147                         <div id="box7" class="box">
 148                                 <dl>
 149                                         <dt>top:</dt>
 150                                         <dd>'-.5em'</dd>
 151
 152                                         <dt>left:</dt>
 153                                         <dd>'-.5em'</dd>
 154
 155                                         <dt>width:</dt>
 156                                         <dd>'17em'</dd>
 157
 158                                         <dt>height:</dt>
 159                                         <dd>'12em'</dd>
 160                                 </dl>
 161                         </div>
 162                         <div id="box8" class="box">
 163                                 <dl>
 164                                         <dt>top:</dt>
 165                                         <dd>'-.5em'</dd>
 166
 167                                         <dt>left:</dt>
 168                                         <dd>'-.5em'</dd>
 169
 170                                         <dt>width:</dt>
 171                                         <dd>'auto'</dd>
 172
 173                                         <dt>height:</dt>
 174                                         <dd>'auto'</dd>
 175                                 </dl>
 176                         </div>
 177                         <div id="box9" class="box">
 178                                 <dl>
 179                                         <dt>top:</dt>
 180                                         <dd>'auto'</dd>
 181
 182                                         <dt>left:</dt>
 183                                         <dd>'auto'</dd>
 184
 185                                         <dt>width:</dt>
 186                                         <dd>'auto'</dd>
 187
 188                                         <dt>height:</dt>
 189                                         <dd>'auto'</dd>
 190
 191                                         <dt>opacity:</dt>
 192                                         <dd>false</dd>
 193                                 </dl>
 194                         </div>
 195                 </div>
 196         </body>
 197 </html>