resize-events.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  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. Do not resize the page. It invalidates the test.
  19. <p style="text-indent: 10px" id=result1>
  20. Resize events (should be 0 or 1): <span id=count1>0</span>
  21. </div>
  22. <div id=expandingblock>
  23. </div>
  24. <script>
  25. var blockcount = 0;
  26. function addBlock() {
  27. var el = document.createElement('div');
  28. el.setAttribute('class','block');
  29. document.getElementById('expandingblock').appendChild(el);
  30. if (++blockcount < 30)
  31. setTimeout(addBlock, 20);
  32. else
  33. finish();
  34. }
  35. function finish() {
  36. var result;
  37. // 0 or 1 resize events are acceptable.
  38. if (resizecount < 2)
  39. result = '<p style="color: green">PASS';
  40. else
  41. result = '<p style="color: red">FAIL';
  42. var resultElement = document.getElementById('result1')
  43. resultElement.innerHTML += result;
  44. }
  45. onload = addBlock;
  46. </script>
  47. </body>