third_party/WebKit/LayoutTests/fast/events/scroll-event-raf-timing.html

   1 <!DOCTYPE html>
   2 <style>
   3     #scrollable { overflow: scroll; height: 100px; width: 100px; }
   4     #scrollable div { height: 2000px; }
   5 </style>
   6
   7 <p>Tests that we only fire one scroll event per frame (and by association that it happens at raf time).</p>
   8
   9 <div id="scrollable">
  10     <div></div>
  11 </div>
  12
  13 <script>
  14 var scrollable = document.getElementById('scrollable');
  15 var output = document.getElementById('output');
  16 var failures = 0;
  17
  18 if (window.testRunner) {
  19     testRunner.dumpAsText();
  20     testRunner.waitUntilDone();
  21 }
  22
  23 onload = function() {
  24     var scrollsSinceLastFrame = 0;
  25     var remainingTicks = 20;
  26
  27     scrollable.onscroll = function() {
  28         ++scrollsSinceLastFrame;
  29     };
  30
  31     // FIXME: we need a better way of waiting for layout/repainting to happen
  32     var timerId = setInterval(function() {
  33         scrollable.scrollTop += 1;
  34         if (!--remainingTicks)
  35             clearInterval(timerId);
  36     }, 1);
  37
  38     function raf() {
  39         if (scrollsSinceLastFrame > 1) {
  40             document.body.appendChild(document.createTextNode('FAIL'));
  41             ++failures;
  42         }
  43         if (remainingTicks) {
  44             requestAnimationFrame(raf);
  45         } else {
  46             if (!failures)
  47                 document.body.appendChild(document.createTextNode('PASS'));
  48             if (window.testRunner)
  49                 testRunner.notifyDone();
  50         }
  51         scrollsSinceLastFrame = 0;
  52     }
  53
  54     requestAnimationFrame(raf);
  55 }
  56 </script>