third_party/WebKit/LayoutTests/fast/scroll-behavior/overflow-scroll-loses-composited-scrolling.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     #container {
   6       width: 200px;
   7       height: 200px;
   8       overflow: scroll;
   9     }
  10
  11     #content {
  12       width: 7500px;
  13       height: 7500px;
  14       background-color: blue;
  15     }
  16   </style>
  17   <script src="../../resources/js-test.js"></script>
  18   <script type="text/javascript">
  19     jsTestIsAsync = true;
  20     description("This test checks that a smooth scroll finishes even when composited scrolling " +
  21                 "is lost during the animation.");
  22
  23     function startSmoothScroll() {
  24         var scrollToOptions = {behavior: "smooth", top: 6000};
  25         document.getElementById("container").scrollTo(scrollToOptions);
  26         window.requestAnimationFrame(preventCompositedScrolling);
  27     }
  28
  29     function preventCompositedScrolling() {
  30         document.getElementById("container").style.borderRadius = "4px";
  31         window.requestAnimationFrame(waitForSmoothScrollEnd);
  32     }
  33
  34     function waitForSmoothScrollEnd() {
  35         if (document.getElementById("container").scrollTop == 6000) {
  36             testPassed("Scroll destination reached.");
  37             finishJSTest();
  38         } else {
  39             window.requestAnimationFrame(waitForSmoothScrollEnd);
  40         }
  41     }
  42
  43     window.onload = function() {
  44         if (window.internals) {
  45             window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  46         }
  47
  48         window.requestAnimationFrame(startSmoothScroll);
  49     }
  50   </script>
  51 </head>
  52
  53 <body>
  54   <div id="container">
  55     <div id="content"></div>
  56   </div>
  57 </body>
  58 </html>