| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | |
|---|
| 5 | <title>Sample Dojo / Dijit Page</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | #container { |
|---|
| 8 | position:absolute; |
|---|
| 9 | left:-9999px; |
|---|
| 10 | width:9000px; |
|---|
| 11 | overflow:hidden; |
|---|
| 12 | } |
|---|
| 13 | #randomimage { |
|---|
| 14 | height:100px; |
|---|
| 15 | } |
|---|
| 16 | </style> |
|---|
| 17 | <!-- load Dojo --> |
|---|
| 18 | <script>var djConfig = { isDebug:true }</script> |
|---|
| 19 | <script src="../../../dojo/dojo.js"></script> |
|---|
| 20 | <script type="text/javascript"> |
|---|
| 21 | dojo.require("doh.runner"); |
|---|
| 22 | dojo.addOnLoad(function(){ |
|---|
| 23 | |
|---|
| 24 | doh.register("testUi", |
|---|
| 25 | [ |
|---|
| 26 | { |
|---|
| 27 | name:"basic onload", |
|---|
| 28 | timeout:7000, |
|---|
| 29 | runTest: function(t){ |
|---|
| 30 | var d = new doh.Deferred(); |
|---|
| 31 | |
|---|
| 32 | try{ |
|---|
| 33 | var n = dojo.create("img", null, "container"); |
|---|
| 34 | }catch(e){ |
|---|
| 35 | d.errback(e); |
|---|
| 36 | } |
|---|
| 37 | dojo.connect(n, "onload", function(e){ |
|---|
| 38 | try{ |
|---|
| 39 | t.is("load", e.type); |
|---|
| 40 | t.is(359, n.height, "height mismatch"); |
|---|
| 41 | t.is(359, n.width, "width mismatch"); |
|---|
| 42 | }catch(e){ |
|---|
| 43 | d.errback(e); |
|---|
| 44 | return; |
|---|
| 45 | } |
|---|
| 46 | d.callback(true); |
|---|
| 47 | }); |
|---|
| 48 | |
|---|
| 49 | n.src = "images/square.jpg"; |
|---|
| 50 | return d; |
|---|
| 51 | } |
|---|
| 52 | }, |
|---|
| 53 | { |
|---|
| 54 | name:"basic onload, probably cached", |
|---|
| 55 | timeout:17000, |
|---|
| 56 | runTest: function(t){ |
|---|
| 57 | var d = new doh.Deferred(); |
|---|
| 58 | |
|---|
| 59 | try{ |
|---|
| 60 | var n = dojo.create("img", null, "container"); |
|---|
| 61 | }catch(e){ |
|---|
| 62 | d.errback(e); |
|---|
| 63 | } |
|---|
| 64 | dojo.connect(n, "onload", function(e){ |
|---|
| 65 | try{ |
|---|
| 66 | t.is("load", e.type); |
|---|
| 67 | t.is(359, n.height); |
|---|
| 68 | t.is(359, n.width); |
|---|
| 69 | }catch(e){ |
|---|
| 70 | d.errback(e); |
|---|
| 71 | return; |
|---|
| 72 | } |
|---|
| 73 | d.callback(true); |
|---|
| 74 | }); |
|---|
| 75 | n.src = "images/square.jpg"; |
|---|
| 76 | |
|---|
| 77 | return d; |
|---|
| 78 | } |
|---|
| 79 | }, |
|---|
| 80 | { |
|---|
| 81 | name:"set src after long delay", |
|---|
| 82 | timeout:5000, |
|---|
| 83 | runTest: function(t){ |
|---|
| 84 | var d = new doh.Deferred(); |
|---|
| 85 | |
|---|
| 86 | var n = dojo.place("<img id='bar'/>", "container"); |
|---|
| 87 | dojo.connect(n, "onload", function(){ |
|---|
| 88 | t.is(375, n.height); |
|---|
| 89 | t.is(500, n.width); |
|---|
| 90 | d.callback(true); |
|---|
| 91 | }) |
|---|
| 92 | |
|---|
| 93 | setTimeout(function(){ |
|---|
| 94 | n.src = "images/chris1_lg.jpg"; |
|---|
| 95 | }, 2000) |
|---|
| 96 | |
|---|
| 97 | return d; |
|---|
| 98 | } |
|---|
| 99 | }, |
|---|
| 100 | { |
|---|
| 101 | name:"test re-calling of onload", |
|---|
| 102 | timeout:9000, |
|---|
| 103 | runTest: function(t){ |
|---|
| 104 | var d = new doh.Deferred(); |
|---|
| 105 | |
|---|
| 106 | var called = 0; |
|---|
| 107 | var n = dojo.create("img", null, "container"); |
|---|
| 108 | |
|---|
| 109 | dojo.connect(n, "onload", function(e){ |
|---|
| 110 | called++; |
|---|
| 111 | if(called == 2){ |
|---|
| 112 | d.callback(true); |
|---|
| 113 | } |
|---|
| 114 | }); |
|---|
| 115 | |
|---|
| 116 | n.src = "images/chris1_sm.jpg"; |
|---|
| 117 | |
|---|
| 118 | setTimeout(function(){ |
|---|
| 119 | n.src = "images/chris1_sm.jpg?" + (new Date().getTime()); |
|---|
| 120 | }, 1000); |
|---|
| 121 | |
|---|
| 122 | return d; |
|---|
| 123 | } |
|---|
| 124 | }, |
|---|
| 125 | { |
|---|
| 126 | name:"testing the sizes, styled by js (height)", |
|---|
| 127 | timeout:9000, |
|---|
| 128 | runTest: function(t){ |
|---|
| 129 | var d = new doh.Deferred(); |
|---|
| 130 | |
|---|
| 131 | var newn = dojo.create("img", null, "container"); |
|---|
| 132 | dojo.style(newn, "height", "100px"); |
|---|
| 133 | |
|---|
| 134 | dojo.connect(newn, "onload", function(e){ |
|---|
| 135 | try{ |
|---|
| 136 | t.is(100, newn.height); |
|---|
| 137 | t.is(100, newn.width); |
|---|
| 138 | d.callback(true); |
|---|
| 139 | }catch(e){ |
|---|
| 140 | d.errback(e); |
|---|
| 141 | } |
|---|
| 142 | }); |
|---|
| 143 | newn.src = "images/square.jpg"; |
|---|
| 144 | |
|---|
| 145 | |
|---|
| 146 | return d; |
|---|
| 147 | } |
|---|
| 148 | }, |
|---|
| 149 | { |
|---|
| 150 | name:"testing the sizes, styled by js (width)", |
|---|
| 151 | timeout:9000, |
|---|
| 152 | runTest: function(t){ |
|---|
| 153 | var d = new doh.Deferred(); |
|---|
| 154 | |
|---|
| 155 | var newn = dojo.create("img", null, "container"); |
|---|
| 156 | dojo.style(newn, "width", "100px"); |
|---|
| 157 | |
|---|
| 158 | dojo.connect(newn, "onload", function(e){ |
|---|
| 159 | try{ |
|---|
| 160 | t.is(100, newn.height); |
|---|
| 161 | t.is(100, newn.width); |
|---|
| 162 | d.callback(true); |
|---|
| 163 | }catch(e){ |
|---|
| 164 | d.errback(e); |
|---|
| 165 | } |
|---|
| 166 | }); |
|---|
| 167 | newn.src = "images/square.jpg"; |
|---|
| 168 | |
|---|
| 169 | return d; |
|---|
| 170 | } |
|---|
| 171 | }, |
|---|
| 172 | { |
|---|
| 173 | name:"testing the sizes, styled by js (both)", |
|---|
| 174 | timeout:9000, |
|---|
| 175 | runTest: function(t){ |
|---|
| 176 | var d = new doh.Deferred(); |
|---|
| 177 | |
|---|
| 178 | var newn = dojo.create("img", null, "container"); |
|---|
| 179 | dojo.style(newn, { "height":"100px", "width":"100px" }); |
|---|
| 180 | |
|---|
| 181 | dojo.connect(newn, "onload", function(e){ |
|---|
| 182 | try{ |
|---|
| 183 | t.is(100, newn.height); |
|---|
| 184 | t.is(100, newn.width); |
|---|
| 185 | d.callback(true); |
|---|
| 186 | }catch(e){ |
|---|
| 187 | d.errback(e); |
|---|
| 188 | } |
|---|
| 189 | }); |
|---|
| 190 | newn.src = "images/square.jpg"; |
|---|
| 191 | |
|---|
| 192 | |
|---|
| 193 | return d; |
|---|
| 194 | } |
|---|
| 195 | }, |
|---|
| 196 | // { |
|---|
| 197 | // name:"testing the sizes, styled by css (no .src)", |
|---|
| 198 | // timeout:9000, |
|---|
| 199 | // runTest: function(t){ |
|---|
| 200 | // var d = new doh.Deferred(); |
|---|
| 201 | // |
|---|
| 202 | // var newn = dojo.byId("randomimage"); |
|---|
| 203 | // dojo.connect(newn, "onload", function(e){ |
|---|
| 204 | // try{ |
|---|
| 205 | // t.is(100, newn.height); |
|---|
| 206 | // t.is(100, newn.width); |
|---|
| 207 | // d.callback(true); |
|---|
| 208 | // }catch(e){ |
|---|
| 209 | // d.errback(e); |
|---|
| 210 | // } |
|---|
| 211 | // }); |
|---|
| 212 | // |
|---|
| 213 | // // janky here?: |
|---|
| 214 | // setTimeout(function(){ |
|---|
| 215 | // if(dojo.isOpera){ |
|---|
| 216 | // d.callback("expecting opera not to fire onload?"); |
|---|
| 217 | // } |
|---|
| 218 | // }, 8500) |
|---|
| 219 | // |
|---|
| 220 | // return d; |
|---|
| 221 | // } |
|---|
| 222 | // }, |
|---|
| 223 | // { |
|---|
| 224 | // name:"testing the sizes, styled by css (set .src)", |
|---|
| 225 | // timeout:9000, |
|---|
| 226 | // runTest: function(t){ |
|---|
| 227 | // var d = new doh.Deferred(); |
|---|
| 228 | // |
|---|
| 229 | // var newn = dojo.byId("randomimage"); |
|---|
| 230 | // dojo.connect(newn, "onload", function(e){ |
|---|
| 231 | // try{ |
|---|
| 232 | // t.is(100, newn.height); |
|---|
| 233 | // t.is(100, newn.width); |
|---|
| 234 | // d.callback(true); |
|---|
| 235 | // }catch(e){ |
|---|
| 236 | // d.errback(e); |
|---|
| 237 | // } |
|---|
| 238 | // }); |
|---|
| 239 | // newn.src = "images/square.jpg"; |
|---|
| 240 | // |
|---|
| 241 | // return d; |
|---|
| 242 | // } |
|---|
| 243 | // }, |
|---|
| 244 | { |
|---|
| 245 | name:"testing the sizes, styled by attr ", |
|---|
| 246 | timeout:9000, |
|---|
| 247 | runTest: function(t){ |
|---|
| 248 | var d = new doh.Deferred(); |
|---|
| 249 | |
|---|
| 250 | var newn = dojo.byId("randomimage"); |
|---|
| 251 | dojo.connect(newn, "onload", function(e){ |
|---|
| 252 | try{ |
|---|
| 253 | t.is(100, newn.height); |
|---|
| 254 | t.is(100, newn.width); |
|---|
| 255 | d.callback(true); |
|---|
| 256 | }catch(e){ |
|---|
| 257 | d.errback(e); |
|---|
| 258 | } |
|---|
| 259 | }); |
|---|
| 260 | newn.height = 100; |
|---|
| 261 | newn.src = "images/square.jpg"; |
|---|
| 262 | |
|---|
| 263 | return d; |
|---|
| 264 | } |
|---|
| 265 | }, |
|---|
| 266 | { |
|---|
| 267 | |
|---|
| 268 | name:"load event does not bubble", |
|---|
| 269 | timeout:4000, |
|---|
| 270 | runTest: function(t){ |
|---|
| 271 | |
|---|
| 272 | var d = new doh.Deferred(); |
|---|
| 273 | |
|---|
| 274 | var bubbles; // it doesn't bubble, btw. |
|---|
| 275 | var c = dojo.byId("container2") |
|---|
| 276 | var x = dojo.connect(c, "load", function(){ |
|---|
| 277 | d.errback("Should not fire"); |
|---|
| 278 | dojo.disconnect(x); |
|---|
| 279 | }); |
|---|
| 280 | |
|---|
| 281 | dojo.create("img", { src:"images/square.jpg" }, "container2"); |
|---|
| 282 | setTimeout(function(){ |
|---|
| 283 | dojo.disconnect(x); |
|---|
| 284 | d.callback(true); |
|---|
| 285 | }, 3000); |
|---|
| 286 | |
|---|
| 287 | return d; |
|---|
| 288 | } |
|---|
| 289 | |
|---|
| 290 | } |
|---|
| 291 | ] |
|---|
| 292 | ); |
|---|
| 293 | |
|---|
| 294 | doh.run(); |
|---|
| 295 | |
|---|
| 296 | // |
|---|
| 297 | // var setimg = dojo.create("img", { src:"../rockstar.jpg" }); |
|---|
| 298 | // setimg.width = 175; |
|---|
| 299 | // dojo.connect(setimg, "onload", function(e){ |
|---|
| 300 | // console.log("attr'd onload", img.height, dojo.style(img, "height"), img.offsetHeight, img.naturalHeight); |
|---|
| 301 | // }); |
|---|
| 302 | // |
|---|
| 303 | |
|---|
| 304 | }); |
|---|
| 305 | </script> |
|---|
| 306 | |
|---|
| 307 | </head> |
|---|
| 308 | <body class="tundra"> |
|---|
| 309 | <h2>These tests are all expected to take a long time (image loading)</h2> |
|---|
| 310 | <p>Some of them might fail</p> |
|---|
| 311 | <div id="container"> |
|---|
| 312 | <div id="container2"></div> |
|---|
| 313 | </div> |
|---|
| 314 | <img id="randomimage" src="images/square.jpg"> |
|---|
| 315 | <img id="fixedimage"> |
|---|
| 316 | </body> |
|---|
| 317 | </html> |
|---|
