ManualTests/resize-events.html

   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>