src/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
  31       function scroll(scaleFactor) {
  32           expectedScrollDistance = scrollDistance/scaleFactor;
  33
  34           scrollBox.scrollTop = 0;
  35
  36           eventSender.gestureScrollBegin(10, 100);
  37           for(var i = 0; i < scrollDistance; ++i) {
  38               eventSender.gestureScrollUpdate(0, -1);
  39           }
  40           eventSender.gestureScrollEnd(0, 0);
  41
  42           shouldBeCloseTo('scrollBox.scrollTop', expectedScrollDistance, floatPrecision);
  43
  44           scrollBox.scrollTop = 20;
  45
  46           eventSender.gestureScrollBegin(10, 300);
  47           for(var i = 0; i < scrollDistance; ++i) {
  48               eventSender.gestureScrollUpdate(0, 1);
  49           }
  50           eventSender.gestureScrollEnd(0, 0);
  51
  52           expectedScrollDistance = 20 - scrollDistance/scaleFactor;
  53
  54           shouldBeCloseTo('scrollBox.scrollTop', expectedScrollDistance, floatPrecision);
  55       }
  56
  57       function scaleWithEventSender(scaleFactor) {
  58           var scaleOffset = 0;
  59           if (window.eventSender) {
  60              window.eventSender.setPageScaleFactor(scaleFactor, scaleOffset, scaleOffset);
  61           }
  62       }
  63
  64       function test() {
  65           if (window.eventSender) {
  66               description('This tests that a div scrolled by gesture touch while the page is scaled still scrolls at' +
  67                           ' the rate of the touch');
  68
  69               scrollBox = document.getElementById("scrollbox");
  70
  71               testRunner.waitUntilDone();
  72               debug('Scrolling unscaled div');
  73               scaleWithEventSender(1.0);
  74               scroll(1.0);
  75               debug('Scrolling 1.5 scaled div');
  76               scaleWithEventSender(1.5);
  77               scroll(1.5);
  78               debug('Scrolling 1.63 scaled div');
  79               scaleWithEventSender(1.63);
  80               scroll(1.63);
  81               debug('Scrolling 2.0 scaled div');
  82               scaleWithEventSender(2.0);
  83               scroll(2.0);
  84
  85               testRunner.notifyDone();
  86
  87           } else {
  88             debug('eventSender not detected. Not running test.');
  89           }
  90
  91       }
  92     </script>
  93     <script src="../../resources/js-test.js"></script>
  94 </head>
  95 <body onload="test();">
  96     <div id="scrollbox" style="left:0; top:0; width:500px; height:500px; position:absolute; overflow-y: scroll; overflow-x: scroll;">
  97       <div id="bluebox"></div>
  98       <div id="redbox"></div>
  99       <div id="bluebox"></div>
 100       <div id="redbox"></div>
 101       <div id="bluebox"></div>
 102       <div id="redbox"></div>
 103       <div id="bluebox"></div>
 104       <div id="redbox"></div>
 105       <div id="bluebox"></div>
 106       <div id="redbox"></div>
 107       <div id="bluebox"></div>
 108       <div id="redbox"></div>
 109     </div>
 110
 111     <div id="console"></div>
 112 </body>
 113 </html>