LayoutTests/fast/events/change-overflow-on-overflow-change.html

   1 <body>
   2 <div id="result"></div>
   3 <div style="position: relative; height: 200px; overflow: auto;">
   4     <div id="target" style="height: 75%; background-color: red;"></div>
   5 </div>
   6 <script>
   7     if (window.testRunner) {
   8         testRunner.dumpAsText();
   9         testRunner.waitUntilDone();
  10     }
  11
  12     window.onload = function () {
  13         // Force a layout with offsetHeight, and then start toggling overflow.
  14         target.offsetHeight;
  15         toggleOverflow();
  16     }
  17
  18     var callCount = 0;
  19     var recursionDepth = 0;
  20
  21     var target = document.getElementById("target");
  22     var result = document.getElementById("result");
  23
  24     function pass()
  25     {
  26         result.innerHTML = "PASS";
  27         if (window.testRunner)
  28             testRunner.notifyDone();
  29     }
  30
  31     function fail()
  32     {
  33         result.innerHTML = "FAIL";
  34         if (window.testRunner)
  35             testRunner.notifyDone();
  36     }
  37
  38     function toggleOverflow()
  39     {
  40         ++recursionDepth;
  41         ++callCount;
  42
  43         // The code change associated with this test will cause this function to start
  44         // firing asynchronously.
  45         if (recursionDepth > 2) {
  46             fail();
  47             return;
  48         }
  49
  50         // If we have made it this far without a recursionDepth of 2 or greater, then we
  51         // can say that the test passed.
  52         if (callCount > 8) {
  53             pass();
  54             return;
  55         }
  56
  57         if (target.style.height === "75%")
  58             target.style.height = "200%";
  59         else
  60             target.style.height = "75%";
  61         target.offsetHeight;
  62
  63         --recursionDepth;
  64     }
  65     target.parentNode.addEventListener("overflowchanged", toggleOverflow);
  66 </script>
  67 </body>