Tests/DOMReady.php

   1  <?php
   2 // http://www.webcheatsheet.com/PHP/get_current_page_url.php
   3 function getCurrentURL(){
   4         $pageURL = 'http' . (!empty($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == "on" ? 's' : '');
   5         $pageURL .= "://" . $_SERVER["SERVER_NAME"];
   6         if ($_SERVER["SERVER_PORT"] != "80") $pageURL .= ":".$_SERVER["SERVER_PORT"];
   7
   8         return $pageURL.$_SERVER["REQUEST_URI"];
   9 }
  10
  11 // http://forum.jquery.com/topic/implementation-of-domcontentloaded-failing-when-no-assets
  12 // by andrea.giammarchi on 13-Jul-2008 10:21 PM
  13 function flushPause($pause = 0){
  14         echo ob_get_clean();
  15         @ob_flush();
  16         flush();
  17         usleep($pause * 1000000);
  18 }
  19
  20 ob_start();
  21 ob_implicit_flush(false);
  22 flushPause();
  23 ?>
  24 <!DOCTYPE html>
  25 <html>
  26 <head>
  27 <script>
  28
  29 var testElement = document.createElement('div'),
  30         hasOperationAborted = (
  31                 testElement.innerHTML = '<!--[if lt IE 8]>1<![endif]-->', !!+testElement.innerText
  32         );
  33
  34 var     MESSAGES = document.createElement('div')
  35 ,       thingsThatHappened = {}
  36
  37 function somethingHappened(id, result){
  38         if (window.ONLOAD) document.body.insertBefore(MESSAGES, document.body.firstChild)
  39
  40         if (typeof result == 'function') result = result()
  41         if (result == null) result = ''
  42         if (result === true) result = 'PASS'
  43         if (result === false) result = 'FAIL'
  44
  45         if (thingsThatHappened[id] === result) return
  46         thingsThatHappened[id] = result
  47
  48         log((+new Date - START_TIME) +' '+ id + ' ' + result)
  49
  50         MESSAGES.innerHTML
  51                 +=      '<p id="' + id + '" class="' + result + '">'
  52                 +       '<b>' + (+new Date - START_TIME) + 'ms </b>'
  53                 +       id
  54                 +       ' '
  55                 +       result
  56 }
  57
  58 var     START_TIME = +new Date
  59 function isNotLoaded(){ return !!(window.PARSED && !window.ONLOAD) }
  60
  61 if (false <?php if (isset($_GET['iframe'])) echo '|| true'; ?>){
  62         try {
  63                 document.domain = 'localhost'
  64                 somethingHappened("document.domain = 'localhost'", true)
  65         }
  66         catch(e) {
  67                 somethingHappened("document.domain = 'localhost'; " + e, false)
  68         }
  69 }
  70
  71 var Browser = {}
  72
  73 function log(message){
  74         try {
  75                 console.log('' + message)
  76         }
  77         catch (e){}
  78 }
  79
  80 var domreadyCallbacks = []
  81 function DomReady(fn){
  82         domreadyCallbacks.push(fn)
  83 }
  84  <?php if (!isset($_GET['plain'])):
  85         $core = dirname(__FILE__) . '/../../../';
  86         require $core . 'Packager/packager.php';
  87
  88         $pkg = new Packager(array($core));
  89         echo $pkg->build(array('DOMReady'), array(), array(), array());
  90 else: ?>
  91 document.write('<scr'+'ipt src="./DOMReady.js?' + (new Date) + '"><'+'/script>');
  92 document.write('<scr'+'ipt src="../../../Source/Utilities/DOMReady.js?' + (new Date) + '"><'+'/script>');
  93  <?php endif; ?>
  94 </script>
  95
  96 <script>
  97 var loadScript = function(type){
  98         var count = 0;
  99         new Element('script', {
 100                 src: '../../Configuration.js?' + type + (new Date),
 101                 events: {
 102                         load: function(){
 103                                 log('>> ' + type + ': JavaSript Loaded, load called: ' + (++count));
 104                         }
 105                 }
 106         }).inject(document.body);
 107         log('>> ' + type + ': Loading JavaScript');
 108 };
 109
 110 window.addEvent('load', function(){
 111         loadScript('load');
 112
 113         window.LOADED = true
 114         somethingHappened('<i>MooTools load</i>', function(){
 115                 return !!window.READY
 116         })
 117 });
 118 window.addEvent('domready', function(){
 119         loadScript('domready');
 120
 121         window.READY = +new Date
 122         somethingHappened('<i>MooTools domready</i>', isNotLoaded)
 123 });
 124 DomReady(function(){
 125         window.READY = +new Date
 126         somethingHappened('<i>MooTools domready</i>', isNotLoaded)
 127 });
 128 </script>
 129         <meta http-equiv=Content-type content="text/html; charset=utf-8">
 130         <title>DomReady Test</title>
 131 <style>
 132
 133 iframe {
 134         position: absolute;
 135         top: 0px;
 136         right: 0px;
 137         height: 2000px;
 138         width: 500px;
 139 }
 140
 141 body{
 142         padding-right:500px;
 143 }
 144
 145 html.framed body{
 146         padding-right:0;
 147 }
 148
 149 html.framed{
 150         background:#eee;
 151 }
 152
 153 html, body, td, th{
 154         font: 11px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
 155 }
 156 p{
 157         margin:0 !important;
 158         padding: 1ex 1em;
 159 }
 160 i{
 161         font-size: 125%;
 162 }
 163 .PASS{background:#0f0;}
 164 .FAIL{background:#f00;}
 165
 166 .Yes{background:#cfc;}
 167 .No{background:#fcc;}
 168
 169 small{
 170         font-size: 9px;
 171 }
 172
 173 </style>
 174 <script>
 175 if (document.addEventListener) document.addEventListener('DOMContentLoaded', function(){ window.READY = +new Date; somethingHappened('DOMContentLoaded (addEventListener)', isNotLoaded) }, false)
 176 if (document.attachEvent) document.attachEvent('onDOMContentLoaded', function(){ window.READY = +new Date; somethingHappened('DOMContentLoaded (attachEvent)', isNotLoaded) }, false)
 177
 178 if (document.addEventListener) document.addEventListener('readyStateChange', function(){ somethingHappened('readyStateChange (addEventListener)', document.readyState) }, false)
 179 if (document.attachEvent) document.attachEvent('onReadyStateChange', function(){ somethingHappened('onReadyStateChange (attachEvent)', document.readyState) }, false)
 180 if (document.attachEvent) document.attachEvent('onreadystatechange', function(){ somethingHappened('onreadystatechange (attachEvent)', document.readyState) }, false)
 181
 182
 183 var TEST_ELEMENT = document.createElement('div')
 184 function pollDoScroll(){
 185         if (!TEST_ELEMENT.doScroll) return
 186         var PASS
 187
 188         try {
 189                 TEST_ELEMENT.doScroll('left')
 190                 PASS = true
 191         }
 192         catch (e){
 193                 PASS = false
 194         }
 195
 196         window.CANSCROLL = PASS
 197         somethingHappened('TEST_ELEMENT.doScroll()', PASS)
 198
 199         if (!PASS) setTimeout(pollDoScroll, 10)
 200 }
 201
 202 function pollDoScroll_body(){
 203         if (!document.body.doScroll) return
 204         var PASS
 205
 206         try {
 207                 document.body.doScroll('left')
 208                 PASS = true
 209         }
 210         catch (e){
 211                 PASS = false
 212         }
 213
 214         somethingHappened('document.body.doScroll()', PASS)
 215
 216         if (!PASS) setTimeout(pollDoScroll_body, 10)
 217 }
 218
 219 var lastReadyState
 220 function pollReadyState(){
 221         var readyState = document.readyState
 222         if (!readyState) return
 223         if (readyState == lastReadyState) return
 224         somethingHappened('poll document.readyState', readyState)
 225         if (readyState != 'complete' && readyState != 'loaded') setTimeout(pollReadyState, 10)
 226         lastReadyState = readyState
 227 }
 228
 229 function pollBodyExists(){
 230         var     PASS
 231
 232         try {
 233                 document.body.lastChild
 234                 PASS = true
 235         }
 236         catch (e){
 237                 PASS = false
 238         }
 239         somethingHappened('body Exists?', PASS? 'YES':'NO')
 240         if (!window.ONLOAD) setTimeout(pollBodyExists, 10)
 241 }
 242
 243 function pollAugmentBody(){
 244         var     PASS
 245         ,       body = document.body
 246         ,       root = body.parentNode
 247         ,       sibling = body.nextSibling
 248
 249         try {
 250                 body.appendChild(document.createTextNode( new Date - START_TIME + 'ms:Body ') )
 251                 PASS = true
 252         }
 253         catch (e){
 254                 PASS = false
 255         }
 256         somethingHappened('can Augment Body?', PASS? 'YES':'NO')
 257         if (!window.ONLOAD) setTimeout(pollAugmentBody, 10)
 258 }
 259
 260 // //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  // //
 261
 262 var readyTests = {
 263         "document.readyState ==": function(){return document.readyState}
 264
 265         ,'document.body exists?': function(){return document.body ?'Yes':'No'}
 266
 267         ,"All page content loaded and parsed?": function(){return window.PARSED ?'Yes':'No'}
 268         ,"cached IMG onload fired?": function(){return window.IMG_ONLOAD ?'Yes':'No'}
 269         ,"uncached IMG onload fired?": function(){return window.IMG_ONLOAD_UNCACHED ?'Yes':'No'}
 270         ,"document ready?": function(){return !!window.READY ?'Yes':'No'}
 271         ,"onload fired?": function(){return !!window.ONLOAD ?'Yes':'No'}
 272
 273         ,"el.doScroll()": function(){
 274                 try {
 275                         TEST_ELEMENT.doScroll()
 276                         return 'Yes'
 277                 }
 278                 catch (e){
 279                         return 'No'
 280                 }
 281         }
 282
 283         ,"body.doScroll('left')": function(){
 284                 try {
 285                         document.body.doScroll('left')
 286                         return 'Yes'
 287                 }
 288                 catch (e){
 289                         return 'No'
 290                 }
 291         }
 292
 293         ,'isFramed?': function(){
 294                 return isFramed() ?'Yes':'No'
 295         }
 296
 297         ,'Is top frame?': function(){
 298                 return window.window === window.top ?'Yes':'No'
 299         }
 300 }
 301
 302 if (!hasOperationAborted) readyTests['Can augment body?'] = function(){
 303         try {
 304                 document.body.appendChild(
 305                         document.createTextNode('Augmented the body! ' + (+new Date - START_TIME))
 306                 )
 307                 document.body.removeChild(document.body.lastChild)
 308                 return 'Yes'
 309         }
 310         catch (e){
 311                 return 'No'
 312         }
 313 }
 314
 315 var readyTestResults = []
 316
 317 function poll(){
 318         var     results = {}
 319         ,       lastResults = readyTestResults[readyTestResults.length - 1] || {}
 320         ,       hasDifferentResults = 0
 321
 322         results.ms = new Date - START_TIME
 323
 324         for (var id in readyTests){
 325                 results[id] = readyTests[id]()
 326                 if (results[id] == lastResults[id]) continue
 327
 328                 ++ hasDifferentResults
 329                 somethingHappened(id, results[id])
 330         }
 331
 332         var shouldBeReady
 333
 334         if (window.CANSCROLL && !isFramed()) shouldBeReady = true
 335         if ({loaded:1,complete:1}[document.readyState]) shouldBeReady = true
 336         if (window.LOADED) shouldBeReady = true
 337         if (window.IMG_ONLOAD_UNCACHED) shouldBeReady = true
 338
 339         if (shouldBeReady)
 340         somethingHappened('Should be Ready!', function(){
 341                 return !!window.READY ?true:'Not yet...'
 342         })
 343
 344         if (hasDifferentResults) readyTestResults.push(results)
 345         if (!window.ONLOAD) setTimeout(poll, 10)
 346         else report()
 347 }
 348
 349 function isFramed(){
 350         try {
 351                 return window.frameElement != null
 352         } catch(e) {
 353                 return true
 354         }
 355 }
 356
 357
 358 function report(){
 359         var     EL = document.createElement('div')
 360         ,       HTML = '<table class=results>'
 361
 362         for (var i = 0; i < readyTestResults.length; ++i){
 363                 if (i == 0){
 364                         HTML += '<thead><tr>'
 365                         for (var key in readyTestResults[i]){
 366                                 HTML += '<th>'
 367                                 HTML += key
 368                                 HTML += '</th>'
 369                         }
 370                         HTML += '</tr></thead>'
 371                         continue
 372                 }
 373                 HTML += '<tr>'
 374                 for (var key in readyTestResults[i]){
 375                         HTML += '<td>'
 376                         HTML += readyTestResults[i][key]
 377                         HTML += '</td>'
 378                 }
 379                 HTML += '</tr>'
 380         }
 381
 382         EL.innerHTML = HTML
 383         document.body.insertBefore(EL, document.body.firstChild)
 384 }
 385
 386 poll()
 387
 388 </script>
 389 </head>
 390 <body
 391         onload="window.ONLOAD = +new Date; somethingHappened('body[onload] ' + (window.READY ? (window.ONLOAD - window.READY) + 'ms after Ready' : ''), function(){return !!window.READY})"
 392         onDOMContentLoaded="window.READY = +new Date; somethingHappened('DOMContentLoaded body[onDOMContentLoaded]', isNotLoaded)"
 393         onReadyStateChange="somethingHappened('body[onReadyStateChange]')"
 394 >
 395
 396 <div>
 397
 398 <div id=thingsthathappened></div>
 399
 400 <hr>
 401
 402 <script> somethingHappened('<i>Before serverSide flush/sleep</i> <hr>') </script>
 403  <?php flushPause(1.0); ?>
 404 <script> somethingHappened('<i>After serverSide flush/sleep</i> <hr>') </script>
 405
 406 <small>
 407 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 408 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 409 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 410 </small>
 411
 412 <small>
 413 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 414 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 415 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 416 </small>
 417
 418 <img height=16 width=16 onload="window.IMG_ONLOAD = true; somethingHappened('img[onload][src=about:blank]')" src="about:blank">
 419 <img height=16 width=16 onload="window.IMG_ONLOAD = true; somethingHappened('img[onload][src=' + this.src + ']')" src="http://projects.subtlegradient.com/domready/big_image.jpg">
 420 <script>document.write("<img height=16 width=16 onload=\"window.IMG_ONLOAD = true; window.IMG_ONLOAD_UNCACHED = true; somethingHappened('img[onload][src=' + this.src + ']')\" src=\"http://projects.subtlegradient.com/domready/big_image.jpg?_=" + +new Date + "\">")</script>
 421
 422 <!-- <script
 423         onload="window.SCRIPT_ONLOAD = true; somethingHappened('script[onload][src=about:blank]')"
 424         onreadystatechange="somethingHappened('script[src=about:blank][onreadystatechange]', this.readyState)"
 425         onerror="somethingHappened('script[src=about:blank][onerror]')"
 426         src="about:blank"></script> -->
 427 <script
 428         onload="window.SCRIPT_ONLOAD = true; somethingHappened('script[onload]')"
 429         onreadystatechange="somethingHappened('script[onreadystatechange]', this.readyState)"
 430         src="http://projects.subtlegradient.com/domready/blank.js"></script>
 431 <script
 432         onload="window.SCRIPT_ONLOAD = true; somethingHappened('script[onload][defer]')"
 433         onreadystatechange="somethingHappened('script[defer][onreadystatechange]', this.readyState)"
 434         defer src="http://projects.subtlegradient.com/domready/blank.js?123"></script>
 435
 436 </div>
 437
 438 <script>if (window != top) {somethingHappened('This is a frame!'); document.getElementsByTagName('html')[0].className += ' framed'} </script>
 439  <?php
 440  if (!isset($_GET['iframe'])){
 441          $url = getCurrentURL();
 442          $url .= (strpos($url, '?') !== false ? '&' : '?') . 'iframe';
 443          echo '<iframe src="' . $url . '"></iframe>';
 444  }
 445 ?>
 446 <script>
 447 somethingHappened('<i>All page content loaded and parsed! (Last &lt;SCRIPT&gt; on page)</i> <hr>')
 448 window.PARSED = true
 449 </script>
 450
 451 </body>
 452 </html>
 453  <?php flushPause(); ?>