third_party/WebKit/LayoutTests/fast/scrolling/overflow-scrollability.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <script src="../../resources/js-test.js"></script>
   5     <script>
   6         var div;
   7         var pixelsPerWheelTick = 40;
   8
   9         function tryScroll() {
  10             eventSender.mouseMoveTo(div.offsetLeft + 5, div.offsetTop + 5);
  11             eventSender.mouseScrollBy(0,-1);
  12             eventSender.mouseScrollBy(-1,0);
  13         }
  14
  15         function checkOffsets() {
  16             div = document.getElementById("overflow-1");
  17             debug("===overflow:scroll with overflow");
  18             shouldBe('div.scrollTop', 'window.pixelsPerWheelTick');
  19             shouldBe('div.scrollLeft', 'window.pixelsPerWheelTick');
  20
  21             div = document.getElementById("overflow-2");
  22             debug("===overflow:auto with overflow");
  23             shouldBe('div.scrollTop', 'window.pixelsPerWheelTick');
  24             shouldBe('div.scrollLeft', 'window.pixelsPerWheelTick');
  25
  26             div = document.getElementById("overflow-3");
  27             debug("===overflow:hidden with overflow");
  28             shouldBe('div.scrollTop', '0');
  29             shouldBe('div.scrollLeft', '0');
  30
  31             div = document.getElementById("overflow-4");
  32             debug("===overflow:overlay with overflow");
  33             shouldBe('div.scrollTop', 'window.pixelsPerWheelTick');
  34             shouldBe('div.scrollLeft', 'window.pixelsPerWheelTick');
  35
  36             div = document.getElementById("no-overflow-1");
  37             debug("===overflow:scroll without overflow");
  38             shouldBe('div.scrollTop', '0');
  39             shouldBe('div.scrollLeft', '0');
  40
  41             div = document.getElementById("no-overflow-2");
  42             debug("===overflow:auto without overflow");
  43             shouldBe('div.scrollTop', '0');
  44             shouldBe('div.scrollLeft', '0');
  45
  46             div = document.getElementById("no-overflow-3");
  47             debug("===overflow:hidden without overflow");
  48             shouldBe('div.scrollTop', '0');
  49             shouldBe('div.scrollLeft', '0');
  50
  51             div = document.getElementById("no-overflow-4");
  52             debug("===overflow:overlay without overflow");
  53             shouldBe('div.scrollTop', '0');
  54             shouldBe('div.scrollLeft', '0');
  55
  56             testRunner.notifyDone();
  57         }
  58
  59         function test() {
  60             if (window.eventSender && window.testRunner) {
  61                 testRunner.waitUntilDone();
  62
  63                 description('This tests that scrollable areas with the appropriate overflow mode set'
  64                         + ' are in fact scrollable by the user.');
  65
  66                 div = document.getElementById("overflow-1");
  67                 tryScroll();
  68                 div = document.getElementById("overflow-2");
  69                 tryScroll();
  70                 div = document.getElementById("overflow-3");
  71                 tryScroll();
  72                 div = document.getElementById("overflow-4");
  73                 tryScroll();
  74                 div = document.getElementById("no-overflow-1");
  75                 tryScroll();
  76                 div = document.getElementById("no-overflow-2");
  77                 tryScroll();
  78                 div = document.getElementById("no-overflow-3");
  79                 tryScroll();
  80                 div = document.getElementById("no-overflow-4");
  81                 tryScroll();
  82
  83                 setTimeout('checkOffsets();', 100);
  84             } else {
  85                 debug("FAIL: This test requires window.eventSender.");
  86             }
  87         }
  88
  89     </script>
  90 </head>
  91 <body style="margin: 0" onload="test()">
  92     scroll with overflow
  93     <div id="overflow-1" style="width: 100px; height: 100px; overflow-x: scroll; overflow-y: scroll">
  94       <div style="width: 200px; height: 200px;">Content</div>
  95     </div>
  96     auto with overflow
  97     <div id="overflow-2" style="width: 100px; height: 100px; overflow-x: auto; overflow-y: auto">
  98       <div style="width: 200px; height: 200px;">Content</div>
  99     </div>
 100     hidden with overflow
 101     <div id="overflow-3" style="width: 100px; height: 100px; overflow-x: hidden; overflow-y: hidden">
 102       <div style="width: 200px; height: 200px;">Content</div>
 103     </div>
 104     overlay with overflow
 105     <div id="overflow-4" style="width: 100px; height: 100px; overflow-x: overlay; overflow-y: overlay">
 106       <div style="width: 200px; height: 200px;">Content</div>
 107     </div>
 108
 109     scroll without overflow
 110     <div id="no-overflow-1" style="width: 100px; height: 100px; overflow-x: scroll; overflow-y: scroll">
 111       <div style="width: 20px; height: 20px;">Content</div>
 112     </div>
 113     auto without overflow
 114     <div id="no-overflow-2" style="width: 100px; height: 100px; overflow-x: auto; overflow-y: auto">
 115       <div style="width: 20px; height: 20px;">Content</div>
 116     </div>
 117     hidden without overflow
 118     <div id="no-overflow-3" style="width: 100px; height: 100px; overflow-x: hidden; overflow-y: hidden">
 119       <div style="width: 20px; height: 20px;">Content</div>
 120     </div>
 121     overlay without overflow
 122     <div id="no-overflow-4" style="width: 100px; height: 100px; overflow-x: overlay; overflow-y: overlay">
 123       <div style="width: 20px; height: 20px;">Content</div>
 124     </div>
 125 </body>
 126 </html>