third_party/WebKit/LayoutTests/fast/events/scale-and-scroll-div.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5         ::-webkit-scrollbar {
   6             width: 0px;
   7             height: 0px;
   8         }
   9         #bluebox {
  10           width: 100px;
  11           height: 100px;
  12           background: blue;
  13           padding: 0px;
  14           margin: 0px;
  15         }
  16         #redbox {
  17           width: 100px;
  18           height: 100px;
  19           background: red;
  20           padding: 0px;
  21           margin: 0px;
  22         }
  23     </style>
  24     <script>
  25
  26       var floatPrecision = 0.1;
  27       var scrollDistance = 10;
  28       var expectedScrollDistance;
  29       var scrollBox;
  30       var integerScrollOffset = false;
  31
  32       function scroll(scaleFactor) {
  33           if (integerScrollOffset)
  34               expectedScrollDistance = Math.floor(scrollDistance/scaleFactor);
  35           else
  36               expectedScrollDistance = scrollDistance/scaleFactor;
  37
  38           scrollBox.scrollTop = 0;
  39
  40           eventSender.gestureScrollBegin(10, 100);
  41           for(var i = 0; i < scrollDistance; ++i) {
  42               eventSender.gestureScrollUpdate(0, -1);
  43           }
  44           eventSender.gestureScrollEnd(0, 0);
  45
  46           shouldBeCloseTo('scrollBox.scrollTop', expectedScrollDistance, floatPrecision);
  47
  48           scrollBox.scrollTop = 20;
  49
  50           eventSender.gestureScrollBegin(10, 300);
  51           for(var i = 0; i < scrollDistance; ++i) {
  52               eventSender.gestureScrollUpdate(0, 1);
  53           }
  54           eventSender.gestureScrollEnd(0, 0);
  55
  56           if (integerScrollOffset)
  57               expectedScrollDistance = Math.floor(20 - scrollDistance/scaleFactor);
  58           else
  59               expectedScrollDistance = 20 - scrollDistance/scaleFactor;
  60
  61           shouldBeCloseTo('scrollBox.scrollTop', expectedScrollDistance, floatPrecision);
  62       }
  63
  64       function scaleWithEventSender(scaleFactor) {
  65           if (window.internals) {
  66              window.internals.setPageScaleFactor(scaleFactor);
  67           }
  68       }
  69
  70       function test() {
  71               scrollBox = document.getElementById("scrollbox");
  72
  73               debug('Scrolling unscaled div');
  74               scaleWithEventSender(1.0);
  75               scroll(1.0);
  76               debug('Scrolling 1.5 scaled div');
  77               scaleWithEventSender(1.5);
  78               scroll(1.5);
  79               debug('Scrolling 1.63 scaled div');
  80               scaleWithEventSender(1.63);
  81               scroll(1.63);
  82               debug('Scrolling 2.0 scaled div');
  83               scaleWithEventSender(2.0);
  84               scroll(2.0);
  85       }
  86
  87      function run_test() {
  88          if (window.eventSender && window.internals) {
  89             description('This tests that a div scrolled by gesture touch while the page is scaled still scrolls at the rate of the touch');
  90
  91             window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  92             integerScrollOffset = false;
  93             test();
  94
  95             window.internals.settings.setPreferCompositingToLCDTextEnabled(false);
  96             integerScrollOffset = true;
  97             test();
  98
  99           } else {
 100             debug('eventSender not detected. Not running test.');
 101           }
 102       }
 103     </script>
 104     <script src="../../resources/js-test.js"></script>
 105 </head>
 106 <body onload="run_test();">
 107     <div id="scrollbox" style="left:0; top:0; width:500px; height:500px; position:absolute; overflow-y: scroll; overflow-x: scroll;">
 108       <div id="bluebox"></div>
 109       <div id="redbox"></div>
 110       <div id="bluebox"></div>
 111       <div id="redbox"></div>
 112       <div id="bluebox"></div>
 113       <div id="redbox"></div>
 114       <div id="bluebox"></div>
 115       <div id="redbox"></div>
 116       <div id="bluebox"></div>
 117       <div id="redbox"></div>
 118       <div id="bluebox"></div>
 119       <div id="redbox"></div>
 120     </div>
 121
 122     <div id="console"></div>
 123 </body>
 124 </html>