1 <html> 2 <head> 3 <style> 4 div.block { height: 100px; border: 1px solid black; margin:10px; } 5 </style> 6 <script> 7 var resizecount = 0; 8 var loaded = false; 9 window.onresize = function() { 10 resizecount++; 11 document.getElementById('count1').innerHTML = resizecount; 12 } 13 </script> 14 </head> 15 <body> 16 <div> 17 Test how many resize events are emitted during page load and dynamic content generation. 18 19 Do not resize the page. It invalidates the test. 20 <p style="text-indent: 10px" id=result1> 21 Resize events (should be 0 or 1): <span id=count1>0</span> 22 </div> 23 <div id=expandingblock> 24 </div> 25 <script> 26 var blockcount = 0; 27 function addBlock() { 28 var el = document.createElement('div'); 29 el.setAttribute('class','block'); 30 document.getElementById('expandingblock').appendChild(el); 31 if (++blockcount < 30) 32 setTimeout(addBlock, 20); 33 else 34 finish(); 35 } 36 function finish() { 37 var result; 38 // 0 or 1 resize events are acceptable. 39 if (resizecount < 2) 40 result = '<p style="color: green">PASS'; 41 else 42 result = '<p style="color: red">FAIL'; 43 var resultElement = document.getElementById('result1') 44 resultElement.innerHTML += result; 45 } 46 onload = addBlock; 47 </script> 48 </body>
